chartjs-chart-treemap 4.0.0 → 4.1.1

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

@@ -4,445 +4,11 @@
  * (c) 2026 Jukka Kurkela
  * Released under the MIT license
  */
-import { Element, DatasetController, Chart, registry } from 'chart.js';
-import { addRoundedRectPath, defined, toTRBL, toTRBLCorners, isArray, isNumber, toFont, valueOrDefault, isObject, clipArea, unclipArea } from 'chart.js/helpers';
+import { DatasetController, Chart, registry, Element } from 'chart.js';
+import { toTRBL, toTRBLCorners, isObject, defined, toFont, valueOrDefault, isArray, isNumber, clipArea, unclipArea, addRoundedRectPath } from 'chart.js/helpers';
 
 var version = "0.0.0-development";
 
-const widthCache = new Map();
-function getBounds(rect, useFinalPosition) {
-    const { x, y, width, height } = rect.getProps([
-        'x',
-        'y',
-        'width',
-        'height'
-    ], useFinalPosition);
-    return {
-        bottom: y + height,
-        left: x,
-        right: x + width,
-        top: y
-    };
-}
-function limit(value, min, max) {
-    return Math.max(Math.min(value, max), min);
-}
-function parseBorderWidth(value, maxW, maxH) {
-    const o = toTRBL(value);
-    return {
-        b: limit(o.bottom, 0, maxH),
-        l: limit(o.left, 0, maxW),
-        r: limit(o.right, 0, maxW),
-        t: limit(o.top, 0, maxH)
-    };
-}
-function parseBorderRadius(value, maxW, maxH) {
-    const o = toTRBLCorners(value);
-    const maxR = Math.min(maxW, maxH);
-    return {
-        bottomLeft: limit(o.bottomLeft, 0, maxR),
-        bottomRight: limit(o.bottomRight, 0, maxR),
-        topLeft: limit(o.topLeft, 0, maxR),
-        topRight: limit(o.topRight, 0, maxR)
-    };
-}
-function boundingRects(rect) {
-    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 = {
-        active: rect.active,
-        h: height,
-        radius,
-        w: width,
-        x: bounds.left,
-        y: bounds.top
-    };
-    return {
-        inner: {
-            active: rect.active,
-            h: outer.h - border.t - border.b,
-            radius: {
-                bottomLeft: Math.max(0, radius.bottomLeft - Math.max(border.b, border.l)),
-                bottomRight: Math.max(0, radius.bottomRight - Math.max(border.b, border.r)),
-                topLeft: Math.max(0, radius.topLeft - Math.max(border.t, border.l)),
-                topRight: Math.max(0, radius.topRight - Math.max(border.t, border.r))
-            },
-            w: outer.w - border.l - border.r,
-            x: outer.x + border.l,
-            y: outer.y + border.t
-        },
-        outer
-    };
-}
-function inRange(rect, x, y, useFinalPosition) {
-    const skipX = x === null;
-    const skipY = y === null;
-    const bounds = !rect || skipX && skipY ? false : getBounds(rect, useFinalPosition);
-    return bounds && (skipX || x >= bounds.left && x <= bounds.right) && (skipY || y >= bounds.top && y <= bounds.bottom);
-}
-function hasRadius(radius) {
-    return radius.topLeft || radius.topRight || radius.bottomLeft || radius.bottomRight;
-}
- function addNormalRectPath(ctx, rect) {
-    ctx.rect(rect.x, rect.y, rect.w, rect.h);
-}
-function shouldDrawCaption(displayMode, rect, options) {
-    if (!options || options.display === false) {
-        return false;
-    }
-    if (displayMode === 'headerBoxes') {
-        return true;
-    }
-    const { w, h } = rect;
-    const font = toFont(options.font);
-    const min = font.lineHeight;
-    const padding = limit(valueOrDefault(options.padding, 3) * 2, 0, Math.min(w, h));
-    return w - padding > min && h - padding > min;
-}
-function getCaptionHeight(displayMode, rect, font, padding) {
-    if (displayMode !== 'headerBoxes') {
-        return font.lineHeight + padding * 2;
-    }
-    const captionHeight = font.lineHeight + padding * 2;
-    return rect.h < 2 * captionHeight ? rect.h / 3 : captionHeight;
-}
-function drawText(ctx, rect, options, item) {
-    const { captions, labels, displayMode } = options;
-    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);
-    } else if (!isLeaf && shouldDrawCaption(displayMode, rect, captions)) {
-        drawCaption(ctx, rect, options, item);
-    }
-    ctx.restore();
-}
-function drawCaption(ctx, rect, options, item) {
-    const { captions, spacing, rtl, displayMode } = options;
-    const { color, hoverColor, font, hoverFont, padding, align, formatter } = 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;
-    }
-    let text = formatter || item.g;
-    const captionSize = measureLabelSize(ctx, [
-        formatter
-    ], fonts);
-    if (captionSize.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);
-}
-function sliceTextToFitWidth(ctx, text, width, fonts) {
-    const ellipsis = '...';
-    const ellipsisWidth = measureLabelSize(ctx, [
-        ellipsis
-    ], fonts).width;
-    if (ellipsisWidth >= width) {
-        return '';
-    }
-    let lowerBoundLen = 1;
-    let upperBoundLen = text.length;
-    let currentWidth;
-    while(lowerBoundLen <= upperBoundLen){
-        const currentLen = Math.floor((lowerBoundLen + upperBoundLen) / 2);
-        const currentText = text.slice(0, currentLen);
-        currentWidth = measureLabelSize(ctx, [
-            currentText
-        ], fonts).width;
-        if (currentWidth + ellipsisWidth > width) {
-            upperBoundLen = currentLen - 1;
-        } else {
-            lowerBoundLen = currentLen + 1;
-        }
-    }
-    const slicedText = text.slice(0, Math.max(0, lowerBoundLen - 1));
-    return slicedText ? slicedText + ellipsis : '';
-}
-function measureLabelSize(ctx, lines, fonts) {
-    const fontsKey = fonts.reduce((prev, item)=>{
-        prev += item.string;
-        return prev;
-    }, '');
-    const mapKey = lines.join() + fontsKey + (ctx._measureText ? '-spriting' : '');
-    if (!widthCache.has(mapKey)) {
-        ctx.save();
-        const count = lines.length;
-        let width = 0;
-        let height = 0;
-        for(let i = 0; i < count; i++){
-            const font = fonts[Math.min(i, fonts.length - 1)];
-            ctx.font = font.string;
-            const text = lines[i];
-            width = Math.max(width, ctx.measureText(text).width);
-            height += font.lineHeight;
-        }
-        ctx.restore();
-        widthCache.set(mapKey, {
-            height,
-            width
-        });
-    }
-    return widthCache.get(mapKey);
-}
-function toFonts(fonts, fitRatio) {
-    return fonts.map((f)=>{
-        f.size = Math.floor(f.size * fitRatio);
-        f.lineHeight = undefined;
-        return toFont(f);
-    });
-}
-function labelToDraw(_ctx, rect, options, labelSize) {
-    const { overflow, padding } = options;
-    const { width, height } = labelSize;
-    if (overflow === 'hidden') {
-        return !(width + padding * 2 > rect.w || height + padding * 2 > rect.h);
-    } else if (overflow === 'fit') {
-        const ratio = Math.min(rect.w / (width + padding * 2), rect.h / (height + padding * 2));
-        if (ratio < 1) {
-            return ratio;
-        }
-    }
-    return true;
-}
-function getFontFromOptions(rect, labels) {
-    const { font, hoverFont } = labels;
-    const optFont = (rect.active ? hoverFont : font) || font;
-    return Array.isArray(optFont) ? optFont.map((f)=>toFont(f)) : [
-        toFont(optFont)
-    ];
-}
-function drawLabel(ctx, rect, options) {
-    const labels = options.labels;
-    const content = labels.formatter;
-    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 drawDivider(ctx, rect, options, item) {
-    const dividers = options.dividers;
-    if (!dividers.display || !item._data.children.length) {
-        return;
-    }
-    const { x, y, w, h } = rect;
-    const { lineColor, lineCapStyle, lineDash, lineDashOffset, lineWidth } = dividers;
-    ctx.save();
-    ctx.strokeStyle = lineColor;
-    ctx.lineCap = lineCapStyle;
-    ctx.setLineDash(lineDash);
-    ctx.lineDashOffset = lineDashOffset;
-    ctx.lineWidth = lineWidth;
-    ctx.beginPath();
-    if (w > h) {
-        const w2 = w / 2;
-        ctx.moveTo(x + w2, y);
-        ctx.lineTo(x + w2, y + h);
-    } else {
-        const h2 = h / 2;
-        ctx.moveTo(x, y + h2);
-        ctx.lineTo(x + w, y + h2);
-    }
-    ctx.stroke();
-    ctx.restore();
-}
-function calculateXYLabel(rect, options, labelSize) {
-    const { align, position, padding } = options;
-    const x = calculateX(rect, align, padding);
-    let y;
-    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 {
-        x,
-        y
-    };
-}
-function calculateX(rect, align, padding) {
-    if (align === 'left') {
-        return rect.x + padding;
-    } else if (align === 'right') {
-        return rect.x + rect.w - padding;
-    }
-    return rect.x + rect.w / 2;
-}
-class TreemapElement extends Element {
-    draw(ctx, data) {
-        if (!data) {
-            return;
-        }
-        const options = this.options;
-        const { inner, outer } = boundingRects(this);
-        const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
-        ctx.save();
-        if (outer.w !== inner.w || outer.h !== inner.h) {
-            ctx.beginPath();
-            addRectPath(ctx, outer);
-            ctx.clip();
-            addRectPath(ctx, inner);
-            ctx.fillStyle = options.borderColor;
-            ctx.fill('evenodd');
-        }
-        ctx.beginPath();
-        addRectPath(ctx, inner);
-        ctx.fillStyle = options.backgroundColor;
-        ctx.fill();
-        drawDivider(ctx, inner, options, data);
-        drawText(ctx, inner, options, data);
-        ctx.restore();
-    }
-    inRange(mouseX, mouseY, useFinalPosition) {
-        return inRange(this, mouseX, mouseY, useFinalPosition);
-    }
-    inXRange(mouseX, useFinalPosition) {
-        return inRange(this, mouseX, null, useFinalPosition);
-    }
-    inYRange(mouseY, useFinalPosition) {
-        return inRange(this, null, mouseY, useFinalPosition);
-    }
-    getCenterPoint(useFinalPosition) {
-        const { x, y, width, height } = this.getProps([
-            'x',
-            'y',
-            'width',
-            'height'
-        ], useFinalPosition);
-        return {
-            x: x + width / 2,
-            y: y + height / 2
-        };
-    }
-    tooltipPosition() {
-        return this.getCenterPoint();
-    }
-    constructor(cfg){
-        super();
-        this.options = undefined;
-        this.width = undefined;
-        this.height = undefined;
-        if (cfg) {
-            Object.assign(this, cfg);
-        }
-    }
-}
-TreemapElement.id = 'treemap';
-TreemapElement.defaults = {
-    borderRadius: 0,
-    borderWidth: 0,
-    captions: {
-        align: undefined,
-        color: 'black',
-        display: true,
-        font: {},
-        formatter: (ctx)=>ctx.raw.g || ctx.raw._data.label || '',
-        padding: 3
-    },
-    displayMode: 'containerBoxes',
-    dividers: {
-        display: false,
-        lineCapStyle: 'butt',
-        lineColor: 'black',
-        lineDash: [],
-        lineDashOffset: 0,
-        lineWidth: 1
-    },
-    label: undefined,
-    labels: {
-        align: 'center',
-        color: 'black',
-        display: false,
-        font: {},
-        formatter (ctx) {
-            if (ctx.raw.g) {
-                return [
-                    ctx.raw.g,
-                    `${ctx.raw.v}`
-                ];
-            }
-            return ctx.raw._data.label ? [
-                ctx.raw._data.label,
-                `${ctx.raw.v}`
-            ] : `${ctx.raw.v}`;
-        },
-        overflow: 'cut',
-        padding: 3,
-        position: 'middle'
-    },
-    rtl: false,
-    spacing: 0.5,
-    unsorted: false
-};
-TreemapElement.descriptors = {
-    _indexable: false,
-    _scriptable: true,
-    captions: {
-        _fallback: true
-    },
-    labels: {
-        _fallback: true
-    }
-};
-TreemapElement.defaultRoutes = {
-    backgroundColor: 'backgroundColor',
-    borderColor: 'borderColor'
-};
-
 function scaleRect(sq, xScale, yScale, sp) {
     const sp2 = sp * 2;
     const x = xScale.getPixelForValue(sq.x);
@@ -480,6 +46,29 @@ function arrayNotEqual(a, b) {
     return false;
 }
 
+function limit(value, min, max) {
+    return Math.max(Math.min(value, max), min);
+}
+function parseBorderWidth(value, maxW, maxH) {
+    const o = toTRBL(value);
+    return {
+        b: limit(o.bottom, 0, maxH),
+        l: limit(o.left, 0, maxW),
+        r: limit(o.right, 0, maxW),
+        t: limit(o.top, 0, maxH)
+    };
+}
+function parseBorderRadius(value, maxW, maxH) {
+    const o = toTRBLCorners(value);
+    const maxR = Math.min(maxW, maxH);
+    return {
+        bottomLeft: limit(o.bottomLeft, 0, maxR),
+        bottomRight: limit(o.bottomRight, 0, maxR),
+        topLeft: limit(o.topLeft, 0, maxR),
+        topRight: limit(o.topRight, 0, maxR)
+    };
+}
+
 function getDims(itm, w2, s2, key) {
     const a = itm._normalized;
     const ar = w2 * a / s2;
@@ -644,6 +233,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 = []) {
     const objIndex = lvl - 1;
     if (keys[0] in obj && lvl > 0) {
@@ -705,55 +295,78 @@ function flatten(input) {
     return res.reverse();
 }
 function getPath(groups, value, defaultValue) {
-    if (!groups.length) {
-        return undefined;
-    }
     const path = [];
     for (const grp of groups){
         const item = value[grp];
-        if (item === '') {
-            path.push(defaultValue);
-            break;
+        if (!hasGroupValue(item)) {
+            continue;
         }
         path.push(item);
     }
     return path.length ? path.join('.') : defaultValue;
 }
-function group(values, grp, keys, treeLeafKey, mainGrp, mainValue, groups = []) {
+function resolveGroup(value, treeLeafKey, allGroups, groupIndex) {
+    for(let idx = groupIndex; idx < allGroups.length; idx++){
+        const groupKey = getGroupKey(allGroups[idx]);
+        if (hasGroupValue(value[groupKey])) {
+            return {
+                group: groupKey,
+                groupIndex: idx,
+                value: value[groupKey]
+            };
+        }
+    }
+    if (hasGroupValue(value[treeLeafKey])) {
+        return {
+            group: treeLeafKey,
+            groupIndex,
+            value: value[treeLeafKey]
+        };
+    }
+    return undefined;
+}
+function ensureGroup(tmp, data, groupValue, addKeys) {
+    if (groupValue in tmp) {
+        return;
+    }
+    tmp[groupValue] = {
+        value: 0
+    };
+    const tmpRef = tmp[groupValue];
+    addKeys.forEach((k)=>{
+        tmpRef[k] = 0;
+    });
+    data[groupValue] = [];
+}
+function group(values, grp, keys, treeLeafKey, mainGrp, mainValue, groups = [], allGroups = groups, groupIndex = groups.length - 1) {
     const key = keys[0];
     const addKeys = keys.slice(1);
     const tmp = Object.create(null);
     const data = Object.create(null);
     const ret = [];
-    let g;
+    const resolvedAllGroups = allGroups.length ? allGroups : [
+        grp
+    ];
+    const resolvedGroupIndex = allGroups.length ? groupIndex : 0;
     let i;
     let n;
     for(i = 0, n = values.length; i < n; ++i){
         const v = values[i];
-        if (mainGrp && v[mainGrp] !== mainValue) {
-            continue;
-        }
-        g = v[grp] || v[treeLeafKey] || '';
-        if (!g) {
+        const itemGroup = resolveGroup(v, treeLeafKey, resolvedAllGroups, resolvedGroupIndex);
+        if (!itemGroup) {
             return [];
         }
-        if (!(g in tmp)) {
-            tmp[g] = {
-                value: 0
-            };
-            const tmpRef = tmp[g];
-            addKeys.forEach((k)=>{
-                tmpRef[k] = 0;
-            });
-            data[g] = [];
-        }
+        const g = itemGroup.value;
+        ensureGroup(tmp, data, g, addKeys);
         tmp[g].value += +v[key];
-        tmp[g].label = v[grp] || '';
+        tmp[g].label = g;
+        tmp[g].group = itemGroup.group;
+        tmp[g].groupIndex = itemGroup.groupIndex;
         const tmpRef = tmp[g];
         addKeys.forEach((k)=>{
             tmpRef[k] += v[k];
         });
-        tmp[g].path = getPath(groups, v, g);
+        tmp[g].path = getPath(resolvedAllGroups.slice(0, itemGroup.groupIndex + 1), v, g);
         data[g].push(v);
     }
     Object.keys(tmp).forEach((k)=>{
@@ -765,11 +378,10 @@ function group(values, grp, keys, treeLeafKey, mainGrp, mainValue, groups = [])
             v[ak] = +tmp[k][ak];
         });
         v[grp] = tmp[k].label;
+        v.group = tmp[k].group;
+        v.groupIndex = tmp[k].groupIndex;
         v.label = k;
         v.path = tmp[k].path;
-        if (mainGrp) {
-            v[mainGrp] = mainValue;
-        }
         ret.push(v);
     });
     return ret;
@@ -853,42 +465,301 @@ function squarify(values, rectangle, keys = [], grp, lvl, gsum) {
     if (!n) {
         return rows;
     }
-    const tmp = values.slice();
-    const key = index(tmp, keys[0]);
-    if (!rectangle?.unsorted) {
-        sort(tmp, key);
+    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)
+        };
+        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];
+                return obj;
+            }, {});
+        }
+        o = row.pushIf(o, compareAspectRatio, length);
+        if (o) {
+            rows.push(rect.map(row));
+            length = rect.side;
+            row.reset();
+            row.push(o);
+        }
+    }
+    if (row.length) {
+        rows.push(rect.map(row));
+    }
+    return flatten(rows);
+}
+
+const widthCache = new Map();
+function shouldDrawCaption(displayMode, rect, options) {
+    if (!options || options.display === false) {
+        return false;
+    }
+    if (displayMode === 'headerBoxes') {
+        return true;
+    }
+    const { w, h } = rect;
+    const font = toFont(options.font || {});
+    const min = font.lineHeight;
+    const padding = Math.max(Math.min(valueOrDefault(options.padding, 3) * 2, Math.min(w, h)), 0);
+    return w - padding > min && h - padding > min;
+}
+function getCaptionHeight(displayMode, rect, font, padding) {
+    if (displayMode !== 'headerBoxes') {
+        return font.lineHeight + padding * 2;
+    }
+    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;
+    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);
+    }
+    ctx.restore();
+}
+function callbackContext(element, item) {
+    const context = element.$context || {
+        active: !!element.active,
+        raw: item,
+        type: 'data'
+    };
+    context.active = !!element.active;
+    context.raw = item;
+    return context;
+}
+function resolveOption(option, context) {
+    return typeof option === 'function' ? option(context) : option;
+}
+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;
+    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;
+    }
+    let text = resolveCaptionText(captions, element, item);
+    if (!text) {
+        return;
+    }
+    const captionSize = measureLabelSize(ctx, [
+        text
+    ], fonts);
+    if (captionSize.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);
+}
+function sliceTextToFitWidth(ctx, text, width, fonts) {
+    const ellipsis = '...';
+    const ellipsisWidth = measureLabelSize(ctx, [
+        ellipsis
+    ], fonts).width;
+    if (ellipsisWidth >= width) {
+        return '';
+    }
+    let lowerBoundLen = 1;
+    let upperBoundLen = text.length;
+    let currentWidth;
+    while(lowerBoundLen <= upperBoundLen){
+        const currentLen = Math.floor((lowerBoundLen + upperBoundLen) / 2);
+        const currentText = text.slice(0, currentLen);
+        currentWidth = measureLabelSize(ctx, [
+            currentText
+        ], fonts).width;
+        if (currentWidth + ellipsisWidth > width) {
+            upperBoundLen = currentLen - 1;
+        } else {
+            lowerBoundLen = currentLen + 1;
+        }
+    }
+    const slicedText = text.slice(0, Math.max(0, lowerBoundLen - 1));
+    return slicedText ? slicedText + ellipsis : '';
+}
+function measureLabelSize(ctx, lines, fonts) {
+    const fontsKey = fonts.reduce((prev, item)=>{
+        prev += item.string;
+        return prev;
+    }, '');
+    const mapKey = lines.join() + fontsKey + (ctx._measureText ? '-spriting' : '');
+    let size = widthCache.get(mapKey);
+    if (!size) {
+        ctx.save();
+        const count = lines.length;
+        let width = 0;
+        let height = 0;
+        for(let i = 0; i < count; i++){
+            const font = fonts[Math.min(i, fonts.length - 1)];
+            ctx.font = font.string;
+            const text = lines[i];
+            width = Math.max(width, ctx.measureText(text).width);
+            height += font.lineHeight;
+        }
+        ctx.restore();
+        size = {
+            height,
+            width
+        };
+        widthCache.set(mapKey, size);
+    }
+    return size;
+}
+function toFonts(fonts, fitRatio) {
+    return fonts.map((f)=>{
+        const { lineHeight: _lineHeight, ...font } = f;
+        return toFont({
+            ...font,
+            size: Math.floor(f.size * fitRatio)
+        });
+    });
+}
+function labelToDraw(_ctx, rect, options, labelSize) {
+    const { overflow, padding } = options;
+    const { width, height } = labelSize;
+    if (overflow === 'hidden') {
+        return !(width + padding * 2 > rect.w || height + padding * 2 > rect.h);
+    } else if (overflow === 'fit') {
+        const ratio = Math.min(rect.w / (width + padding * 2), rect.h / (height + padding * 2));
+        if (ratio < 1) {
+            return ratio;
+        }
+    }
+    return true;
+}
+function getFontFromOptions(rect, labels) {
+    const { font, hoverFont } = labels;
+    const optFont = (rect.active ? hoverFont : font) || font;
+    return Array.isArray(optFont) ? optFont.map((f)=>toFont(f)) : [
+        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 drawDivider(ctx, rect, options, item) {
+    const dividers = options.dividers;
+    const children = item._data?.children;
+    if (!dividers.display || !Array.isArray(children) || !children.length) {
+        return;
+    }
+    const { x, y, w, h } = rect;
+    const { lineColor, lineCapStyle, lineDash, lineDashOffset, lineWidth } = dividers;
+    ctx.save();
+    ctx.strokeStyle = lineColor;
+    ctx.lineCap = lineCapStyle;
+    ctx.setLineDash(lineDash);
+    ctx.lineDashOffset = lineDashOffset;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    if (w > h) {
+        const w2 = w / 2;
+        ctx.moveTo(x + w2, y);
+        ctx.lineTo(x + w2, y + h);
+    } else {
+        const h2 = h / 2;
+        ctx.moveTo(x, y + h2);
+        ctx.lineTo(x + w, y + h2);
     }
-    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)
-        };
-        if (grp) {
-            o.level = lvl;
-            o.group = gval(i);
-            const tmpRef = tmp[i];
-            o.values = keys.reduce((obj, k)=>{
-                obj[k] = +tmpRef[k];
-                return obj;
-            }, {});
-        }
-        o = row.pushIf(o, compareAspectRatio, length);
-        if (o) {
-            rows.push(rect.map(row));
-            length = rect.side;
-            row.reset();
-            row.push(o);
-        }
+    ctx.stroke();
+    ctx.restore();
+}
+function calculateXYLabel(rect, options, labelSize) {
+    const { align, position, padding } = options;
+    const x = calculateX(rect, align, padding);
+    let y;
+    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;
     }
