feat: migrate more samples

Author: sgratzl

docs/examples/dendeogram.ts

@@ -0,0 +1,23 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+
+// #region data
+import nodes from './tree.json';
+
+export const data: ChartConfiguration<'dendrogram'>['data'] = {
+  labels: nodes.map((d) => d.name),
+  datasets: [
+    {
+      pointBackgroundColor: 'steelblue',
+      pointRadius: 5,
+      data: nodes.map((d) => Object.assign({}, d)),
+    },
+  ],
+};
+// #endregion data
+// #region config
+export const config: ChartConfiguration<'dendrogram'> = {
+  type: 'dendrogram',
+  data,
+};
+// #endregion config

docs/examples/dendrogram.md

@@ -0,0 +1,44 @@
+---
+title: Dendrogram
+---
+
+# Dendrogram
+
+<script setup>
+import {config as tree} from './tree';
+</script>
+
+## Force Directed Graph
+
+<ForceDirectedGraphChart
+  :options="force.options"
+  :data="force.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./force.ts#config [config]
+
+<<< ./force.ts#data [data]
+
+:::
+
+
+## Tree
+
+<TreeChart
+  :options="tree.options"
+  :data="tree.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./tree.ts#tree [config]
+
+<<< ./tree.ts#data [data]
+
+:::

docs/examples/directed.md

@@ -0,0 +1,24 @@
+---
+title: Directed Tree
+---
+
+# Directed Tree
+
+<script setup>
+import {config} from './directed';
+</script>
+
+<TreeChart
+  :options="config.options"
+  :data="config.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./directed.ts#config [config]
+
+<<< ./directed.ts#data [data]
+
+:::

docs/examples/directed.ts

@@ -0,0 +1,24 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+
+// #region data
+import nodes from './tree.json';
+
+export const data: ChartConfiguration<'tree'>['data'] = {
+  labels: nodes.map((d) => d.name),
+  datasets: [
+    {
+      pointBackgroundColor: 'steelblue',
+      pointRadius: 5,
+      directed: true,
+      data: nodes.map((d) => Object.assign({}, d)),
+    },
+  ],
+};
+// #endregion data
+// #region config
+export const config: ChartConfiguration<'tree'> = {
+  type: 'tree',
+  data,
+};
+// #endregion config

docs/examples/force.ts

@@ -2,24 +2,41 @@ import type { ChartConfiguration } from 'chart.js';
 import type {} from '../../src';
 
 // #region data
-export const data: ChartConfiguration<'boxplot'>['data'] = {
-  labels: ['A'],
+import miserables from './miserables.json';
+export const data: ChartConfiguration<'forceDirectedGraph'>['data'] = {
+  labels: miserables.nodes.map((d) => d.id),
   datasets: [
     {
-      itemRadius: 2,
-      data: [[57297214, 57297216, 117540924, 117540928]],
+      pointBackgroundColor: 'steelblue',
+      pointRadius: 5,
+      data: miserables.nodes,
+      edges: miserables.links,
     },
   ],
 };
 // #endregion data
 // #region config
-export const config: ChartConfiguration<'boxplot'> = {
-  type: 'boxplot',
+export const config: ChartConfiguration<'forceDirectedGraph'> = {
+  type: 'forceDirectedGraph',
   data,
   options: {
     plugins: {
-      legend: {
-        display: false,
+      zoom: {
+        pan: {
+          enabled: true,
+        },
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true,
+          },
+          // drag: {
+          //   enabled: true
+          // },
+          mode: 'xy',
+        },
       },
     },
   },

docs/examples/index.md

@@ -6,6 +6,8 @@ title: Examples
 
 <script setup>
 import {config as force} from './force';
+import {config as dendrogram} from './dendrogram';
+import {tree} from './tree';
 </script>
 
 ## Force Directed Graph
@@ -24,3 +26,38 @@ import {config as force} from './force';
 <<< ./force.ts#data [data]
 
 :::
+
+
+## Dendrogram
+
+<TreeChart
+  :options="dendogram.options"
+  :data="dendogram.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./dendogram.ts#config [config]
+
+<<< ./dendogram.ts#data [data]
+
+:::
+
+## Tree
+
+<TreeChart
+  :options="tree.options"
+  :data="tree.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./tree.ts#tree [config]
+
+<<< ./tree.ts#data [data]
+
+:::

docs/examples/label.ts

@@ -0,0 +1,52 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+
+// #region data
+import nodes from './tree.json';
+
+export const data: ChartConfiguration<'forceDirectedGraph'>['data'] = {
+  labels: nodes.map((d) => d.name),
+  datasets: [
+    {
+      pointBackgroundColor: ['#002838', '#ed7d00', '#395c6b', '#d94d15', '#889da6'],
+      pointRadius: 10,
+      data: nodes.map((d) => Object.assign({}, d)),
+    },
+  ],
+};
+// #endregion data
+// #region config
+export const config: ChartConfiguration<'forceDirectedGraph'> = {
+  type: 'forceDirectedGraph',
+  data,
+  options: {
+    tree: {
+      orientation: 'radial',
+    },
+    layout: {
+      padding: {
+        left: 20,
+        top: 20,
+        bottom: 20,
+        right: 20,
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      datalabels: {
+        // display: true,
+        align: 'right',
+        offset: 6,
+        formatter: function (value, context) {
+          return '' + value.name + '';
+        },
+        color: 'black',
+        backgroundColor: 'steelblue',
+      },
+    },
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion config

samples/miserables.json docs/examples/miserables.jsonsamples/miserables.json renamed to docs/examples/miserables.json

@@ -0,0 +1,60 @@
+---
+title: Tree Orientations
+---
+
+# Tree Orientations
+
+<script setup>
+import {horizontal, vertical, radial} from './tree';
+</script>
+
+## Horizontal
+
+<TreeGraph
+  :options="horizontal.options"
+  :data="horizontal.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./tree.ts#horizontal [config]
+
+<<< ./tee.ts#data [data]
+
+:::
+
+## Vertical
+
+<TreeGraph
+  :options="vertical.options"
+  :data="vertical.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./tree.ts#vertical [config]
+
+<<< ./tee.ts#data [data]
+
+:::
+
+## Radial
+
+<TreeGraph
+  :options="radial.options"
+  :data="radial.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./tree.ts#radial [config]
+
+<<< ./tee.ts#data [data]
+
+:::