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

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,
+};
+```

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,
+};