Add docs that can also be used for testing

Author: simonbrunel

.eslintignore

@@ -1,2 +1,3 @@
 **/node_modules
 !.eslintrc.js
+!.vuepress

README.md

@@ -2,49 +2,12 @@
 
 VuePress theme for projects in the Chart.js organization.
 
-## Install
+## Documentation
 
-```sh
-npm install -D vuepress-theme-chartjs
-```
-
-## Usage
-
-Minimal config in `.vuepress/config.js` to enable the theme:
-
-```js
-module.exports = {
-  theme: 'chartjs',
-};
-```
-
-## Configuration
-
-This theme is based on the VuePress default theme and support the [same configuration](https://vuepress.vuejs.org/theme/default-theme-config.html).
-
-Additionally, the following options are available:
-
-```js
-// docs/.vuepress/config.js
-
-module.export = {
-  themeConfig: {
-    // Chart views options.
-    chart: {
-      // Files to import (and optionally expose) when evaluating code in a
-      // ```chart-editor fenced code block. The first value is the path to
-      // the file to import, relative to the docs folder. The second value
-      // allows to expose the file exports as a global variable with the
-      // given name. If omitted, the import is used for side-effects.
-      imports: [
-        ['foo.js'],           // Side-effect (e.g. register plugins).
-        ['bar.js', 'Bar'],    // Bar will contains the bar.js exports.
-      ]
-    },
-  }
-}
-
-```
+- [Introduction](https://vuepress-theme-chartjs.netlify.app/)
+- [Getting Started](https://vuepress-theme-chartjs.netlify.app/getting-started.html)
+- [Configuration](https://vuepress-theme-chartjs.netlify.app/configuration.html)
+- [Chart Editor](https://vuepress-theme-chartjs.netlify.app/chart-editor-simple.html)
 
 ## License
 

docs/.imports/register.js

@@ -0,0 +1,15 @@
+import {Chart, defaults, registerables} from 'chart.js';
+
+Chart.register(...registerables);
+
+defaults.set('plugins', {
+  legend: {
+    display: false,
+  },
+  title: {
+    display: false,
+  },
+  tooltip: {
+    enabled: false,
+  },
+});

docs/.imports/utils.js

@@ -0,0 +1,92 @@
+function fallback(/* values ... */) {
+  const ilen = arguments.length;
+  for (let i = 0; i < ilen; ++i) {
+    const v = arguments[i];
+    if (v !== undefined) {
+      return v;
+    }
+  }
+}
+
+const Color = typeof window !== 'undefined' ? window.Color : {};
+
+export const COLORS = [
+  '#FF3784',
+  '#36A2EB',
+  '#4BC0C0',
+  '#F77825',
+  '#9966FF',
+  '#00A8C6',
+  '#379F7A',
+  '#CC2738',
+  '#8B628A',
+  '#8FBE00',
+  '#606060',
+];
+
+// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
+let _seed = Date.now();
+
+export function srand(seed) {
+  _seed = seed;
+}
+
+export function rand(min, max) {
+  min = min === undefined ? 0 : min;
+  max = max === undefined ? 1 : max;
+  _seed = (_seed * 9301 + 49297) % 233280;
+  return min + (_seed / 233280) * (max - min);
+}
+
+export function numbers(config) {
+  const cfg = config || {};
+  const min = fallback(cfg.min, 0);
+  const max = fallback(cfg.max, 1);
+  const from = fallback(cfg.from, []);
+  const count = fallback(cfg.count, 8);
+  const decimals = fallback(cfg.decimals, 8);
+  const continuity = fallback(cfg.continuity, 1);
+  const dfactor = Math.pow(10, decimals) || 0;
+  const data = [];
+
+  for (let i = 0; i < count; ++i) {
+    const value = (from[i] || 0) + this.rand(min, max);
+    if (this.rand() <= continuity) {
+      data.push(Math.round(dfactor * value) / dfactor);
+    } else {
+      data.push(null);
+    }
+  }
+
+  return data;
+}
+
+export function color(offset) {
+  const count = COLORS.length;
+  const index = offset === undefined ? ~~rand(0, count) : offset;
+  return COLORS[index % count];
+}
+
+export function colors(config) {
+  const cfg = config || {};
+  const c = cfg.color || color(0);
+  const count = cfg.count !== undefined ? cfg.count : 8;
+  const method = cfg.mode ? Color.prototype[cfg.mode] : null;
+  const values = [];
+
+  for (let i = 0; i < count; ++i) {
+    const f = i / count;
+    const v = method ?
+      method.call(Color(c), f).rgbString() :
+      color(i);
+
+    values.push(v);
+  }
+
+  return values;
+}
+
+export function transparentize(c, opacity) {
+  const alpha = opacity === undefined ? 0.5 : 1 - opacity;
+  return Color(c).alpha(alpha).rgbString();
+}

docs/.vuepress/config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  theme: '../',
+  dest: 'dist/docs',
+  title: 'vuepress-theme-chartjs',
+  description: 'VuePress theme for projects in the Chart.js organization',
+  head: [
+    ['link', {rel: 'icon', href: '/favicon.png'}],
+  ],
+  themeConfig: {
+    repo: 'simonbrunel/vuepress-theme-chartjs',
+    logo: '/favicon.png',
+    lastUpdated: 'Last Updated',
+    editLinks: true,
+    docsDir: 'docs',
+    chart: {
+      imports: [
+        ['.imports/register.js'],
+        ['.imports/utils.js', 'Utils'],
+      ],
+    },
+    sidebar: [
+      '',
+      'getting-started',
+      'configuration',
+      {
+        title: 'Chart Editor',
+        sidebarDepth: 0,
+        children: [
+          'chart-editor-simple',
+          'chart-editor-blocks',
+          'chart-editor-output',
+          'chart-editor-actions',
+        ],
+      },
+    ],
+  },
+};

docs/.vuepress/public/favicon.ico

@@ -0,0 +1,13 @@
+# Introduction
+
+VuePress theme for projects in the Chart.js organization.
+
+## Table of Contents
+
+- [Getting Started](getting-started.md)
+- [Configuration](configuration.md)
+- [Chart Editor](chart-editor-simple.md)
+
+## License
+
+`vuepress-theme-chartjs` is available under the [MIT license](https://github.com/simonbrunel/vuepress-theme-chartjs/blob/master/LICENSE.md).

docs/.vuepress/public/favicon.png

@@ -0,0 +1,93 @@
+---
+title: Actions
+---
+
+# Chart Editor Actions
+
+Actions allow users to manually trigger custom logic.
+
+## Usage
+
+````md
+```js
+module.exports = {
+  actions: [
+    {
+      name: 'Action Name',
+      handler(chart) {
+        // Do something with chart...
+      }
+    }
+  ]
+}
+```
+````
+
+## Demo
+
+```js chart-editor
+// <block:init:1>
+const DATA_COUNT = 10;
+
+Utils.srand(2);
+// </block:init>
+
+const config = /* <block:config:0> */{
+  type: 'line',
+  data: {
+    labels: new Array(DATA_COUNT).fill(0).map((_, i) => i),
+    datasets: [
+      {
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          max: 50,
+          min: 0,
+        })
+      },
+      {
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          max: 25,
+          min: 75,
+        })
+      }
+    ]
+  },
+  options: {
+    elements: {
+      line: {
+        borderColor: (ctx) => Utils.color(ctx.datasetIndex),
+      },
+      point: {
+        backgroundColor: (ctx) => Utils.color(ctx.datasetIndex),
+      }
+    }
+  }
+} /* </block:config> */;
+
+const actions = /* <block:actions:2> */[
+  {
+    name: 'Randomize',
+    handler: function(chart) {
+      chart.data.datasets.forEach(function(dataset, i) {
+        dataset.data = dataset.data.map(function(value) {
+          return Utils.rand(0, 100);
+        });
+      });
+
+      chart.update();
+    }
+  },
+  {
+    name: 'Alert',
+    handler: function(chart) {
+      alert('Action clicked for chart ' + chart.id);
+    }
+  }
+]/* </block:actions> */;
+
+module.exports = {
+  actions,
+  config,
+}
+```

docs/README.md

@@ -0,0 +1,83 @@
+---
+title: Blocks
+---
+
+# Chart Editor Blocks
+
+Blocks provides a way to display specific parts of the code in separate tabs.
+
+## Usage
+
+````md
+```js chart-editor
+// <block:{name}:{order}>
+  [ code ]
+// </block:{name}>
+```
+````
+
+For example:
+
+````md
+```js chart-editor
+// <block:config:0>
+const config = {
+  foo: 'bar',
+};
+// </block:config>
+
+const data = /* <block:data:1> */{
+  foo: 'bar',
+}/* </block:data> */;
+```
+````
+
+## Demo
+
+```js chart-editor
+// <block:init:2>
+const DATA_COUNT = 42;
+
+Utils.srand(8);
+// </block:init>
+
+const config = /* <block:config:0> */{
+  type: 'line',
+  data: {
+    labels: new Array(DATA_COUNT).fill(0).map((_, i) => i),
+    datasets: [
+      {
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          max: 10,
+          min: 0,
+        })
+      },
+      {
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          max: 20,
+          min: 10,
+        })
+      }
+    ]
+  },
+  options: {
+    aspectRatio: 1.5,
+    elements: {
+      line: {
+        borderColor: (ctx) => Utils.color(ctx.datasetIndex),
+        tension: 0.4,
+      },
+      point: {
+        backgroundColor: (ctx) => Utils.color(ctx.datasetIndex),
+        radius: (ctx) => (ctx.dataIndex / DATA_COUNT) * 6,
+      }
+    }
+  }
+} /* </block:config> */;
+
+module.exports = {
+  config,
+}
+```