-    if (row.length) {
-        rows.push(rect.map(row));
+    return {
+        x,
+        y
+    };
+}
+function calculateX(rect, align, padding) {
+    if (align === 'left') {
+        return rect.x + padding;
+    } else if (align === 'right') {
+        return rect.x + rect.w - padding;
     }
-    return flatten(rows);
+    return rect.x + rect.w / 2;
 }
 
 function buildData(tree, dataset, keys, mainRect) {
@@ -902,36 +773,40 @@ function buildData(tree, dataset, keys, mainRect) {
     const captions = dataset.captions || {};
     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;
+        }
+        return subRect;
+    }
     function recur(treeElements, gidx, rect, parent, gs) {
         const g = getGroupKey(groups[gidx]);
-        const pg = gidx > 0 ? getGroupKey(groups[gidx - 1]) : undefined;
-        const gdata = group(treeElements, g, keys, treeLeafKey, pg, parent, groups.filter((_item, index)=>index <= 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 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;
-                }
+                const subRect = getSubRect(sq, rect);
                 const children = [];
-                gdata.forEach((gEl)=>{
-                    children.push(...recur(gEl.children, gidx + 1, subRect, sq.g, sq.s));
-                });
+                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;
             });
@@ -1080,7 +955,15 @@ TreemapController.defaults = {
 };
 TreemapController.descriptors = {
     _indexable: false,
-    _scriptable: true
+    _scriptable: true,
+    captions: {
+        _fallback: true,
+        _scriptable: (name)=>name !== 'formatter'
+    },
+    labels: {
+        _fallback: true,
+        _scriptable: (name)=>name !== 'formatter'
+    }
 };
 TreemapController.overrides = {
     hover: {},
@@ -1151,4 +1034,188 @@ TreemapController.afterUnregister = ()=>{
     }
 };
 
