chartjs-chart-treemap 5.0.0-next.3 → 5.0.0-next.5

package/dist/chartjs-chart-treemap.cjs

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-treemap v5.0.0-next.3
+ * chartjs-chart-treemap v5.0.0-next.5
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2026 Jukka Kurkela
  * Released under the MIT license
@@ -10,7 +10,7 @@ typeof define === 'function' && define.amd ? define(['exports', 'chart.js', 'cha
 (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';
 
-var version = "5.0.0-next.3";
+var version = "5.0.0-next.5";
 
 function scaleRect(sq, xScale, yScale, sp) {
     const sp2 = sp * 2;
@@ -29,25 +29,6 @@ function scaleRect(sq, xScale, yScale, sp) {
 function rectNotEqual(r1, r2) {
     return !r1 || !r2 || r1.x !== r2.x || r1.y !== r2.y || r1.w !== r2.w || r1.h !== r2.h || r1.rtl !== r2.rtl || r1.unsorted !== r2.unsorted;
 }
-function arrayNotEqual(a, b) {
-    let i;
-    let n;
-    if (!a || !b) {
-        return true;
-    }
-    if (a === b) {
-        return false;
-    }
-    if (a.length !== b.length) {
-        return true;
-    }
-    for(i = 0, n = a.length; i < n; ++i){
-        if (a[i] !== b[i]) {
-            return true;
-        }
-    }
-    return false;
-}
 
 const layoutDefaults = {
     displayMode: 'containerBoxes',
@@ -92,24 +73,14 @@ function getDims(itm, w2, s2, key) {
     };
 }
 const getX = (rect, w)=>rect.rtl ? rect.x + rect.iw - w : rect.x + rect._ix;
-function buildRow(rect, itm, dims, sum) {
-    const r = {
-        _data: itm._data,
-        a: itm._normalized,
-        h: dims.h,
-        s: sum,
-        v: itm.value,
-        vs: itm.values,
-        w: dims.w,
-        x: getX(rect, dims.w),
-        y: rect.y + rect._iy
-    };
-    if (itm.group) {
-        r.g = itm.group;
-        r.l = itm.level;
-        r.gs = itm.groupSum;
-    }
-    return r;
+ function assignRow(rect, itm, dims, sum) {
+    itm.a = itm._normalized;
+    itm.h = dims.h;
+    itm.s = sum;
+    itm.w = dims.w;
+    itm.x = getX(rect, dims.w);
+    itm.y = rect.y + rect._iy;
+    delete itm._normalized;
 }
 class Rect {
     get area() {
@@ -135,19 +106,17 @@ class Rect {
         const row = arr.get();
         const w2 = side * side;
         const s2 = sum * sum;
-        const ret = [];
         let maxd2 = 0;
         let totd1 = 0;
         for (const itm of row){
             const dims = getDims(itm, w2, s2, key);
             totd1 += dims.d1;
             maxd2 = Math.max(maxd2, dims.d2);
-            ret.push(buildRow(this, itm, dims, arr.sum));
+            assignRow(this, itm, dims, arr.sum);
             this[key] += dims.d1;
         }
         this[dir === 'x' ? '_iy' : '_ix'] += maxd2;
         this[key] -= totd1;
-        return ret;
     }
     constructor(r){
         r = r || {
@@ -267,6 +236,9 @@ function scanTreeObject(keys, leafKey, obj, tree = [], lvl = 0, result = []) {
     }
     tree.splice(objIndex, 1);
     return result;
+}
+ function flattenTree(tree, keys, leafKey) {
+    return normalizeTreeToArray(keys, leafKey, tree);
 }
 function normalizeTreeToArray(keys, leafKey, obj) {
     const data = scanTreeObject(keys, leafKey, obj);
@@ -467,54 +439,51 @@ function compareAspectRatio(oldStat, newStat, args) {
     const nr = Math.max(l2 * newStat.nmax / ns2, ns2 / (l2 * newStat.nmin));
     return nr <= or;
 }
-function squarify(values, rectangle, keys = [], grp, lvl, gsum) {
-    values = values || [];
-    const rows = [];
-    const rect = new Rect(rectangle);
-    const row = new StatArray('value', rect.area / sum(values, keys[0]));
-    let length = rect.side;
-    const n = values.length;
-    let i;
-    let o;
-    if (!n) {
-        return rows;
-    }
-    const tmp = values.slice();
-    const key = index(tmp, keys[0]);
-    if (!rectangle?.unsorted) {
-        sort(tmp, key);
-    }
-    const val = (idx)=>key ? +tmp[idx][key] : +tmp[idx];
-    const gval = (idx)=>grp && tmp[idx][grp];
-    for(i = 0; i < n; ++i){
-        o = {
-            _data: values[tmp[i]._idx],
-            group: undefined,
-            groupSum: gsum,
-            level: undefined,
-            value: val(i)
+ function toNodes(values, keys, grp, lvl) {
+    const items = values ? values.slice() : [];
+    const key = index(items, keys[0]);
+    return items.map((item)=>{
+        const node = {
+            _data: values[item._idx],
+            v: key ? +item[key] : +item,
+            vs: undefined
         };
         if (grp) {
-            o.level = tmp[i].groupIndex ?? lvl;
-            o.group = gval(i);
-            const tmpRef = tmp[i];
-            o.values = keys.reduce((obj, k)=>{
-                obj[k] = +tmpRef[k];
+            node.g = item[grp];
+            node.gs = undefined;
+            node.l = item.groupIndex ?? lvl;
+            node.vs = keys.reduce((obj, k)=>{
+                obj[k] = +item[k];
                 return obj;
             }, {});
         }
-        o = row.pushIf(o, compareAspectRatio, length);
+        return node;
+    });
+}
+ function sortNodes(nodes) {
+    sort(nodes, 'v');
+}
+ function packInto(nodes, rectangle) {
+    const n = nodes.length;
+    if (!n) {
+        return;
+    }
+    const rect = new Rect(rectangle);
+    const row = new StatArray('v', rect.area / sum(nodes, 'v'));
+    let length = rect.side;
+    let o;
+    for(let i = 0; i < n; ++i){
+        o = row.pushIf(nodes[i], compareAspectRatio, length);
         if (o) {
-            rows.push(rect.map(row));
+            rect.map(row);
             length = rect.side;
             row.reset();
             row.push(o);
         }
     }
     if (row.length) {
-        rows.push(rect.map(row));
+        rect.map(row);
     }
-    return flatten(rows);
 }
 
 const widthCache = new Map();
@@ -541,10 +510,6 @@ function getCaptionHeight(displayMode, rect, font, padding) {
 function drawText(ctx, rect, options, item, element, layout) {
     const { captions, labels } = options;
     const { displayMode } = layout;
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(rect.x, rect.y, rect.w, rect.h);
-    ctx.clip();
     const isLeaf = item && (!helpers.defined(item.l) || item.isLeaf);
     let block;
     if (isLeaf) {
@@ -554,9 +519,14 @@ function drawText(ctx, rect, options, item, element, layout) {
     } else if (shouldDrawCaption(displayMode, rect, captions)) {
         block = captionBlock(ctx, rect, options, item, element, layout);
     }
-    if (block) {
-        drawTextBlock(ctx, rect, block);
+    if (!block) {
+        return;
     }
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(rect.x, rect.y, rect.w, rect.h);
+    ctx.clip();
+    drawTextBlock(ctx, rect, block);
     ctx.restore();
 }
 function drawTextBlock(ctx, rect, block) {
@@ -761,74 +731,109 @@ function calculateX(rect, align, padding) {
     return rect.x + rect.w / 2;
 }
 
-function buildData(tree, keys, mainRect, layout) {
-    const { borderWidth, captions, displayMode, groups, leafKey } = layout;
-    if (helpers.isObject(tree)) {
-        tree = normalizeTreeToArray(keys, leafKey, tree);
-    }
+function buildHierarchy(values, gidx, keys, layout, parentGroupValue) {
+    const { groups, leafKey, unsorted } = layout;
     const glen = groups.length;
+    const g = getGroupKey(groups[gidx]);
+    const gdata = group(values, g, keys, leafKey, undefined, parentGroupValue, groups.filter((_item, index)=>index <= gidx), groups, gidx);
+    const nodes = toNodes(gdata, keys, g, gidx);
+    if (!unsorted) {
+        sortNodes(nodes);
+    }
+    for (const node of nodes){
+        const record = node._data;
+        const nextGroupIndex = record.groupIndex + 1;
+        const children = gidx < glen - 1 && nextGroupIndex < glen ? buildHierarchy(record.children, nextGroupIndex, keys, layout, node.g) : [];
+        Object.defineProperty(node, '_children', {
+            configurable: true,
+            value: children,
+            writable: true
+        });
+        node.isLeaf = !children.length;
+    }
+    return nodes;
+}
+ function flattenNodes(nodes) {
+    const flat = nodes.slice();
+    for (const node of nodes){
+        if (node._children?.length) {
+            flat.push(...flattenNodes(node._children));
+        }
+    }
+    return flat;
+}
+ function layoutLevel(nodes, rect, layout, parentSum) {
+    if (parentSum !== undefined) {
+        for (const node of nodes){
+            node.gs = parentSum;
+        }
+    }
+    packInto(nodes, rect);
+    for (const node of nodes){
+        if (node._children?.length) {
+            layoutLevel(node._children, getSubRect(node, rect, layout), layout, node.s);
+        }
+    }
+}
+ function layoutNodes(nodes, rect, layout) {
+    layoutLevel(nodes, rect, layout);
+    applyHeaderBoxes(flattenNodes(nodes), layout);
+}
+ function getSubRect(sq, rect, layout) {
+    const { borderWidth, captions, displayMode } = layout;
     const sp = displayMode === 'headerBoxes' ? 0 : layout.spacing;
+    const bw = displayMode === 'headerBoxes' ? {
+        b: 0,
+        l: 0,
+        r: 0,
+        t: 0
+    } : parseBorderWidth(borderWidth, sq.w / 2, sq.h / 2);
+    const subRect = {
+        ...rect,
+        h: sq.h - 2 * sp - bw.t - bw.b,
+        w: sq.w - 2 * sp - bw.l - bw.r,
+        x: sq.x + sp + bw.l,
+        y: sq.y + sp + bw.t
+    };
+    if (shouldDrawCaption(displayMode, subRect, captions)) {
+        const captionHeight = getCaptionHeight(displayMode, subRect, helpers.toFont(captions.font), helpers.valueOrDefault(captions.padding, 3));
+        subRect.y += captionHeight;
+        subRect.h -= captionHeight;
+    }
+    return subRect;
+}
+ function buildNodes(tree, keys, layout) {
+    const { groups, leafKey, unsorted } = layout;
+    const input = helpers.isObject(tree) ? normalizeTreeToArray(keys, leafKey, tree) : tree;
+    if (groups.length) {
+        return buildHierarchy(input, 0, keys, layout);
+    }
+    const nodes = toNodes(input || [], keys);
+    if (!unsorted) {
+        sortNodes(nodes);
+    }
+    return nodes;
+}
+ function applyHeaderBoxes(nodes, layout) {
+    const { captions, displayMode } = layout;
+    if (displayMode !== 'headerBoxes') {
+        return;
+    }
     const font = helpers.toFont(captions.font);
     const padding = helpers.valueOrDefault(captions.padding, 3);
-    function getSubRect(sq, rect) {
-        const bw = displayMode === 'headerBoxes' ? {
-            b: 0,
-            l: 0,
-            r: 0,
-            t: 0
-        } : parseBorderWidth(borderWidth, sq.w / 2, sq.h / 2);
-        const subRect = {
-            ...rect,
-            h: sq.h - 2 * sp - bw.t - bw.b,
-            w: sq.w - 2 * sp - bw.l - bw.r,
-            x: sq.x + sp + bw.l,
-            y: sq.y + sp + bw.t
-        };
-        if (shouldDrawCaption(displayMode, subRect, captions)) {
-            const captionHeight = getCaptionHeight(displayMode, subRect, font, padding);
-            subRect.y += captionHeight;
-            subRect.h -= captionHeight;
+    for (const node of nodes){
+        if (node.isLeaf) {
+            continue;
         }
-        return subRect;
-    }
-    function recur(treeElements, gidx, rect, parent, gs) {
-        const g = getGroupKey(groups[gidx]);
-        const gdata = group(treeElements, g, keys, leafKey, undefined, parent, groups.filter((_item, index)=>index <= gidx), groups, gidx);
-        const gsq = squarify(gdata, rect, keys, g, gidx, gs);
-        const ret = gsq.slice();
-        if (gidx < glen - 1) {
-            gsq.forEach((sq)=>{
-                const subRect = getSubRect(sq, rect);
-                const children = [];
-                const nextGroupIndex = sq._data.groupIndex + 1;
-                if (nextGroupIndex < glen) {
-                    children.push(...recur(sq._data.children, nextGroupIndex, subRect, sq.g, sq.s));
-                }
-                ret.push(...children);
-                sq.isLeaf = !children.length;
-            });
+        if (shouldDrawCaption(displayMode, node, captions)) {
+            node.h = getCaptionHeight(displayMode, node, font, padding);
+            node.hidden = false;
         } else {
-            gsq.forEach((sq)=>{
-                sq.isLeaf = true;
-            });
+            node.hidden = true;
         }
-        return ret;
     }
-    const result = glen ? recur(tree, 0, mainRect) : squarify(tree, mainRect, keys);
-    return result.map((d)=>{
-        if (displayMode !== 'headerBoxes' || d.isLeaf) {
-            return d;
-        }
-        if (!shouldDrawCaption(displayMode, d, captions)) {
-            return undefined;
-        }
-        const captionHeight = getCaptionHeight(displayMode, d, font, padding);
-        return {
-            ...d,
-            h: captionHeight
-        };
-    }).filter(Boolean);
 }
+
 function registerTooltipPositioner() {
     const tooltipPlugin = chart_js.registry.plugins.get('tooltip');
     if (!tooltipPlugin || tooltipPlugin.positioners.treemap) {
@@ -890,38 +895,81 @@ class TreemapController extends chart_js.DatasetController {
             displayMode: options.displayMode,
             groups: options.groups || [],
             leafKey: options.leafKey,
-            spacing: helpers.valueOrDefault(dataset.spacing, 0)
+            spacing: helpers.valueOrDefault(dataset.spacing, 0),
+            unsorted: !!options.unsorted
         };
     }
-    update(mode) {
+ buildOrUpdateElements(_resetNewElements) {
+        this.parse(0, 0);
+        const meta = this.getMeta();
+        const count = meta._parsed.length;
+        const elements = meta.data;
+        if (elements.length > count) {
+            elements.splice(count, elements.length - count);
+        }
+        while(elements.length < count){
+            elements.push(new this.dataElementType());
+        }
+    }
+    parse(_start, _count) {
         const dataset = this.getDataset();
-        const { data } = this.getMeta();
+        if (dataset.tree !== undefined) {
+            throw new Error('chartjs-chart-treemap v5: the "tree" option was renamed to "data". ' + 'See https://chartjs-chart-treemap.pages.dev/usage/');
+        }
         const options = this.options;
-        const groups = options.groups || [];
         const keys = [
             options.key || ''
         ].concat(options.sumKeys || []);
-        dataset.tree = dataset.tree || dataset.data || [];
-        const tree = dataset.tree;
-        const treeVersion = dataset.treeVersion;
+        const nodes = buildNodes(dataset.data || [], keys, this._layoutOptions());
+        const flat = flattenNodes(nodes);
+        const fingerprint = flat.map((node)=>`${node.v}\u0000${node.g}\u0000${node.l}`).join('\u0001');
+        if (this._fingerprint === fingerprint) {
+            return;
+        }
+        this._fingerprint = fingerprint;
+        this._nodes = nodes;
+        this.getMeta()._parsed = flat;
+        this._layoutDirty = true;
+    }
+    getContext(index, active, mode) {
+        const base = chart_js.DatasetController.prototype.getContext;
+        const context = base.call(this, index, active, mode);
+        const parsed = typeof index === 'number' ? this.getParsed(index) : undefined;
+        if (parsed) {
+            context.raw = parsed;
+            context.parsed = parsed;
+        }
+        return context;
+    }
+    getLabelAndValue(index) {
+        const node = this.getParsed(index);
+        if (!node) {
+            return {
+                label: '',
+                value: ''
+            };
+        }
+        const dataset = this.getDataset();
+        const label = node.g ?? node._data?.label ?? dataset.label;
+        return {
+            label: label === undefined ? '' : `${label}`,
+            value: `${node.v}`
+        };
+    }
+    update(mode) {
+        const { data } = this.getMeta();
         if (mode === 'reset') {
             this.configure();
         }
-        if (this._rectChanged || arrayNotEqual(this._keys || [], keys) || arrayNotEqual(this._groups || [], groups) || this._prevTree !== tree || this._prevTreeVersion !== treeVersion) {
-            this._groups = groups.slice();
-            this._keys = keys.slice();
-            this._prevTree = tree;
-            this._prevTreeVersion = treeVersion;
+        if (this._layoutDirty || this._rectChanged) {
+            layoutNodes(this._nodes, this._rect, this._layoutOptions());
+            this._layoutDirty = false;
             this._rectChanged = false;
-            dataset.data = buildData(tree, this._keys, this._rect, this._layoutOptions());
-            this._dataCheck();
-            this._resyncElements();
         }
         this.updateElements(data, 0, data.length, mode);
     }
     updateElements(rects, start, count, mode) {
         const reset = mode === 'reset';
-        const dataset = this.getDataset();
         const firstOpts = this.resolveDataElementOptions(start, mode);
         this._rect.options = firstOpts;
         const sharedOptions = this.getSharedOptions(firstOpts);
@@ -930,7 +978,9 @@ class TreemapController extends chart_js.DatasetController {
         const spacing = this.options.spacing;
         for(let i = start; i < start + count; i++){
             const options = sharedOptions || this.resolveDataElementOptions(i, mode);
-            const properties = scaleRect(dataset.data[i], xScale, yScale, spacing);
+            const node = this.getParsed(i);
+            const properties = scaleRect(node, xScale, yScale, spacing);
+            properties.hidden = properties.hidden || !!node.hidden;
             if (reset) {
                 properties.width = 0;
                 properties.height = 0;
@@ -945,8 +995,6 @@ class TreemapController extends chart_js.DatasetController {
     draw() {
         const { ctx, chartArea } = this.chart;
         const metadata = this.getMeta().data || [];
-        const dataset = this.getDataset();
-        const data = dataset.data;
         const { displayMode, rtl, spacing } = this.options;
         const layout = {
             displayMode,
@@ -957,17 +1005,18 @@ class TreemapController extends chart_js.DatasetController {
         for(let i = 0, ilen = metadata.length; i < ilen; ++i){
             const rect = metadata[i];
             if (!rect.hidden) {
-                rect.draw(ctx, data[i], layout);
+                rect.draw(ctx, this.getParsed(i), layout);
             }
         }
         helpers.unclipArea(ctx);
     }
     constructor(chart, datasetIndex){
         super(chart, datasetIndex);
-        this._groups = undefined;
-        this._keys = undefined;
         this._rect = undefined;
         this._rectChanged = true;
+        this._nodes = [];
+        this._layoutDirty = true;
+        this._fingerprint = undefined;
     }
 }
 TreemapController.id = 'treemap';
@@ -1017,10 +1066,9 @@ TreemapController.overrides = {
         tooltip: {
             callbacks: {
                 label (item) {
-                    const dataset = item.dataset;
-                    const dataItem = dataset.data[item.dataIndex];
-                    const label = dataItem.g || dataItem._data.label || dataset.label;
-                    return (label ? `${label}: ` : '') + dataItem.v;
+                    const node = item.parsed;
+                    const label = node.g || node._data?.label || item.dataset.label;
+                    return (label ? `${label}: ` : '') + node.v;
                 },
                 title (items) {
                     if (items.length) {
@@ -1238,6 +1286,7 @@ chart_js.Chart.register(TreemapController, TreemapElement);
 exports.TreemapController = TreemapController;
 exports.TreemapElement = TreemapElement;
 exports.flatten = flatten;
+exports.flattenTree = flattenTree;
 exports.getGroupKey = getGroupKey;
 exports.group = group;
 exports.index = index;