Add initial docs (#456)

* Add initial docs

* Remove autocolors

* Bugfix

* Capitalize Installation

* Prevent tension in scatter

* Add basic sample

* Update default sample

* Add options

* Update deps

* Remove unused sensitivity option

* Implement most of samples in docs

* Add linting for types

* tests

* Add missing parser

Author: kurkle

.github/workflows/documentation.yml

@@ -0,0 +1,38 @@
+name: documentation
+
+on:
+  pull_request:
+    branches: [master]
+  push:
+    branches: [master]
+
+jobs:
+  checks:
+    if: github.event_name != 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Test Build
+        run: |
+          npm ci
+          npm run docs
+  gh-release:
+    if: github.event_name != 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Build
+        run: |
+          npm ci
+          npm run docs
+      - name: Release to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GH_AUTH_TOKEN }}
+          publish_dir: dist/docs

.gitignore

@@ -3,8 +3,6 @@
 node_modules/*
 custom/*
 
-docs/index.md
-
 coverage/*
 
 nbproject/*

README.md

@@ -118,9 +118,6 @@ plugins: {
    // Minimal zoom distance required before actually applying zoom
    threshold: 2,
 
-   // On category scale, minimal zoom level before actually applying zoom
-   sensitivity: 3,
-
    // Function called while the user is zooming
    onZoom: function({chart}) { console.log(`I'm zooming!!!`); },
    // Function called once zooming is completed

docs/.vuepress/config.js

@@ -0,0 +1,74 @@
+const path = require('path');
+const base = process.env.MY_PLATFORM === "cloudflare" ? '/' : `/chartjs-plugin-zoom/`;
+
+module.exports = {
+  title: 'chartjs-plugin-zoom',
+  description: 'A zoom and pan plugin for Chart.js >= 3.0.0',
+  theme: 'chartjs',
+  base,
+  dest: path.resolve(__dirname, '../../dist/docs'),
+  head: [
+    ['link', {rel: 'icon', href: '/favicon.ico'}],
+  ],
+  plugins: [
+    ['flexsearch'],
+    ['redirect', {
+      redirectors: [
+        // Default sample page when accessing /samples.
+        {base: '/samples', alternative: ['basic']},
+      ],
+    }],
+  ],
+  chainWebpack: (config) => {
+    config.merge({
+      resolve: {
+        alias: {
+          // Hammerjs requires window, using ng-hammerjs instead
+          'hammerjs': 'ng-hammerjs',
+        }
+      }
+    });
+  },
+  themeConfig: {
+    repo: 'chartjs/chartjs-plugin-zoom',
+    logo: '/favicon.ico',
+    lastUpdated: 'Last Updated',
+    searchPlaceholder: 'Search...',
+    editLinks: false,
+    docsDir: 'docs',
+    chart: {
+      imports: [
+        ['scripts/register.js'],
+        ['scripts/defaults.js'],
+        ['scripts/utils.js', 'Utils'],
+      ]
+    },
+    nav: [
+      {text: 'Home', link: '/'},
+      {text: 'Guide', link: '/guide/'},
+      {text: 'Samples', link: `/samples/`},
+      {
+        text: 'Ecosystem',
+        ariaLabel: 'Community Menu',
+        items: [
+          { text: 'Awesome', link: 'https://github.com/chartjs/awesome' },
+        ]
+      }
+    ],
+    sidebar: {
+      '/guide/': [
+        '',
+        'integration',
+        'usage',
+        'options',
+        'animations',
+      ],
+      '/samples/': [
+        'basic',
+        'over-scale-mode',
+        'bar',
+        'log',
+      ],
+    }
+  }
+};

docs/.vuepress/public/favicon.ico

@@ -0,0 +1,34 @@
+# Animations
+
+The drag-to-zoom animation can be customized by configuring the `zoom` transition in your chart config:
+
+```javascript
+{
+  options: {
+    transitions: {
+      zoom: {
+        animation: {
+          duration: 1000,
+          easing: 'easeOutCubic'
+        }
+      }
+    }
+  }
+}
+```
+
+If you want to disable zoom animations:
+
+```javascript
+{
+  options: {
+    transitions: {
+      zoom: {
+        animation: {
+          duration: 0
+        }
+      }
+    }
+  }
+}
+```

docs/.vuepress/public/favicon.png

@@ -0,0 +1,19 @@
+# Getting Started
+
+A zoom and pan plugin for Chart.js >= 3.0.0
+
+Panning can be done via the mouse or with a finger.
+Zooming is done via the mouse wheel or via a pinch gesture. [Hammer.js](https://hammerjs.github.io/) is used for gesture recognition.
+
+## Installation
+
+```bash
+> npm install chartjs-plugin-zoom
+```
+
+:::tip
+
+**Important Note:** For Chart.js 2.6.0 to 2.9.x support, use [version 0.7.7 of this plugin](https://github.com/chartjs/chartjs-plugin-zoom/releases/tag/v0.7.7).
+Documentation for v0.7.7 can be found on [GitHub](https://github.com/chartjs/chartjs-plugin-zoom/blob/v0.7.7/README.md).
+
+:::

docs/.vuepress/public/hero.svg

@@ -0,0 +1,23 @@
+# Integration
+
+**chartjs-plugin-zoom** can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems.
+
+## Script Tag
+
+```html
+<script src="path/to/chartjs/dist/chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<script src="path/to/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
+<script>
+    var myChart = new Chart(ctx, {...});
+</script>
+```
+
+## Bundlers (Webpack, Rollup, etc.)
+
+```javascript
+import { Chart } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+
+Chart.register(zoomPlugin);
+```