chartjs-chart-treemap 2.1.0 → 2.1.1

package/README.md

@@ -1,6 +1,6 @@
 # chartjs-chart-treemap
 
-[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)
+[Chart.js](https://www.chartjs.org/) **v3.8.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)

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

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-treemap v2.1.0
+ * chartjs-chart-treemap v2.1.1
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2022 Jukka Kurkela
  * Released under the MIT license
@@ -192,6 +192,18 @@ function requireVersion(min, ver) {
   }
 }
 
+const rasterize = (v, dpr) => Math.round(v * dpr) / dpr;
+
+function rasterizeRect(rect, dpr) {
+  return {
+    ...rect,
+    x: rasterize(rect.x, dpr),
+    y: rasterize(rect.y, dpr),
+    w: rasterize(rect.w, dpr),
+    h: rasterize(rect.h, dpr),
+  };
+}
+
 const widthCache = new Map();
 
 /**
@@ -233,26 +245,27 @@ function parseBorderRadius(value, maxW, maxH) {
   };
 }
 
-function boundingRects(rect) {
+function boundingRects(rect, dpr) {
   const bounds = getBounds(rect);
   const width = bounds.right - bounds.left;
   const height = bounds.bottom - bounds.top;
   const border = parseBorderWidth(rect.options.borderWidth, width / 2, height / 2);
   const radius = parseBorderRadius(rect.options.borderRadius, width / 2, height / 2);
+  const outer = rasterizeRect({
+    x: bounds.left,
+    y: bounds.top,
+    w: width,
+    h: height,
+    radius
+  }, dpr);
 
   return {
-    outer: {
-      x: bounds.left,
-      y: bounds.top,
-      w: width,
-      h: height,
-      radius
-    },
+    outer,
     inner: {
-      x: bounds.left + border.l,
-      y: bounds.top + border.t,
-      w: width - border.l - border.r,
-      h: height - border.t - border.b,
+      x: outer.x + border.l,
+      y: outer.y + border.t,
+      w: outer.w - border.l - border.r,
+      h: outer.h - border.t - border.b,
       radius: {
         topLeft: Math.max(0, radius.topLeft - Math.max(border.t, border.l)),
         topRight: Math.max(0, radius.topRight - Math.max(border.t, border.r)),
@@ -287,7 +300,7 @@ function addNormalRectPath(ctx, rect) {
 }
 
 function shouldDrawCaption(rect, options) {
-  if (!options || !options.display) {
+  if (!options || options.display === false) {
     return false;
   }
   const {w, h} = rect;
@@ -457,12 +470,12 @@ class TreemapElement extends Element {
     }
   }
 
-  draw(ctx, data, levels = 0) {
+  draw(ctx, data, levels = 0, dpr) {
     if (!data) {
       return;
     }
     const options = this.options;
-    const {inner, outer} = boundingRects(this);
+    const {inner, outer} = boundingRects(this, dpr);
 
     const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
 
@@ -511,6 +524,9 @@ class TreemapElement extends Element {
     return this.getCenterPoint();
   }
 
+  /**
+   * @todo: remove this unused function in v3
+   */
   getRange(axis) {
     return axis === 'x' ? this.width / 2 : this.height / 2;
   }
@@ -573,35 +589,30 @@ TreemapElement.defaultRoutes = {
   borderColor: 'borderColor'
 };
 