+function getBounds(rect, useFinalPosition) {
+    const { x, y, width, height } = rect.getProps([
+        'x',
+        'y',
+        'width',
+        'height'
+    ], useFinalPosition);
+    return {
+        bottom: y + height,
+        left: x,
+        right: x + width,
+        top: y
+    };
+}
+function boundingRects(rect) {
+    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 = {
+        active: rect.active,
+        h: height,
+        radius,
+        w: width,
+        x: bounds.left,
+        y: bounds.top
+    };
+    return {
+        inner: {
+            active: rect.active,
+            h: outer.h - border.t - border.b,
+            radius: {
+                bottomLeft: Math.max(0, radius.bottomLeft - Math.max(border.b, border.l)),
+                bottomRight: Math.max(0, radius.bottomRight - Math.max(border.b, border.r)),
+                topLeft: Math.max(0, radius.topLeft - Math.max(border.t, border.l)),
+                topRight: Math.max(0, radius.topRight - Math.max(border.t, border.r))
+            },
+            w: outer.w - border.l - border.r,
+            x: outer.x + border.l,
+            y: outer.y + border.t
+        },
+        outer
+    };
+}
+function inRange(rect, x, y, useFinalPosition) {
+    const skipX = x === null;
+    const skipY = y === null;
+    const bounds = !rect || skipX && skipY ? false : getBounds(rect, useFinalPosition);
+    return bounds && (skipX || x >= bounds.left && x <= bounds.right) && (skipY || y >= bounds.top && y <= bounds.bottom);
+}
+function hasRadius(radius) {
+    return radius.topLeft || radius.topRight || radius.bottomLeft || radius.bottomRight;
+}
+function addNormalRectPath(ctx, rect) {
+    ctx.rect(rect.x, rect.y, rect.w, rect.h);
+}
+
+class TreemapElement extends Element {
+    draw(ctx, data) {
+        if (!data) {
+            return;
+        }
+        const options = this.options;
+        const { inner, outer } = boundingRects(this);
+        const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
+        ctx.save();
+        if (outer.w !== inner.w || outer.h !== inner.h) {
+            ctx.beginPath();
+            addRectPath(ctx, outer);
+            ctx.clip();
+            addRectPath(ctx, inner);
+            ctx.fillStyle = options.borderColor;
+            ctx.fill('evenodd');
+        }
+        ctx.beginPath();
+        addRectPath(ctx, inner);
+        ctx.fillStyle = options.backgroundColor;
+        ctx.fill();
+        drawDivider(ctx, inner, options, data);
+        drawText(ctx, inner, options, data, this);
+        ctx.restore();
+    }
+    inRange(mouseX, mouseY, useFinalPosition) {
+        return inRange(this, mouseX, mouseY, useFinalPosition);
+    }
+    inXRange(mouseX, useFinalPosition) {
+        return inRange(this, mouseX, null, useFinalPosition);
+    }
+    inYRange(mouseY, useFinalPosition) {
+        return inRange(this, null, mouseY, useFinalPosition);
+    }
+    getCenterPoint(useFinalPosition) {
+        const { x, y, width, height } = this.getProps([
+            'x',
+            'y',
+            'width',
+            'height'
+        ], useFinalPosition);
+        return {
+            x: x + width / 2,
+            y: y + height / 2
+        };
+    }
+    tooltipPosition() {
+        return this.getCenterPoint();
+    }
+    constructor(cfg){
+        super();
+        this.width = undefined;
+        this.height = undefined;
+        if (cfg) {
+            Object.assign(this, cfg);
+        }
+    }
+}
+TreemapElement.id = 'treemap';
+TreemapElement.defaults = {
+    borderRadius: 0,
+    borderWidth: 0,
+    captions: {
+        align: undefined,
+        color: 'black',
+        display: true,
+        font: {},
+        formatter: (ctx)=>{
+            const label = ctx.raw._data?.label;
+            return ctx.raw.g || (typeof label === 'string' ? label : '');
+        },
+        padding: 3
+    },
+    displayMode: 'containerBoxes',
+    dividers: {
+        display: false,
+        lineCapStyle: 'butt',
+        lineColor: 'black',
+        lineDash: [],
+        lineDashOffset: 0,
+        lineWidth: 1
+    },
+    label: undefined,
+    labels: {
+        align: 'center',
+        color: 'black',
+        display: false,
+        font: {},
+        formatter (ctx) {
+            const label = ctx.raw._data?.label;
+            if (ctx.raw.g) {
+                return [
+                    ctx.raw.g,
+                    `${ctx.raw.v}`
+                ];
+            }
+            return typeof label === 'string' ? [
+                label,
+                `${ctx.raw.v}`
+            ] : `${ctx.raw.v}`;
+        },
+        overflow: 'cut',
+        padding: 3,
+        position: 'middle'
+    },
+    rtl: false,
+    spacing: 0.5,
+    unsorted: false
+};
+TreemapElement.descriptors = {
+    _indexable: false,
+    _scriptable: true,
+    captions: {
+        _fallback: true,
+        _scriptable: (name)=>name !== 'formatter'
+    },
+    labels: {
+        _fallback: true,
+        _scriptable: (name)=>name !== 'formatter'
+    }
+};
+TreemapElement.defaultRoutes = {
+    backgroundColor: 'backgroundColor',
+    borderColor: 'borderColor'
+};
+
 export { TreemapController, TreemapElement };