chartjs-chart-treemap 1.0.1 → 2.0.1

package/README.md

@@ -1,17 +1,20 @@
 # chartjs-chart-treemap
 
-[Chart.js](https://www.chartjs.org/) **v3.0.0** module for creating treemap charts. Implementation for Chart.js v2 is in [2.x branch](https://github.com/kurkle/chartjs-chart-treemap/tree/2.x)
+[Chart.js](https://www.chartjs.org/) **v3.6.0** module for creating treemap charts. Implementation for Chart.js v2 is in [2.x branch](https://github.com/kurkle/chartjs-chart-treemap/tree/2.x)
 
 [![npm](https://img.shields.io/npm/v/chartjs-chart-treemap.svg)](https://www.npmjs.com/package/chartjs-chart-treemap)
 [![release](https://img.shields.io/github/release/kurkle/chartjs-chart-treemap.svg?style=flat-square)](https://github.com/kurkle/chartjs-chart-treemap/releases/latest)
 ![npm bundle size](https://img.shields.io/bundlephobia/min/chartjs-chart-treemap.svg)
-[![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://chartjs-chart-treemap.pages.dev)
 ![GitHub](https://img.shields.io/github/license/kurkle/chartjs-chart-treemap.svg)
-[![Coverage Status](https://coveralls.io/repos/github/kurkle/chartjs-chart-treemap/badge.svg)](https://coveralls.io/github/kurkle/chartjs-chart-treemap)
-[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/kurkle/chartjs-chart-treemap.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/kurkle/chartjs-chart-treemap/context:javascript)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-chart-treemap&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-treemap)
+[![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://chartjs-chart-treemap.pages.dev)
 
 ![TreeMap Example Image](treemap.png)
 
+## Documentation
+
+You can find documentation for chartjs-chart-treemap at [https://chartjs-chart-treemap.pages.dev/](https://chartjs-chart-treemap.pages.dev/).
+
 ## Development
 
 You first need to install node dependencies  (requires [Node.js](https://nodejs.org/)):

package/dist/chartjs-chart-treemap.esm.js

@@ -1,11 +1,11 @@
 /*!
- * chartjs-chart-treemap v1.0.1
+ * chartjs-chart-treemap v2.0.1
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2021 Jukka Kurkela
  * Released under the MIT license
  */
-import { DatasetController, registry, Element } from 'chart.js';
-import { toFont, valueOrDefault } from 'chart.js/helpers';
+import { Chart, registry, DatasetController, Element } from 'chart.js';
+import { toFont, valueOrDefault, isArray } from 'chart.js/helpers';
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
 function flatten(input) {
@@ -108,6 +108,13 @@ function sum(values, key) {
   return s;
 }
 
+function requireVersion(min, ver) {
+  const parts = ver.split('.');
+  if (!min.split('.').reduce((a, c, i) => a && c <= parts[i], true)) {
+    throw new Error(`Chart.js v${ver} is not supported. v${min} or newer is required.`);
+  }
+}
+
 function round(v, n) {
   // @ts-ignore
   return (+(Math.round(v + 'e+' + n) + 'e-' + n)) || 0;
@@ -346,7 +353,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
-var version = "1.0.1";
+var version = "2.0.1";
 
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
@@ -383,35 +390,47 @@ function shouldDrawCaption(rect, font) {
 
 function drawCaption(ctx, rect, item, opts, levels) {
   ctx.save();
-  ctx.fillStyle = opts.color;
-  ctx.font = opts.font.string;
   ctx.beginPath();
   ctx.rect(rect.x, rect.y, rect.width, rect.height);
   ctx.clip();
   if (!('l' in item) || item.l === levels) {
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
     drawLabels(ctx, item, rect);
-  } else if (opts.groupLabels) {
-    ctx.textAlign = opts.rtl ? 'end' : 'start';
-    ctx.textBaseline = 'top';
-    const x = opts.rtl ? rect.x + rect.width - opts.borderWidth - 3 : rect.x + opts.borderWidth + 3;
-    ctx.fillText(item.g, x, rect.y + opts.borderWidth + 3);
+  } else if (opts.captions && opts.captions.display) {
+    drawCaptionLabel(ctx, item, rect);
   }
   ctx.restore();
 }
 
+function drawCaptionLabel(ctx, item, rect) {
+  const opts = rect.options;
+  const captionsOpts = opts.captions || {};
+  const borderWidth = opts.borderWidth || 0;
+  const spacing = valueOrDefault(opts.spacing, 0) + borderWidth;
+  const color = (rect.active ? captionsOpts.hoverColor : captionsOpts.color) || captionsOpts.color;
+  const padding = captionsOpts.padding;
+  const align = captionsOpts.align || (opts.rtl ? 'right' : 'left');
+  const optFont = (rect.active ? captionsOpts.hoverFont : captionsOpts.font) || captionsOpts.font;
+  const font = toFont(optFont);
+  const x = calculateX(rect, align, padding, borderWidth);
+  ctx.fillStyle = color;
+  ctx.font = font.string;
+  ctx.textAlign = align;
+  ctx.textBaseline = 'middle';
+  ctx.fillText(captionsOpts.formatter || item.g, x, rect.y + padding + spacing + (font.lineHeight / 2));
+}
+
 function drawDivider(ctx, rect) {
   const opts = rect.options;
+  const dividersOpts = opts.dividers || {};
   const w = rect.width || rect.w;
   const h = rect.height || rect.h;
 
   ctx.save();
-  ctx.strokeStyle = opts.dividerColor || 'black';
-  ctx.lineCap = opts.dividerCapStyle;
-  ctx.setLineDash(opts.dividerDash || []);
-  ctx.lineDashOffset = opts.dividerDashOffset;
-  ctx.lineWidth = opts.dividerWidth;
+  ctx.strokeStyle = dividersOpts.lineColor || 'black';
+  ctx.lineCap = dividersOpts.lineCapStyle;
+  ctx.setLineDash(dividersOpts.lineDash || []);
+  ctx.lineDashOffset = dividersOpts.lineDashOffset;
+  ctx.lineWidth = dividersOpts.lineWidth;
   ctx.beginPath();
   if (w > h) {
     const w2 = w / 2;
@@ -426,12 +445,15 @@ function drawDivider(ctx, rect) {
   ctx.restore();
 }
 
-function buildData(dataset, mainRect, font) {
+function buildData(dataset, mainRect, captions) {
   const key = dataset.key || '';
   let tree = dataset.tree || [];
   const groups = dataset.groups || [];
   const glen = groups.length;
-  const sp = (dataset.spacing || 0) + (dataset.borderWidth || 0);
+  const sp = valueOrDefault(dataset.spacing, 0) + valueOrDefault(dataset.borderWidth, 0);
+  const captionsFont = captions.font || {};
+  const font = toFont(captionsFont);
+  const padding = valueOrDefault(captions.padding, 3);
 
   function recur(gidx, rect, parent, gs) {
     const g = groups[gidx];
@@ -443,10 +465,9 @@ function buildData(dataset, mainRect, font) {
     if (gidx < glen - 1) {
       gsq.forEach((sq) => {
         subRect = {x: sq.x + sp, y: sq.y + sp, w: sq.w - 2 * sp, h: sq.h - 2 * sp};
-
-        if (valueOrDefault(dataset.groupLabels, true) && shouldDrawCaption(sq, font)) {
-          subRect.y += font.lineHeight;
-          subRect.h -= font.lineHeight;
+        if (valueOrDefault(captions.display, true) && shouldDrawCaption(sq, font)) {
+          subRect.y += font.lineHeight + padding * 2;
+          subRect.h -= font.lineHeight + padding * 2;
         }
         ret.push(...recur(gidx + 1, subRect, sq.g, sq.s));
       });
@@ -465,10 +486,49 @@ function buildData(dataset, mainRect, font) {
 
 function drawLabels(ctx, item, rect) {
   const opts = rect.options;
-  const lh = opts.font.lineHeight;
-  const labels = (opts.label || item.g + '\n' + item.v).split('\n');
-  const y = rect.y + rect.height / 2 - labels.length * lh / 4;
-  labels.forEach((l, i) => ctx.fillText(l, rect.x + rect.width / 2, y + i * lh));
+  const labelsOpts = opts.labels;
+  if (!labelsOpts || !labelsOpts.display) {
+    return;
+  }
+  const optColor = (rect.active ? labelsOpts.hoverColor : labelsOpts.color) || labelsOpts.color;
+  const optFont = (rect.active ? labelsOpts.hoverFont : labelsOpts.font) || labelsOpts.font;
+  const font = toFont(optFont);
+  const lh = font.lineHeight;
+  const label = labelsOpts.formatter;
+  if (label) {
+    const labels = isArray(label) ? label : [label];
+    const xyPoint = calculateXYLabel(opts, rect, labels, lh);
+    ctx.font = font.string;
+    ctx.textAlign = labelsOpts.align;
+    ctx.textBaseline = labelsOpts.position;
+    ctx.fillStyle = optColor;
+    labels.forEach((l, i) => ctx.fillText(l, xyPoint.x, xyPoint.y + i * lh));
+  }
+}
+
+function calculateXYLabel(options, rect, labels, lineHeight) {
+  const labelsOpts = options.labels;
+  const borderWidth = options.borderWidth || 0;
+  const {align, position, padding} = labelsOpts;
+  let x, y;
+  x = calculateX(rect, align, padding, borderWidth);
+  if (position === 'top') {
+    y = rect.y + padding + borderWidth;
+  } else if (position === 'bottom') {
+    y = rect.y + rect.height - padding - borderWidth - (labels.length - 1) * lineHeight;
+  } else {
+    y = rect.y + rect.height / 2 - labels.length * lineHeight / 4;
+  }
+  return {x, y};
+}
+
+function calculateX(rect, align, padding, borderWidth) {
+  if (align === 'left') {
+    return rect.x + padding + borderWidth;
+  } else if (align === 'right') {
+    return rect.x + rect.width - padding - borderWidth;
+  }
+  return rect.x + rect.width / 2;
 }
 
 class TreemapController extends DatasetController {
@@ -490,7 +550,7 @@ class TreemapController extends DatasetController {
     const meta = me.getMeta();
     const dataset = me.getDataset();
     const groups = dataset.groups || (dataset.groups = []);
-    const font = toFont(dataset.font);
+    const captions = dataset.captions ? dataset.captions : {};
     const area = me.chart.chartArea;
     const key = dataset.key || '';
     const rtl = !!dataset.rtl;
@@ -501,7 +561,8 @@ class TreemapController extends DatasetController {
       me._rect = mainRect;
       me._groups = groups.slice();
       me._key = key;
-      dataset.data = buildData(dataset, mainRect, font);
+
+      dataset.data = buildData(dataset, mainRect, captions);
       // @ts-ignore using private stuff
       me._dataCheck();
       // @ts-ignore using private stuff
@@ -514,7 +575,7 @@ class TreemapController extends DatasetController {
   resolveDataElementOptions(index, mode) {
     const options = super.resolveDataElementOptions(index, mode);
     const result = Object.isFrozen(options) ? Object.assign({}, options) : options;
-    result.font = toFont(options.font);
+    result.font = toFont(options.captions.font);
     return result;
   }
 
@@ -553,13 +614,11 @@ class TreemapController extends DatasetController {
     for (let i = 0, ilen = metadata.length; i < ilen; ++i) {
       const rect = metadata[i];
       const item = data[i];
-      if (rect.options.groupDividers && item._data.children.length > 1) {
+      const dividersOpts = rect.options.dividers || {};
+      if (dividersOpts.display && item._data.children.length > 1) {
         drawDivider(ctx, rect);
       }
     }
-    if (this.getDataset().groupDividers) {
-      drawDivider(ctx, this._rect);
-    }
   }
 
   _drawRects(ctx, data, metadata, levels) {
@@ -569,7 +628,7 @@ class TreemapController extends DatasetController {
       if (!rect.hidden) {
         rect.draw(ctx);
         const opts = rect.options;
-        if (shouldDrawCaption(rect, opts.font) && item.g) {
+        if (shouldDrawCaption(rect, opts.captions.font)) {
           drawCaption(ctx, rect, item, opts, levels);
         }
       }
@@ -596,12 +655,25 @@ TreemapController.version = version;
 TreemapController.defaults = {
   dataElementType: 'treemap',
 
-  groupLabels: true,
+  animations: {
+    numbers: {
+      type: 'number',
+      properties: ['x', 'y', 'width', 'height']
+    },
+  },
+
   borderWidth: 0,
   spacing: 0.5,
-  groupDividers: false,
-  dividerWidth: 1
+  dividers: {
+    display: false,
+    lineWidth: 1,
+  }
+
+};
 
+TreemapController.descriptors = {
+  _scriptable: true,
+  _indexable: false
 };
 
 TreemapController.overrides = {
@@ -645,6 +717,10 @@ TreemapController.overrides = {
   },
 };
 
+TreemapController.beforeRegister = function() {
+  requireVersion('3.6', Chart.version);
+};
+
 TreemapController.afterRegister = function() {
   const tooltipPlugin = registry.plugins.get('tooltip');
   if (tooltipPlugin) {
@@ -769,7 +845,6 @@ class TreemapElement extends Element {
       ctx.fillStyle = options.backgroundColor;
       ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
     }
-
     ctx.restore();
   }
 
@@ -805,20 +880,40 @@ class TreemapElement extends Element {
 TreemapElement.id = 'treemap';
 
 TreemapElement.defaults = {
-  borderSkipped: undefined,
   borderWidth: undefined,
-  color: undefined,
-  dividerCapStyle: 'butt',
-  dividerColor: 'black',
-  dividerDash: undefined,
-  dividerDashOffset: 0,
-  dividerWidth: 0,
-  font: {},
-  groupDividers: false,
-  groupLabels: undefined,
   spacing: undefined,
   label: undefined,
-  rtl: undefined
+  rtl: undefined,
+  dividers: {
+    display: false,
+    lineCapStyle: 'butt',
+    lineColor: 'black',
+    lineDash: undefined,
+    lineDashOffset: 0,
+    lineWidth: 0,
+  },
+  captions: {
+    align: undefined,
+    color: undefined,
+    display: true,
+    formatter: (ctx) => ctx.raw.g || '',
+    font: {},
+    padding: 3
+  },
+  labels: {
+    align: 'center',
+    color: undefined,
+    display: false,
+    formatter: (ctx) => ctx.raw.g ? [ctx.raw.g, ctx.raw.v] : ctx.raw.v,
+    font: {},
+    position: 'middle',
+    padding: 3
+  }
+};
+
+TreemapElement.descriptors = {
+  _scriptable: true,
+  _indexable: false
 };
 
 TreemapElement.defaultRoutes = {

package/dist/chartjs-chart-treemap.js

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-treemap v1.0.1
+ * chartjs-chart-treemap v2.0.1
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2021 Jukka Kurkela
  * Released under the MIT license
@@ -7,8 +7,8 @@
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('chart.js'), require('chart.js/helpers')) :
 typeof define === 'function' && define.amd ? define(['exports', 'chart.js', 'chart.js/helpers'], factory) :
-(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['chartjs-chart-treemap'] = {}, global.Chart, global.Chart.helpers));
-}(this, (function (exports, chart_js, helpers) { 'use strict';
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["chartjs-chart-treemap"] = {}, global.Chart, global.Chart.helpers));
+})(this, (function (exports, chart_js, helpers) { 'use strict';
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
 function flatten(input) {
@@ -111,6 +111,13 @@ function sum(values, key) {
   return s;
 }
 
+function requireVersion(min, ver) {
+  const parts = ver.split('.');
+  if (!min.split('.').reduce((a, c, i) => a && c <= parts[i], true)) {
+    throw new Error(`Chart.js v${ver} is not supported. v${min} or newer is required.`);
+  }
+}
+
 function round(v, n) {
   // @ts-ignore
   return (+(Math.round(v + 'e+' + n) + 'e-' + n)) || 0;
@@ -349,7 +356,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
-var version = "1.0.1";
+var version = "2.0.1";
 
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
@@ -386,35 +393,47 @@ function shouldDrawCaption(rect, font) {
 
 function drawCaption(ctx, rect, item, opts, levels) {
   ctx.save();
-  ctx.fillStyle = opts.color;
-  ctx.font = opts.font.string;
   ctx.beginPath();
   ctx.rect(rect.x, rect.y, rect.width, rect.height);
   ctx.clip();
   if (!('l' in item) || item.l === levels) {
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
     drawLabels(ctx, item, rect);
-  } else if (opts.groupLabels) {
-    ctx.textAlign = opts.rtl ? 'end' : 'start';
-    ctx.textBaseline = 'top';
-    const x = opts.rtl ? rect.x + rect.width - opts.borderWidth - 3 : rect.x + opts.borderWidth + 3;
-    ctx.fillText(item.g, x, rect.y + opts.borderWidth + 3);
+  } else if (opts.captions && opts.captions.display) {
+    drawCaptionLabel(ctx, item, rect);
   }
   ctx.restore();
 }
 
+function drawCaptionLabel(ctx, item, rect) {
+  const opts = rect.options;
+  const captionsOpts = opts.captions || {};
+  const borderWidth = opts.borderWidth || 0;
+  const spacing = helpers.valueOrDefault(opts.spacing, 0) + borderWidth;
+  const color = (rect.active ? captionsOpts.hoverColor : captionsOpts.color) || captionsOpts.color;
+  const padding = captionsOpts.padding;
+  const align = captionsOpts.align || (opts.rtl ? 'right' : 'left');
+  const optFont = (rect.active ? captionsOpts.hoverFont : captionsOpts.font) || captionsOpts.font;
+  const font = helpers.toFont(optFont);
+  const x = calculateX(rect, align, padding, borderWidth);
+  ctx.fillStyle = color;
+  ctx.font = font.string;
+  ctx.textAlign = align;
+  ctx.textBaseline = 'middle';
+  ctx.fillText(captionsOpts.formatter || item.g, x, rect.y + padding + spacing + (font.lineHeight / 2));
+}
+
 function drawDivider(ctx, rect) {
   const opts = rect.options;
+  const dividersOpts = opts.dividers || {};
   const w = rect.width || rect.w;
   const h = rect.height || rect.h;
 
   ctx.save();
-  ctx.strokeStyle = opts.dividerColor || 'black';
-  ctx.lineCap = opts.dividerCapStyle;
-  ctx.setLineDash(opts.dividerDash || []);
-  ctx.lineDashOffset = opts.dividerDashOffset;
-  ctx.lineWidth = opts.dividerWidth;
+  ctx.strokeStyle = dividersOpts.lineColor || 'black';
+  ctx.lineCap = dividersOpts.lineCapStyle;
+  ctx.setLineDash(dividersOpts.lineDash || []);
+  ctx.lineDashOffset = dividersOpts.lineDashOffset;
+  ctx.lineWidth = dividersOpts.lineWidth;
   ctx.beginPath();
   if (w > h) {
     const w2 = w / 2;
@@ -429,12 +448,15 @@ function drawDivider(ctx, rect) {
   ctx.restore();
 }
 
-function buildData(dataset, mainRect, font) {
+function buildData(dataset, mainRect, captions) {
   const key = dataset.key || '';
   let tree = dataset.tree || [];
   const groups = dataset.groups || [];
   const glen = groups.length;
-  const sp = (dataset.spacing || 0) + (dataset.borderWidth || 0);
+  const sp = helpers.valueOrDefault(dataset.spacing, 0) + helpers.valueOrDefault(dataset.borderWidth, 0);
+  const captionsFont = captions.font || {};
+  const font = helpers.toFont(captionsFont);
+  const padding = helpers.valueOrDefault(captions.padding, 3);
 
   function recur(gidx, rect, parent, gs) {
     const g = groups[gidx];
@@ -446,10 +468,9 @@ function buildData(dataset, mainRect, font) {
     if (gidx < glen - 1) {
       gsq.forEach((sq) => {
         subRect = {x: sq.x + sp, y: sq.y + sp, w: sq.w - 2 * sp, h: sq.h - 2 * sp};
-
-        if (helpers.valueOrDefault(dataset.groupLabels, true) && shouldDrawCaption(sq, font)) {
-          subRect.y += font.lineHeight;
-          subRect.h -= font.lineHeight;
+        if (helpers.valueOrDefault(captions.display, true) && shouldDrawCaption(sq, font)) {
+          subRect.y += font.lineHeight + padding * 2;
+          subRect.h -= font.lineHeight + padding * 2;
         }
         ret.push(...recur(gidx + 1, subRect, sq.g, sq.s));
       });
@@ -468,10 +489,49 @@ function buildData(dataset, mainRect, font) {
 
 function drawLabels(ctx, item, rect) {
   const opts = rect.options;
-  const lh = opts.font.lineHeight;
-  const labels = (opts.label || item.g + '\n' + item.v).split('\n');
-  const y = rect.y + rect.height / 2 - labels.length * lh / 4;
-  labels.forEach((l, i) => ctx.fillText(l, rect.x + rect.width / 2, y + i * lh));
+  const labelsOpts = opts.labels;
+  if (!labelsOpts || !labelsOpts.display) {
+    return;
+  }
+  const optColor = (rect.active ? labelsOpts.hoverColor : labelsOpts.color) || labelsOpts.color;
+  const optFont = (rect.active ? labelsOpts.hoverFont : labelsOpts.font) || labelsOpts.font;
+  const font = helpers.toFont(optFont);
+  const lh = font.lineHeight;
+  const label = labelsOpts.formatter;
+  if (label) {
+    const labels = helpers.isArray(label) ? label : [label];
+    const xyPoint = calculateXYLabel(opts, rect, labels, lh);
+    ctx.font = font.string;
+    ctx.textAlign = labelsOpts.align;
+    ctx.textBaseline = labelsOpts.position;
+    ctx.fillStyle = optColor;
+    labels.forEach((l, i) => ctx.fillText(l, xyPoint.x, xyPoint.y + i * lh));
+  }
+}
+
+function calculateXYLabel(options, rect, labels, lineHeight) {
+  const labelsOpts = options.labels;
+  const borderWidth = options.borderWidth || 0;
+  const {align, position, padding} = labelsOpts;
+  let x, y;
+  x = calculateX(rect, align, padding, borderWidth);
+  if (position === 'top') {
+    y = rect.y + padding + borderWidth;
+  } else if (position === 'bottom') {
+    y = rect.y + rect.height - padding - borderWidth - (labels.length - 1) * lineHeight;
+  } else {
+    y = rect.y + rect.height / 2 - labels.length * lineHeight / 4;
+  }
+  return {x, y};
+}
+
+function calculateX(rect, align, padding, borderWidth) {
+  if (align === 'left') {
+    return rect.x + padding + borderWidth;
+  } else if (align === 'right') {
+    return rect.x + rect.width - padding - borderWidth;
+  }
+  return rect.x + rect.width / 2;
 }
 
 class TreemapController extends chart_js.DatasetController {
@@ -493,7 +553,7 @@ class TreemapController extends chart_js.DatasetController {
     const meta = me.getMeta();
     const dataset = me.getDataset();
     const groups = dataset.groups || (dataset.groups = []);
-    const font = helpers.toFont(dataset.font);
+    const captions = dataset.captions ? dataset.captions : {};
     const area = me.chart.chartArea;
     const key = dataset.key || '';
     const rtl = !!dataset.rtl;
@@ -504,7 +564,8 @@ class TreemapController extends chart_js.DatasetController {
       me._rect = mainRect;
       me._groups = groups.slice();
       me._key = key;
-      dataset.data = buildData(dataset, mainRect, font);
+
+      dataset.data = buildData(dataset, mainRect, captions);
       // @ts-ignore using private stuff
       me._dataCheck();
       // @ts-ignore using private stuff
@@ -517,7 +578,7 @@ class TreemapController extends chart_js.DatasetController {
   resolveDataElementOptions(index, mode) {
     const options = super.resolveDataElementOptions(index, mode);
     const result = Object.isFrozen(options) ? Object.assign({}, options) : options;
-    result.font = helpers.toFont(options.font);
+    result.font = helpers.toFont(options.captions.font);
     return result;
   }
 
@@ -556,13 +617,11 @@ class TreemapController extends chart_js.DatasetController {
     for (let i = 0, ilen = metadata.length; i < ilen; ++i) {
       const rect = metadata[i];
       const item = data[i];
-      if (rect.options.groupDividers && item._data.children.length > 1) {
+      const dividersOpts = rect.options.dividers || {};
+      if (dividersOpts.display && item._data.children.length > 1) {
         drawDivider(ctx, rect);
       }
     }
-    if (this.getDataset().groupDividers) {
-      drawDivider(ctx, this._rect);
-    }
   }
 
   _drawRects(ctx, data, metadata, levels) {
@@ -572,7 +631,7 @@ class TreemapController extends chart_js.DatasetController {
       if (!rect.hidden) {
         rect.draw(ctx);
         const opts = rect.options;
-        if (shouldDrawCaption(rect, opts.font) && item.g) {
+        if (shouldDrawCaption(rect, opts.captions.font)) {
           drawCaption(ctx, rect, item, opts, levels);
         }
       }
@@ -599,12 +658,25 @@ TreemapController.version = version;
 TreemapController.defaults = {
   dataElementType: 'treemap',
 
-  groupLabels: true,
+  animations: {
+    numbers: {
+      type: 'number',
+      properties: ['x', 'y', 'width', 'height']
+    },
+  },
+
   borderWidth: 0,
   spacing: 0.5,
-  groupDividers: false,
-  dividerWidth: 1
+  dividers: {
+    display: false,
+    lineWidth: 1,
+  }
+
+};
 
+TreemapController.descriptors = {
+  _scriptable: true,
+  _indexable: false
 };
 
 TreemapController.overrides = {
@@ -648,6 +720,10 @@ TreemapController.overrides = {
   },
 };
 
+TreemapController.beforeRegister = function() {
+  requireVersion('3.6', chart_js.Chart.version);
+};
+
 TreemapController.afterRegister = function() {
   const tooltipPlugin = chart_js.registry.plugins.get('tooltip');
   if (tooltipPlugin) {
@@ -772,7 +848,6 @@ class TreemapElement extends chart_js.Element {
       ctx.fillStyle = options.backgroundColor;
       ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
     }
-
     ctx.restore();
   }
 
@@ -808,20 +883,40 @@ class TreemapElement extends chart_js.Element {
 TreemapElement.id = 'treemap';
 
 TreemapElement.defaults = {
-  borderSkipped: undefined,
   borderWidth: undefined,
-  color: undefined,
-  dividerCapStyle: 'butt',
-  dividerColor: 'black',
-  dividerDash: undefined,
-  dividerDashOffset: 0,
-  dividerWidth: 0,
-  font: {},
-  groupDividers: false,
-  groupLabels: undefined,
   spacing: undefined,
   label: undefined,
-  rtl: undefined
+  rtl: undefined,
+  dividers: {
+    display: false,
+    lineCapStyle: 'butt',
+    lineColor: 'black',
+    lineDash: undefined,
+    lineDashOffset: 0,
+    lineWidth: 0,
+  },
+  captions: {
+    align: undefined,
+    color: undefined,
+    display: true,
+    formatter: (ctx) => ctx.raw.g || '',
+    font: {},
+    padding: 3
+  },
+  labels: {
+    align: 'center',
+    color: undefined,
+    display: false,
+    formatter: (ctx) => ctx.raw.g ? [ctx.raw.g, ctx.raw.v] : ctx.raw.v,
+    font: {},
+    position: 'middle',
+    padding: 3
+  }
+};
+
+TreemapElement.descriptors = {
+  _scriptable: true,
+  _indexable: false
 };
 
 TreemapElement.defaultRoutes = {
@@ -835,9 +930,10 @@ exports.flatten = flatten;
 exports.group = group;
 exports.index = index;
 exports.isObject = isObject;
+exports.requireVersion = requireVersion;
 exports.sort = sort;
 exports.sum = sum;
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));

package/dist/chartjs-chart-treemap.min.js

@@ -1,7 +1,7 @@
 /*!
- * chartjs-chart-treemap v1.0.1
+ * chartjs-chart-treemap v2.0.1
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2021 Jukka Kurkela
  * Released under the MIT license
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["exports","chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["chartjs-chart-treemap"]={},t.Chart,t.Chart.helpers)}(this,(function(t,e,i){"use strict";function n(t){const e=[...t],i=[];for(;e.length;){const t=e.pop();Array.isArray(t)?e.push(...t):i.push(t)}return i.reverse()}function r(t,e,i,n,r){const o=Object.create(null),s=Object.create(null),a=[];let l,h,u,d;for(h=0,u=t.length;h<u;++h)d=t[h],n&&d[n]!==r||(l=d[e]||"",l in o||(o[l]=0,s[l]=[]),o[l]+=+d[i],s[l].push(d));return Object.keys(o).forEach((t=>{d={children:s[t]},d[i]=+o[t],d[e]=t,n&&(d[n]=r),a.push(d)})),a}function o(t){const e=typeof t;return"function"===e||"object"===e&&!!t}function s(t,e){let i,n=t.length;if(!n)return e;const r=o(t[0]);for(e=r?e:"v",i=0,n=t.length;i<n;++i)r?t[i]._idx=i:t[i]={v:t[i],_idx:i};return e}function a(t,e){e?t.sort(((t,i)=>+i[e]-+t[e])):t.sort(((t,e)=>+e-+t))}function l(t,e){let i,n,r;for(i=0,n=0,r=t.length;n<r;++n)i+=e?+t[n][e]:+t[n];return i}function h(t,e){return+(Math.round(t+"e+"+e)+"e-"+e)||0}function u(t,e,i,n){const r=t._normalized,o=e*r/i,s=Math.sqrt(r*o),a=r/s;return{d1:s,d2:a,w:"_ix"===n?s:a,h:"_ix"===n?a:s}}const d=(t,e)=>h(t.rtl?t.x+t.w-t._ix-e:t.x+t._ix,4);function c(t,e,i,n){const r={x:d(t,i.w),y:h(t.y+t._iy,4),w:h(i.w,4),h:h(i.h,4),a:h(e._normalized,4),v:e.value,s:n,_data:e._data};return e.group&&(r.g=e.group,r.l=e.level,r.gs=e.groupSum),r}class g{constructor(t){const e=this;t=t||{w:1,h:1},e.rtl=!!t.rtl,e.x=t.x||t.left||0,e.y=t.y||t.top||0,e._ix=0,e._iy=0,e.w=t.w||t.width||t.right-t.left,e.h=t.h||t.height||t.bottom-t.top}get area(){return this.w*this.h}get iw(){return this.w-this._ix}get ih(){return this.h-this._iy}get dir(){const t=this.ih;return t<=this.iw&&t>0?"y":"x"}get side(){return"x"===this.dir?this.iw:this.ih}map(t){const e=this,i=[],n=t.nsum,r=t.get(),o=e.dir,s=e.side,a=s*s,l="x"===o?"_ix":"_iy",h=n*n;let d=0,g=0;for(const n of r){const r=u(n,a,h,l);g+=r.d1,d=Math.max(d,r.d2),i.push(c(e,n,r,t.sum)),e[l]+=r.d1}return e["y"===o?"_ix":"_iy"]+=d,e[l]-=g,i}}const p=Math.min,f=Math.max;function m(t,e){const i=+e[t.key],n=i*t.ratio;return e._normalized=n,{min:p(t.min,i),max:f(t.max,i),sum:t.sum+i,nmin:p(t.nmin,n),nmax:f(t.nmax,n),nsum:t.nsum+n}}function x(t,e,i){t._arr.push(e),function(t,e){Object.assign(t,e)}(t,i)}class y{constructor(t,e){const i=this;i.key=t,i.ratio=e,i.reset()}get length(){return this._arr.length}reset(){const t=this;t._arr=[],t._hist=[],t.sum=0,t.nsum=0,t.min=1/0,t.max=-1/0,t.nmin=1/0,t.nmax=-1/0}push(t){x(this,t,m(this,t))}pushIf(t,e,...i){const n=m(this,t);if(!e((r=this,{min:r.min,max:r.max,sum:r.sum,nmin:r.nmin,nmax:r.nmax,nsum:r.nsum}),n,i))return t;var r;x(this,t,n)}get(){return this._arr}}function v(t,e,i){if(0===t.sum)return!0;const[n]=i,r=t.nsum*t.nsum,o=e.nsum*e.nsum,s=n*n,a=Math.max(s*t.nmax/r,r/(s*t.nmin));return Math.max(s*e.nmax/o,o/(s*e.nmin))<=a}function b(t,e,i,r,o,h){t=t||[];const u=[],d=new g(e),c=new y("value",d.area/l(t,i));let p=d.side;const f=t.length;let m,x;if(!f)return u;const b=t.slice();i=s(b,i),a(b,i);const w=t=>r&&b[t][r];for(m=0;m<f;++m)x={value:(_=m,i?+b[_][i]:+b[_]),groupSum:h,_data:t[b[m]._idx],level:void 0,group:void 0},r&&(x.level=o,x.group=w(m)),x=c.pushIf(x,v,p),x&&(u.push(d.map(c)),p=d.side,c.reset(),c.push(x));var _;return c.length&&u.push(d.map(c)),n(u)}function w(t,e){if(!e)return!1;const i=t.width||t.w,n=t.height||t.h,r=2*e.lineHeight;return i>r&&n>r}function _(t,e,i,n,r){if(t.save(),t.fillStyle=n.color,t.font=n.font.string,t.beginPath(),t.rect(e.x,e.y,e.width,e.height),t.clip(),"l"in i&&i.l!==r){if(n.groupLabels){t.textAlign=n.rtl?"end":"start",t.textBaseline="top";const r=n.rtl?e.x+e.width-n.borderWidth-3:e.x+n.borderWidth+3;t.fillText(i.g,r,e.y+n.borderWidth+3)}}else t.textAlign="center",t.textBaseline="middle",function(t,e,i){const n=i.options,r=n.font.lineHeight,o=(n.label||e.g+"\n"+e.v).split("\n"),s=i.y+i.height/2-o.length*r/4;o.forEach(((e,n)=>t.fillText(e,i.x+i.width/2,s+n*r)))}(t,i,e);t.restore()}function D(t,e){const i=e.options,n=e.width||e.w,r=e.height||e.h;if(t.save(),t.strokeStyle=i.dividerColor||"black",t.lineCap=i.dividerCapStyle,t.setLineDash(i.dividerDash||[]),t.lineDashOffset=i.dividerDashOffset,t.lineWidth=i.dividerWidth,t.beginPath(),n>r){const i=n/2;t.moveTo(e.x+i,e.y),t.lineTo(e.x+i,e.y+r)}else{const i=r/2;t.moveTo(e.x,e.y+i),t.lineTo(e.x+n,e.y+i)}t.stroke(),t.restore()}class O extends e.DatasetController{constructor(t,e){super(t,e),this._rect=void 0,this._key=void 0,this._groups=void 0}initialize(){this.enableOptionSharing=!0,super.initialize()}update(t){const e=this,n=e.getMeta(),o=e.getDataset(),s=o.groups||(o.groups=[]),a=i.toFont(o.font),l=e.chart.chartArea,h=o.key||"",u=!!o.rtl,d={x:l.left,y:l.top,w:l.right-l.left,h:l.bottom-l.top,rtl:u};var c,g;"reset"!==t&&(c=e._rect,g=d,c&&g&&c.x===g.x&&c.y===g.y&&c.w===g.w&&c.h===g.h)&&e._key===h&&!function(t,e){let i,n;if(t.lenght!==e.length)return!0;for(i=0,n=t.length;i<n;++i)if(t[i]!==e[i])return!0;return!1}(e._groups,s)||(e._rect=d,e._groups=s.slice(),e._key=h,o.data=function(t,e,n){const o=t.key||"";let s=t.tree||[];const a=t.groups||[],l=a.length,h=(t.spacing||0)+(t.borderWidth||0);return!s.length&&t.data.length&&(s=t.tree=t.data),l?function e(u,d,c,g){const p=a[u],f=u>0&&a[u-1],m=b(r(s,p,o,f,c),d,o,p,u,g),x=m.slice();let y;return u<l-1&&m.forEach((r=>{y={x:r.x+h,y:r.y+h,w:r.w-2*h,h:r.h-2*h},i.valueOrDefault(t.groupLabels,!0)&&w(r,n)&&(y.y+=n.lineHeight,y.h-=n.lineHeight),x.push(...e(u+1,y,r.g,r.s))})),x}(0,e):b(s,e,o)}(o,d,a),e._dataCheck(),e._resyncElements()),e.updateElements(n.data,0,n.data.length,t)}resolveDataElementOptions(t,e){const n=super.resolveDataElementOptions(t,e),r=Object.isFrozen(n)?Object.assign({},n):n;return r.font=i.toFont(n.font),r}updateElements(t,e,i,n){const r=this,o="reset"===n,s=r.getDataset(),a=r._rect.options=r.resolveDataElementOptions(e,n),l=r.getSharedOptions(a),h=r.includeOptions(n,l);for(let a=e;a<e+i;a++){const e=s.data[a],i=l||r.resolveDataElementOptions(a,n),u=o?0:e.h-2*i.spacing,d=o?0:e.w-2*i.spacing,c={x:e.x+i.spacing,y:e.y+i.spacing,width:d,height:u};h&&(c.options=i),r.updateElement(t[a],a,c,n)}r.updateSharedOptions(l,n,a)}_drawDividers(t,e,i){for(let n=0,r=i.length;n<r;++n){const r=i[n],o=e[n];r.options.groupDividers&&o._data.children.length>1&&D(t,r)}this.getDataset().groupDividers&&D(t,this._rect)}_drawRects(t,e,i,n){for(let r=0,o=i.length;r<o;++r){const o=i[r],s=e[r];if(!o.hidden){o.draw(t);const e=o.options;w(o,e.font)&&s.g&&_(t,o,s,e,n)}}}draw(){const t=this,e=t.chart.ctx,i=t.getMeta().data||[],n=t.getDataset(),r=(n.groups||[]).length-1,o=n.data||[];t._drawRects(e,o,i,r),t._drawDividers(e,o,i)}}function k(t,e){const{x:i,y:n,width:r,height:o}=t.getProps(["x","y","width","height"],e);return{left:i,top:n,right:i+r,bottom:n+o}}function C(t,e,i){return Math.max(Math.min(t,i),e)}function j(t){const e=k(t),i=e.right-e.left,n=e.bottom-e.top,r=function(t,e,i){let n,r,s,a;return o(t)?(n=+t.top||0,r=+t.right||0,s=+t.bottom||0,a=+t.left||0):n=r=s=a=+t||0,{t:C(n,0,i),r:C(r,0,e),b:C(s,0,i),l:C(a,0,e)}}(t.options.borderWidth,i/2,n/2);return{outer:{x:e.left,y:e.top,w:i,h:n},inner:{x:e.left+r.l,y:e.top+r.t,w:i-r.l-r.r,h:n-r.t-r.b}}}function E(t,e,i,n){const r=null===e,o=null===i,s=!(!t||r&&o)&&k(t,n);return s&&(r||e>=s.left&&e<=s.right)&&(o||i>=s.top&&i<=s.bottom)}O.id="treemap",O.version="1.0.1",O.defaults={dataElementType:"treemap",groupLabels:!0,borderWidth:0,spacing:.5,groupDividers:!1,dividerWidth:1},O.overrides={interaction:{mode:"point",intersect:!0},hover:{},plugins:{tooltip:{position:"treemap",intersect:!0,callbacks:{title(t){if(t.length){return t[0].dataset.key||""}return""},label(t){const e=t.dataset,i=e.data[t.dataIndex],n=i.g||e.label;return(n?n+": ":"")+i.v}}}},scales:{x:{type:"linear",display:!1},y:{type:"linear",display:!1}}},O.afterRegister=function(){const t=e.registry.plugins.get("tooltip");t&&(t.positioners.treemap=function(t){if(!t.length)return!1;return t[t.length-1].element.tooltipPosition()})},O.afterUnregister=function(){const t=e.registry.plugins.get("tooltip");t&&delete t.positioners.treemap};class S extends e.Element{constructor(t){super(),this.options=void 0,this.width=void 0,this.height=void 0,t&&Object.assign(this,t)}draw(t){const e=this.options,{inner:i,outer:n}=j(this);t.save(),n.w!==i.w||n.h!==i.h?(t.beginPath(),t.rect(n.x,n.y,n.w,n.h),t.clip(),t.rect(i.x,i.y,i.w,i.h),t.fillStyle=e.backgroundColor,t.fill(),t.fillStyle=e.borderColor,t.fill("evenodd")):(t.fillStyle=e.backgroundColor,t.fillRect(i.x,i.y,i.w,i.h)),t.restore()}inRange(t,e,i){return E(this,t,e,i)}inXRange(t,e){return E(this,t,null,e)}inYRange(t,e){return E(this,null,t,e)}getCenterPoint(t){const{x:e,y:i,width:n,height:r}=this.getProps(["x","y","width","height"],t);return{x:e+n/2,y:i+r/2}}tooltipPosition(){return this.getCenterPoint()}getRange(t){return"x"===t?this.width/2:this.height/2}}S.id="treemap",S.defaults={borderSkipped:void 0,borderWidth:void 0,color:void 0,dividerCapStyle:"butt",dividerColor:"black",dividerDash:void 0,dividerDashOffset:0,dividerWidth:0,font:{},groupDividers:!1,groupLabels:void 0,spacing:void 0,label:void 0,rtl:void 0},S.defaultRoutes={backgroundColor:"backgroundColor",borderColor:"borderColor"},e.Chart.register(O,S),t.flatten=n,t.group=r,t.index=s,t.isObject=o,t.sort=a,t.sum=l,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["exports","chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["chartjs-chart-treemap"]={},t.Chart,t.Chart.helpers)}(this,(function(t,e,n){"use strict";function i(t){const e=[...t],n=[];for(;e.length;){const t=e.pop();Array.isArray(t)?e.push(...t):n.push(t)}return n.reverse()}function r(t,e,n,i,r){const o=Object.create(null),s=Object.create(null),a=[];let l,h,u,c;for(h=0,u=t.length;h<u;++h)c=t[h],i&&c[i]!==r||(l=c[e]||"",l in o||(o[l]=0,s[l]=[]),o[l]+=+c[n],s[l].push(c));return Object.keys(o).forEach((t=>{c={children:s[t]},c[n]=+o[t],c[e]=t,i&&(c[i]=r),a.push(c)})),a}function o(t){const e=typeof t;return"function"===e||"object"===e&&!!t}function s(t,e){let n,i=t.length;if(!i)return e;const r=o(t[0]);for(e=r?e:"v",n=0,i=t.length;n<i;++n)r?t[n]._idx=n:t[n]={v:t[n],_idx:n};return e}function a(t,e){e?t.sort(((t,n)=>+n[e]-+t[e])):t.sort(((t,e)=>+e-+t))}function l(t,e){let n,i,r;for(n=0,i=0,r=t.length;i<r;++i)n+=e?+t[i][e]:+t[i];return n}function h(t,e){const n=e.split(".");if(!t.split(".").reduce(((t,e,i)=>t&&e<=n[i]),!0))throw new Error(`Chart.js v${e} is not supported. v${t} or newer is required.`)}function u(t,e){return+(Math.round(t+"e+"+e)+"e-"+e)||0}function c(t,e,n,i){const r=t._normalized,o=e*r/n,s=Math.sqrt(r*o),a=r/s;return{d1:s,d2:a,w:"_ix"===i?s:a,h:"_ix"===i?a:s}}const d=(t,e)=>u(t.rtl?t.x+t.w-t._ix-e:t.x+t._ix,4);function p(t,e,n,i){const r={x:d(t,n.w),y:u(t.y+t._iy,4),w:u(n.w,4),h:u(n.h,4),a:u(e._normalized,4),v:e.value,s:i,_data:e._data};return e.group&&(r.g=e.group,r.l=e.level,r.gs=e.groupSum),r}class g{constructor(t){const e=this;t=t||{w:1,h:1},e.rtl=!!t.rtl,e.x=t.x||t.left||0,e.y=t.y||t.top||0,e._ix=0,e._iy=0,e.w=t.w||t.width||t.right-t.left,e.h=t.h||t.height||t.bottom-t.top}get area(){return this.w*this.h}get iw(){return this.w-this._ix}get ih(){return this.h-this._iy}get dir(){const t=this.ih;return t<=this.iw&&t>0?"y":"x"}get side(){return"x"===this.dir?this.iw:this.ih}map(t){const e=this,n=[],i=t.nsum,r=t.get(),o=e.dir,s=e.side,a=s*s,l="x"===o?"_ix":"_iy",h=i*i;let u=0,d=0;for(const i of r){const r=c(i,a,h,l);d+=r.d1,u=Math.max(u,r.d2),n.push(p(e,i,r,t.sum)),e[l]+=r.d1}return e["y"===o?"_ix":"_iy"]+=u,e[l]-=d,n}}const f=Math.min,m=Math.max;function y(t,e){const n=+e[t.key],i=n*t.ratio;return e._normalized=i,{min:f(t.min,n),max:m(t.max,n),sum:t.sum+n,nmin:f(t.nmin,i),nmax:m(t.nmax,i),nsum:t.nsum+i}}function x(t,e,n){t._arr.push(e),function(t,e){Object.assign(t,e)}(t,n)}class v{constructor(t,e){const n=this;n.key=t,n.ratio=e,n.reset()}get length(){return this._arr.length}reset(){const t=this;t._arr=[],t._hist=[],t.sum=0,t.nsum=0,t.min=1/0,t.max=-1/0,t.nmin=1/0,t.nmax=-1/0}push(t){x(this,t,y(this,t))}pushIf(t,e,...n){const i=y(this,t);if(!e((r=this,{min:r.min,max:r.max,sum:r.sum,nmin:r.nmin,nmax:r.nmax,nsum:r.nsum}),i,n))return t;var r;x(this,t,i)}get(){return this._arr}}function w(t,e,n){if(0===t.sum)return!0;const[i]=n,r=t.nsum*t.nsum,o=e.nsum*e.nsum,s=i*i,a=Math.max(s*t.nmax/r,r/(s*t.nmin));return Math.max(s*e.nmax/o,o/(s*e.nmin))<=a}function b(t,e,n,r,o,h){t=t||[];const u=[],c=new g(e),d=new v("value",c.area/l(t,n));let p=c.side;const f=t.length;let m,y;if(!f)return u;const x=t.slice();n=s(x,n),a(x,n);const b=t=>r&&x[t][r];for(m=0;m<f;++m)y={value:(_=m,n?+x[_][n]:+x[_]),groupSum:h,_data:t[x[m]._idx],level:void 0,group:void 0},r&&(y.level=o,y.group=b(m)),y=d.pushIf(y,w,p),y&&(u.push(c.map(d)),p=c.side,d.reset(),d.push(y));var _;return d.length&&u.push(c.map(d)),i(u)}function _(t,e){if(!e)return!1;const n=t.width||t.w,i=t.height||t.h,r=2*e.lineHeight;return n>r&&i>r}function O(t,e,i,r,o){t.save(),t.beginPath(),t.rect(e.x,e.y,e.width,e.height),t.clip(),"l"in i&&i.l!==o?r.captions&&r.captions.display&&function(t,e,i){const r=i.options,o=r.captions||{},s=r.borderWidth||0,a=n.valueOrDefault(r.spacing,0)+s,l=(i.active?o.hoverColor:o.color)||o.color,h=o.padding,u=o.align||(r.rtl?"right":"left"),c=(i.active?o.hoverFont:o.font)||o.font,d=n.toFont(c),p=D(i,u,h,s);t.fillStyle=l,t.font=d.string,t.textAlign=u,t.textBaseline="middle",t.fillText(o.formatter||e.g,p,i.y+h+a+d.lineHeight/2)}(t,i,e):function(t,e,i){const r=i.options,o=r.labels;if(!o||!o.display)return;const s=(i.active?o.hoverColor:o.color)||o.color,a=(i.active?o.hoverFont:o.font)||o.font,l=n.toFont(a),h=l.lineHeight,u=o.formatter;if(u){const e=n.isArray(u)?u:[u],a=function(t,e,n,i){const r=t.labels,o=t.borderWidth||0,{align:s,position:a,padding:l}=r;let h,u;h=D(e,s,l,o),u="top"===a?e.y+l+o:"bottom"===a?e.y+e.height-l-o-(n.length-1)*i:e.y+e.height/2-n.length*i/4;return{x:h,y:u}}(r,i,e,h);t.font=l.string,t.textAlign=o.align,t.textBaseline=o.position,t.fillStyle=s,e.forEach(((e,n)=>t.fillText(e,a.x,a.y+n*h)))}}(t,0,e),t.restore()}function C(t,e){const n=e.options.dividers||{},i=e.width||e.w,r=e.height||e.h;if(t.save(),t.strokeStyle=n.lineColor||"black",t.lineCap=n.lineCapStyle,t.setLineDash(n.lineDash||[]),t.lineDashOffset=n.lineDashOffset,t.lineWidth=n.lineWidth,t.beginPath(),i>r){const n=i/2;t.moveTo(e.x+n,e.y),t.lineTo(e.x+n,e.y+r)}else{const n=r/2;t.moveTo(e.x,e.y+n),t.lineTo(e.x+i,e.y+n)}t.stroke(),t.restore()}function D(t,e,n,i){return"left"===e?t.x+n+i:"right"===e?t.x+t.width-n-i:t.x+t.width/2}class k extends e.DatasetController{constructor(t,e){super(t,e),this._rect=void 0,this._key=void 0,this._groups=void 0}initialize(){this.enableOptionSharing=!0,super.initialize()}update(t){const e=this,i=e.getMeta(),o=e.getDataset(),s=o.groups||(o.groups=[]),a=o.captions?o.captions:{},l=e.chart.chartArea,h=o.key||"",u=!!o.rtl,c={x:l.left,y:l.top,w:l.right-l.left,h:l.bottom-l.top,rtl:u};var d,p;"reset"!==t&&(d=e._rect,p=c,d&&p&&d.x===p.x&&d.y===p.y&&d.w===p.w&&d.h===p.h)&&e._key===h&&!function(t,e){let n,i;if(t.lenght!==e.length)return!0;for(n=0,i=t.length;n<i;++n)if(t[n]!==e[n])return!0;return!1}(e._groups,s)||(e._rect=c,e._groups=s.slice(),e._key=h,o.data=function(t,e,i){const o=t.key||"";let s=t.tree||[];const a=t.groups||[],l=a.length,h=n.valueOrDefault(t.spacing,0)+n.valueOrDefault(t.borderWidth,0),u=i.font||{},c=n.toFont(u),d=n.valueOrDefault(i.padding,3);return!s.length&&t.data.length&&(s=t.tree=t.data),l?function t(e,u,p,g){const f=a[e],m=e>0&&a[e-1],y=b(r(s,f,o,m,p),u,o,f,e,g),x=y.slice();let v;return e<l-1&&y.forEach((r=>{v={x:r.x+h,y:r.y+h,w:r.w-2*h,h:r.h-2*h},n.valueOrDefault(i.display,!0)&&_(r,c)&&(v.y+=c.lineHeight+2*d,v.h-=c.lineHeight+2*d),x.push(...t(e+1,v,r.g,r.s))})),x}(0,e):b(s,e,o)}(o,c,a),e._dataCheck(),e._resyncElements()),e.updateElements(i.data,0,i.data.length,t)}resolveDataElementOptions(t,e){const i=super.resolveDataElementOptions(t,e),r=Object.isFrozen(i)?Object.assign({},i):i;return r.font=n.toFont(i.captions.font),r}updateElements(t,e,n,i){const r=this,o="reset"===i,s=r.getDataset(),a=r._rect.options=r.resolveDataElementOptions(e,i),l=r.getSharedOptions(a),h=r.includeOptions(i,l);for(let a=e;a<e+n;a++){const e=s.data[a],n=l||r.resolveDataElementOptions(a,i),u=o?0:e.h-2*n.spacing,c=o?0:e.w-2*n.spacing,d={x:e.x+n.spacing,y:e.y+n.spacing,width:c,height:u};h&&(d.options=n),r.updateElement(t[a],a,d,i)}r.updateSharedOptions(l,i,a)}_drawDividers(t,e,n){for(let i=0,r=n.length;i<r;++i){const r=n[i],o=e[i];(r.options.dividers||{}).display&&o._data.children.length>1&&C(t,r)}}_drawRects(t,e,n,i){for(let r=0,o=n.length;r<o;++r){const o=n[r],s=e[r];if(!o.hidden){o.draw(t);const e=o.options;_(o,e.captions.font)&&O(t,o,s,e,i)}}}draw(){const t=this,e=t.chart.ctx,n=t.getMeta().data||[],i=t.getDataset(),r=(i.groups||[]).length-1,o=i.data||[];t._drawRects(e,o,n,r),t._drawDividers(e,o,n)}}function j(t,e){const{x:n,y:i,width:r,height:o}=t.getProps(["x","y","width","height"],e);return{left:n,top:i,right:n+r,bottom:i+o}}function E(t,e,n){return Math.max(Math.min(t,n),e)}function S(t){const e=j(t),n=e.right-e.left,i=e.bottom-e.top,r=function(t,e,n){let i,r,s,a;return o(t)?(i=+t.top||0,r=+t.right||0,s=+t.bottom||0,a=+t.left||0):i=r=s=a=+t||0,{t:E(i,0,n),r:E(r,0,e),b:E(s,0,n),l:E(a,0,e)}}(t.options.borderWidth,n/2,i/2);return{outer:{x:e.left,y:e.top,w:n,h:i},inner:{x:e.left+r.l,y:e.top+r.t,w:n-r.l-r.r,h:i-r.t-r.b}}}function M(t,e,n,i){const r=null===e,o=null===n,s=!(!t||r&&o)&&j(t,i);return s&&(r||e>=s.left&&e<=s.right)&&(o||n>=s.top&&n<=s.bottom)}k.id="treemap",k.version="2.0.1",k.defaults={dataElementType:"treemap",animations:{numbers:{type:"number",properties:["x","y","width","height"]}},borderWidth:0,spacing:.5,dividers:{display:!1,lineWidth:1}},k.descriptors={_scriptable:!0,_indexable:!1},k.overrides={interaction:{mode:"point",intersect:!0},hover:{},plugins:{tooltip:{position:"treemap",intersect:!0,callbacks:{title(t){if(t.length){return t[0].dataset.key||""}return""},label(t){const e=t.dataset,n=e.data[t.dataIndex],i=n.g||e.label;return(i?i+": ":"")+n.v}}}},scales:{x:{type:"linear",display:!1},y:{type:"linear",display:!1}}},k.beforeRegister=function(){h("3.6",e.Chart.version)},k.afterRegister=function(){const t=e.registry.plugins.get("tooltip");t&&(t.positioners.treemap=function(t){if(!t.length)return!1;return t[t.length-1].element.tooltipPosition()})},k.afterUnregister=function(){const t=e.registry.plugins.get("tooltip");t&&delete t.positioners.treemap};class P extends e.Element{constructor(t){super(),this.options=void 0,this.width=void 0,this.height=void 0,t&&Object.assign(this,t)}draw(t){const e=this.options,{inner:n,outer:i}=S(this);t.save(),i.w!==n.w||i.h!==n.h?(t.beginPath(),t.rect(i.x,i.y,i.w,i.h),t.clip(),t.rect(n.x,n.y,n.w,n.h),t.fillStyle=e.backgroundColor,t.fill(),t.fillStyle=e.borderColor,t.fill("evenodd")):(t.fillStyle=e.backgroundColor,t.fillRect(n.x,n.y,n.w,n.h)),t.restore()}inRange(t,e,n){return M(this,t,e,n)}inXRange(t,e){return M(this,t,null,e)}inYRange(t,e){return M(this,null,t,e)}getCenterPoint(t){const{x:e,y:n,width:i,height:r}=this.getProps(["x","y","width","height"],t);return{x:e+i/2,y:n+r/2}}tooltipPosition(){return this.getCenterPoint()}getRange(t){return"x"===t?this.width/2:this.height/2}}P.id="treemap",P.defaults={borderWidth:void 0,spacing:void 0,label:void 0,rtl:void 0,dividers:{display:!1,lineCapStyle:"butt",lineColor:"black",lineDash:void 0,lineDashOffset:0,lineWidth:0},captions:{align:void 0,color:void 0,display:!0,formatter:t=>t.raw.g||"",font:{},padding:3},labels:{align:"center",color:void 0,display:!1,formatter:t=>t.raw.g?[t.raw.g,t.raw.v]:t.raw.v,font:{},position:"middle",padding:3}},P.descriptors={_scriptable:!0,_indexable:!1},P.defaultRoutes={backgroundColor:"backgroundColor",borderColor:"borderColor"},e.Chart.register(k,P),t.flatten=i,t.group=r,t.index=s,t.isObject=o,t.requireVersion=h,t.sort=a,t.sum=l,Object.defineProperty(t,"__esModule",{value:!0})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chartjs-chart-treemap",
   "homepage": "https://chartjs-chart-treemap.pages.dev/",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "description": "Chart.js module for creating treemap charts",
   "main": "dist/chartjs-chart-treemap.js",
   "module": "dist/chartjs-chart-treemap.esm.js",
@@ -39,18 +39,18 @@
     "url": "https://github.com/kurkle/chartjs-chart-treemap/issues"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "chart.js": "^3.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "chart.js": "^3.6.0",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-test-utils": "^0.3.0",
     "concurrently": "^6.0.1",
     "cross-env": "^7.0.3",
     "date-fns": "^2.20.2",
-    "eslint": "^7.24.0",
+    "eslint": "^8.3.0",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^6.1.2",
@@ -64,15 +64,15 @@
     "karma-jasmine-html-reporter": "^1.5.4",
     "karma-rollup-preprocessor": "^7.0.7",
     "karma-spec-reporter": "0.0.32",
-    "karma-summary-reporter": "^2.0.2",
+    "karma-summary-reporter": "^3.0.0",
     "pixelmatch": "^5.2.1",
     "rollup": "^2.45.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.2.4",
+    "typescript": "^4.3.5",
     "vuepress": "^1.8.2",
-    "vuepress-plugin-flexsearch": "^0.2.0",
+    "vuepress-plugin-flexsearch": "^0.3.0",
     "vuepress-plugin-redirect": "^1.2.5",
     "vuepress-theme-chartjs": "^0.2.0"
   },

package/types/index.esm.d.ts

@@ -1,18 +1,72 @@
-import { ControllerDatasetOptions, PointHoverOptions, PointOptions, ScriptableAndArrayOptions, ScriptableContext, ChartType } from 'chart.js';
-import { AnyObject } from 'chart.js/types/basic';
+import {
+  Chart,
+  ChartComponent,
+  DatasetController,
+  Element,
+  ScriptableContext, Color, Scriptable, FontSpec
+} from 'chart.js';
 
-export interface TreemapControllerDatasetOptions<TType extends ChartType>
-extends ControllerDatasetOptions,
-ScriptableAndArrayOptions<PointOptions, ScriptableContext<TType>>,
-ScriptableAndArrayOptions<PointHoverOptions, ScriptableContext<TType>> {
+type TreemapScriptableContext = ScriptableContext<'treemap'> & {
+  raw: TreemapDataPoint
+}
+
+type TreemapControllerDatasetCaptionsOptions = {
+  align?: Scriptable<LabelAlign, TreemapScriptableContext>,
+  color?: Scriptable<Color, TreemapScriptableContext>,
+  display?: boolean;
+  formatter?: Scriptable<string, TreemapScriptableContext>,
+  font?: FontSpec,
+  hoverColor?: Scriptable<Color, TreemapScriptableContext>,
+  hoverFont?: FontSpec,
+  padding?: number,
+}
+
+type TreemapControllerDatasetLabelsOptions = {
+  align?: Scriptable<LabelAlign, TreemapScriptableContext>,
+  color?: Scriptable<Color, TreemapScriptableContext>,
+  display?: boolean;
+  formatter?: Scriptable<string | Array<string>, TreemapScriptableContext>,
+  font?: FontSpec,
+  hoverColor?: Scriptable<Color, TreemapScriptableContext>,
+  hoverFont?: FontSpec,
+  padding?: number,
+  position?: Scriptable<LabelPosition, TreemapScriptableContext>
+}
+
+export type LabelPosition = 'top' | 'middle' | 'bottom';
+
+export type LabelAlign = 'left' | 'center' | 'right';
+
+type TreemapControllerDatasetDividersOptions = {
+  display?: boolean,
+  lineCapStyle?: string,
+  lineColor?: string,
+  lineDash?: number[],
+  lineDashOffset?: number,
+  lineWidth?: number,
+}
 
-  data?: unknown,
-  font: AnyObject,
-  groups: string[],
-  groupDividers: boolean,
-  rtl: boolean,
-  spacing: number,
-  tree: number[],
+export interface TreemapControllerDatasetOptions<DType> {
+  spacing?: number,
+  rtl?: boolean,
+
+  backgroundColor?: Scriptable<Color, TreemapScriptableContext>;
+  borderColor?: Scriptable<Color, TreemapScriptableContext>;
+  borderWidth?: number;
+
+  hoverBackgroundColor?: Scriptable<Color, TreemapScriptableContext>;
+  hoverBorderColor?: Scriptable<Color, TreemapScriptableContext>;
+  hoverBorderWidth?: number;
+
+  captions?: TreemapControllerDatasetCaptionsOptions;
+  dividers?: TreemapControllerDatasetDividersOptions;
+  labels?: TreemapControllerDatasetLabelsOptions;
+  label?: string;
+
+  data: TreemapDataPoint[]; // This will be auto-generated from `tree`
+  groups?: Array<keyof DType>;
+  tree: number[] | DType[];
+  key?: keyof DType;
 }
 
 export interface TreemapDataPoint {
@@ -20,7 +74,26 @@ export interface TreemapDataPoint {
   y: number,
   w: number,
   h: number,
-  v: number
+  /**
+   * Value
+   */
+  v: number,
+  /**
+   * Sum
+   */
+  s: number,
+  /**
+   * Depth, only available if grouping
+   */
+  l?: number,
+  /**
+   * Group name, only available if grouping
+   */
+  g?: string,
+  /**
+   * Group Sum, only available if grouping
+   */
+  gs?: number,
 }
 
 /*
@@ -32,9 +105,10 @@ declare module 'chart.js' {
   export interface ChartTypeRegistry {
     treemap: {
       chartOptions: CoreChartOptions<'treemap'>;
-      datasetOptions: TreemapControllerDatasetOptions<'treemap'>;
+      datasetOptions: TreemapControllerDatasetOptions<Record<string, unknown>>;
       defaultDataPoint: TreemapDataPoint;
-      parsedDataType: any,
+      metaExtensions: {};
+      parsedDataType: unknown,
       scales: never;
     }
   }
@@ -43,3 +117,27 @@ declare module 'chart.js' {
   // }
 }
 
+type TreemapOptions = {
+  backgroundColor: Color;
+  borderColor: Color;
+  borderWidth: number | { top?: number, right?: number, bottom?: number, left?: number }
+}
+
+type TreemapConfig = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export type TreemapController = DatasetController;
+export const TreemapController: ChartComponent & {
+  prototype: TreemapController;
+  new(chart: Chart, datasetIndex: number): TreemapController
+};
+
+export type TreemapElement = Element<TreemapConfig, TreemapOptions>;
+export const TreemapElement: ChartComponent & {
+  prototype: TreemapElement;
+  new(cfg: TreemapConfig): TreemapElement
+};