-function round(v, n) {
-  // @ts-ignore
-  return (+(Math.round(v + 'e+' + n) + 'e-' + n)) || 0;
-}
-
-function getDims(itm, w2, s2, key) {
+function getDims(itm, w2, s2, key, dpr, maxd2) {
   const a = itm._normalized;
   const ar = w2 * a / s2;
-  const d1 = Math.sqrt(a * ar);
-  const d2 = a / d1;
+  const d1 = rasterize(Math.sqrt(a * ar), dpr);
+  const d2 = Math.min(rasterize(a / d1, dpr), maxd2);
   const w = key === '_ix' ? d1 : d2;
   const h = key === '_ix' ? d2 : d1;
 
   return {d1, d2, w, h};
 }
 
-const getX = (rect, w) => round(rect.rtl ? rect.x + rect.w - rect._ix - w : rect.x + rect._ix, 4);
+const getX = (rect, w) => rect.rtl ? rect.x + rect.iw - w : rect.x + rect._ix;
 
-function buildRow(rect, itm, dims, sum) {
-  const r = {
+function buildRow(rect, itm, dims, sum, dpr) {
+  const r = rasterizeRect({
     x: getX(rect, dims.w),
-    y: round(rect.y + rect._iy, 4),
-    w: round(dims.w, 4),
-    h: round(dims.h, 4),
-    a: round(itm._normalized, 4),
+    y: rect.y + rect._iy,
+    w: dims.w,
+    h: dims.h,
+    a: itm._normalized,
     v: itm.value,
     s: sum,
     _data: itm._data
-  };
+  }, dpr);
   if (itm.group) {
     r.g = itm.group;
     r.l = itm.level;
@@ -611,16 +622,16 @@ function buildRow(rect, itm, dims, sum) {
 }
 
 class Rect {
-  constructor(r) {
-    const me = this;
+  constructor(r, dpr) {
+    this.dpr = dpr;
     r = r || {w: 1, h: 1};
-    me.rtl = !!r.rtl;
-    me.x = r.x || r.left || 0;
-    me.y = r.y || r.top || 0;
-    me._ix = 0;
-    me._iy = 0;
-    me.w = r.w || r.width || (r.right - r.left);
-    me.h = r.h || r.height || (r.bottom - r.top);
+    this.rtl = !!r.rtl;
+    this.x = r.x || r.left || 0;
+    this.y = r.y || r.top || 0;
+    this._ix = 0;
+    this._iy = 0;
+    this.w = r.w || r.width || (r.right - r.left);
+    this.h = r.h || r.height || (r.bottom - r.top);
   }
 
   get area() {
@@ -641,34 +652,61 @@ class Rect {
   }
 
   get side() {
-    return this.dir === 'x' ? this.iw : this.ih;
+    return rasterize(this.dir === 'x' ? this.iw : this.ih, this.dpr);
   }
 
   map(arr) {
-    const me = this;
-    const ret = [];
+    const {dir, side, dpr} = this;
+    const {key, d2prop, id2prop, d2key} = getPropNames(dir);
     const sum = arr.nsum;
     const row = arr.get();
-    const dir = me.dir;
-    const side = me.side;
     const w2 = side * side;
-    const key = dir === 'x' ? '_ix' : '_iy';
+    const availd2 = rasterize(this[id2prop], dpr);
     const s2 = sum * sum;
+    const ret = [];
     let maxd2 = 0;
     let totd1 = 0;
     for (const itm of row) {
-      const dims = getDims(itm, w2, s2, key);
+      const dims = getDims(itm, w2, s2, key, dpr, availd2);
       totd1 += dims.d1;
-      maxd2 = Math.max(maxd2, dims.d2);
-      ret.push(buildRow(me, itm, dims, arr.sum));
-      me[key] += dims.d1;
+      maxd2 = Math.min(Math.max(maxd2, dims.d2), availd2);
+      ret.push(buildRow(this, itm, dims, arr.sum, dpr));
+      this[key] += dims.d1;
     }
-    me[dir === 'y' ? '_ix' : '_iy'] += maxd2;
-    me[key] -= totd1;
+    // make sure all rects are same size in d2 direction
+    for (const r of ret) {
+      const d2 = r[d2prop];
+      if (d2 !== maxd2) {
+        if (this.rtl && dir === 'y') {
+          // for RTL, x-coordinate needs to be adjusted too
+          r.x -= maxd2 - d2;
+        }
+        r[d2prop] = maxd2;
+      }
+    }
+    this[d2key] += maxd2;
+    this[key] -= totd1;
     return ret;
   }
 }
 
+function getPropNames(dir) {
+  if (dir === 'x') {
+    return {
+      key: '_ix',
+      d2prop: 'h',
+      id2prop: 'ih',
+      d2key: '_iy'
+    };
+  }
+  return {
+    key: '_iy',
+    d2prop: 'w',
+    id2prop: 'iw',
+    d2key: '_ix'
+  };
+}
+
 const min = Math.min;
 const max = Math.max;
 
@@ -766,15 +804,16 @@ function compareAspectRatio(oldStat, newStat, args) {
  *
  * @param {number[]|object[]} values
  * @param {object} rectangle
- * @param {string} key
- * @param {*} grp
- * @param {*} lvl
- * @param {*} gsum
+ * @param {string} [key]
+ * @param {number} [dpr=1]
+ * @param {*} [grp]
+ * @param {*} [lvl]
+ * @param {*} [gsum]
  */
-function squarify(values, rectangle, key, grp, lvl, gsum) {
+function squarify(values, rectangle, key, dpr = 1, grp, lvl, gsum) {
   values = values || [];
   const rows = [];
-  const rect = new Rect(rectangle);
+  const rect = new Rect(rectangle, dpr);
   const row = new StatArray('value', rect.area / sum(values, key));
   let length = rect.side;
   const n = values.length;
@@ -811,7 +850,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
-var version = "2.1.0";
+var version = "2.1.1";
 
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
@@ -836,7 +875,7 @@ function arrayNotEqual(a1, a2) {
   return false;
 }
 
-function buildData(dataset, mainRect) {
+function buildData(dataset, mainRect, dpr) {
   const key = dataset.key || '';
   const treeLeafKey = dataset.treeLeafKey || '_leaf';
   let tree = dataset.tree || [];
@@ -846,7 +885,7 @@ function buildData(dataset, mainRect) {
   const groups = dataset.groups || [];
   const glen = groups.length;
   const sp = valueOrDefault(dataset.spacing, 0);
-  const captions = dataset.captions || {display: true};
+  const captions = dataset.captions || {};
   const font = toFont(captions.font);
   const padding = valueOrDefault(captions.padding, 3);
 
@@ -854,24 +893,23 @@ function buildData(dataset, mainRect) {
     const g = getGroupKey(groups[gidx]);
     const pg = (gidx > 0) && getGroupKey(groups[gidx - 1]);
     const gdata = group(tree, g, key, treeLeafKey, pg, parent, groups.filter((item, index) => index <= gidx));
-    const gsq = squarify(gdata, rect, key, g, gidx, gs);
+    const gsq = squarify(gdata, rect, key, dpr, g, gidx, gs);
     const ret = gsq.slice();
-    let subRect;
     if (gidx < glen - 1) {
       gsq.forEach((sq) => {
         const bw = parseBorderWidth(dataset.borderWidth, sq.w / 2, sq.h / 2);
-        subRect = {
+        const subRect = {
+          ...rect,
           x: sq.x + sp + bw.l,
           y: sq.y + sp + bw.t,
           w: sq.w - 2 * sp - bw.l - bw.r,
           h: sq.h - 2 * sp - bw.t - bw.b,
-          rtl: rect.rtl
         };
         if (shouldDrawCaption(subRect, captions)) {
           subRect.y += font.lineHeight + padding * 2;
           subRect.h -= font.lineHeight + padding * 2;
         }
-        ret.push(...recur(gidx + 1, subRect, sq.g, sq.s));
+        ret.push(...recur(gidx + 1, rasterizeRect(subRect, dpr), sq.g, sq.s));
       });
     }
     return ret;
@@ -883,7 +921,7 @@ function buildData(dataset, mainRect) {
 
   return glen
     ? recur(0, mainRect)
-    : squarify(tree, mainRect, key);
+    : squarify(tree, mainRect, key, dpr);
 }
 
 function getMinMax(data, useTree) {
@@ -917,8 +955,7 @@ class TreemapController extends DatasetController {
   }
 
   /**
-   * TODO: to be removed when https://github.com/kurkle/chartjs-chart-treemap/issues/137
-   * will be implemented
+   * @todo: Remove with https://github.com/kurkle/chartjs-chart-treemap/issues/137
    */
   updateRangeFromParsed(range, scale) {
     if (range.updated) {
@@ -930,39 +967,39 @@ class TreemapController extends DatasetController {
       range.max = 1;
       return;
     }
-    const me = this;
-    const dataset = me.getDataset();
-    const {vMin, vMax} = getMinMax(dataset.data, me._useTree);
+    const dataset = this.getDataset();
+    const {vMin, vMax} = getMinMax(dataset.data, this._useTree);
     range.min = vMin;
     range.max = vMax;
   }
 
   update(mode) {
-    const me = this;
-    const meta = me.getMeta();
-    const dataset = me.getDataset();
-    if (!defined(me._useTree)) {
-      me._useTree = !!dataset.tree;
+    const meta = this.getMeta();
+    const dataset = this.getDataset();
+    const dpr = this.chart.currentDevicePixelRatio;
+
+    if (!defined(this._useTree)) {
+      this._useTree = !!dataset.tree;
     }
     const groups = dataset.groups || (dataset.groups = []);
     const key = dataset.key || '';
     const rtl = !!dataset.rtl;
 
-    const mainRect = getArea(meta, dataset.data, rtl, me._useTree);
+    const mainRect = rasterizeRect(getArea(meta, dataset.data, rtl, this._useTree), dpr);
 
-    if (mode === 'reset' || rectNotEqual(me._rect, mainRect) || me._key !== key || arrayNotEqual(me._groups, groups)) {
-      me._rect = mainRect;
-      me._groups = groups.slice();
-      me._key = key;
+    if (mode === 'reset' || rectNotEqual(this._rect, mainRect) || this._key !== key || arrayNotEqual(this._groups, groups)) {
+      this._rect = mainRect;
+      this._groups = groups.slice();
+      this._key = key;
 
-      dataset.data = buildData(dataset, mainRect);
+      dataset.data = buildData(dataset, mainRect, dpr);
       // @ts-ignore using private stuff
-      me._dataCheck();
+      this._dataCheck();
       // @ts-ignore using private stuff
-      me._resyncElements();
+      this._resyncElements();
     }
 
-    me.updateElements(meta.data, 0, meta.data.length, mode);
+    this.updateElements(meta.data, 0, meta.data.length, mode);
   }
 
   updateElements(rects, start, count, mode) {
@@ -996,19 +1033,17 @@ class TreemapController extends DatasetController {
   }
 
   draw() {
-    const me = this;
-    const ctx = me.chart.ctx;
-    const area = me.chart.chartArea;
-    const metadata = me.getMeta().data || [];
-    const dataset = me.getDataset();
+    const {ctx, chartArea, currentDevicePixelRatio: dpr} = this.chart;
+    const metadata = this.getMeta().data || [];
+    const dataset = this.getDataset();
     const levels = (dataset.groups || []).length - 1;
     const data = dataset.data;
 
-    clipArea(ctx, area);
+    clipArea(ctx, chartArea);
     for (let i = 0, ilen = metadata.length; i < ilen; ++i) {
       const rect = metadata[i];
       if (!rect.hidden) {
-        rect.draw(ctx, data[i], levels);
+        rect.draw(ctx, data[i], levels, dpr);
       }
     }
     unclipArea(ctx);
@@ -1039,6 +1074,7 @@ TreemapController.descriptors = {
 TreemapController.overrides = {
   interaction: {
     mode: 'point',
+    includeInvisible: true,
     intersect: true
   },
 
@@ -1078,7 +1114,7 @@ TreemapController.overrides = {
 };
 
 TreemapController.beforeRegister = function() {
-  requireVersion('3.6', Chart.version);
+  requireVersion('3.8', Chart.version);
 };
 
 TreemapController.afterRegister = function() {

package/dist/chartjs-chart-treemap.js

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-treemap v2.1.0
+ * chartjs-chart-treemap v2.1.1
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2022 Jukka Kurkela
  * Released under the MIT license
@@ -195,6 +195,18 @@ function requireVersion(min, ver) {
   }
 }
 
+const rasterize = (v, dpr) => Math.round(v * dpr) / dpr;
+
+function rasterizeRect(rect, dpr) {
+  return {
+    ...rect,
+    x: rasterize(rect.x, dpr),
+    y: rasterize(rect.y, dpr),
+    w: rasterize(rect.w, dpr),
+    h: rasterize(rect.h, dpr),
+  };
+}
+
 const widthCache = new Map();
 
 /**
@@ -236,26 +248,27 @@ function parseBorderRadius(value, maxW, maxH) {
   };
 }
 
-function boundingRects(rect) {
+function boundingRects(rect, dpr) {
   const bounds = getBounds(rect);
   const width = bounds.right - bounds.left;
   const height = bounds.bottom - bounds.top;
   const border = parseBorderWidth(rect.options.borderWidth, width / 2, height / 2);
   const radius = parseBorderRadius(rect.options.borderRadius, width / 2, height / 2);
+  const outer = rasterizeRect({
+    x: bounds.left,
+    y: bounds.top,
+    w: width,
+    h: height,
+    radius
+  }, dpr);
 
   return {
-    outer: {
-      x: bounds.left,
-      y: bounds.top,
-      w: width,
-      h: height,
-      radius
-    },
+    outer,
     inner: {
-      x: bounds.left + border.l,
-      y: bounds.top + border.t,
-      w: width - border.l - border.r,
-      h: height - border.t - border.b,
+      x: outer.x + border.l,
+      y: outer.y + border.t,
+      w: outer.w - border.l - border.r,
+      h: outer.h - border.t - border.b,
       radius: {
         topLeft: Math.max(0, radius.topLeft - Math.max(border.t, border.l)),
         topRight: Math.max(0, radius.topRight - Math.max(border.t, border.r)),
@@ -290,7 +303,7 @@ function addNormalRectPath(ctx, rect) {
 }
 
 function shouldDrawCaption(rect, options) {
-  if (!options || !options.display) {
+  if (!options || options.display === false) {
     return false;
   }
   const {w, h} = rect;
@@ -460,12 +473,12 @@ class TreemapElement extends chart_js.Element {
     }
   }
 
-  draw(ctx, data, levels = 0) {
+  draw(ctx, data, levels = 0, dpr) {
     if (!data) {
       return;
     }
     const options = this.options;
-    const {inner, outer} = boundingRects(this);
+    const {inner, outer} = boundingRects(this, dpr);
 
     const addRectPath = hasRadius(outer.radius) ? helpers.addRoundedRectPath : addNormalRectPath;
 
@@ -514,6 +527,9 @@ class TreemapElement extends chart_js.Element {
     return this.getCenterPoint();
   }
 
+  /**
+   * @todo: remove this unused function in v3
+   */
   getRange(axis) {
     return axis === 'x' ? this.width / 2 : this.height / 2;
   }
@@ -576,35 +592,30 @@ TreemapElement.defaultRoutes = {
   borderColor: 'borderColor'
 };
 
-function round(v, n) {
-  // @ts-ignore
-  return (+(Math.round(v + 'e+' + n) + 'e-' + n)) || 0;
-}
-
-function getDims(itm, w2, s2, key) {
+function getDims(itm, w2, s2, key, dpr, maxd2) {
   const a = itm._normalized;
   const ar = w2 * a / s2;
-  const d1 = Math.sqrt(a * ar);
-  const d2 = a / d1;
+  const d1 = rasterize(Math.sqrt(a * ar), dpr);
+  const d2 = Math.min(rasterize(a / d1, dpr), maxd2);
   const w = key === '_ix' ? d1 : d2;
   const h = key === '_ix' ? d2 : d1;
 
   return {d1, d2, w, h};
 }
 
-const getX = (rect, w) => round(rect.rtl ? rect.x + rect.w - rect._ix - w : rect.x + rect._ix, 4);
+const getX = (rect, w) => rect.rtl ? rect.x + rect.iw - w : rect.x + rect._ix;
 
-function buildRow(rect, itm, dims, sum) {
-  const r = {
+function buildRow(rect, itm, dims, sum, dpr) {
+  const r = rasterizeRect({
     x: getX(rect, dims.w),
-    y: round(rect.y + rect._iy, 4),
-    w: round(dims.w, 4),
-    h: round(dims.h, 4),
-    a: round(itm._normalized, 4),
+    y: rect.y + rect._iy,
+    w: dims.w,
+    h: dims.h,
+    a: itm._normalized,
     v: itm.value,
     s: sum,
     _data: itm._data
-  };
+  }, dpr);
   if (itm.group) {
     r.g = itm.group;
     r.l = itm.level;
@@ -614,16 +625,16 @@ function buildRow(rect, itm, dims, sum) {
 }
 
 class Rect {
-  constructor(r) {
-    const me = this;
+  constructor(r, dpr) {
+    this.dpr = dpr;
     r = r || {w: 1, h: 1};
-    me.rtl = !!r.rtl;
-    me.x = r.x || r.left || 0;
-    me.y = r.y || r.top || 0;
-    me._ix = 0;
-    me._iy = 0;
-    me.w = r.w || r.width || (r.right - r.left);
-    me.h = r.h || r.height || (r.bottom - r.top);
+    this.rtl = !!r.rtl;
+    this.x = r.x || r.left || 0;
+    this.y = r.y || r.top || 0;
+    this._ix = 0;
+    this._iy = 0;
+    this.w = r.w || r.width || (r.right - r.left);
+    this.h = r.h || r.height || (r.bottom - r.top);
   }
 
   get area() {
@@ -644,34 +655,61 @@ class Rect {
   }
 
   get side() {
-    return this.dir === 'x' ? this.iw : this.ih;
+    return rasterize(this.dir === 'x' ? this.iw : this.ih, this.dpr);
   }
 
   map(arr) {
-    const me = this;
-    const ret = [];
+    const {dir, side, dpr} = this;
+    const {key, d2prop, id2prop, d2key} = getPropNames(dir);
     const sum = arr.nsum;
     const row = arr.get();
-    const dir = me.dir;
-    const side = me.side;
     const w2 = side * side;
-    const key = dir === 'x' ? '_ix' : '_iy';
+    const availd2 = rasterize(this[id2prop], dpr);
     const s2 = sum * sum;
+    const ret = [];
     let maxd2 = 0;
     let totd1 = 0;
     for (const itm of row) {
-      const dims = getDims(itm, w2, s2, key);
+      const dims = getDims(itm, w2, s2, key, dpr, availd2);
       totd1 += dims.d1;
-      maxd2 = Math.max(maxd2, dims.d2);
-      ret.push(buildRow(me, itm, dims, arr.sum));
-      me[key] += dims.d1;
+      maxd2 = Math.min(Math.max(maxd2, dims.d2), availd2);
+      ret.push(buildRow(this, itm, dims, arr.sum, dpr));
+      this[key] += dims.d1;
     }
-    me[dir === 'y' ? '_ix' : '_iy'] += maxd2;
-    me[key] -= totd1;
+    // make sure all rects are same size in d2 direction
+    for (const r of ret) {
+      const d2 = r[d2prop];
+      if (d2 !== maxd2) {
+        if (this.rtl && dir === 'y') {
+          // for RTL, x-coordinate needs to be adjusted too
+          r.x -= maxd2 - d2;
+        }
+        r[d2prop] = maxd2;
+      }
+    }
+    this[d2key] += maxd2;
+    this[key] -= totd1;
     return ret;
   }
 }
 
+function getPropNames(dir) {
+  if (dir === 'x') {
+    return {
+      key: '_ix',
+      d2prop: 'h',
+      id2prop: 'ih',
+      d2key: '_iy'
+    };
+  }
+  return {
+    key: '_iy',
+    d2prop: 'w',
+    id2prop: 'iw',
+    d2key: '_ix'
+  };
+}
+
 const min = Math.min;
 const max = Math.max;
 
@@ -769,15 +807,16 @@ function compareAspectRatio(oldStat, newStat, args) {
  *
  * @param {number[]|object[]} values
  * @param {object} rectangle
- * @param {string} key
- * @param {*} grp
- * @param {*} lvl
- * @param {*} gsum
+ * @param {string} [key]
+ * @param {number} [dpr=1]
+ * @param {*} [grp]
+ * @param {*} [lvl]
+ * @param {*} [gsum]
  */
-function squarify(values, rectangle, key, grp, lvl, gsum) {
+function squarify(values, rectangle, key, dpr = 1, grp, lvl, gsum) {
   values = values || [];
   const rows = [];
-  const rect = new Rect(rectangle);
+  const rect = new Rect(rectangle, dpr);
   const row = new StatArray('value', rect.area / sum(values, key));
   let length = rect.side;
   const n = values.length;
@@ -814,7 +853,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
-var version = "2.1.0";
+var version = "2.1.1";
 
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
@@ -839,7 +878,7 @@ function arrayNotEqual(a1, a2) {
   return false;
 }
 
-function buildData(dataset, mainRect) {
+function buildData(dataset, mainRect, dpr) {
   const key = dataset.key || '';
   const treeLeafKey = dataset.treeLeafKey || '_leaf';
   let tree = dataset.tree || [];
@@ -849,7 +888,7 @@ function buildData(dataset, mainRect) {
   const groups = dataset.groups || [];
   const glen = groups.length;
   const sp = helpers.valueOrDefault(dataset.spacing, 0);
-  const captions = dataset.captions || {display: true};
+  const captions = dataset.captions || {};
   const font = helpers.toFont(captions.font);
   const padding = helpers.valueOrDefault(captions.padding, 3);
 
@@ -857,24 +896,23 @@ function buildData(dataset, mainRect) {
     const g = getGroupKey(groups[gidx]);
     const pg = (gidx > 0) && getGroupKey(groups[gidx - 1]);
     const gdata = group(tree, g, key, treeLeafKey, pg, parent, groups.filter((item, index) => index <= gidx));
-    const gsq = squarify(gdata, rect, key, g, gidx, gs);
+    const gsq = squarify(gdata, rect, key, dpr, g, gidx, gs);
     const ret = gsq.slice();
-    let subRect;
     if (gidx < glen - 1) {
       gsq.forEach((sq) => {
         const bw = parseBorderWidth(dataset.borderWidth, sq.w / 2, sq.h / 2);
-        subRect = {
+        const subRect = {
+          ...rect,
           x: sq.x + sp + bw.l,
           y: sq.y + sp + bw.t,
           w: sq.w - 2 * sp - bw.l - bw.r,
           h: sq.h - 2 * sp - bw.t - bw.b,
-          rtl: rect.rtl
         };
         if (shouldDrawCaption(subRect, captions)) {
           subRect.y += font.lineHeight + padding * 2;
           subRect.h -= font.lineHeight + padding * 2;
         }
-        ret.push(...recur(gidx + 1, subRect, sq.g, sq.s));
+        ret.push(...recur(gidx + 1, rasterizeRect(subRect, dpr), sq.g, sq.s));
       });
     }
     return ret;
@@ -886,7 +924,7 @@ function buildData(dataset, mainRect) {
 
   return glen
     ? recur(0, mainRect)
-    : squarify(tree, mainRect, key);
+    : squarify(tree, mainRect, key, dpr);
 }
 
 function getMinMax(data, useTree) {
@@ -920,8 +958,7 @@ class TreemapController extends chart_js.DatasetController {
   }
 
   /**
-   * TODO: to be removed when https://github.com/kurkle/chartjs-chart-treemap/issues/137
-   * will be implemented
+   * @todo: Remove with https://github.com/kurkle/chartjs-chart-treemap/issues/137
    */
   updateRangeFromParsed(range, scale) {
     if (range.updated) {
@@ -933,39 +970,39 @@ class TreemapController extends chart_js.DatasetController {
       range.max = 1;
       return;
     }
-    const me = this;
-    const dataset = me.getDataset();
-    const {vMin, vMax} = getMinMax(dataset.data, me._useTree);
+    const dataset = this.getDataset();
+    const {vMin, vMax} = getMinMax(dataset.data, this._useTree);
     range.min = vMin;
     range.max = vMax;
   }
 
   update(mode) {
-    const me = this;
-    const meta = me.getMeta();
-    const dataset = me.getDataset();
-    if (!helpers.defined(me._useTree)) {
-      me._useTree = !!dataset.tree;
+    const meta = this.getMeta();
+    const dataset = this.getDataset();
+    const dpr = this.chart.currentDevicePixelRatio;
+
+    if (!helpers.defined(this._useTree)) {
+      this._useTree = !!dataset.tree;
     }
     const groups = dataset.groups || (dataset.groups = []);
     const key = dataset.key || '';
     const rtl = !!dataset.rtl;
 
-    const mainRect = getArea(meta, dataset.data, rtl, me._useTree);
+    const mainRect = rasterizeRect(getArea(meta, dataset.data, rtl, this._useTree), dpr);
 
-    if (mode === 'reset' || rectNotEqual(me._rect, mainRect) || me._key !== key || arrayNotEqual(me._groups, groups)) {
-      me._rect = mainRect;
-      me._groups = groups.slice();
-      me._key = key;
+    if (mode === 'reset' || rectNotEqual(this._rect, mainRect) || this._key !== key || arrayNotEqual(this._groups, groups)) {
+      this._rect = mainRect;
+      this._groups = groups.slice();
+      this._key = key;
 
-      dataset.data = buildData(dataset, mainRect);
+      dataset.data = buildData(dataset, mainRect, dpr);
       // @ts-ignore using private stuff
-      me._dataCheck();
+      this._dataCheck();
       // @ts-ignore using private stuff
-      me._resyncElements();
+      this._resyncElements();
     }
 
-    me.updateElements(meta.data, 0, meta.data.length, mode);
+    this.updateElements(meta.data, 0, meta.data.length, mode);
   }
 
   updateElements(rects, start, count, mode) {
@@ -999,19 +1036,17 @@ class TreemapController extends chart_js.DatasetController {
   }
 
   draw() {
-    const me = this;
-    const ctx = me.chart.ctx;
-    const area = me.chart.chartArea;
-    const metadata = me.getMeta().data || [];
-    const dataset = me.getDataset();
+    const {ctx, chartArea, currentDevicePixelRatio: dpr} = this.chart;
+    const metadata = this.getMeta().data || [];
+    const dataset = this.getDataset();
     const levels = (dataset.groups || []).length - 1;
     const data = dataset.data;
 
-    helpers.clipArea(ctx, area);
+    helpers.clipArea(ctx, chartArea);
     for (let i = 0, ilen = metadata.length; i < ilen; ++i) {
       const rect = metadata[i];
       if (!rect.hidden) {
-        rect.draw(ctx, data[i], levels);
+        rect.draw(ctx, data[i], levels, dpr);
       }
     }
     helpers.unclipArea(ctx);
@@ -1042,6 +1077,7 @@ TreemapController.descriptors = {
 TreemapController.overrides = {
   interaction: {
     mode: 'point',
+    includeInvisible: true,
     intersect: true
   },
 
@@ -1081,7 +1117,7 @@ TreemapController.overrides = {
 };
 
 TreemapController.beforeRegister = function() {
-  requireVersion('3.6', chart_js.Chart.version);
+  requireVersion('3.8', chart_js.Chart.version);
 };
 
 TreemapController.afterRegister = function() {

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

@@ -1,7 +1,7 @@
 /*!
- * chartjs-chart-treemap v2.1.0
+ * chartjs-chart-treemap v2.1.1
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2022 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";const i=t=>n.isObject(t)?t.v:t,r=t=>t.reduce((function(t,e){return t>i(e)?t:i(e)}),0),o=(t,e)=>t.reduce((function(t,e){return t<i(e)?t:i(e)}),e),s=t=>""+t;function a(t,e,i,r=[],o=0,l=[]){const h=o-1;if(t in i&&o>0){const n=r.reduce((function(t,e,n){return n!==h&&(t[s(n)]=e),t}),{});n[e]=r[h],n[t]=i[t],l.push(n)}else for(const s of Object.keys(i)){const h=i[s];n.isObject(h)&&(r.push(s),a(t,e,h,r,o+1,l))}return r.splice(h,1),l}function l(t,e,n){const i=a(t,e,n);if(!i.length)return i;const r=i.reduce((function(t,e){const n=Object.keys(e).length-2;return t>n?t:n}));return i.forEach((function(t){for(let e=0;e<r;e++){const n=s(e);t[n]||(t[n]="")}})),i}function h(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 u(t,e,n){if(!t.length)return;const i=[];for(const r of t){const t=e[r];if(""===t){i.push(n);break}i.push(t)}return i.length?i.join("."):n}function c(t,e,n,i,r,o,s=[]){const a=Object.create(null),l=Object.create(null),h=[];let c,d,f;for(d=0,f=t.length;d<f;++d){const h=t[d];r&&h[r]!==o||(c=h[e]||h[i]||"",c in a||(a[c]={value:0},l[c]=[]),a[c].value+=+h[n],a[c].label=h[e]||"",a[c].path=u(s,h,c),l[c].push(h))}return Object.keys(a).forEach((t=>{const i={children:l[t]};i[n]=+a[t].value,i[e]=a[t].label,i.label=t,i.path=a[t].path,r&&(i[r]=o),h.push(i)})),h}function d(t,e){let i,r=t.length;if(!r)return e;const o=n.isObject(t[0]);for(e=o?e:"v",i=0,r=t.length;i<r;++i)o?t[i]._idx=i:t[i]={v:t[i],_idx:i};return e}function f(t,e){e?t.sort(((t,n)=>+n[e]-+t[e])):t.sort(((t,e)=>+e-+t))}function p(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 g(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.`)}const m=new Map;function x(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 y(t,e,n){return Math.max(Math.min(t,n),e)}function b(t,e,i){const r=n.toTRBL(t);return{t:y(r.top,0,i),r:y(r.right,0,e),b:y(r.bottom,0,i),l:y(r.left,0,e)}}function v(t){const e=x(t),i=e.right-e.left,r=e.bottom-e.top,o=b(t.options.borderWidth,i/2,r/2),s=function(t,e,i){const r=n.toTRBLCorners(t),o=Math.min(e,i);return{topLeft:y(r.topLeft,0,o),topRight:y(r.topRight,0,o),bottomLeft:y(r.bottomLeft,0,o),bottomRight:y(r.bottomRight,0,o)}}(t.options.borderRadius,i/2,r/2);return{outer:{x:e.left,y:e.top,w:i,h:r,radius:s},inner:{x:e.left+o.l,y:e.top+o.t,w:i-o.l-o.r,h:r-o.t-o.b,radius:{topLeft:Math.max(0,s.topLeft-Math.max(o.t,o.l)),topRight:Math.max(0,s.topRight-Math.max(o.t,o.r)),bottomLeft:Math.max(0,s.bottomLeft-Math.max(o.b,o.l)),bottomRight:Math.max(0,s.bottomRight-Math.max(o.b,o.r))}}}}function w(t,e,n,i){const r=null===e,o=null===n,s=!(!t||r&&o)&&x(t,i);return s&&(r||e>=s.left&&e<=s.right)&&(o||n>=s.top&&n<=s.bottom)}function _(t,e){t.rect(e.x,e.y,e.w,e.h)}function M(t,e){if(!e||!e.display)return!1;const{w:i,h:r}=t,o=n.toFont(e.font).lineHeight,s=y(2*n.valueOrDefault(e.padding,3),0,Math.min(i,r));return i-s>o&&r-s>o}function k(t,e,i,r,o){const{captions:s,labels:a}=i;t.save(),t.beginPath(),t.rect(e.x,e.y,e.w,e.h),t.clip();const l=!("l"in r)||r.l===o;l&&a.display?function(t,e,i){const r=i.labels,o=r.formatter;if(!o)return;const s=n.isArray(o)?o:[o],{font:a,hoverFont:l}=r,h=(e.active?l:a)||a,u=n.isArray(h)?h.map((t=>n.toFont(t))):[n.toFont(h)],c=function(t,e,n){const i=n.reduce((function(t,e){return t+=e.string}),""),r=e.join()+i+(t._measureText?"-spriting":"");if(!m.has(r)){t.save();const i=e.length;let o=0,s=0;for(let r=0;r<i;r++){const i=n[Math.min(r,n.length-1)];t.font=i.string;const a=e[r];o=Math.max(o,t.measureText(a).width),s+=i.lineHeight}t.restore(),m.set(r,{width:o,height:s})}return m.get(r)}(t,s,u);if(!function(t,e,n,i){const{overflow:r,padding:o}=n,{width:s,height:a}=i;if("hidden"===r)return!(s+2*o>e.w||a+2*o>e.h);return!0}(0,e,r,c))return;const{color:d,hoverColor:f,align:p}=r,g=(e.active?f:d)||d,x=n.isArray(g)?g:[g],y=function(t,e,n){const{align:i,position:r,padding:o}=e;let s,a;s=O(t,i,o),a="top"===r?t.y+o:"bottom"===r?t.y+t.h-o-n.height:t.y+(t.h-n.height)/2+o;return{x:s,y:a}}(e,r,c);t.textAlign=p,t.textBaseline="middle";let b=0;s.forEach((function(e,n){const i=x[Math.min(n,x.length-1)],r=u[Math.min(n,u.length-1)],o=r.lineHeight;t.font=r.string,t.fillStyle=i,t.fillText(e,y.x,y.y+o/2+b),b+=o}))}(t,e,i):!l&&M(e,s)&&function(t,e,i,r){const{captions:o,spacing:s,rtl:a}=i,{color:l,hoverColor:h,font:u,hoverFont:c,padding:d,align:f,formatter:p}=o,g=(e.active?h:l)||l,m=f||(a?"right":"left"),x=(e.active?c:u)||u,y=n.toFont(x),b=y.lineHeight/2,v=O(e,m,d);t.fillStyle=g,t.font=y.string,t.textAlign=m,t.textBaseline="middle",t.fillText(p||r.g,v,e.y+d+s+b)}(t,e,i,r),t.restore()}function O(t,e,n){return"left"===e?t.x+n:"right"===e?t.x+t.w-n:t.x+t.w/2}class R 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,e,i=0){if(!e)return;const r=this.options,{inner:o,outer:s}=v(this),a=(l=s.radius).topLeft||l.topRight||l.bottomLeft||l.bottomRight?n.addRoundedRectPath:_;var l;t.save(),s.w===o.w&&s.h===o.h||(t.beginPath(),a(t,s),t.clip(),a(t,o),t.fillStyle=r.borderColor,t.fill("evenodd")),t.beginPath(),a(t,o),t.fillStyle=r.backgroundColor,t.fill(),function(t,e,n,i){const r=n.dividers;if(!r.display||!i._data.children.length)return;const{x:o,y:s,w:a,h:l}=e,{lineColor:h,lineCapStyle:u,lineDash:c,lineDashOffset:d,lineWidth:f}=r;if(t.save(),t.strokeStyle=h,t.lineCap=u,t.setLineDash(c),t.lineDashOffset=d,t.lineWidth=f,t.beginPath(),a>l){const e=a/2;t.moveTo(o+e,s),t.lineTo(o+e,s+l)}else{const e=l/2;t.moveTo(o,s+e),t.lineTo(o+a,s+e)}t.stroke(),t.restore()}(t,o,r,e),k(t,o,r,e,i),t.restore()}inRange(t,e,n){return w(this,t,e,n)}inXRange(t,e){return w(this,t,null,e)}inYRange(t,e){return w(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}}function C(t,e){return+(Math.round(t+"e+"+e)+"e-"+e)||0}function j(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}}R.id="treemap",R.defaults={label:void 0,borderRadius:0,borderWidth:0,captions:{align:void 0,color:"black",display:!0,font:{},formatter:t=>t.raw.g||t.raw._data.label||"",padding:3},dividers:{display:!1,lineCapStyle:"butt",lineColor:"black",lineDash:[],lineDashOffset:0,lineWidth:1},labels:{align:"center",color:"black",display:!1,font:{},formatter:t=>t.raw.g?[t.raw.g,t.raw.v+""]:t.raw._data.label?[t.raw._data.label,t.raw.v+""]:t.raw.v+"",overflow:"cut",position:"middle",padding:3},rtl:!1,spacing:.5},R.descriptors={labels:{_fallback:!0},captions:{_fallback:!0},_scriptable:!0,_indexable:!1},R.defaultRoutes={backgroundColor:"backgroundColor",borderColor:"borderColor"};const T=(t,e)=>C(t.rtl?t.x+t.w-t._ix-e:t.x+t._ix,4);function P(t,e,n,i){const r={x:T(t,n.w),y:C(t.y+t._iy,4),w:C(n.w,4),h:C(n.h,4),a:C(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 D{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,c=0;for(const i of r){const r=j(i,a,h,l);c+=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]-=c,n}}const L=Math.min,S=Math.max;function E(t,e){const n=+e[t.key],i=n*t.ratio;return e._normalized=i,{min:L(t.min,n),max:S(t.max,n),sum:t.sum+n,nmin:L(t.nmin,i),nmax:S(t.nmax,i),nsum:t.nsum+i}}function F(t,e,n){t._arr.push(e),function(t,e){Object.assign(t,e)}(t,n)}class A{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){F(this,t,E(this,t))}pushIf(t,e,...n){const i=E(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;F(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 z(t,e,n,i,r,o){t=t||[];const s=[],a=new D(e),l=new A("value",a.area/p(t,n));let u=a.side;const c=t.length;let g,m;if(!c)return s;const x=t.slice();n=d(x,n),f(x,n);const y=t=>i&&x[t][i];for(g=0;g<c;++g)m={value:(b=g,n?+x[b][n]:+x[b]),groupSum:o,_data:t[x[g]._idx],level:void 0,group:void 0},i&&(m.level=r,m.group=y(g)),m=l.pushIf(m,V,u),m&&(s.push(a.map(l)),u=a.side,l.reset(),l.push(m));var b;return l.length&&s.push(a.map(l)),h(s)}function H(t,e){const n=e?1:r(t);return{vMin:e?0:o(t,n),vMax:n}}class W extends e.DatasetController{constructor(t,e){super(t,e),this._rect=void 0,this._key=void 0,this._groups=void 0,this._useTree=void 0}initialize(){this.enableOptionSharing=!0,super.initialize()}updateRangeFromParsed(t,e){if(t.updated)return;if(t.updated=!0,"x"===e.axis)return t.min=0,void(t.max=1);const n=this.getDataset(),{vMin:i,vMax:r}=H(n.data,this._useTree);t.min=i,t.max=r}update(t){const e=this,i=e.getMeta(),r=e.getDataset();n.defined(e._useTree)||(e._useTree=!!r.tree);const o=r.groups||(r.groups=[]),a=r.key||"",h=!!r.rtl,u=function({xScale:t,yScale:e},n,i,r){const{vMin:o,vMax:s}=H(n,r),a=t.getPixelForValue(0),l=t.getPixelForValue(1),h=e.getPixelForValue(o),u=e.getPixelForValue(s);return{x:a,y:u,w:l-a,h:h-u,rtl:i}}(i,r.data,h,e._useTree);var d,f;"reset"!==t&&(d=e._rect,f=u,d&&f&&d.x===f.x&&d.y===f.y&&d.w===f.w&&d.h===f.h)&&e._key===a&&!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,o)||(e._rect=u,e._groups=o.slice(),e._key=a,r.data=function(t,e){const i=t.key||"",r=t.treeLeafKey||"_leaf";let o=t.tree||[];n.isObject(o)&&(o=l(i,r,o));const a=t.groups||[],h=a.length,u=n.valueOrDefault(t.spacing,0),d=t.captions||{display:!0},f=n.toFont(d.font),p=n.valueOrDefault(d.padding,3);return!o.length&&t.data.length&&(o=t.tree=t.data),h?function e(n,l,g,m){const x=s(a[n]),y=n>0&&s(a[n-1]),v=c(o,x,i,r,y,g,a.filter(((t,e)=>e<=n))),w=z(v,l,i,x,n,m),_=w.slice();let k;return n<h-1&&w.forEach((i=>{const r=b(t.borderWidth,i.w/2,i.h/2);k={x:i.x+u+r.l,y:i.y+u+r.t,w:i.w-2*u-r.l-r.r,h:i.h-2*u-r.t-r.b,rtl:l.rtl},M(k,d)&&(k.y+=f.lineHeight+2*p,k.h-=f.lineHeight+2*p),_.push(...e(n+1,k,i.g,i.s))})),_}(0,e):z(o,e,i)}(r,u),e._dataCheck(),e._resyncElements()),e.updateElements(i.data,0,i.data.length,t)}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=n.spacing,c=2*u,d={x:e.x+u,y:e.y+u,width:o?0:e.w-c,height:o?0:e.h-c,hidden:c>e.w||c>e.h};h&&(d.options=n),r.updateElement(t[a],a,d,i)}r.updateSharedOptions(l,i,a)}draw(){const t=this,e=t.chart.ctx,i=t.chart.chartArea,r=t.getMeta().data||[],o=t.getDataset(),s=(o.groups||[]).length-1,a=o.data;n.clipArea(e,i);for(let t=0,n=r.length;t<n;++t){const n=r[t];n.hidden||n.draw(e,a[t],s)}n.unclipArea(e)}}W.id="treemap",W.version="2.1.0",W.defaults={dataElementType:"treemap",animations:{numbers:{type:"number",properties:["x","y","width","height"]}}},W.descriptors={_scriptable:!0,_indexable:!1},W.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||n._data.label||e.label;return(i?i+": ":"")+n.v}}}},scales:{x:{type:"linear",display:!1},y:{type:"linear",display:!1}}},W.beforeRegister=function(){g("3.6",e.Chart.version)},W.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()}:console.warn("Unable to register the treemap positioner because tooltip plugin is not registered")},W.afterUnregister=function(){const t=e.registry.plugins.get("tooltip");t&&delete t.positioners.treemap},e.Chart.register(W,R),t.flatten=h,t.getGroupKey=s,t.group=c,t.index=d,t.maxValue=r,t.minValue=o,t.normalizeTreeToArray=l,t.requireVersion=g,t.sort=f,t.sum=p,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";const i=t=>n.isObject(t)?t.v:t,r=t=>t.reduce((function(t,e){return t>i(e)?t:i(e)}),0),o=(t,e)=>t.reduce((function(t,e){return t<i(e)?t:i(e)}),e),s=t=>""+t;function a(t,e,i,r=[],o=0,l=[]){const h=o-1;if(t in i&&o>0){const n=r.reduce((function(t,e,n){return n!==h&&(t[s(n)]=e),t}),{});n[e]=r[h],n[t]=i[t],l.push(n)}else for(const s of Object.keys(i)){const h=i[s];n.isObject(h)&&(r.push(s),a(t,e,h,r,o+1,l))}return r.splice(h,1),l}function l(t,e,n){const i=a(t,e,n);if(!i.length)return i;const r=i.reduce((function(t,e){const n=Object.keys(e).length-2;return t>n?t:n}));return i.forEach((function(t){for(let e=0;e<r;e++){const n=s(e);t[n]||(t[n]="")}})),i}function h(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 u(t,e,n){if(!t.length)return;const i=[];for(const r of t){const t=e[r];if(""===t){i.push(n);break}i.push(t)}return i.length?i.join("."):n}function c(t,e,n,i,r,o,s=[]){const a=Object.create(null),l=Object.create(null),h=[];let c,d,p;for(d=0,p=t.length;d<p;++d){const h=t[d];r&&h[r]!==o||(c=h[e]||h[i]||"",c in a||(a[c]={value:0},l[c]=[]),a[c].value+=+h[n],a[c].label=h[e]||"",a[c].path=u(s,h,c),l[c].push(h))}return Object.keys(a).forEach((t=>{const i={children:l[t]};i[n]=+a[t].value,i[e]=a[t].label,i.label=t,i.path=a[t].path,r&&(i[r]=o),h.push(i)})),h}function d(t,e){let i,r=t.length;if(!r)return e;const o=n.isObject(t[0]);for(e=o?e:"v",i=0,r=t.length;i<r;++i)o?t[i]._idx=i:t[i]={v:t[i],_idx:i};return e}function p(t,e){e?t.sort(((t,n)=>+n[e]-+t[e])):t.sort(((t,e)=>+e-+t))}function f(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 g(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.`)}const m=(t,e)=>Math.round(t*e)/e;function x(t,e){return{...t,x:m(t.x,e),y:m(t.y,e),w:m(t.w,e),h:m(t.h,e)}}const y=new Map;function b(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 v(t,e,n){return Math.max(Math.min(t,n),e)}function w(t,e,i){const r=n.toTRBL(t);return{t:v(r.top,0,i),r:v(r.right,0,e),b:v(r.bottom,0,i),l:v(r.left,0,e)}}function _(t,e){const i=b(t),r=i.right-i.left,o=i.bottom-i.top,s=w(t.options.borderWidth,r/2,o/2),a=function(t,e,i){const r=n.toTRBLCorners(t),o=Math.min(e,i);return{topLeft:v(r.topLeft,0,o),topRight:v(r.topRight,0,o),bottomLeft:v(r.bottomLeft,0,o),bottomRight:v(r.bottomRight,0,o)}}(t.options.borderRadius,r/2,o/2),l=x({x:i.left,y:i.top,w:r,h:o,radius:a},e);return{outer:l,inner:{x:l.x+s.l,y:l.y+s.t,w:l.w-s.l-s.r,h:l.h-s.t-s.b,radius:{topLeft:Math.max(0,a.topLeft-Math.max(s.t,s.l)),topRight:Math.max(0,a.topRight-Math.max(s.t,s.r)),bottomLeft:Math.max(0,a.bottomLeft-Math.max(s.b,s.l)),bottomRight:Math.max(0,a.bottomRight-Math.max(s.b,s.r))}}}}function M(t,e,n,i){const r=null===e,o=null===n,s=!(!t||r&&o)&&b(t,i);return s&&(r||e>=s.left&&e<=s.right)&&(o||n>=s.top&&n<=s.bottom)}function k(t,e){t.rect(e.x,e.y,e.w,e.h)}function R(t,e){if(!e||!1===e.display)return!1;const{w:i,h:r}=t,o=n.toFont(e.font).lineHeight,s=v(2*n.valueOrDefault(e.padding,3),0,Math.min(i,r));return i-s>o&&r-s>o}function O(t,e,i,r,o){const{captions:s,labels:a}=i;t.save(),t.beginPath(),t.rect(e.x,e.y,e.w,e.h),t.clip();const l=!("l"in r)||r.l===o;l&&a.display?function(t,e,i){const r=i.labels,o=r.formatter;if(!o)return;const s=n.isArray(o)?o:[o],{font:a,hoverFont:l}=r,h=(e.active?l:a)||a,u=n.isArray(h)?h.map((t=>n.toFont(t))):[n.toFont(h)],c=function(t,e,n){const i=n.reduce((function(t,e){return t+=e.string}),""),r=e.join()+i+(t._measureText?"-spriting":"");if(!y.has(r)){t.save();const i=e.length;let o=0,s=0;for(let r=0;r<i;r++){const i=n[Math.min(r,n.length-1)];t.font=i.string;const a=e[r];o=Math.max(o,t.measureText(a).width),s+=i.lineHeight}t.restore(),y.set(r,{width:o,height:s})}return y.get(r)}(t,s,u);if(!function(t,e,n,i){const{overflow:r,padding:o}=n,{width:s,height:a}=i;if("hidden"===r)return!(s+2*o>e.w||a+2*o>e.h);return!0}(0,e,r,c))return;const{color:d,hoverColor:p,align:f}=r,g=(e.active?p:d)||d,m=n.isArray(g)?g:[g],x=function(t,e,n){const{align:i,position:r,padding:o}=e;let s,a;s=C(t,i,o),a="top"===r?t.y+o:"bottom"===r?t.y+t.h-o-n.height:t.y+(t.h-n.height)/2+o;return{x:s,y:a}}(e,r,c);t.textAlign=f,t.textBaseline="middle";let b=0;s.forEach((function(e,n){const i=m[Math.min(n,m.length-1)],r=u[Math.min(n,u.length-1)],o=r.lineHeight;t.font=r.string,t.fillStyle=i,t.fillText(e,x.x,x.y+o/2+b),b+=o}))}(t,e,i):!l&&R(e,s)&&function(t,e,i,r){const{captions:o,spacing:s,rtl:a}=i,{color:l,hoverColor:h,font:u,hoverFont:c,padding:d,align:p,formatter:f}=o,g=(e.active?h:l)||l,m=p||(a?"right":"left"),x=(e.active?c:u)||u,y=n.toFont(x),b=y.lineHeight/2,v=C(e,m,d);t.fillStyle=g,t.font=y.string,t.textAlign=m,t.textBaseline="middle",t.fillText(f||r.g,v,e.y+d+s+b)}(t,e,i,r),t.restore()}function C(t,e,n){return"left"===e?t.x+n:"right"===e?t.x+t.w-n:t.x+t.w/2}class j 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,e,i=0,r){if(!e)return;const o=this.options,{inner:s,outer:a}=_(this,r),l=(h=a.radius).topLeft||h.topRight||h.bottomLeft||h.bottomRight?n.addRoundedRectPath:k;var h;t.save(),a.w===s.w&&a.h===s.h||(t.beginPath(),l(t,a),t.clip(),l(t,s),t.fillStyle=o.borderColor,t.fill("evenodd")),t.beginPath(),l(t,s),t.fillStyle=o.backgroundColor,t.fill(),function(t,e,n,i){const r=n.dividers;if(!r.display||!i._data.children.length)return;const{x:o,y:s,w:a,h:l}=e,{lineColor:h,lineCapStyle:u,lineDash:c,lineDashOffset:d,lineWidth:p}=r;if(t.save(),t.strokeStyle=h,t.lineCap=u,t.setLineDash(c),t.lineDashOffset=d,t.lineWidth=p,t.beginPath(),a>l){const e=a/2;t.moveTo(o+e,s),t.lineTo(o+e,s+l)}else{const e=l/2;t.moveTo(o,s+e),t.lineTo(o+a,s+e)}t.stroke(),t.restore()}(t,s,o,e),O(t,s,o,e,i),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}}function T(t,e,n,i,r,o){const s=t._normalized,a=e*s/n,l=m(Math.sqrt(s*a),r),h=Math.min(m(s/l,r),o);return{d1:l,d2:h,w:"_ix"===i?l:h,h:"_ix"===i?h:l}}j.id="treemap",j.defaults={label:void 0,borderRadius:0,borderWidth:0,captions:{align:void 0,color:"black",display:!0,font:{},formatter:t=>t.raw.g||t.raw._data.label||"",padding:3},dividers:{display:!1,lineCapStyle:"butt",lineColor:"black",lineDash:[],lineDashOffset:0,lineWidth:1},labels:{align:"center",color:"black",display:!1,font:{},formatter:t=>t.raw.g?[t.raw.g,t.raw.v+""]:t.raw._data.label?[t.raw._data.label,t.raw.v+""]:t.raw.v+"",overflow:"cut",position:"middle",padding:3},rtl:!1,spacing:.5},j.descriptors={labels:{_fallback:!0},captions:{_fallback:!0},_scriptable:!0,_indexable:!1},j.defaultRoutes={backgroundColor:"backgroundColor",borderColor:"borderColor"};const P=(t,e)=>t.rtl?t.x+t.iw-e:t.x+t._ix;function D(t,e,n,i,r){const o=x({x:P(t,n.w),y:t.y+t._iy,w:n.w,h:n.h,a:e._normalized,v:e.value,s:i,_data:e._data},r);return e.group&&(o.g=e.group,o.l=e.level,o.gs=e.groupSum),o}class L{constructor(t,e){this.dpr=e,t=t||{w:1,h:1},this.rtl=!!t.rtl,this.x=t.x||t.left||0,this.y=t.y||t.top||0,this._ix=0,this._iy=0,this.w=t.w||t.width||t.right-t.left,this.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 m("x"===this.dir?this.iw:this.ih,this.dpr)}map(t){const{dir:e,side:n,dpr:i}=this,{key:r,d2prop:o,id2prop:s,d2key:a}=function(t){if("x"===t)return{key:"_ix",d2prop:"h",id2prop:"ih",d2key:"_iy"};return{key:"_iy",d2prop:"w",id2prop:"iw",d2key:"_ix"}}(e),l=t.nsum,h=t.get(),u=n*n,c=m(this[s],i),d=l*l,p=[];let f=0,g=0;for(const e of h){const n=T(e,u,d,r,i,c);g+=n.d1,f=Math.min(Math.max(f,n.d2),c),p.push(D(this,e,n,t.sum,i)),this[r]+=n.d1}for(const t of p){const n=t[o];n!==f&&(this.rtl&&"y"===e&&(t.x-=f-n),t[o]=f)}return this[a]+=f,this[r]-=g,p}}const S=Math.min,E=Math.max;function F(t,e){const n=+e[t.key],i=n*t.ratio;return e._normalized=i,{min:S(t.min,n),max:E(t.max,n),sum:t.sum+n,nmin:S(t.nmin,i),nmax:E(t.nmax,i),nsum:t.nsum+i}}function A(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){A(this,t,F(this,t))}pushIf(t,e,...n){const i=F(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;A(this,t,i)}get(){return this._arr}}function z(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 H(t,e,n,i=1,r,o,s){t=t||[];const a=[],l=new L(e,i),u=new V("value",l.area/f(t,n));let c=l.side;const g=t.length;let m,x;if(!g)return a;const y=t.slice();n=d(y,n),p(y,n);const b=t=>r&&y[t][r];for(m=0;m<g;++m)x={value:(v=m,n?+y[v][n]:+y[v]),groupSum:s,_data:t[y[m]._idx],level:void 0,group:void 0},r&&(x.level=o,x.group=b(m)),x=u.pushIf(x,z,c),x&&(a.push(l.map(u)),c=l.side,u.reset(),u.push(x));var v;return u.length&&a.push(l.map(u)),h(a)}function W(t,e){const n=e?1:r(t);return{vMin:e?0:o(t,n),vMax:n}}class q extends e.DatasetController{constructor(t,e){super(t,e),this._rect=void 0,this._key=void 0,this._groups=void 0,this._useTree=void 0}initialize(){this.enableOptionSharing=!0,super.initialize()}updateRangeFromParsed(t,e){if(t.updated)return;if(t.updated=!0,"x"===e.axis)return t.min=0,void(t.max=1);const n=this.getDataset(),{vMin:i,vMax:r}=W(n.data,this._useTree);t.min=i,t.max=r}update(t){const e=this.getMeta(),i=this.getDataset(),r=this.chart.currentDevicePixelRatio;n.defined(this._useTree)||(this._useTree=!!i.tree);const o=i.groups||(i.groups=[]),a=i.key||"",h=!!i.rtl,u=x(function({xScale:t,yScale:e},n,i,r){const{vMin:o,vMax:s}=W(n,r),a=t.getPixelForValue(0),l=t.getPixelForValue(1),h=e.getPixelForValue(o),u=e.getPixelForValue(s);return{x:a,y:u,w:l-a,h:h-u,rtl:i}}(e,i.data,h,this._useTree),r);var d,p;"reset"!==t&&(d=this._rect,p=u,d&&p&&d.x===p.x&&d.y===p.y&&d.w===p.w&&d.h===p.h)&&this._key===a&&!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}(this._groups,o)||(this._rect=u,this._groups=o.slice(),this._key=a,i.data=function(t,e,i){const r=t.key||"",o=t.treeLeafKey||"_leaf";let a=t.tree||[];n.isObject(a)&&(a=l(r,o,a));const h=t.groups||[],u=h.length,d=n.valueOrDefault(t.spacing,0),p=t.captions||{},f=n.toFont(p.font),g=n.valueOrDefault(p.padding,3);return!a.length&&t.data.length&&(a=t.tree=t.data),u?function e(n,l,m,y){const b=s(h[n]),v=n>0&&s(h[n-1]),_=c(a,b,r,o,v,m,h.filter(((t,e)=>e<=n))),M=H(_,l,r,i,b,n,y),k=M.slice();return n<u-1&&M.forEach((r=>{const o=w(t.borderWidth,r.w/2,r.h/2),s={...l,x:r.x+d+o.l,y:r.y+d+o.t,w:r.w-2*d-o.l-o.r,h:r.h-2*d-o.t-o.b};R(s,p)&&(s.y+=f.lineHeight+2*g,s.h-=f.lineHeight+2*g),k.push(...e(n+1,x(s,i),r.g,r.s))})),k}(0,e):H(a,e,r,i)}(i,u,r),this._dataCheck(),this._resyncElements()),this.updateElements(e.data,0,e.data.length,t)}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=n.spacing,c=2*u,d={x:e.x+u,y:e.y+u,width:o?0:e.w-c,height:o?0:e.h-c,hidden:c>e.w||c>e.h};h&&(d.options=n),r.updateElement(t[a],a,d,i)}r.updateSharedOptions(l,i,a)}draw(){const{ctx:t,chartArea:e,currentDevicePixelRatio:i}=this.chart,r=this.getMeta().data||[],o=this.getDataset(),s=(o.groups||[]).length-1,a=o.data;n.clipArea(t,e);for(let e=0,n=r.length;e<n;++e){const n=r[e];n.hidden||n.draw(t,a[e],s,i)}n.unclipArea(t)}}q.id="treemap",q.version="2.1.1",q.defaults={dataElementType:"treemap",animations:{numbers:{type:"number",properties:["x","y","width","height"]}}},q.descriptors={_scriptable:!0,_indexable:!1},q.overrides={interaction:{mode:"point",includeInvisible:!0,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||n._data.label||e.label;return(i?i+": ":"")+n.v}}}},scales:{x:{type:"linear",display:!1},y:{type:"linear",display:!1}}},q.beforeRegister=function(){g("3.8",e.Chart.version)},q.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()}:console.warn("Unable to register the treemap positioner because tooltip plugin is not registered")},q.afterUnregister=function(){const t=e.registry.plugins.get("tooltip");t&&delete t.positioners.treemap},e.Chart.register(q,j),t.flatten=h,t.getGroupKey=s,t.group=c,t.index=d,t.maxValue=r,t.minValue=o,t.normalizeTreeToArray=l,t.requireVersion=g,t.sort=p,t.sum=f,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": "2.1.0",
+  "version": "2.1.1",
   "description": "Chart.js module for creating treemap charts",
   "main": "dist/chartjs-chart-treemap.js",
   "module": "dist/chartjs-chart-treemap.esm.js",
@@ -12,7 +12,7 @@
     "dev": "karma start --no-signle-run --auto-watch --browsers chrome",
     "dev:ff": "karma start --no-signle-run --auto-watch --browsers firefox",
     "docs": "npm run build && vuepress build docs --no-cache",
-    "docs:dev": "npm run build && vuepress dev docs --no-cache",
+    "docs:dev": "concurrently \"npm:autobuild\" \"vuepress dev docs --no-cache\"",
     "lint": "concurrently -r \"npm:lint-*\"",
     "lint-js": "eslint \"src/**/*.js\" \"test/**/*.js\" \"docs/**/*.js\"",
     "lint-md": "eslint \"**/*.md\"",
@@ -46,7 +46,7 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "chart.js": "^3.6.0",
+    "chart.js": "^3.8.0",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-datalabels": "^2.0.0",
     "chartjs-plugin-zoom": "^1.2.0",
@@ -69,6 +69,7 @@
     "karma-rollup-preprocessor": "7.0.7",
     "karma-spec-reporter": "^0.0.34",
     "karma-summary-reporter": "^3.0.0",
+    "ng-hammerjs": "^2.0.8",
     "pixelmatch": "^5.2.1",
     "rollup": "^2.79.1",
     "rollup-plugin-analyzer": "^4.0.0",