chartjs-chart-treemap 5.0.0-next.2 → 5.0.0-next.4

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

@@ -1,13 +1,13 @@
 /*!
- * chartjs-chart-treemap v5.0.0-next.2
+ * chartjs-chart-treemap v5.0.0-next.4
  * https://chartjs-chart-treemap.pages.dev/
  * (c) 2026 Jukka Kurkela
  * Released under the MIT license
  */
-import { DatasetController, Chart, registry, Element } from 'chart.js';
-import { toTRBL, toTRBLCorners, isObject, defined, toFont, valueOrDefault, isArray, isNumber, clipArea, unclipArea, addRoundedRectPath } from 'chart.js/helpers';
+import { DatasetController, registry, Chart, Element } from 'chart.js';
+import { toTRBL, toTRBLCorners, isObject, defined, isArray, isNumber, toFont, valueOrDefault, clipArea, unclipArea, addRoundedRectPath } from 'chart.js/helpers';
 
-var version = "5.0.0-next.2";
+var version = "5.0.0-next.4";
 
 function scaleRect(sq, xScale, yScale, sp) {
     const sp2 = sp * 2;
@@ -26,26 +26,12 @@ 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',
+    rtl: false,
+    spacing: 0.5
+};
 function limit(value, min, max) {
     return Math.max(Math.min(value, max), min);
 }
