Merge pull request #47 from sgratzl/release/v4.3.1

Release v4.3.1

.gitattributes

@@ -20,7 +20,9 @@
 *.less text
 *.styl text
 *.js text
+*.jsx text
 *.ts text
+*.tsx text
 *.coffee text
 *.json text
 *.htm text

.github/workflows/ci.yml

@@ -25,9 +25,9 @@ jobs:
       - run: yarn build
       - run: yarn lint
       - run: yarn test
-      # - run: yarn samples
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: diff outputs
           path: src/**/__diff_output__/*.png
+      - run: yarn docs:build

.github/workflows/deploy_website.yml

@@ -0,0 +1,43 @@
+name: Deploy Website
+on:
+  workflow_dispatch: {}
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - run: npm i -g yarn
+      - run: yarn config set checksumBehavior ignore
+      - name: Cache Node.js modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            ./.yarn/cache
+            ./.yarn/unplugged
+          key: ${{ runner.os }}-yarn2-v5-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn2-v5
+      - run: yarn install
+      - run: yarn docs:build
+      - uses: actions/configure-pages@v2
+      - uses: actions/upload-pages-artifact@v1
+        with:
+          path: docs/.vitepress/dist
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -19,11 +19,11 @@ npm-debug.log*
 
 *.tgz
 /.vscode/extensions.json
-/docs
 *.tsbuildinfo
 .eslintcache
 __diff_output__
 
-/samples/type_test.js
-.idea
-.idea/*
+docs/.vitepress/dist
+docs/.vitepress/cache
+docs/.vitepress/config.ts.timestamp*
+docs/api/

.prettierignore

@@ -2,7 +2,10 @@
 /.yarnrc.yml
 /.yarn
 /build
-/docs
+/docs/.vitepress/cache
+/docs/.vitepress/dist
+/docs/.vitepress/config.ts.timestamp*
+/docs/api
 /coverage
 /.gitattributes
 /.gitignore
@@ -14,4 +17,4 @@
 *.tgz
 *.tsbuildinfo
 .eslintcache
-/samples/type_test.js
+.nojekyll

.vscode/settings.json

@@ -13,12 +13,14 @@
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "npm.packageManager": "yarn",
   "eslint.nodePath": ".yarn/sdks",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
   "files.eol": "\n",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "liveServer.settings.port": 5501,
+  "editor.detectIndentation": false,
+  "editor.tabSize": 2,
   "search.exclude": {
     "**/.yarn": true,
     "**/.pnp.*": true

.yarnrc.yml

@@ -3,4 +3,4 @@ packageExtensions:
     dependencies:
       eslint-import-resolver-node: "*"
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2022 Samuel Gratzl
+Copyright (c) 2019-2023 Samuel Gratzl
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -26,7 +26,7 @@ npm install --save chart.js chartjs-plugin-hierarchical
 
 ## Usage
 
