Release v4.2.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,9 +19,11 @@ npm-debug.log*
 
 *.tgz
 /.vscode/extensions.json
-/docs
 *.tsbuildinfo
 .eslintcache
 __diff_output__
 
-/samples/type_test.js
+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,8 +13,6 @@
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "prettier.packageManager": "yarn",
-  "eslint.packageManager": "yarn",
   "npm.packageManager": "yarn",
   "eslint.nodePath": ".yarn/sdks",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
@@ -23,7 +21,6 @@
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.detectIndentation": false,
   "editor.tabSize": 2,
-  "liveServer.settings.port": 5503,
   "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

@@ -34,13 +34,15 @@ npm install --save chart.js chartjs-chart-pcp
 
 ## Usage
 
-see [Samples](https://github.com/sgratzl/chartjs-chart-pcp/tree/main/samples) on Github
+see [Examples](https://www.sgratzl.com/chartjs-chart-pcp/examples/)
+
+[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/wvKQvyM)
 
 ## PCP
 
 ### Data Structure
 
-the data items are the regular data items along with their labels. For each attribute there is an dataset. e.g., in the following example there are three items (A, B, C) with three axes / features (f1, f2, f3).
+the data items are the regular data items along with their labels. For each attribute there is a dataset. e.g., in the following example there are three items (A, B, C) with three axes / features (f1, f2, f3).
 
 ```js
 const objs = [

docs/.vitepress/config.ts

@@ -0,0 +1,57 @@
+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: 'Log Scale', link: '/examples/log' },
+          { text: 'Tension', link: '/examples/tension' },
+        ],
+      },
+      {
+        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,31 @@
+import Theme from 'vitepress/theme';
+import { createTypedChart } from 'vue-chartjs';
+import { CategoryScale, Tooltip, LinearScale, LogarithmicScale, Legend } from 'chart.js';
+import {
+  LineSegment,
+  ParallelCoordinatesController,
+  PCPScale,
+  LinearAxis,
+  LogarithmicAxis,
+  LogarithmicParallelCoordinatesController,
+} from '../../../src';
+
+export default {
+  ...Theme,
+  enhanceApp({ app }) {
+    app.component(
+      'PCPChart',
+      createTypedChart('pcp', [
+        CategoryScale,
+        Tooltip,
+        Legend,
+        LinearScale,
+        LogarithmicScale,
+        LineSegment,
+        PCPScale,
+        ParallelCoordinatesController,
+        LogarithmicParallelCoordinatesController,
+      ])
+    );
+  },
+};

docs/examples/basic.ts

@@ -0,0 +1,27 @@
+import type { ChartConfiguration } from 'chart.js';
+import { Chart } from 'chart.js';
+import { LinearAxis, LogarithmicAxis } from '../../src';
+
+// #region data
+import mtcars from './data/index.json';
+
+const attrs = ['mpg', 'hp', 'wt', 'qsec', 'gear', 'drat', 'disp', 'cyl', 'am'];
+
+export const data: ChartConfiguration<'pcp'>['data'] = {
+  labels: mtcars.map((c) => c.model),
+  datasets: attrs.map((attr) => ({
+    label: attr,
+    data: mtcars.map((c) => c[attr]),
+  })),
+};
+
+// #endregion
+
+Chart.registry.addElements(LinearAxis, LogarithmicAxis);
+
+// #region config
+export const config: ChartConfiguration<'pcp'> = {
+  type: 'pcp',
+  data,
+};
+// #endregion config

docs/examples/data/README.md

@@ -0,0 +1 @@
+https://raw.githubusercontent.com/derhuerst/mtcars/master/index.json