### Create Family Tree Chart with Data
Source: https://donatso.github.io/family-chart/index
This example demonstrates how to initialize a family tree chart using the Family Chart library. It includes importing necessary modules, defining sample family data, and configuring chart components like cards and editing features. The code requires the 'family-chart' library and its CSS styles.
```javascript
import * as f3 from 'family-chart';
import 'family-chart/dist/styles/family-chart.css';
// Your family tree data
const data = [
{
"id": "1",
"data": {"first name": "John", "last name": "Doe", "birthday": "1980", "gender": "M"},
"rels": {"spouses": ["2"], "children": ["3"]}
},
{
"id": "2",
"data": {"first name": "Jane", "last name": "Doe", "birthday": "1982", "gender": "F"},
"rels": {"spouses": ["1"], "children": ["3"]}
},
{
"id": "3",
"data": {"first name": "Bob", "last name": "Doe", "birthday": "2005", "gender": "M"},
"rels": {"parents": ["1", "2"]}
}
];
// Create the chart
const f3Chart = f3.createChart('#FamilyChart', data)
const f3Card = f3Chart.setCardHtml()
.setCardDisplay([["first name","last name"],["birthday"]]);
const f3EditTree = f3Chart.editTree()
.setFields(["first name","last name","birthday"]);
f3Chart.updateTree({initial: true});
```
--------------------------------
### HTML Handlers Setup for Family Chart
Source: https://donatso.github.io/family-chart/variables/htmlHandlers
The `htmlHandlers` module provides functions to interact with HTML elements for rendering the family chart. It includes utilities for generating unique IDs, setting up SVG elements, and managing reactive tree data updates. These functions are crucial for dynamic chart updates and element identification within the DOM.
```typescript
const htmlHandlers: __module & {
getUniqueId: (d: any) => any;
setupHtmlSvg: (getHtmlSvg: () => HTMLElement) => void;
setupReactiveTreeData: (
getHtmlSvg: () => HTMLElement,
) => (new_tree_data: TreeDatum[]) => TreeDatum[];
} = ...
// Type Declaration:
// getUniqueId: (d: any) => any
// setupHtmlSvg: (getHtmlSvg: () => HTMLElement) => void
// setupReactiveTreeData: (getHtmlSvg: () => HTMLElement) => (new_tree_data: TreeDatum[]) => TreeDatum[]
// Deprecated: Use setupReactiveTreeData instead of the direct export of setupHtmlSvg in future versions.
```
--------------------------------
### Get User Icon (JavaScript)
Source: https://donatso.github.io/family-chart/functions/icons.userIcon
The userIcon function is designed to return a string representing a user icon. This function has no parameters and its primary output is a string.
```javascript
function userIcon(): string {
// Implementation details for returning user icon string
}
```
--------------------------------
### setupZoom Function
Source: https://donatso.github.io/family-chart/functions/handlers.setupZoom
Initializes zoom functionality for a given HTML element. This function is part of the internal handlers for managing zoom behavior within the family chart.
```APIDOC
## Function setupZoom
### Description
Initializes zoom functionality for a given HTML element. This function is part of the internal handlers for managing zoom behavior within the family chart.
### Method
N/A (This is a client-side JavaScript function, not a REST endpoint)
### Endpoint
N/A
### Parameters
#### Path Parameters
N/A
#### Query Parameters
N/A
#### Request Body
N/A
### Request Example
```javascript
// Example usage (assuming 'chartContainer' is an HTML element and ZoomProps is defined)
setupZoom(chartContainer, { initialScale: 1.5 });
```
### Response
#### Success Response (void)
This function does not return a value.
#### Response Example
N/A
```
--------------------------------
### Get linkOffIcon String - Family Chart API
Source: https://donatso.github.io/family-chart/functions/icons.linkOffIcon
Retrieves the string representation for the linkOffIcon. This function is part of the icons module and returns a string.
```typescript
linkOffIcon(): string
```
--------------------------------
### Get Main Person Data
Source: https://donatso.github.io/family-chart/classes/Chart
Retrieves the data object for the main person in the family tree. This is typically the root individual around whom the tree is centered.
```javascript
getMainDatum(): Datum
```
--------------------------------
### htmlContSetup Function
Source: https://donatso.github.io/family-chart/functions/handlers.htmlContSetup
Sets up the HTML content for the family chart, including SVG elements for rendering.
```APIDOC
## htmlContSetup
### Description
Sets up the HTML content for the family chart, including SVG elements for rendering.
### Method
N/A (This is a function, not an HTTP endpoint)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
// Example usage (assuming 'containerElement' is an HTMLElement)
const setupResult = htmlContSetup(containerElement);
console.log(setupResult.svg);
```
### Response
#### Success Response
Returns an object containing references to the created HTML and SVG elements.
- **htmlSvg** (null | Element) - Reference to the HTML SVG element.
- **htmlView** (null | Element) - Reference to the HTML view element.
- **svg** (SVGElement) - The main SVG element.
- **svgView** (null | Element) - Reference to the SVG view element.
#### Response Example
```json
{
"htmlSvg": "",
"htmlView": "
...
",
"svg": "",
"svgView": "
...
"
}
```
```
--------------------------------
### cardComponentSetup Function
Source: https://donatso.github.io/family-chart/functions/handlers.cardComponentSetup
Sets up the card component for the family chart. It takes an HTMLElement as a container and returns a function that updates the tree data.
```APIDOC
## Function cardComponentSetup
### Description
Sets up the card component for the family chart. It takes an HTMLElement as a container and returns a function that updates the tree data.
### Method
N/A (This is a function signature, not an HTTP endpoint)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
// Example usage:
const container = document.getElementById('chart-container');
const updateChart = cardComponentSetup(container);
const initialData = [
// ... your TreeDatum[] data
];
updateChart(initialData);
```
### Response
#### Success Response
Returns a function: `(new_tree_data: TreeDatum[]) => TreeDatum[]`
#### Response Example
```javascript
// The returned function takes new tree data and returns updated tree data.
const updatedData = updateChart(newChartData);
```
### Error Handling
N/A for this function signature.
```
--------------------------------
### Initialize and Configure CardHtml with Family Chart API (JavaScript)
Source: https://donatso.github.io/family-chart/classes/CardHtmlClass
Demonstrates how to initialize the Family Chart using a CSS selector and data, then set up the CardHtml instance for custom card display. This involves creating a chart instance and chaining methods to define which data fields appear on the cards.
```javascript
import * as f3 from 'family-chart'
const f3Chart = f3.createChart('#FamilyChart', data)
const f3Card = f3Chart.setCardHtml() // returns a CardHtml instance
.setCardDisplay([["first name","last name"],["birthday"]]);
```
--------------------------------
### Get userPlusCloseIcon - Family Chart API
Source: https://donatso.github.io/family-chart/functions/icons.userPlusCloseIcon
Retrieves the userPlusCloseIcon from the Family Chart API. This function returns a string representing the icon. No specific dependencies are mentioned, and it takes no arguments.
```javascript
userPlusCloseIcon(): string
```
--------------------------------
### setupModal
Source: https://donatso.github.io/family-chart/classes/EditTree
Initializes and configures the modal component for the family tree.
```APIDOC
## POST /setupModal
### Description
Initializes and sets up the modal component used for various interactions within the family tree interface, such as displaying detailed information or forms.
### Method
POST
### Endpoint
/setupModal
### Parameters
None
### Response
#### Success Response (200)
- **Modal** - Returns a Modal object, likely containing methods to control the modal's visibility and content.
### Request Example
```json
{}
```
### Response Example
```json
{
"message": "Modal object returned"
}
```
```
--------------------------------
### Set Sort Children Function - TypeScript
Source: https://donatso.github.io/family-chart/classes/Chart
Allows customization of the sorting order for children within the family chart. A function can be provided to define the sorting logic, for example, by birth date.
```typescript
setSortChildrenFunction(sortChildrenFunction: SortChildrenFunction): Chart
```
--------------------------------
### Get Max Depth
Source: https://donatso.github.io/family-chart/classes/Chart
Determines the maximum depth of a person within the family tree, considering both their ancestry and progeny. It requires the ID of the person for whom to calculate the depth. Returns an object with `ancestry` and `progeny` depth values.
```javascript
getMaxDepth(d_id: string): { ancestry: number; progeny: number }
```
--------------------------------
### Get Current Zoom Transform from SVG Element
Source: https://donatso.github.io/family-chart/functions/handlers.getCurrentZoom
Retrieves the current zoom transformation applied to an SVG element. This function is useful for understanding the current scale and translation of the SVG content. It takes an SVGElement as input and returns a d3-zoom.ZoomTransform object.
```typescript
/**
* Retrieves the current zoom transformation applied to an SVG element.
* @param svg The SVG element to get the zoom transform from.
* @returns The current ZoomTransform object.
*/
function getCurrentZoom(svg: SVGElement): ZoomTransform;
```
--------------------------------
### Initialize SVG Container with htmlContSetup
Source: https://donatso.github.io/family-chart/functions/handlers.htmlContSetup
The htmlContSetup function initializes SVG elements (svg, svgView) and their corresponding container elements (htmlSvg, htmlView) within a provided HTMLElement. It returns an object containing these initialized elements. This function is crucial for setting up the visual rendering area for the family chart.
```TypeScript
function htmlContSetup(
cont: HTMLElement,
): {
htmlSvg: null | Element;
htmlView: null | Element;
svg: SVGElement;
svgView: null | Element;
} {
// Implementation details for setting up SVG elements
// ...
return {
htmlSvg: null,
htmlView: null,
svg: document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
svgView: null
};
}
```
--------------------------------
### Get Kinship Information - TypeScript
Source: https://donatso.github.io/family-chart/functions/elements.kinshipInfo
The kinshipInfo function retrieves kinship details based on configuration, a relationship ID, and a data stash. It returns either an HTMLElement or undefined. This function is crucial for rendering relationship information within the family chart.
```TypeScript
function kinshipInfo(
kinship_info_config: KinshipInfoConfig,
rel_id: string,
data_stash: Data,
): undefined | HTMLElement;
```
--------------------------------
### Create Family Chart Instance
Source: https://donatso.github.io/family-chart/classes/Chart
Initializes a new family chart visualization. This is the primary method for creating a chart instance, requiring a selector for the container element and the data for the chart. It returns a Chart instance that can be further configured.
```javascript
const f3Chart = createChart('#FamilyChart', data) // returns a Chart instance;
```
--------------------------------
### Get Kinships Data Stash
Source: https://donatso.github.io/family-chart/classes/Chart
Retrieves a data stash containing kinship information between two specified individuals. This stash can be used to generate smaller family trees showing the relatives connecting these two people. Requires the IDs of both the main person and the related person.
```javascript
getKinshipsDataStash(main_id: string, rel_id: string): void | DatumKinship[]
```
--------------------------------
### Initialize and Configure EditTree Instance (JavaScript)
Source: https://donatso.github.io/family-chart/classes/EditTree
Demonstrates how to create a Family Chart instance, obtain its EditTree object, configure fields, and set up a change handler to export updated data. This is useful for integrating interactive family tree editing into web applications.
```javascript
import * as f3 from 'family-chart'
const f3Chart = f3.createChart('#FamilyChart', data)
const f3EditTree = f3Chart.editTree() // returns an EditTree instance
.setFields(["first name","last name","birthday"])
.setOnChange(() => {
const updated_data = f3EditTree.exportData()
// do something with the updated data
})
```
--------------------------------
### User Plus Icon Function
Source: https://donatso.github.io/family-chart/functions/icons.userPlusIcon
Provides information about the userPlusIcon function, which returns a string representation of an icon.
```APIDOC
## Function userPlusIcon
### Description
Returns a string representing the user plus icon.
### Method
N/A (This is a function, not an HTTP endpoint)
### Endpoint
N/A
### Parameters
None
### Request Example
N/A
### Response
#### Success Response
- **iconString** (string) - The string representation of the user plus icon.
#### Response Example
```json
{
"iconString": ""
}
```
```
--------------------------------
### Create History Function Signature
Source: https://donatso.github.io/family-chart/functions/handlers.createHistory
Defines the TypeScript signature for the createHistory function. It takes a store, a function to get a data copy, and an update callback, returning a History object. This function is crucial for managing and updating the history of changes within the Family Chart application.
```typescript
createHistory(
store: Store,
getStoreDataCopy: () => Data,
onUpdate: () => void,
): History
```
--------------------------------
### Create Store with Initial State - TypeScript
Source: https://donatso.github.io/family-chart/functions/createStore
The createStore function initializes a new store with the provided initial state. It takes a single argument, initial_state, of type StoreState, and returns a Store object. This is fundamental for setting up the application's state management.
```typescript
function createStore(initial_state: StoreState): Store {
// Implementation details for creating and returning a store
return {}; // Placeholder for actual Store object
}
```
--------------------------------
### Function trashSvgIcon
Source: https://donatso.github.io/family-chart/functions/icons.trashSvgIcon
Provides the SVG icon for the trash functionality.
```APIDOC
## Function trashSvgIcon
### Description
Provides the SVG icon for the trash functionality.
### Method
N/A (This is a function, not an HTTP endpoint)
### Endpoint
N/A
### Parameters
None
### Request Example
N/A
### Response
#### Success Response
- **string** - The SVG icon markup as a string.
#### Response Example
```html