chartjs-chart-treemap 1.0.0-beta.4 → 1.0.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Jukka Kurkela
+Copyright (c) 2019-2021 Jukka Kurkela
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,74 +1,13 @@
 # chartjs-chart-treemap
 
-[Chart.js](https://www.chartjs.org/) **v3.0.0-beta.10** 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-matrix)
+[![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)
-
-## Documentation
-
-To create a treemap chart, include chartjs-chart-treemap.js after chart.js and then create the chart by setting the `type` attribute to `'treemap'`
-
-```js
-new Chart(ctx, {
-    type: 'treemap',
-    tree: dataObject,
-    key: 'value',
-    groups: ['main', 'sub']
-});
-```
-
-## Configuration
-
-Tree data should be provided in `tree` property of dataset. `data` is then automatically build. `key` defines the key name in data objects to use for value. `groups` array can be provided to display multiple levels of hierarchy.
-Data is summarized to groups internally.
-
-```js
-new Chart(ctx, {
-    type: 'treemap',
-    data: {
-        datasets: [{
-            label: 'Basic treemap',
-            tree: [6,6,5,4,3,2,2,1],
-            font: {
-                color: '#000',
-                family: 'serif',
-                size: 12,
-                style: 'normal',
-            },
-            backgroundColor: function(ctx) {
-                var value = ctx.dataset.data[ctx.dataIndex];
-                var alpha = (value + 3) / 10;
-                return Color('blue').alpha(alpha).rgbString();
-            },
-            rtl: false // control in which direction the squares are positioned
-        }]
-    },
-});
-```
-
-### Note about chartjs-plugin-datalabels
-
-Treemap is not using any scales currently and thats why [chartjs-plugin-datalabels](https://chartjs-plugin-datalabels.netlify.app/) plugin does not work with it.
-When other charts are using datalables on the same page, you'll need to disable the plugin for treemap charts:
-
-```js
-new Chart(ctx, {
-    type: 'treemap',
-    data: (...),
-    options: {
-        plugins: {
-            datalabels: false
-        }
-    }
-});
-```
-
-## Example
-
-[Live examples @codepen.io](https://codepen.io/kurkle/full/oNjXJwe)
+[![Coverage Status](https://coveralls.io/repos/github/kurkle/chartjs-chart-treemap/badge.svg)](https://coveralls.io/github/kurkle/chartjs-chart-treemap)
 
 ![TreeMap Example Image](treemap.png)
 

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

@@ -1,11 +1,11 @@
 /*!
- * chartjs-chart-treemap v1.0.0-beta.4
- * https://github.com/kurkle/chartjs-chart-treemap#readme
+ * chartjs-chart-treemap v1.0.3
+ * https://chartjs-chart-treemap.pages.dev/
  * (c) 2021 Jukka Kurkela
  * Released under the MIT license
  */
-import { DatasetController, 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,7 +108,15 @@ 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;
 }
 
@@ -326,7 +334,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   const gval = (idx) => grp && tmp[idx][grp];
 
   for (i = 0; i < n; ++i) {
-    o = {value: val(i), groupSum: gsum, _data: values[tmp[i]._idx]};
+    o = {value: val(i), groupSum: gsum, _data: values[tmp[i]._idx], level: undefined, group: undefined};
     if (grp) {
       o.level = lvl;
       o.group = gval(i);
@@ -345,6 +353,8 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
+var version = "1.0.3";
+
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
 		|| r1.x !== r2.x
@@ -380,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;
@@ -423,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];
@@ -440,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));
       });
@@ -462,13 +486,60 @@ 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 {
+  constructor(chart, datasetIndex) {
+    super(chart, datasetIndex);
+
+    this._rect = undefined;
+    this._key = undefined;
+    this._groups = undefined;
+  }
+
   initialize() {
     this.enableOptionSharing = true;
     super.initialize();
@@ -479,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, me.chart.options.font);
+    const captions = dataset.captions ? dataset.captions : {};
     const area = me.chart.chartArea;
     const key = dataset.key || '';
     const rtl = !!dataset.rtl;
@@ -490,8 +561,11 @@ 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
       me._resyncElements();
     }
 
@@ -501,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, this.chart.options.font);
+    result.font = toFont(options.captions.font);
     return result;
   }
 
@@ -540,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) {
@@ -556,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);
         }
       }
