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: 'Funnel Alignment', link: '/examples/align' },
+          { text: 'Shrink Options', link: '/examples/shrink' },
+          { text: 'Gradient', link: '/examples/gradient' },
+          { text: 'Hierarchical Funnel', link: '/examples/hierarchical' },
+          { text: 'Horizontal Funnel', link: '/examples/horizontal' },
+          { text: 'Direct Numbers', link: '/examples/numbers' },
+        ],
+      },
+      {
+        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,24 @@
+import Theme from 'vitepress/theme';
+import { createTypedChart } from 'vue-chartjs';
+import { LinearScale, CategoryScale, Tooltip } from 'chart.js';
+import { FunnelController, TrapezoidElement } from '../../../src';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { HierarchicalScale } from 'chartjs-plugin-hierarchical';
+
+export default {
+  ...Theme,
+  enhanceApp({ app }) {
+    app.component(
+      'FunnelChart',
+      createTypedChart('funnel', [
+        LinearScale,
+        CategoryScale,
+        FunnelController,
+        TrapezoidElement,
+        Tooltip,
+        ChartDataLabels,
+        HierarchicalScale,
+      ])
+    );
+  },
+};

docs/examples/align.md

@@ -0,0 +1,42 @@
+---
+title: Funnel Alignment
+---
+
+# Funnel Alignment
+
+<script setup>
+import {center, left, right} from './align';
+</script>
+
+## Center (default)
+
+<FunnelChart
+  :options="center.options"
+  :data="center.data"
+/>
+
+### Code
+
+<<< ./align.ts#center
+
+## Left
+
+<FunnelChart
+  :options="left.options"
+  :data="left.data"
+/>
+
+### Code
+
+<<< ./align.ts#left
+
+## Right
+
+<FunnelChart
+  :options="right.options"
+  :data="right.data"
+/>
+
+### Code
+
+<<< ./align.ts#right

docs/examples/align.ts

@@ -0,0 +1,50 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+// #region center
+export const center: ChartConfiguration<'funnel'> = {
+  type: 'funnel',
+  data: {
+    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+    datasets: [
+      {
+        data: [0.7, 0.66, 0.61, 0.01],
+      },
+    ],
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion center
+
+// #region left
+export const left: ChartConfiguration<'funnel'> = {
+  type: 'funnel',
+  data: {
+    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+    datasets: [
+      {
+        data: [0.7, 0.66, 0.61, 0.01],
+        align: 'left',
+      },
+    ],
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion left
+
+// #region right
+export const right: ChartConfiguration<'funnel'> = {
+  type: 'funnel',
+  data: {
+    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+    datasets: [
+      {
+        data: [0.7, 0.66, 0.61, 0.01],
+        align: 'right',
+      },
+    ],
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion right

docs/examples/basic.ts

@@ -0,0 +1,43 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+// #region config
+export const config: ChartConfiguration<'funnel'> = {
+  type: 'funnel',
+  data: {
+    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+    datasets: [
+      {
+        data: [0.7, 0.66, 0.61, 0.01],
+        datalabels: {
+          // anchor: (context) => {
+          //   const value = context.dataset.data[context.dataIndex];
+          //   return value < 0.02 ? 'end': 'start';
+          // },
+          // align: (context) => {
+          //   const value = context.dataset.data[context.dataIndex];
+          //   return value < 0.02 ? 'end': 'center';
+          // },
+          // textAlign: 'center',
+          // // color: (context) => {
+          // //   return '#FFCE56';
+          // // },
+          // font: {
+          //   size: 20,
+          // },
+          // formatter: (value, context) => {
+          //   const label = context.chart.data.labels[context.dataIndex];
+          //   return `${label}\n${(value * 100).toLocaleString()}%`;
+          // }
+        },
+        // backgroundColor: ChartFunnel.schemeBlues[9],
+      },
+    ],
+  },
+  options: {
+    indexAxis: 'y',
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion config

docs/examples/gradient.md

@@ -0,0 +1,18 @@
+---
+title: Gradient
+---
+
+# Gradient Color
+
+<script setup>
+import {config} from './gradient';
+</script>
+
+<FunnelChart
+  :options="config.options"
+  :data="config.data"
+/>
+
+### Code
+
+<<< ./gradient.ts#config

docs/examples/gradient.ts

@@ -0,0 +1,23 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import chroma from 'chroma-js';
+
+// #region config
+export const config: ChartConfiguration<'funnel'> = {
+  type: 'funnel',
+  data: {
+    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+    datasets: [
+      {
+        data: [0.7, 0.66, 0.61, 0.01],
+        backgroundColor: chroma.scale('Greens').colors(4),
+      },
+    ],
+  },
+  options: {
+    indexAxis: 'y',
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion config

docs/examples/hierarchical.md

@@ -0,0 +1,18 @@
+---
+title: Hierarchical Funnel
+---
+
+# Hierarchical Funnel
+
+<script setup>
+import {config} from './hierarchical';
+</script>
+
+<FunnelChart
+  :options="config.options"
+  :data="config.data"
+/>
+
+### Code
+
+<<< ./hierarchical.ts#config

docs/examples/hierarchical.ts

@@ -0,0 +1,53 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+// #region config
+export const config: ChartConfiguration<'funnel'> = {
+  type: 'funnel',
+  data: {
+    labels: [
+      {
+        label: 'Step 1',
+        children: ['A', 'B'],
+      },
+      'Step 2',
+    ],
+    datasets: [
+      {
+        tree: [
+          {
+            value: 0.9,
+            children: [0.9, 0.8],
+          },
+          0.7,
+        ],
+        datalabels: {
+          // formatter: (v) => v.toLocaleString(),
+        },
+      } as any,
+    ],
+  },
+  options: {
+    indexAxis: 'y',
+    layout: {
+      padding: {
+        // add more space at the bottom for the hierarchy
+        left: 100,
+      },
+    },
+    scales: {
+      y: {
+        display: true,
+        type: 'hierarchical',
+        padding: 25,
+        levelPercentage: 1,
+      },
+      x: {
+        // display: true,
+      },
+    },
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion config

docs/examples/horizontal.md

@@ -0,0 +1,18 @@
+---
+title: Horizontal Funnel
+---
+
+# Horizontal Funnel
+
+<script setup>
+import {config} from './horizontal';
+</script>
+
+<FunnelChart
+  :options="config.options"
+  :data="config.data"
+/>
+
+### Code
+
+<<< ./horizontal.ts#config

docs/examples/horizontal.ts

@@ -0,0 +1,19 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+// #region config
+export const config: ChartConfiguration<'funnel'> = {
+  type: 'funnel',
+  data: {
+    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+    datasets: [
+      {
+        data: [0.7, 0.66, 0.61, 0.01],
+        shrinkAnchor: 'top',
+      },
+    ],
+  },
+  plugins: [ChartDataLabels],
+};
+// #endregion config

docs/examples/index.md

@@ -0,0 +1,18 @@
+---
+title: Examples
+---
+
+# Examples
+
+<script setup>
+import {config} from './basic';
+</script>
+
+<FunnelChart
+  :options="config.options"
+  :data="config.data"
+/>
+
+### Code
+
+<<< ./basic.ts#config