Initial commit: webtrees full diagram chart module
Interactive SVG family tree visualization using ELK (Sugiyama) for layout and D3 for rendering. Shows ancestors, descendants, and siblings in a single diagram with orthogonal bus-line connectors. Features: - Bidirectional tree traversal (ancestors + descendants + siblings) - Generation-aligned layout with post-processing Y-snap - Person cards with photos, names, dates, and hover bio cards - "More ancestors" indicator for persons with hidden parents - Pan/zoom navigation - Docker dev environment
This commit is contained in:
29
resources/views/modules/full-diagram/chart.phtml
Normal file
29
resources/views/modules/full-diagram/chart.phtml
Normal file
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use Fisharebest\Webtrees\Individual;
|
||||
use Fisharebest\Webtrees\Module\ModuleChartInterface;
|
||||
use Fisharebest\Webtrees\Tree;
|
||||
|
||||
/**
|
||||
* @var ModuleChartInterface $module
|
||||
* @var Individual $individual
|
||||
* @var Tree $tree
|
||||
* @var string $tree_data
|
||||
* @var string $javascript_url
|
||||
* @var string $stylesheet_url
|
||||
*/
|
||||
?>
|
||||
|
||||
<link rel="stylesheet" href="<?= e($stylesheet_url) ?>">
|
||||
|
||||
<div id="full-diagram-container" class="full-diagram-container wt-chart" data-tree-name="<?= e($tree->name()) ?>" style="width:100%;height:700px;">
|
||||
<div class="full-diagram-chart"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.fullDiagramData = <?= $tree_data ?>;
|
||||
window.fullDiagramBaseUrl = <?= json_encode(route($module::ROUTE_NAME, ['tree' => $tree->name(), 'xref' => '__XREF__']), JSON_THROW_ON_ERROR) ?>;
|
||||
</script>
|
||||
<script src="<?= e($javascript_url) ?>"></script>
|
||||
Reference in New Issue
Block a user