@@ -578,16 +650,25 @@ class TreemapController extends DatasetController {
 
 TreemapController.id = 'treemap';
 
+TreemapController.version = version;
+
 TreemapController.defaults = {
   dataElementType: 'treemap',
 
-  groupLabels: true,
   borderWidth: 0,
   spacing: 0.5,
-  groupDividers: false,
-  dividerWidth: 1
+  dividers: {
+    display: false,
+    lineWidth: 1,
+  }
+
+};
 
+TreemapController.descriptors = {
+  _scriptable: true,
+  _indexable: false
 };
+
 TreemapController.overrides = {
   interaction: {
     mode: 'point',
@@ -629,6 +710,33 @@ TreemapController.overrides = {
   },
 };
 
+TreemapController.beforeRegister = function() {
+  requireVersion('3.6', Chart.version);
+};
+
+TreemapController.afterRegister = function() {
+  const tooltipPlugin = registry.plugins.get('tooltip');
+  if (tooltipPlugin) {
+    tooltipPlugin.positioners.treemap = function(active) {
+      if (!active.length) {
+        return false;
+      }
+
+      const item = active[active.length - 1];
+      const el = item.element;
+
+      return el.tooltipPosition();
+    };
+  }
+};
+
+TreemapController.afterUnregister = function() {
+  const tooltipPlugin = registry.plugins.get('tooltip');
+  if (tooltipPlugin) {
+    delete tooltipPlugin.positioners.treemap;
+  }
+};
+
 /**
  * Helper function to get the bounds of the rect
  * @param {TreemapElement} rect the rect
@@ -730,7 +838,6 @@ class TreemapElement extends Element {
       ctx.fillStyle = options.backgroundColor;
       ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
     }
-
     ctx.restore();
   }
 
@@ -766,20 +873,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 = {
@@ -787,4 +914,4 @@ TreemapElement.defaultRoutes = {
   borderColor: 'borderColor'
 };
 
-export { Rect, TreemapElement as Rectangle, StatArray, TreemapController, flatten, group, index, isObject, sort, squarify, sum };
+export { TreemapController, TreemapElement };

package/dist/chartjs-chart-treemap.js

@@ -1,14 +1,14 @@
 /*!
- * chartjs-chart-treemap v1.0.0-beta.4
- * https://github.com/kurkle/chartjs-chart-treemap#readme
+ * chartjs-chart-treemap v1.0.3
+ * https://chartjs-chart-treemap.pages.dev/
  * (c) 2021 Jukka Kurkela
  * Released under the MIT license
  */
 (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,7 +111,15 @@ 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;
 }
 
@@ -329,7 +337,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   const gval = (idx) => grp && tmp[idx][grp];
 
   for (i = 0; i < n; ++i) {
-    o = {value: val(i), groupSum: gsum, _data: values[tmp[i]._idx]};
+    o = {value: val(i), groupSum: gsum, _data: values[tmp[i]._idx], level: undefined, group: undefined};
     if (grp) {
       o.level = lvl;
       o.group = gval(i);
@@ -348,6 +356,8 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
+var version = "1.0.3";
+
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
 		|| r1.x !== r2.x
@@ -383,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;
@@ -426,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];
@@ -443,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));
       });
@@ -465,13 +489,60 @@ 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 {
+  constructor(chart, datasetIndex) {
+    super(chart, datasetIndex);
+
+    this._rect = undefined;
+    this._key = undefined;
+    this._groups = undefined;
+  }
+
   initialize() {
     this.enableOptionSharing = true;
     super.initialize();
@@ -482,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, me.chart.options.font);
+    const captions = dataset.captions ? dataset.captions : {};
     const area = me.chart.chartArea;
     const key = dataset.key || '';
     const rtl = !!dataset.rtl;
@@ -493,8 +564,11 @@ 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
       me._resyncElements();
     }
 
@@ -504,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, this.chart.options.font);
+    result.font = helpers.toFont(options.captions.font);
     return result;
   }
 