@@ -84,24 +70,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() {
@@ -127,19 +103,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 || {
@@ -234,7 +208,7 @@ class StatArray {
 const isOlderPart = (act, req)=>req > act || act.length > req.length && act.startsWith(req);
 const getGroupKey = (lvl)=>String(lvl);
 const hasGroupValue = (value)=>value !== undefined && value !== null && value !== '';
-function scanTreeObject(keys, treeLeafKey, obj, tree = [], lvl = 0, result = []) {
+function scanTreeObject(keys, leafKey, obj, tree = [], lvl = 0, result = []) {
     const objIndex = lvl - 1;
     if (keys[0] in obj && lvl > 0) {
         const record = tree.reduce((reduced, item, i)=>{
@@ -243,7 +217,7 @@ function scanTreeObject(keys, treeLeafKey, obj, tree = [], lvl = 0, result = [])
             }
             return reduced;
         }, {});
-        record[treeLeafKey] = tree[objIndex];
+        record[leafKey] = tree[objIndex];
         keys.forEach((k)=>{
             record[k] = obj[k];
         });
@@ -253,15 +227,18 @@ function scanTreeObject(keys, treeLeafKey, obj, tree = [], lvl = 0, result = [])
             const child = obj[childKey];
             if (isObject(child)) {
                 tree.push(childKey);
-                scanTreeObject(keys, treeLeafKey, child, tree, lvl + 1, result);
+                scanTreeObject(keys, leafKey, child, tree, lvl + 1, result);
             }
         }
     }
     tree.splice(objIndex, 1);
     return result;
 }
-function normalizeTreeToArray(keys, treeLeafKey, obj) {
-    const data = scanTreeObject(keys, treeLeafKey, obj);
+ function flattenTree(tree, keys, leafKey) {
+    return normalizeTreeToArray(keys, leafKey, tree);
+}
+function normalizeTreeToArray(keys, leafKey, obj) {
+    const data = scanTreeObject(keys, leafKey, obj);
     if (!data.length) {
         return data;
     }
@@ -279,21 +256,6 @@ function normalizeTreeToArray(keys, treeLeafKey, obj) {
     });
     return data;
 }
-function flatten(input) {
-    const stack = [
-        ...input
-    ];
-    const res = [];
-    while(stack.length){
-        const next = stack.pop();
-        if (Array.isArray(next)) {
-            stack.push(...next);
-        } else {
-            res.push(next);
-        }
-    }
-    return res.reverse();
-}
 function getPath(groups, value, defaultValue) {
     const path = [];
     for (const grp of groups){
@@ -305,7 +267,7 @@ function getPath(groups, value, defaultValue) {
     }
     return path.length ? path.join('.') : defaultValue;
 }
-function resolveGroup(value, treeLeafKey, allGroups, groupIndex) {
+function resolveGroup(value, leafKey, allGroups, groupIndex) {
     for(let idx = groupIndex; idx < allGroups.length; idx++){
         const groupKey = getGroupKey(allGroups[idx]);
         if (hasGroupValue(value[groupKey])) {
@@ -316,11 +278,11 @@ function resolveGroup(value, treeLeafKey, allGroups, groupIndex) {
             };
         }
     }
-    if (hasGroupValue(value[treeLeafKey])) {
+    if (hasGroupValue(value[leafKey])) {
         return {
-            group: treeLeafKey,
+            group: leafKey,
             groupIndex,
-            value: value[treeLeafKey]
+            value: value[leafKey]
         };
     }
     return undefined;
@@ -338,7 +300,7 @@ function ensureGroup(tmp, data, groupValue, addKeys) {
     });
     data[groupValue] = [];
 }
-function group(values, grp, keys, treeLeafKey, mainGrp, mainValue, groups = [], allGroups = groups, groupIndex = groups.length - 1) {
+function group(values, grp, keys, leafKey, mainGrp, mainValue, groups = [], allGroups = groups, groupIndex = groups.length - 1) {
     const key = keys[0];
     const addKeys = keys.slice(1);
     const tmp = Object.create(null);
@@ -352,7 +314,7 @@ function group(values, grp, keys, treeLeafKey, mainGrp, mainValue, groups = [],
     let n;
     for(i = 0, n = values.length; i < n; ++i){
         const v = values[i];
-        const itemGroup = resolveGroup(v, treeLeafKey, resolvedAllGroups, resolvedGroupIndex);
+        const itemGroup = resolveGroup(v, leafKey, resolvedAllGroups, resolvedGroupIndex);
         if (!itemGroup) {
             return [];
         }
@@ -407,10 +369,8 @@ function index(values, key) {
     return key;
 }
 function sort(values, key) {
-    if (key) {
+    {
         values.sort((a, b)=>+b[key] - +a[key]);
-    } else {
-        values.sort((a, b)=>+b - +a);
     }
 }
 function sum(values, key) {
@@ -418,7 +378,7 @@ function sum(values, key) {
     let i;
     let n;
     for(s = 0, i = 0, n = values.length; i < n; ++i){
-        s += key ? +values[i][key] : +values[i];
+        s += +values[i][key] ;
     }
     return s;
 }
@@ -453,54 +413,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();
@@ -524,20 +481,42 @@ function getCaptionHeight(displayMode, rect, font, padding) {
     const captionHeight = font.lineHeight + padding * 2;
     return rect.h < 2 * captionHeight ? rect.h / 3 : captionHeight;
 }
-function drawText(ctx, rect, options, item, element) {
-    const { captions, labels, displayMode } = options;
+function drawText(ctx, rect, options, item, element, layout) {
+    const { captions, labels } = options;
+    const { displayMode } = layout;
+    const isLeaf = item && (!defined(item.l) || item.isLeaf);
+    let block;
+    if (isLeaf) {
+        if (labels.display) {
+            block = labelBlock(ctx, rect, options, item, element);
+        }
+    } else if (shouldDrawCaption(displayMode, rect, captions)) {
+        block = captionBlock(ctx, rect, options, item, element, layout);
+    }
+    if (!block) {
+        return;
+    }
     ctx.save();
     ctx.beginPath();
     ctx.rect(rect.x, rect.y, rect.w, rect.h);
     ctx.clip();
-    const isLeaf = item && (!defined(item.l) || item.isLeaf);
-    if (isLeaf && labels.display) {
-        drawLabel(ctx, rect, options, item, element);
-    } else if (!isLeaf && shouldDrawCaption(displayMode, rect, captions)) {
-        drawCaption(ctx, rect, options, item, element);
-    }
+    drawTextBlock(ctx, rect, block);
     ctx.restore();
 }
+function drawTextBlock(ctx, rect, block) {
+    const { align, colors, fonts, lines, padding, top } = block;
+    const x = calculateX(rect, align, padding);
+    ctx.textAlign = align;
+    ctx.textBaseline = 'middle';
+    let offset = 0;
+    lines.forEach((line, i)=>{
+        const font = fonts[Math.min(i, fonts.length - 1)];
+        ctx.font = font.string;
+        ctx.fillStyle = colors[Math.min(i, colors.length - 1)];
+        ctx.fillText(line, x, top + offset + font.lineHeight / 2);
+        offset += font.lineHeight;
+    });
+}
 function callbackContext(element, item) {
     const context = element.$context || {
         active: !!element.active,
@@ -554,16 +533,12 @@ function resolveOption(option, context) {
 function resolveCaptionText(captions, element, item) {
     return resolveOption(captions.formatter, callbackContext(element, item)) || item.g || '';
 }
-function drawCaption(ctx, rect, options, item, element) {
-    const { captions, spacing, rtl, displayMode } = options;
+function captionBlock(ctx, rect, options, item, element, layout) {
+    const { displayMode, rtl, spacing } = layout;
+    const { captions } = options;
     const { color, hoverColor, font, hoverFont, padding, align } = captions;
-    const oColor = (rect.active ? hoverColor : color) || color;
-    const oAlign = align || (rtl ? 'right' : 'left');
     const optFont = (rect.active ? hoverFont : font) || font;
     const oFont = toFont(optFont);
-    const fonts = [
-        oFont
-    ];
     if (oFont.lineHeight > rect.h) {
         return;
     }
@@ -571,20 +546,62 @@ function drawCaption(ctx, rect, options, item, element) {
     if (!text) {
         return;
     }
-    const captionSize = measureLabelSize(ctx, [
+    const fonts = [
+        oFont
+    ];
+    if (measureLabelSize(ctx, [
         text
-    ], fonts);
-    if (captionSize.width + 2 * padding > rect.w) {
+    ], fonts).width + 2 * padding > rect.w) {
         text = sliceTextToFitWidth(ctx, text, rect.w - 2 * padding, fonts);
     }
-    const lh = oFont.lineHeight / 2;
-    const x = calculateX(rect, oAlign, padding);
-    ctx.fillStyle = oColor;
-    ctx.font = oFont.string;
-    ctx.textAlign = oAlign;
-    ctx.textBaseline = 'middle';
-    const y = displayMode === 'headerBoxes' ? rect.y + rect.h / 2 : rect.y + padding + spacing + lh;
-    ctx.fillText(text, x, y);
+    const top = displayMode === 'headerBoxes' ? rect.y + (rect.h - oFont.lineHeight) / 2 : rect.y + padding + spacing;
+    return {
+        align: align || (rtl ? 'right' : 'left'),
+        colors: [
+            (rect.active ? hoverColor : color) || color
+        ],
+        fonts,
+        lines: [
+            text
+        ],
+        padding,
+        top
+    };
+}
+function labelBlock(ctx, rect, options, item, element) {
+    const labels = options.labels;
+    const content = resolveOption(labels.formatter, callbackContext(element, item));
+    if (!content) {
+        return;
+    }
+    const lines = isArray(content) ? content : [
+        content
+    ];
+    let fonts = getFontFromOptions(rect, labels);
+    let labelSize = measureLabelSize(ctx, lines, fonts);
+    const lblToDraw = labelToDraw(rect, labels, labelSize);
+    if (!lblToDraw) {
+        return;
+    }
+    if (isNumber(lblToDraw)) {
+        labelSize = {
+            height: labelSize.height * lblToDraw,
+            width: labelSize.width * lblToDraw
+        };
+        fonts = toFonts(fonts, lblToDraw);
+    }
+    const { color, hoverColor, align, padding } = labels;
+    const optColor = (rect.active ? hoverColor : color) || color;
+    return {
+        align,
+        colors: isArray(optColor) ? optColor : [
+            optColor
+        ],
+        fonts,
+        lines,
+        padding,
+        top: calculateBlockTop(rect, labels, labelSize)
+    };
 }
 function sliceTextToFitWidth(ctx, text, width, fonts) {
     const ellipsis = '...';
@@ -649,7 +666,7 @@ function toFonts(fonts, fitRatio) {
         });
     });
 }
-function labelToDraw(_ctx, rect, options, labelSize) {
+function labelToDraw(rect, options, labelSize) {
     const { overflow, padding } = options;
     const { width, height } = labelSize;
     if (overflow === 'hidden') {
@@ -669,62 +686,15 @@ function getFontFromOptions(rect, labels) {
         toFont(optFont)
     ];
 }
-function drawLabel(ctx, rect, options, item, element) {
-    const labels = options.labels;
-    const content = resolveOption(labels.formatter, callbackContext(element, item));
-    if (!content) {
-        return;
-    }
-    const contents = isArray(content) ? content : [
-        content
-    ];
-    let fonts = getFontFromOptions(rect, labels);
-    let labelSize = measureLabelSize(ctx, contents, fonts);
-    const lblToDraw = labelToDraw(ctx, rect, labels, labelSize);
-    if (!lblToDraw) {
-        return;
-    }
-    if (isNumber(lblToDraw)) {
-        labelSize = {
-            height: labelSize.height * lblToDraw,
-            width: labelSize.width * lblToDraw
-        };
-        fonts = toFonts(fonts, lblToDraw);
-    }
-    const { color, hoverColor, align } = labels;
-    const optColor = (rect.active ? hoverColor : color) || color;
-    const colors = isArray(optColor) ? optColor : [
-        optColor
-    ];
-    const xyPoint = calculateXYLabel(rect, labels, labelSize);
-    ctx.textAlign = align;
-    ctx.textBaseline = 'middle';
-    let lhs = 0;
-    contents.forEach((l, i)=>{
-        const c = colors[Math.min(i, colors.length - 1)];
-        const f = fonts[Math.min(i, fonts.length - 1)];
-        const lh = f.lineHeight;
-        ctx.font = f.string;
-        ctx.fillStyle = c;
-        ctx.fillText(l, xyPoint.x, xyPoint.y + lh / 2 + lhs);
-        lhs += lh;
-    });
-}
-function calculateXYLabel(rect, options, labelSize) {
-    const { align, position, padding } = options;
-    const x = calculateX(rect, align, padding);
-    let y;
+function calculateBlockTop(rect, options, labelSize) {
+    const { position, padding } = options;
     if (position === 'top') {
-        y = rect.y + padding;
-    } else if (position === 'bottom') {
-        y = rect.y + rect.h - padding - labelSize.height;
-    } else {
-        y = rect.y + (rect.h - labelSize.height) / 2 + padding;
+        return rect.y + padding;
     }
-    return {
-        x,
-        y
-    };
+    if (position === 'bottom') {
+        return rect.y + rect.h - padding - labelSize.height;
+    }
+    return rect.y + (rect.h - labelSize.height) / 2 + padding;
 }
 function calculateX(rect, align, padding) {
     if (align === 'left') {
@@ -735,76 +705,109 @@ function calculateX(rect, align, padding) {
     return rect.x + rect.w / 2;
 }
 
-function buildData(tree, dataset, keys, mainRect) {
-    const treeLeafKey = dataset.treeLeafKey || '_leaf';
-    if (isObject(tree)) {
-        tree = normalizeTreeToArray(keys, treeLeafKey, tree);
-    }
-    const groups = dataset.groups || [];
+function buildHierarchy(values, gidx, keys, layout, parentGroupValue) {
+    const { groups, leafKey, unsorted } = layout;
     const glen = groups.length;
-    const sp = dataset.displayMode === 'headerBoxes' ? 0 : valueOrDefault(dataset.spacing, 0);
-    const captions = dataset.captions || {};
+    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, toFont(captions.font), valueOrDefault(captions.padding, 3));
+        subRect.y += captionHeight;
+        subRect.h -= captionHeight;
+    }
+    return subRect;
+}
+ function buildNodes(tree, keys, layout) {
+    const { groups, leafKey, unsorted } = layout;
+    const input = 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 = toFont(captions.font);
     const padding = valueOrDefault(captions.padding, 3);
-    function getSubRect(sq, rect) {
-        const bw = dataset.displayMode === 'headerBoxes' ? {
-            b: 0,
-            l: 0,
-            r: 0,
-            t: 0
-        } : parseBorderWidth(dataset.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(dataset.displayMode, subRect, captions)) {
-            const captionHeight = getCaptionHeight(dataset.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, treeLeafKey, 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 (dataset.displayMode !== 'headerBoxes' || d.isLeaf) {
-            return d;
-        }
-        if (!shouldDrawCaption(dataset.displayMode, d, captions)) {
-            return undefined;
-        }
-        const captionHeight = getCaptionHeight(dataset.displayMode, d, font, padding);
-        return {
-            ...d,
-            h: captionHeight
-        };
-    }).filter(Boolean);
 }
+
 function registerTooltipPositioner() {
     const tooltipPlugin = registry.plugins.get('tooltip');
     if (!tooltipPlugin || tooltipPlugin.positioners.treemap) {
@@ -857,42 +860,101 @@ class TreemapController extends DatasetController {
             yScale.configure();
         }
     }
-    update(mode) {
+ _layoutOptions() {
         const dataset = this.getDataset();
-        const { data } = this.getMeta();
-        const groups = dataset.groups || [];
+        const options = this.options;
+        return {
+            borderWidth: dataset.borderWidth,
+            captions: dataset.captions || {},
+            displayMode: options.displayMode,
+            groups: options.groups || [],
+            leafKey: options.leafKey,
+            spacing: valueOrDefault(dataset.spacing, 0),
+            unsorted: !!options.unsorted
+        };
+    }
+ 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();
+        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 keys = [
-            dataset.key || ''
-        ].concat(dataset.sumKeys || []);
-        dataset.tree = dataset.tree || dataset.data || [];
-        const tree = dataset.tree;
-        const treeVersion = dataset.treeVersion;
+            options.key || ''
+        ].concat(options.sumKeys || []);
+        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 = 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, dataset, this._keys, this._rect);
-            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);
         const includeOptions = this.includeOptions(mode, sharedOptions || {});
         const { xScale, yScale } = this.getMeta();
+        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, options.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;
@@ -907,23 +969,28 @@ class TreemapController extends 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,
+            rtl,
+            spacing
+        };
         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]);
+                rect.draw(ctx, this.getParsed(i), layout);
             }
         }
         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';
@@ -940,7 +1007,15 @@ TreemapController.defaults = {
             type: 'number'
         }
     },
-    dataElementType: 'treemap'
+    dataElementType: 'treemap',
+    displayMode: layoutDefaults.displayMode,
+    groups: [],
+    key: '',
+    leafKey: '_leaf',
+    rtl: layoutDefaults.rtl,
+    spacing: layoutDefaults.spacing,
+    sumKeys: [],
+    unsorted: false
 };
 TreemapController.descriptors = {
     _indexable: false,
@@ -965,10 +1040,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) {
@@ -1070,7 +1144,7 @@ function addNormalRectPath(ctx, rect) {
 }
 
 class TreemapElement extends Element {
-    draw(ctx, data) {
+    draw(ctx, data, layout = layoutDefaults) {
         if (!data) {
             return;
         }
@@ -1090,7 +1164,7 @@ class TreemapElement extends Element {
         addRectPath(ctx, inner);
         ctx.fillStyle = options.backgroundColor;
         ctx.fill();
-        drawText(ctx, inner, options, data, this);
+        drawText(ctx, inner, options, data, this, layout);
         ctx.restore();
     }
     inRange(mouseX, mouseY, useFinalPosition) {
@@ -1141,8 +1215,6 @@ TreemapElement.defaults = {
         },
         padding: 3
     },
-    displayMode: 'containerBoxes',
-    label: undefined,
     labels: {
         align: 'center',
         color: 'black',
@@ -1164,10 +1236,7 @@ TreemapElement.defaults = {
         overflow: 'cut',
         padding: 3,
         position: 'middle'
-    },
-    rtl: false,
-    spacing: 0.5,
-    unsorted: false
+    }
 };
 TreemapElement.descriptors = {
     _indexable: false,
@@ -1186,4 +1255,4 @@ TreemapElement.defaultRoutes = {
     borderColor: 'borderColor'
 };
 
-export { TreemapController, TreemapElement };
+export { TreemapController, TreemapElement, flattenTree };