Add sample using Datalabels plugin (#107)

* Add sample using Datalabels plugin

* sets karma-rollup-preprocessor to version 7.0.7

docs/.vuepress/config.js

@@ -52,7 +52,8 @@ module.exports = {
           'tree',
           'captions',
           'dividers',
-          'rtl'
+          'rtl',
+          'datalabels'
         ],
         '/': [
           '',

docs/samples/datalabels.md

@@ -0,0 +1,78 @@
+# Using Datalabels plugin
+
+```js chart-editor
+// <block:setup:1>
+const DATA_COUNT = 12;
+const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};
+// </block:setup>
+
+// <block:utils:2>
+function colorFromRaw(ctx, border) {
+  if (ctx.type !== 'data') {
+    return 'transparent';
+  }
+  const value = ctx.raw.v;
+  let alpha = (1 + Math.log(value)) / 5;
+  const color = 'purple';
+  if (border) {
+    alpha += 0.01;
+  }
+  return helpers.color(color)
+    .alpha(alpha)
+    .rgbString();
+}
+// </block:utils>
+
+// <block:config:0>
+const config = {
+  type: 'treemap',
+  data: {
+    datasets: [
+      {
+        label: 'My First dataset',
+        tree: Utils.numbers(NUMBER_CFG),
+        borderColor: (ctx) => colorFromRaw(ctx, true),
+        borderWidth: 1,
+        spacing: 0,
+        backgroundColor: (ctx) => colorFromRaw(ctx),
+        datalabels: {
+          display: 'auto',
+          anchor: 'start',
+          align: 45,
+          formatter: (value) => Math.trunc(value.v),
+          color: 'white',
+          font: {
+            size: 20
+          }
+        }
+      }
+    ],
+  },
+  options: {
+    plugins: {
+      datalabels: {
+        display: true,
+      }
+    }
+  }
+};
+
+// </block:config>
+
+const actions = [
+  {
+    name: 'Randomize',
+    handler(chart) {
+      chart.data.datasets.forEach(dataset => {
+        dataset.tree = Utils.numbers(NUMBER_CFG);
+      });
+      chart.update();
+    }
+  },
+];
+
+module.exports = {
+  actions,
+  config,
+};
+```

docs/scripts/register.js

@@ -1,7 +1,9 @@
 import Chart from 'chart.js/auto';
 import {TreemapController, TreemapElement} from '../../dist/chartjs-chart-treemap.esm';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
-Chart.register(TreemapController, TreemapElement);
+Chart.register(TreemapController, TreemapElement, ChartDataLabels);
+Chart.defaults.plugins.datalabels.display = false;
 
 Chart.register({
   id: 'version',

package.json

@@ -47,6 +47,7 @@
     "chart.js": "^3.6.0",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-test-utils": "^0.4.0",
+    "chartjs-plugin-datalabels": "^2.0.0", 
     "concurrently": "^7.4.0",
     "cross-env": "^7.0.3",
     "date-fns": "^2.20.2",
@@ -62,7 +63,7 @@
     "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
-    "karma-rollup-preprocessor": "^7.0.7",
+    "karma-rollup-preprocessor": "7.0.7",
     "karma-spec-reporter": "^0.0.34",
     "karma-summary-reporter": "^3.0.0",
     "pixelmatch": "^5.2.1",