@@ -543,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) {
@@ -559,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);
         }
       }
@@ -581,16 +653,25 @@ class TreemapController extends chart_js.DatasetController {
 
 TreemapController.id = 'treemap';
 
+TreemapController.version = version;
+
 TreemapController.defaults = {
   dataElementType: 'treemap',
 
-  groupLabels: true,
   borderWidth: 0,
   spacing: 0.5,
-  groupDividers: false,
-  dividerWidth: 1
+  dividers: {
+    display: false,
+    lineWidth: 1,
+  }
+
+};
 
+TreemapController.descriptors = {
+  _scriptable: true,
+  _indexable: false
 };
+
 TreemapController.overrides = {
   interaction: {
     mode: 'point',
@@ -632,6 +713,33 @@ 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) {
+    tooltipPlugin.positioners.treemap = function(active) {
+      if (!active.length) {
+        return false;
+      }
+
+      const item = active[active.length - 1];
+      const el = item.element;
+
+      return el.tooltipPosition();
+    };
+  }
+};
+
+TreemapController.afterUnregister = function() {
+  const tooltipPlugin = chart_js.registry.plugins.get('tooltip');
+  if (tooltipPlugin) {
+    delete tooltipPlugin.positioners.treemap;
+  }
+};
+
 /**
  * Helper function to get the bounds of the rect
  * @param {TreemapElement} rect the rect
@@ -733,7 +841,6 @@ class TreemapElement extends chart_js.Element {
       ctx.fillStyle = options.backgroundColor;
       ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
     }
-
     ctx.restore();
   }
 
@@ -769,20 +876,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 = {
@@ -792,25 +919,14 @@ TreemapElement.defaultRoutes = {
 
 chart_js.Chart.register(TreemapController, TreemapElement);
 
-const tooltipPlugin = chart_js.Chart.registry.plugins.get('tooltip');
-tooltipPlugin.positioners.treemap = function(active) {
-  if (!active.length) {
-    return false;
-  }
-
-  const item = active[active.length - 1];
-  const el = item.element;
-
-  return el.tooltipPosition();
-};
-
 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.0-beta.4
- * https://github.com/kurkle/chartjs-chart-treemap#readme
+ * chartjs-chart-treemap v1.0.3
+ * 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,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 h,l,u,d;for(l=0,u=t.length;l<u;++l)d=t[l],i&&d[i]!==r||(h=d[e]||"",h in o||(o[h]=0,s[h]=[]),o[h]+=+d[n],s[h].push(d));return Object.keys(o).forEach((t=>{d={children:s[t]},d[n]=+o[t],d[e]=t,i&&(d[i]=r),a.push(d)})),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 h(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 l(t,e){return+(Math.round(t+"e+"+e)+"e-"+e)||0}function u(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)=>l(t.rtl?t.x+t.w-t._ix-e:t.x+t._ix,4);function c(t,e,n,i){const r={x:d(t,n.w),y:l(t.y+t._iy,4),w:l(n.w,4),h:l(n.h,4),a:l(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,h="x"===o?"_ix":"_iy",l=i*i;let d=0,g=0;for(const i of r){const r=u(i,a,l,h);g+=r.d1,d=Math.max(d,r.d2),n.push(c(e,i,r,t.sum)),e[h]+=r.d1}return e["y"===o?"_ix":"_iy"]+=d,e[h]-=g,n}}const p=Math.min,f=Math.max;function m(t,e){const n=+e[t.key],i=n*t.ratio;return e._normalized=i,{min:p(t.min,n),max:f(t.max,n),sum:t.sum+n,nmin:p(t.nmin,i),nmax:f(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 y{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,m(this,t))}pushIf(t,e,...n){const i=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}),i,n))return t;var r;x(this,t,i)}get(){return this._arr}}function v(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,l){t=t||[];const u=[],d=new g(e),c=new y("value",d.area/h(t,n));let p=d.side;const f=t.length;let m,x;if(!f)return u;const b=t.slice();n=s(b,n),a(b,n);const w=t=>r&&b[t][r];for(m=0;m<f;++m)x={value:(_=m,n?+b[_][n]:+b[_]),groupSum:l,_data:t[b[m]._idx]},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)),i(u)}function w(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 _(t,e,n,i,r){if(t.save(),t.fillStyle=i.color,t.font=i.font.string,t.beginPath(),t.rect(e.x,e.y,e.width,e.height),t.clip(),"l"in n&&n.l!==r){if(i.groupLabels){t.textAlign=i.rtl?"end":"start",t.textBaseline="top";const r=i.rtl?e.x+e.width-i.borderWidth-3:e.x+i.borderWidth+3;t.fillText(n.g,r,e.y+i.borderWidth+3)}}else t.textAlign="center",t.textBaseline="middle",function(t,e,n){const i=n.options,r=i.font.lineHeight,o=(i.label||e.g+"\n"+e.v).split("\n"),s=n.y+n.height/2-o.length*r/4;o.forEach(((e,i)=>t.fillText(e,n.x+n.width/2,s+i*r)))}(t,n,e);t.restore()}function D(t,e){const n=e.options,i=e.width||e.w,r=e.height||e.h;if(t.save(),t.strokeStyle=n.dividerColor||"black",t.lineCap=n.dividerCapStyle,t.setLineDash(n.dividerDash||[]),t.lineDashOffset=n.dividerDashOffset,t.lineWidth=n.dividerWidth,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()}class O extends e.DatasetController{initialize(){this.enableOptionSharing=!0,super.initialize()}update(t){const e=this,i=e.getMeta(),o=e.getDataset(),s=o.groups||(o.groups=[]),a=n.toFont(o.font,e.chart.options.font),h=e.chart.chartArea,l=o.key||"",u=!!o.rtl,d={x:h.left,y:h.top,w:h.right-h.left,h:h.bottom-h.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===l&&!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=d,e._groups=s.slice(),e._key=l,o.data=function(t,e,i){const o=t.key||"";let s=t.tree||[];const a=t.groups||[],h=a.length,l=(t.spacing||0)+(t.borderWidth||0);return!s.length&&t.data.length&&(s=t.tree=t.data),h?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<h-1&&m.forEach((r=>{y={x:r.x+l,y:r.y+l,w:r.w-2*l,h:r.h-2*l},n.valueOrDefault(t.groupLabels,!0)&&w(r,i)&&(y.y+=i.lineHeight,y.h-=i.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(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.font,this.chart.options.font),r}updateElements(t,e,n,i){const r=this,o="reset"===i,s=r.getDataset(),a=r._rect.options=r.resolveDataElementOptions(e,i),h=r.getSharedOptions(a),l=r.includeOptions(i,h);for(let a=e;a<e+n;a++){const e=s.data[a],n=h||r.resolveDataElementOptions(a,i),u=o?0:e.h-2*n.spacing,d=o?0:e.w-2*n.spacing,c={x:e.x+n.spacing,y:e.y+n.spacing,width:d,height:u};l&&(c.options=n),r.updateElement(t[a],a,c,i)}r.updateSharedOptions(h,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.groupDividers&&o._data.children.length>1&&D(t,r)}this.getDataset().groupDividers&&D(t,this._rect)}_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;w(o,e.font)&&s.g&&_(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 C(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 k(t,e,n){return Math.max(Math.min(t,n),e)}function j(t){const e=C(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:k(i,0,n),r:k(r,0,e),b:k(s,0,n),l:k(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 E(t,e,n,i){const r=null===e,o=null===n,s=!(!t||r&&o)&&C(t,i);return s&&(r||e>=s.left&&e<=s.right)&&(o||n>=s.top&&n<=s.bottom)}O.id="treemap",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,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}}};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:n,outer:i}=j(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 E(this,t,e,n)}inXRange(t,e){return E(this,t,null,e)}inYRange(t,e){return E(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}}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);e.Chart.registry.plugins.get("tooltip").positioners.treemap=function(t){if(!t.length)return!1;return t[t.length-1].element.tooltipPosition()},t.flatten=i,t.group=r,t.index=s,t.isObject=o,t.sort=a,t.sum=h,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="1.0.3",k.defaults={dataElementType:"treemap",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,15 +1,21 @@
 {
   "name": "chartjs-chart-treemap",
-  "version": "1.0.0-beta.4",
+  "homepage": "https://chartjs-chart-treemap.pages.dev/",
+  "version": "1.0.3",
   "description": "Chart.js module for creating treemap charts",
   "main": "dist/chartjs-chart-treemap.js",
   "module": "dist/chartjs-chart-treemap.esm.js",
+  "types": "types/index.esm.d.ts",
   "scripts": {
     "autobuild": "rollup -c -w",
     "build": "rollup -c",
     "dev": "karma start --no-signle-run --auto-watch --browsers chrome",
-    "lint": "eslint --ignore-path .gitignore .",
-    "lint-fix": "eslint --ignore-path .gitignore --fix .",
+    "docs": "npm run build && vuepress build docs --no-cache",
+    "docs:dev": "npm run build && vuepress dev docs --no-cache",
+    "lint": "concurrently -r \"npm:lint-*\"",
+    "lint-js": "eslint \"src/**/*.js\" \"test/**/*.js\" \"docs/**/*.js\"",
+    "lint-md": "eslint \"**/*.md\"",
+    "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
     "test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"",
     "test-lint": "npm run lint",
     "test-karma": "karma start --auto-watch --single-run"
@@ -24,29 +30,33 @@
     "treemap"
   ],
   "files": [
-    "dist/*.js"
+    "dist/*.js",
+    "types/index.esm.d.ts"
   ],
   "author": "Jukka Kurkela",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/kurkle/chartjs-chart-treemap/issues"
   },
