Relative points

docs/api/grafer-points-data.md

@@ -14,6 +14,7 @@ An array of point objects to be loaded into Grafer. The PointData property list
 | Property  | Type | Description |
 | :--- | :--- | :--- |
 |  id  | string - *optional* | Name of the point. Will be used as an ID when referencing point in node, edge, and label data. Will default to its index in the PointData array if left out. |
+|  parentId  | string - *optional* | ID of the point which this point is the child of. Used to enable relative positioning of points and relative radius. Will default to *No Parent* if left out.
 |  x  | number | X-Coordinate of the point. |
 |  y  | number | Y-Coordinate of the point. |
 |  z  | number - *optional* | Z-Coordinate of the point. Will default to 0 if left out. |
@@ -27,7 +28,19 @@ Data [mappings](../guides/mappings.md) are used to compute properties at runtime
 | Property  | Type | Description |
 | :--- | :--- | :--- |
 |  id  | (datum: PointData) => string - *optional* | |
+|  parentId  | (datum: PointData) => string - *optional* | |
 |  x  | (datum: PointData) => number - *optional* | |
 |  y  | (datum: PointData) => number - *optional* | |
 |  z  | (datum: PointData) => number - *optional* | |
 |  radius  | (datum: PointData) => number - *optional* | |
+
+### `options`
+###### { [key: string]: any } - *optional*
+
+An object containing configuration options for the points.
+
+| Property  | Type | Description |
+| :--- | :--- | :--- |
+| positionHierarchyType | HierarchyTypes | Changes how point hierarchies changes the point positions. See [HierarchyTypes](./hierarchy-types.md) for more information. |
+| radiusHierarchyType | HierarchyTypes | Changes how point hierarchies changes the point radius. See [HierarchyTypes](./hierarchy-types.md) for more information. |
+| maxHierarchyDepth | number | Sets the maximum hierarchy depth that any point will have. Defaults to 100. |

docs/api/hierarchy-types.md

@@ -0,0 +1,15 @@
+# HierarchyTypes
+
+An enum specifying how a points hierarchy influences a given point data property.
+
+<br>
+
+## Properties
+
+### `NONE`
+
+The hierarchy has no effect on a given data property.
+
+### `ADD`
+
+The value of a given point data property is the sum of all the values associated with that data property up the hierarchy. This type can be used to allow for relative point positioning as an example.

examples/src/basic/hierarchy.ts

@@ -0,0 +1,23 @@
+import {html, render} from 'lit-html';
+import {GraferController} from '../../../src/mod';
+
+export async function hierarchy(container: HTMLElement): Promise<void> {
+    render(html`<canvas class="grafer_container"></canvas><mouse-interactions></mouse-interactions>`, container);
+    const canvas = document.querySelector('.grafer_container') as HTMLCanvasElement;
+
+    const points = {
+        data: [
+            { id: 0, x: 0, y: 0 },
+            { id: 1, x: 2, y: 0, parentId: 0 },
+            { id: 2, x: 2, y: 0, parentId: 1 },
+        ],
+    };
+    const nodes = {
+        ...points,
+        mappings: {
+            point: (d: any): number => d.id,
+        },
+    };
+
+    new GraferController(canvas, { points, layers: [{nodes}] });
+}

examples/src/basic/mod.ts

@@ -4,3 +4,4 @@ export * from './nodeColors';
 export * from './edgeColors';
 export * from './nodeRadius';
 export * from './nodeID';
+export * from './hierarchy';