fix: restore docs

docs/.vitepress/config.ts

@@ -0,0 +1,61 @@
+import { defineConfig } from 'vitepress';
+import { name, description, repository, license, author } from '../../package.json';
+import typedocSidebar from '../api/typedoc-sidebar.json';
+
+const cleanName = name.replace('@sgratzl/', '');
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+ title: cleanName,
+ description,
+ base: `/${cleanName}/`,
+ useWebFonts: false,
+ themeConfig: {
+ // https://vitepress.dev/reference/default-theme-config
+ nav: [
+ { text: 'Home', link: '/' },
+ { text: 'Getting Started', link: '/getting-started' },
+ { text: 'Examples', link: '/examples/' },
+ { text: 'API', link: '/api/' },
+ { text: 'Related Plugins', link: '/related' },
+ ],
+
+ sidebar: [
+ {
+ text: 'Examples',
+ items: [
+ { text: 'Basic', link: '/examples/' },
+ { text: 'Dendrogram', link: '/examples/dendrogram' },
+ { text: 'Tree', link: '/examples/tree' },
+ { text: 'Force Directed Graph', link: '/examples/force' },
+ { text: 'Tree with Labels', link: '/examples/label' },
+ { text: 'Directed Tree', link: '/examples/directed' },
+ { text: 'Tree Orientations', link: '/examples/orientation' },
+ ],
+ },
+ {
+ text: 'API',
+ collapsed: true,
+ items: typedocSidebar,
+ },
+ ],
+
+ socialLinks: [{ icon: 'github', link: repository.url.replace('.git', '') }],
+
+ footer: {
+ message: `Released under the <a href="${repository.url.replace(
+ '.git',
+ ''
+ )}/tree/main/LICENSE">${license} license</a>.`,
+ copyright: `Copyright © 2019-present <a href="${author.url}">${author.name}</a>`,
+ },
+
+ editLink: {
+ pattern: `${repository.url.replace('.git', '')}/edit/main/docs/:path`,
+ },
+
+ search: {
+ provider: 'local',
+ },
+ },
+});

docs/.vitepress/theme/index.ts

@@ -0,0 +1,25 @@
+import Theme from 'vitepress/theme';
+import { createTypedChart } from 'vue-chartjs';
+import { Tooltip, LineElement, PointElement, LinearScale } from 'chart.js';
+import { DendrogramController, ForceDirectedGraphController, EdgeLine, TreeController } from '../../../src';
+import ChartPluginDataLabel from 'chartjs-plugin-datalabels';
+
+export default {
+ ...Theme,
+ enhanceApp({ app }) {
+ const deps = [
+ Tooltip,
+ LineElement,
+ PointElement,
+ DendrogramController,
+ ForceDirectedGraphController,
+ EdgeLine,
+ TreeController,
+ LinearScale,
+ ChartPluginDataLabel,
+ ];
+ app.component('DendrogramChart', createTypedChart('dendrogram', deps));
+ app.component('TreeChart', createTypedChart('tree', deps));
+ app.component('ForceDirectedGraphChart', createTypedChart('forceDirectedGraph', deps));
+ },
+};

docs/examples/dendrogram.md

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

docs/examples/dendrogram.ts

@@ -0,0 +1,31 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import 'chartjs-plugin-datalabels';
+
+// #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,
+ options: {
+ plugins: {
+ datalabels: {
+ display: false,
+ },
+ },
+ },
+};
+// #endregion config

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,32 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import 'chartjs-plugin-datalabels';
+
+// #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,
+ options: {
+ plugins: {
+ datalabels: {
+ display: false,
+ },
+ },
+ },
+};
+// #endregion config

docs/examples/force.md

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

docs/examples/force.ts

@@ -0,0 +1,31 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import 'chartjs-plugin-datalabels';
+
+// #region data
+import miserables from './miserables.json';
+export const data: ChartConfiguration<'forceDirectedGraph'>['data'] = {
+ labels: miserables.nodes.map((d) => d.id),
+ datasets: [
+ {
+ pointBackgroundColor: 'steelblue',
+ pointRadius: 5,
+ data: miserables.nodes,
+ edges: miserables.links,
+ },
+ ],
+};
+// #endregion data
+// #region config
+export const config: ChartConfiguration<'forceDirectedGraph'> = {
+ type: 'forceDirectedGraph',
+ data,
+ options: {
+ plugins: {
+ datalabels: {
+ display: false,
+ },
+ },
+ },
+};
+// #endregion config

docs/examples/index.md

@@ -0,0 +1,62 @@
+---
+title: Examples
+---
+
+# Examples
+
+<script setup>
+import {config as force} from './force';
+import {config as dendrogram} from './dendrogram';
+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]
+
+:::
+
+## Dendrogram
+
+<DendrogramChart
+ :options="dendrogram.options"
+ :data="dendrogram.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./dendrogram.ts#config [config]
+
+<<< ./dendrogram.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.md

@@ -0,0 +1,41 @@
+---
+title: Tree with Labels
+---
+
+# Tree with Labels
+
+<script setup>
+import {config, radial} from './label';
+</script>
+
+<TreeChart
+ :options="config.options"
+ :data="config.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./label.ts#config [config]
+
+<<< ./label.ts#data [data]
+
+:::
+
+## Radial Tree with Labels
+
+<TreeChart
+ :options="radial.options"
+ :data="radial.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./label.ts#radial [config]
+
+<<< ./label.ts#data [data]
+
+:::