-  "homepage": "https://github.com/kurkle/chartjs-chart-treemap#readme",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "chart.js": "^3.0.0-rc.2",
-    "chartjs-adapter-date-fns": "^1.1.0-beta.1",
-    "chartjs-test-utils": "^0.2.2",
-    "concurrently": "^6.0.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@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.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.19.0",
-    "eslint": "^7.22.0",
+    "date-fns": "^2.20.2",
+    "eslint": "^7.24.0",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^6.1.2",
+    "eslint-plugin-markdown": "^2.0.1",
     "jasmine-core": "^3.7.1",
-    "karma": "^6.2.0",
+    "karma": "^6.3.2",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-firefox-launcher": "^2.1.0",
@@ -56,12 +66,17 @@
     "karma-spec-reporter": "0.0.32",
     "karma-summary-reporter": "^2.0.2",
     "pixelmatch": "^5.2.1",
-    "rollup": "^2.42.1",
+    "rollup": "^2.45.1",
+    "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-istanbul": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.3.5",
+    "vuepress": "^1.8.2",
+    "vuepress-plugin-flexsearch": "^0.2.0",
+    "vuepress-plugin-redirect": "^1.2.5",
+    "vuepress-theme-chartjs": "^0.2.0"
   },
   "peerDependencies": {
-    "chart.js": "^3.0.0-beta.10"
-  },
-  "dependencies": {}
+    "chart.js": "^3.0.0"
+  }
 }

package/types/index.esm.d.ts

@@ -0,0 +1,143 @@
+import {
+  Chart,
+  ChartComponent,
+  DatasetController,
+  Element,
+  ScriptableContext, Color, Scriptable, FontSpec
+} from 'chart.js';
+
+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,
+}
+
+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 {
+  x: number,
+  y: number,
+  w: number,
+  h: 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,
+}
+
+/*
+export interface TreemapInteractionOptions {
+  position: Scriptable<"treemap", ScriptableTooltipContext<"treemap">>
+}*/
+
+declare module 'chart.js' {
+  export interface ChartTypeRegistry {
+    treemap: {
+      chartOptions: CoreChartOptions<'treemap'>;
+      datasetOptions: TreemapControllerDatasetOptions<Record<string, unknown>>;
+      defaultDataPoint: TreemapDataPoint;
+      metaExtensions: {};
+      parsedDataType: unknown,
+      scales: never;
+    }
+  }
+
+  // interface TooltipOptions<TType extends ChartType> extends CoreInteractionOptions, TreemapInteractionOptions {
+  // }
+}
+
+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
+};