From d45d49b4a90bedefe3481fdb08438a99324f88e5 Mon Sep 17 00:00:00 2001
From: Jacco van den Berg <jaccoberg2281@gmail.com>
Date: Sun, 6 Feb 2022 15:58:57 +0100
Subject: [PATCH] add sample plugin for doughnut empty state

---
 docs/.vuepress/config.js                     |  1 +
 docs/samples/plugins/doughnut-empty-state.md | 77 ++++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 docs/samples/plugins/doughnut-empty-state.md

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 10f9cddb80d..09aa7e84314 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -272,6 +272,7 @@ module.exports = {
           children: [
             'plugins/chart-area-border',
             'plugins/quadrants',
+            'plugins/doughnut-empty-state',
           ]
         },
         'utils'
diff --git a/docs/samples/plugins/doughnut-empty-state.md b/docs/samples/plugins/doughnut-empty-state.md
new file mode 100644
index 00000000000..974102a82b9
--- /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,
+};