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

.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/guide/animations.md

@@ -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/guide/index.md

@@ -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/guide/integration.md

@@ -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);
+```

docs/guide/options.md

@@ -0,0 +1,71 @@
+# Options
+
+The options for chartjs-plugin-zoom should be placed in `options.plugins.zoom` in chart.js configuration.
+
+The options are split in two sub-objects, [pan](#pan) and [zoom](#zoom).
+
+```js
+const chart = new Chart('id', {
+  type: 'bar',
+  data: {},
+  options: {
+    plugins: {
+      zoom: {
+        pan: {
+          // pan options and/or events
+        },
+        zoom: {
+          // zoom options and/or events
+        }
+      }
+    }
+  }
+});
+```
+
+## Pan
+
+### Pan Options
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | ----------
+| `enabled` | `boolean` | `false` | Enable panning
+| `mode` | `'x'`\|`'y'`\|`'xy'` | `'xy'` | Allowed panning directions
+| `modifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` |  Modifier key required for panning with mouse
+| `overScaleMode` | `'x'`\|`'y'`\|`'xy'` | `undefined` | Which of the enabled panning directions should only be available when the mouse cursor is over a scale for that axis
+| `rangeMin` | `{x: any, y: any}` | `undefined` | Minimum pan range allowed for the axes. Value type depends on the scale type
+| `rangeMax` | `{x: any, y: any}` | `undefined` | Maximum pan range allowed for the axes. Value type depends on the scale type
+| `speed` | `number` | `20` | Factor for pan velocity on **category scale**
+| `threshold` | `number` | `10` | Mimimal pan distance required before actually applying pan
+
+### Pan Events
+
+| Name | Arguments | Description
+| ---- | --------- | -----------
+| `onPan` | `{chart}` | Called while the chart is being panned
+| `onPanComplete` | `{chart}` | Called once panning is copleted
+| `onPanRejected` | `{chart,event}` | Callend when panning is rejected due to missing modifier key. `event` is the a [hammer event](https://hammerjs.github.io/api#event-object) that failed
+
+## Zoom
+
+### Zoom Options
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | ----------
+| `enabled` | `boolean` | `false` | Enable zooming
+| `drag` | `boolean` | `undefined` | Enable drag-to-zoom behavior (disables zooming by wheel)
+| `mode` | `'x'`\|`'y'`\|`'xy'` | `'xy'` | Allowed zoom directions
+| `modifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` |  Modifier key required for zooming with mouse
+| `overScaleMode` | `'x'`\|`'y'`\|`'xy'` | `undefined` | Which of the enabled zooming directions should only be available when the mouse cursor is over a scale for that axis
+| `rangeMin` | `{x: any, y: any}` | `undefined` | Minimum zoom range allowed for the axes. Value type depends on the scale type
+| `rangeMax` | `{x: any, y: any}` | `undefined` | Maximum zoom range allowed for the axes. Value type depends on the scale type
+| `speed` | `number` | `0.1` | Factor of zoom speed via mouse wheel.
+| `threshold` | `number` | `10` | Mimimal zoom distance required before actually applying zoom
+
+### Zoom Events
+
+| Name | Arguments | Description
+| ---- | --------- | -----------
+| `onZoom` | `{chart}` | Called while the chart is being zoomed
+| `onZoomComplete` | `{chart}` | Called once zooming is copleted
+| `onZoomRejected` | `{chart,event}` | Callend when zoom is rejected due to missing modifier key. `event` is the a [hammer event](https://hammerjs.github.io/api#event-object) that failed

docs/guide/usage.md

@@ -0,0 +1,43 @@
+# Usage
+
+Using the zoom and pan plugin is very simple. Once the plugin is [registered](./integration) zoom options provided to the chart will be used. In this example, scroll zoom is enabled.
+
+```js chart-editor
+/* <block:config:0> */
+const config = {
+  type: 'line',
+  data: {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [{
+      label: 'My First Dataset',
+      data: [65, 59, 80, 81, 56, 55, 40],
+      fill: false,
+      borderColor: 'rgb(75, 192, 192)',
+      tension: 0.1
+    }]
+  },
+  options: {
+    plugins: {
+      zoom: {
+        zoom: {
+          enabled: true,
+          mode: 'xy',
+        }
+      }
+    }
+  }
+};
+/* </block:config> */
+
+module.exports = {
+  actions: [
+    {
+      name: 'Reset zoom',
+      handler: function(chart) {
+        chart.resetZoom();
+      }
+    }
+  ],
+  config
+};
+```

docs/index.md

@@ -0,0 +1,7 @@
+---
+home: true
+heroImage: /hero.svg
+actionText: Get Started →
+actionLink: /guide/
+footer: MIT Licensed | Copyright © 2016-2021 chartjs-plugin-zoom contributors
+---

docs/samples/.eslintrc.yml

@@ -0,0 +1,2 @@
+rules:
+  no-console: "off"