{"id":22109747,"url":"https://github.com/magicsunday/webtrees-fan-chart","last_synced_at":"2026-06-06T14:01:27.813Z","repository":{"id":16676395,"uuid":"80105003","full_name":"magicsunday/webtrees-fan-chart","owner":"magicsunday","description":"SVG ancestor fan chart module for the webtrees genealogy application — interactive D3.js visualization with zoom, export and up to 10 generations.","archived":false,"fork":false,"pushed_at":"2026-06-04T04:40:43.000Z","size":8668,"stargazers_count":67,"open_issues_count":0,"forks_count":21,"subscribers_count":9,"default_branch":"main","last_synced_at":"2026-06-04T06:20:21.740Z","etag":null,"topics":["ancestors","chart","d3","d3js","data-visualization","family-tree","fan-chart","genealogy","module","svg","visualization","webtrees","webtrees-module"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/magicsunday.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"custom":"https://paypal.me/magicsunday"}},"created_at":"2017-01-26T10:23:22.000Z","updated_at":"2026-06-04T04:40:40.000Z","dependencies_parsed_at":"2024-04-26T16:54:29.698Z","dependency_job_id":"f315d461-a2af-48bc-b37a-b1faff5cae6e","html_url":"https://github.com/magicsunday/webtrees-fan-chart","commit_stats":{"total_commits":347,"total_committers":14,"mean_commits":"24.785714285714285","dds":"0.27665706051873196","last_synced_commit":"70d152854802786fd385dbf0e973aa4e6a519fbc"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"purl":"pkg:github/magicsunday/webtrees-fan-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicsunday%2Fwebtrees-fan-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicsunday%2Fwebtrees-fan-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicsunday%2Fwebtrees-fan-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicsunday%2Fwebtrees-fan-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magicsunday","download_url":"https://codeload.github.com/magicsunday/webtrees-fan-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicsunday%2Fwebtrees-fan-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33984824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-06T02:00:07.033Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ancestors","chart","d3","d3js","data-visualization","family-tree","fan-chart","genealogy","module","svg","visualization","webtrees","webtrees-module"],"created_at":"2024-12-01T09:38:58.559Z","updated_at":"2026-06-06T14:01:27.808Z","avatar_url":"https://github.com/magicsunday.png","language":"JavaScript","funding_links":["https://paypal.me/magicsunday"],"categories":[],"sub_categories":[],"readme":"[![Latest version](https://img.shields.io/github/v/release/magicsunday/webtrees-fan-chart?sort=semver)](https://github.com/magicsunday/webtrees-fan-chart/releases/latest)\n[![License](https://img.shields.io/github/license/magicsunday/webtrees-fan-chart)](https://github.com/magicsunday/webtrees-fan-chart/blob/main/LICENSE)\n[![CI](https://github.com/magicsunday/webtrees-fan-chart/actions/workflows/ci.yml/badge.svg)](https://github.com/magicsunday/webtrees-fan-chart/actions/workflows/ci.yml)\n\n\n\u003c!-- TOC --\u003e\n* [Fan chart](#fan-chart)\n  * [Installation](#installation)\n    * [Manual installation](#manual-installation)\n    * [Using Composer](#using-composer)\n    * [Using Git](#using-git)\n  * [Update](#update)\n  * [Configuration](#configuration)\n  * [Usage](#usage)\n  * [Troubleshooting](#troubleshooting)\n  * [Development](#development)\n\u003c!-- TOC --\u003e\n\n\n# Fan chart\nThis module provides an interactive SVG ancestor fan chart for the [webtrees](https://www.webtrees.net) genealogy application.\nClick on any ancestor to re-center the chart on that person. Right-click to open a tooltip with detailed\ndates, places, and images.\n\n![225 Degree fan chart with family branch colors](assets/fan-chart-225-color.png)\n\n\n## Installation\nRequires **webtrees 2.2** and **PHP 8.3** or later.\n\n### Manual installation\n\n\u003e [!IMPORTANT]\n\u003e **Download the right `.zip` file.** Each [GitHub release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest) page lists two kinds of archive:\n\u003e\n\u003e - ✅ **`webtrees-fan-chart.zip`** — listed under **Assets** at the bottom of the release. This is the install-ready archive: it bundles the required `vendor/` dependencies (such as `webtrees-module-base`).\n\u003e - ❌ **\"Source code (zip)\" / `webtrees-fan-chart-\u003cversion\u003e.zip`** — auto-generated by GitHub from the tag. This is the raw source *without* bundled dependencies. Uploading it to `modules_v4/` will fail with `Trait/Interface \"MagicSunday\\Webtrees\\ModuleBase\\…\" not found` (or `ModuleAssetUrlInterface not found`).\n\u003e\n\u003e **Always pick the asset zip, never \"Source code (zip)\".**\n\n\u003e [!IMPORTANT]\n\u003e **If a previous version of this module is already installed:** delete the entire `modules_v4/webtrees-fan-chart` folder *before* extracting the new ZIP. Extracting on top of an existing folder leaves stale files behind that can clash with the new release — a common cause of `Interface … not found` errors right after an update.\n\n1. Open the [latest release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest) page.\n2. Under **Assets**, download `webtrees-fan-chart.zip`.\n3. Upload the `.zip` file to your web server.\n4. Unzip the package into your `modules_v4` directory.\n5. Rename the folder to `webtrees-fan-chart`.\n\nYou should now see a `modules_v4/webtrees-fan-chart` directory containing the module files.\n\n### Using Composer\nRun the following command from the root of your webtrees installation:\n\n```shell\ncomposer require magicsunday/webtrees-fan-chart --update-no-dev\n```\n\nThe module will automatically install into the `modules_v4` directory.\n\nTo remove the module:\n```shell\ncomposer remove magicsunday/webtrees-fan-chart --update-no-dev\n```\n\nIf you are using the development version of webtrees (`main` branch):\n```shell\ncomposer require magicsunday/webtrees-fan-chart:dev-main --update-no-dev\n```\n\n### Using Git\nClone the repository into your `modules_v4` directory (a *Code → Download ZIP* of\nthe source works the same way):\n\n```shell\ngit clone https://github.com/magicsunday/webtrees-fan-chart.git modules_v4/webtrees-fan-chart\n```\n\nA source checkout contains the module code **only** — it does **not** include the\nshared `webtrees-module-base` library, so on its own it fails with\n`Trait \"MagicSunday\\Webtrees\\ModuleBase\\…\" not found`. Supply that library in one\nof two ways:\n\n**Way A — drop-in (no code change).** Download\n[`webtrees-module-base`](https://github.com/magicsunday/webtrees-module-base) and\ncopy its `src/` to the location this module's `module.php` already expects:\n\n```text\nmodules_v4/webtrees-fan-chart/vendor/magicsunday/webtrees-module-base/src/…\n```\n\n**Way B — shared copy (one edit).** Place `webtrees-module-base` next to this\nmodule in `modules_v4/` (rename the extracted folder to `webtrees-module-base`),\nthen point this module's `module.php` at it. A single shared copy then serves\nevery magicsunday module installed this way:\n\n```php\n// modules_v4/webtrees-fan-chart/module.php\n$loader-\u003eaddPsr4(\n    'MagicSunday\\\\Webtrees\\\\ModuleBase\\\\',\n    __DIR__ . '/../webtrees-module-base/src'\n);\n```\n\n\u003e [!IMPORTANT]\n\u003e Both ways are overwritten by every module update, so you must redo them after\n\u003e each upgrade. For a maintenance-free install **without** Composer, use the\n\u003e [asset zip](#manual-installation) (it bundles all dependencies). Inside a\n\u003e **Composer-managed** webtrees, prefer `composer require magicsunday/webtrees-fan-chart:dev-main`\n\u003e — see [Using Composer](#using-composer).\n\n\n## Update\nTo update to the latest version:\n\n- **Manual installation**: From the [latest release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest) **Assets** section, download `webtrees-fan-chart.zip` (not \"Source code (zip)\"), **delete the old `modules_v4/webtrees-fan-chart` folder first**, and extract the new one. Extracting on top of an existing folder leaves stale files behind that can clash with the new release (a common cause of `Interface … not found` errors after an update).\n- **Composer**: Run `composer update magicsunday/webtrees-fan-chart --update-no-dev`.\n- **Git**: Run `git pull` inside the `modules_v4/webtrees-fan-chart` directory, then re-apply your source step (see [Using Git](#using-git)).\n\n\n## Configuration\n1. Go to the **Control Panel** (admin section) of your webtrees installation.\n2. Scroll down to the **Modules** section and click on **Charts** (under Genealogy).\n3. Enable the **Fan chart** module. Optionally disable the built-in fan chart to avoid confusion.\n4. Click **Save**.\n\n![Control panel - Module administration](assets/control-panel-modules.png)\n\n\n## Usage\nOpen the **Charts** menu on any individual page and select **Fan chart**.\n\nThe form at the top lets you choose the starting person, fan size (180-360 degrees), and number of\ngenerations (2-10).\n\nClick **Show more options** to access additional settings:\n\n| Option | Description |\n|--------|-------------|\n| **Display mode** | Choose between \"Show names and images\", \"Show names only\", or \"Show images only\". Images are only shown if the arc segment is wide enough. |\n| **Show descendants** | Shows partners and children as arcs below the ancestor section. The fan size is limited to 180-270 degrees when enabled. |\n| **Hide empty segments** | Hides chart segments for missing ancestors. |\n| **Show places** | Displays birth and death places in the chart arcs where space allows. For descendants with many children, places are automatically suppressed. Choose the level of detail (full name or lowest 1-3 hierarchy levels). |\n| **Show parent marriage dates** | Displays marriage dates in a narrow arc between each pair of parent arcs. When descendants are enabled, also shows the marriage date between the central person and their partners. |\n| **Show family colors** | Colors arcs by family branch. Paternal and maternal base colors are configurable via color pickers. |\n| **Birth and death date precision** | Show full birth and death dates (DD.MM.YYYY) for early generations. Outer generations use a compact year-only format. Marriage dates switch to year-only from generation 7 and are hidden from generation 9. Descendants with narrow arcs automatically use a compact format. |\n| **Number of inner levels** | Controls how many generations use the wider inner-arc layout with text along the arc path. |\n| **Font size** | Scales the text size (50-150%). |\n\n**Interacting with the chart:**\n\n| Action | Effect |\n|--------|--------|\n| Click on a person | Re-centers the chart on that person |\n| Right-click on a person | Opens a detailed tooltip with dates, places, and image |\n| Ctrl + scroll | Zoom in/out |\n| Click and drag | Move the chart |\n| Click center button | Reset view to center |\n| Fullscreen button | Toggle fullscreen mode |\n| PNG / SVG buttons | Export the chart as an image file |\n\n\n## Troubleshooting\n\n**Fatal error after a manual installation or update: `Trait/Interface \"MagicSunday\\Webtrees\\ModuleBase\\…\" not found` (or `ModuleAssetUrlInterface not found`)**\n- You probably downloaded the GitHub-generated **\"Source code (zip)\"** (or used *Code → Download ZIP*) instead of the install-ready asset **`webtrees-fan-chart.zip`**. The asset bundles the required `vendor/` dependencies; the source zip does not. Open the [latest release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest), scroll to **Assets**, download `webtrees-fan-chart.zip`, and re-extract.\n- If you used the asset zip, make sure you **deleted the previous `modules_v4/webtrees-fan-chart` folder before extracting**. Stale files from an older version can shadow the new bundled vendor code and produce the same error.\n\n**The chart does not appear / shows an error**\n- Make sure the module is enabled in the Control Panel under Modules \u003e Charts.\n- Check that your PHP version is 8.3 or later.\n- Clear your browser cache and reload the page.\n\n**Images are not displayed**\n- Ensure \"Show highlight images\" is enabled in the tree preferences (Control Panel \u003e Family trees \u003e Preferences).\n- Verify that media files are uploaded and linked to individuals.\n\n**Places are not shown**\n- Enable \"Show places\" in the chart options (under \"Show more options\").\n- Make sure the individuals have PLAC fields in their GEDCOM records.\n\n\n## Development\nThis section is for developers who want to contribute to the module.\n\n### Building JavaScript\nUsing Docker (no local Node.js required):\n```shell\nmake install\nmake build\n```\n\nUsing local Node.js:\n```shell\nnpm install\nnpm run prepare\n```\n\n### Running tests\n```shell\n# JavaScript tests\nnpm test\n\n# Full PHP + JS quality check\ncomposer update\ncomposer ci:test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicsunday%2Fwebtrees-fan-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagicsunday%2Fwebtrees-fan-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicsunday%2Fwebtrees-fan-chart/lists"}