-see [Samples](https://github.com/sgratzl/chartjs-plugin-hierarchical/tree/main/samples) on Github
+see [Examples](https://www.sgratzl.com/chartjs-plugin-hierarchical/examples/)
 
 or at this [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/KKdryvg)
 
@@ -38,86 +38,11 @@ a new scale type `hierarchical`.
 
 The `hierarchical` axis scale has the following styling options
 
-```ts
-interface IHierarchicalScaleOptions {
-  /**
-   * ratio by which the distance between two elements shrinks the higher the level of the tree is. i.e. two two level bars have a distance of 1. two nested one just 0.75
-   * @default 0.75
-   */
-  levelPercentage: number;
-  /**
-   * padding of the first collapse to the start of the x-axis
-   * @default 25
-   */
-  padding: number;
-  /**
-   * position of the hierarchy label in expanded levels, null to disable
-   * @default 'below'
-   */
-  hierarchyLabelPosition: 'below' | 'above' | null;
-
-  /**
-   * position of the hierarchy group label relative to the its children
-   * @default between-first-and-second
-   */
-  hierarchyGroupLabelPosition: 'center' | 'first' | 'last' | 'between-first-and-second';
-
-  /**
-   * whether interactive buttons should be shown or whether it should be static
-   * @default false
-   */
-  static: boolean;
-
-  /**
-   * object of attributes that should be managed and extracted from the tree
-   * data structures such as `backgroundColor` for coloring individual bars
-   * the object contains the key and default value
-   * @default {}
-   */
-  attributes: { [attribute: string]: any };
-}
-```
+see [IHierarchicalScaleOptions](https://www.sgratzl/com/chartjs-plugin-hierarchical/api/interfaces/interface.IHierarchicalScaleOptions.html)
 
 ## Data structure
 
-```ts
-interface ILabelNode {
-  /**
-   * label
-   */
-  label: string;
-  /**
-   * defines whether this node is collapsed (false) or expanded (true) or focussed ('focus')
-   * @default false
-   */
-  expand?: boolean | 'focus';
-  /**
-   * list of children
-   */
-  children?: ISubLabelNode[];
-}
-
-/**
- * a label entry can be a single string or a complex ILabelNode
- */
-declare type ISubLabelNode = ILabelNode | string;
-
-interface IValueNode<T> {
-  /**
-   * the actual value of this node
-   */
-  value: T;
-  /**
-   * list of children
-   */
-  children?: ISubValueNode<T>[];
-}
-
-/**
- * a value entry can be a single value or a complex IValueNode
- */
-declare type ISubValueNode<T> = IValueNode<T> | T;
-```
+see [ILabelNode](https://www.sgratzl/com/chartjs-plugin-hierarchical/api/interfaces/interface.ILabelNode.html) and [IValueNode](https://www.sgratzl/com/chartjs-plugin-hierarchical/api/interfaces/interface.IValueNode.html)
 
 ### ESM and Tree Shaking
 

docs/.vitepress/config.ts

@@ -0,0 +1,67 @@
+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: 'Single Node', link: '/examples/single' },
+          { text: 'Attributes', link: '/examples/attributes' },
+          { text: 'Scriptable', link: '/examples/scriptable' },
+          { text: 'Static Expansion', link: '/examples/static' },
+          { text: 'Single Child', link: '/examples/singleChild' },
+          { text: 'Horizontal Scale', link: '/examples/horizontal' },
+          { text: 'Horizontal Scale (Reversed)', link: '/examples/horizontalReverse' },
+          { text: 'Deep Hierarchy', link: '/examples/deep' },
+          { text: 'Line Chart', link: '/examples/line' },
+          { text: 'End Hierarchy', link: '/examples/endHierarchy' },
+          { text: 'No Label', link: '/examples/noLabel' },
+          //
+        ],
+      },
+      {
+        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,34 @@
+import Theme from 'vitepress/theme';
+import { Chart } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  Tooltip,
+  LinearScale,
+  BarController,
+  BarElement,
+  LineController,
+  Colors,
+  LineElement,
+  PointElement,
+} from 'chart.js';
+import { HierarchicalScale } from '../../../src';
+
+export default {
+  ...Theme,
+  enhanceApp({ app }) {
+    ChartJS.register(
+      HierarchicalScale,
+      CategoryScale,
+      Tooltip,
+      LinearScale,
+      BarController,
+      BarElement,
+      LineController,
+      LineElement,
+      PointElement,
+      Colors
+    );
+    app.component('Chart', Chart);
+  },
+};

docs/examples/attributes.md

@@ -0,0 +1,25 @@
+---
+title: Attributes
+---
+
+# Attributes
+
+<script setup>
+import {config} from './attributes';
+</script>
+
+<Chart
+  :type="config.type"
+  :options="config.options"
+  :data="config.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./attributes.ts#config [config]
+
+<<< ./attributes.ts#data [data]
+
+:::