Sort docs sub menus alphabetically, add line and plugin sample (#10138)

* add sample plugin for doughnut empty state

* Add commented out sample, order sub cats alphabetically

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 10f9cddb80d6b3289c5cc601a920268f2d32c06e..e4fb3c1d1887ba8304339670ab08b66f0736f151 100644 (file)
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -134,40 +134,40 @@ module.exports = {
         {
           title: 'Bar Charts',
           children: [
-            'bar/vertical',
+            'bar/border-radius',
+            'bar/floating',
             'bar/horizontal',
             'bar/stacked',
             'bar/stacked-groups',
-            'bar/floating',
-            'bar/border-radius',
+            'bar/vertical',
           ]
         },
         {
           title: 'Line Charts',
           children: [
+            'line/interpolation',
             'line/line',
             'line/multi-axis',
+            'line/point-styling',
+            'line/segments',
             'line/stepped',
-            'line/interpolation',
             'line/styling',
-            // 'line/point-styling',
-            'line/segments',
           ]
         },
         {
           title: 'Other charts',
           children: [
             'other-charts/bubble',
-            'other-charts/scatter',
-            'other-charts/scatter-multi-axis',
+            'other-charts/combo-bar-line',
             'other-charts/doughnut',
-            'other-charts/pie',
             'other-charts/multi-series-pie',
+            'other-charts/pie',
             'other-charts/polar-area',
             'other-charts/polar-area-center-labels',
             'other-charts/radar',
             'other-charts/radar-skip-points',
-            'other-charts/combo-bar-line',
+            'other-charts/scatter',
+            'other-charts/scatter-multi-axis',
             'other-charts/stacked-bar-line',
           ]
         },
@@ -188,29 +188,29 @@ module.exports = {
             'scales/linear-min-max-suggested',
             'scales/linear-step-size',
             'scales/log',
+            'scales/stacked',
             'scales/time-line',
             'scales/time-max-span',
             'scales/time-combo',
-            'scales/stacked'
           ]
         },
         {
           title: 'Scale Options',
           children: [
+            'scale-options/center',
             'scale-options/grid',
             'scale-options/ticks',
             'scale-options/titles',
-            'scale-options/center'
           ]
         },
         {
           title: 'Legend',
           children: [
-            'legend/position',
-            'legend/title',
-            'legend/point-style',
             'legend/events',
             'legend/html',
+            'legend/point-style',
+            'legend/position',
+            'legend/title',
           ]
         },
         {
@@ -227,11 +227,11 @@ module.exports = {
         },        {
           title: 'Tooltip',
           children: [
-            'tooltip/position',
-            'tooltip/interactions',
-            'tooltip/point-style',
             'tooltip/content',
             'tooltip/html',
+            'tooltip/interactions',
+            'tooltip/point-style',
+            'tooltip/position',
           ]
         },
         {
@@ -239,8 +239,8 @@ module.exports = {
           children: [
             'scriptable/bar',
             'scriptable/bubble',
-            'scriptable/pie',
             'scriptable/line',
+            'scriptable/pie',
             'scriptable/polar',
             'scriptable/radar',
           ]
@@ -259,18 +259,19 @@ module.exports = {
           title: 'Advanced',
           children: [
             'advanced/data-decimation',
-            'advanced/progress-bar',
-            'advanced/radial-gradient',
-            'advanced/linear-gradient',
-            'advanced/programmatic-events',
             'advanced/derived-axis-type',
             'advanced/derived-chart-type',
+            'advanced/linear-gradient',
+            'advanced/programmatic-events',
+            'advanced/progress-bar',
+            'advanced/radial-gradient',
           ]
         },
         {
           title: 'Plugins',
           children: [
             'plugins/chart-area-border',
+            'plugins/doughnut-empty-state',
             'plugins/quadrants',
           ]
         },
@@ -291,11 +292,11 @@ module.exports = {
         {
           title: 'General',
           children: [
-            'general/data-structures',
             'general/accessibility',
-            'general/options',
             'general/colors',
+            'general/data-structures',
             'general/fonts',
+            'general/options',
             'general/padding',
             'general/performance'
           ]
@@ -304,33 +305,33 @@ module.exports = {
           title: 'Configuration',
           children: [
             'configuration/',
-            'configuration/responsive',
+            'configuration/animations',
+            'configuration/canvas-background',
+            'configuration/decimation',
             'configuration/device-pixel-ratio',
-            'configuration/locale',
+            'configuration/elements',
             'configuration/interactions',
-            'configuration/canvas-background',
-            'configuration/animations',
             'configuration/layout',
             'configuration/legend',
-            'configuration/title',
+            'configuration/locale',
+            'configuration/responsive',
             'configuration/subtitle',
+            'configuration/title',
             'configuration/tooltip',
-            'configuration/elements',
-            'configuration/decimation'
           ]
         },
         {
           title: 'Chart Types',
           children: [
-            'charts/line',
+            'charts/area',
             'charts/bar',
-            'charts/radar',
+            'charts/bubble',
             'charts/doughnut',
+            'charts/line',
+            'charts/mixed',
             'charts/polar',
-            'charts/bubble',
+            'charts/radar',
             'charts/scatter',
-            'charts/area',
-            'charts/mixed'
           ]
         },
         {
@@ -364,13 +365,13 @@ module.exports = {
           children: [
             'developers/',
             'developers/api',
-            ['api/', 'TypeDoc'],
-            'developers/updates',
-            'developers/plugins',
-            'developers/charts',
             'developers/axes',
+            'developers/charts',
             'developers/contributing',
-            'developers/publishing'
+            'developers/plugins',
+            'developers/publishing',
+            ['api/', 'TypeDoc'],
+            'developers/updates',
           ]
         },
       ],

diff --git a/docs/samples/line/point-styling.md b/docs/samples/line/point-styling.md
new file mode 100644 (file)
index 0000000..4a24c4d
--- /dev/null
+++ b/docs/samples/line/point-styling.md
@@ -0,0 +1,136 @@
+# Point Styling
+
+```js chart-editor
+// <block:actions:2>
+const actions = [
+  {
+    name: 'pointStyle: circle (default)',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'cirlce';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: cross',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'cross';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: crossRot',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'crossRot';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: dash',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'dash';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: line',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'line';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: rect',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'rect';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: rectRounded',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'rectRounded';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: rectRot',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'rectRot';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: star',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'star';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: triangle',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'triangle';
+      });
+      chart.update();
+    }
+  }
+];
+// </block:actions>
+
+// <block:setup:1>
+const data = {
+  labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
+  datasets: [
+    {
+      label: 'Dataset',
+      data: Utils.numbers({count: 6, min: -100, max: 100}),
+      borderColor: Utils.CHART_COLORS.red,
+      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
+      pointStyle: 'circle',
+      pointRadius: 10,
+      pointHoverRadius: 15
+    }
+  ]
+};
+// </block:setup>
+
+// <block:config:0>
+const config = {
+  type: 'line',
+  data: data,
+  options: {
+    responsive: true,
+    plugins: {
+      title: {
+        display: true,
+        text: (ctx) => 'Point Style: ' + ctx.chart.data.datasets[0].pointStyle,
+      }
+    }
+  }
+};
+// </block:config>
+
+module.exports = {
+  actions: actions,
+  config: config,
+};
+```

diff --git a/docs/samples/plugins/doughnut-empty-state.md b/docs/samples/plugins/doughnut-empty-state.md
new file mode 100644 (file)
index 0000000..974102a
--- /dev/null
+++ b/docs/samples/plugins/doughnut-empty-state.md
@@ -0,0 +1,77 @@
+# Doughnut Empty State
+
+```js chart-editor
+// <block:data:2>
+const data = {
+  labels: [],
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: []
+    }
+  ]
+};
+// </block:data>
+
+// <block:plugin:1>
+const plugin = {
+  id: 'emptyDoughnut',
+  afterDraw(chart, args, options) {
+    const {datasets} = chart.data;
+    const {color, width, radiusDecrease} = options;
+    let hasData = false;
+
+    for (let i = 0; i < datasets.length; i += 1) {
+      const dataset = datasets[i];
+      hasData |= dataset.data.length > 0;
+    }
+
+    if (!hasData) {
+      const {chartArea: {left, top, right, bottom}, ctx} = chart;
+      const centerX = (left + right) / 2;
+      const centerY = (top + bottom) / 2;
+      const r = Math.min(right - left, bottom - top) / 2;
+
+      ctx.beginPath();
+      ctx.lineWidth = width || 2;
+      ctx.strokeStyle = color || 'rgba(255, 128, 0, 0.5)';
+      ctx.arc(centerX, centerY, (r - radiusDecrease || 0), 0, 2 * Math.PI);
+      ctx.stroke();
+    }
+  }
+};
+// </block:plugin>
+
+// <block:config:0>
+const config = {
+  type: 'doughnut',
+  data: data,
+  options: {
+    plugins: {
+      emptyDoughnut: {
+        color: 'rgba(255, 128, 0, 0.5)',
+        width: 2,
+        radiusDecrease: 20
+      }
+    }
+  },
+  plugins: [plugin]
+};
+// </block:config>
+
+const actions = [
+  {
+    name: 'Randomize',
+    handler(chart) {
+      chart.data.datasets.forEach(dataset => {
+        dataset.data = Utils.points(NUMBER_CFG);
+      });
+      chart.update();
+    }
+  },
+];
+
+module.exports = {
+  actions,
+  config,
+};