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

package/dist/chartjs-chart-treemap.cjs

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-treemap v5.0.0-next.1
+ * chartjs-chart-treemap v5.0.0-next.3
  * 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.1";
+var version = "5.0.0-next.3";
 
 function scaleRect(sq, xScale, yScale, sp) {
     const sp2 = sp * 2;
@@ -49,6 +49,11 @@ function arrayNotEqual(a, b) {
     return false;
 }
 
+const layoutDefaults = {
+    displayMode: 'containerBoxes',
+    rtl: false,
+    spacing: 0.5
+};
 function limit(value, min, max) {
     return Math.max(Math.min(value, max), min);
 }
@@ -237,7 +242,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)=>{
@@ -246,7 +251,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];
         });
@@ -256,15 +261,15 @@ function scanTreeObject(keys, treeLeafKey, obj, tree = [], lvl = 0, result = [])
             const child = obj[childKey];
             if (helpers.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 normalizeTreeToArray(keys, leafKey, obj) {
+    const data = scanTreeObject(keys, leafKey, obj);
     if (!data.length) {
         return data;
     }
@@ -308,7 +313,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])) {
@@ -319,11 +324,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;
@@ -341,7 +346,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);
@@ -358,7 +363,7 @@ function group(values, grp, keys, treeLeafKey, mainGrp, mainValue, groups = [],
         if (mainGrp && v[mainGrp] !== mainValue) {
             continue;
         }
-        const itemGroup = resolveGroup(v, treeLeafKey, resolvedAllGroups, resolvedGroupIndex);
+        const itemGroup = resolveGroup(v, leafKey, resolvedAllGroups, resolvedGroupIndex);
         if (!itemGroup) {
             return [];
         }
@@ -533,20 +538,41 @@ 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;
     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);
-    if (isLeaf && labels.display) {
-        drawLabel(ctx, rect, options, item, element);
-    } else if (!isLeaf && shouldDrawCaption(displayMode, rect, captions)) {
-        drawCaption(ctx, rect, options, item, element);
+    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) {
+        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,
@@ -563,16 +589,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 = helpers.toFont(optFont);
-    const fonts = [
-        oFont
-    ];
     if (oFont.lineHeight > rect.h) {
         return;
     }
@@ -580,20 +602,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 = helpers.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 (helpers.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: helpers.isArray(optColor) ? optColor : [
+            optColor
+        ],
+        fonts,
+        lines,
+        padding,
+        top: calculateBlockTop(rect, labels, labelSize)
+    };
 }
 function sliceTextToFitWidth(ctx, text, width, fonts) {
     const ellipsis = '...';
@@ -658,7 +722,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') {
@@ -678,89 +742,15 @@ function getFontFromOptions(rect, labels) {
         helpers.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 = helpers.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 (helpers.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 = helpers.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);
-    }
-    ctx.stroke();
-    ctx.restore();
-}
-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') {
@@ -771,24 +761,22 @@ function calculateX(rect, align, padding) {
     return rect.x + rect.w / 2;
 }
 
-function buildData(tree, dataset, keys, mainRect) {
-    const treeLeafKey = dataset.treeLeafKey || '_leaf';
+function buildData(tree, keys, mainRect, layout) {
+    const { borderWidth, captions, displayMode, groups, leafKey } = layout;
     if (helpers.isObject(tree)) {
-        tree = normalizeTreeToArray(keys, treeLeafKey, tree);
+        tree = normalizeTreeToArray(keys, leafKey, tree);
     }
-    const groups = dataset.groups || [];
     const glen = groups.length;
-    const sp = dataset.displayMode === 'headerBoxes' ? 0 : helpers.valueOrDefault(dataset.spacing, 0);
-    const captions = dataset.captions || {};
+    const sp = displayMode === 'headerBoxes' ? 0 : layout.spacing;
     const font = helpers.toFont(captions.font);
     const padding = helpers.valueOrDefault(captions.padding, 3);
     function getSubRect(sq, rect) {
-        const bw = dataset.displayMode === 'headerBoxes' ? {
+        const bw = displayMode === 'headerBoxes' ? {
             b: 0,
             l: 0,
             r: 0,
             t: 0
-        } : parseBorderWidth(dataset.borderWidth, sq.w / 2, sq.h / 2);
+        } : parseBorderWidth(borderWidth, sq.w / 2, sq.h / 2);
         const subRect = {
             ...rect,
             h: sq.h - 2 * sp - bw.t - bw.b,
@@ -796,8 +784,8 @@ function buildData(tree, dataset, keys, mainRect) {
             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);
+        if (shouldDrawCaption(displayMode, subRect, captions)) {
+            const captionHeight = getCaptionHeight(displayMode, subRect, font, padding);
             subRect.y += captionHeight;
             subRect.h -= captionHeight;
         }
@@ -805,7 +793,7 @@ function buildData(tree, dataset, keys, mainRect) {
     }
     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 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) {
@@ -828,13 +816,13 @@ function buildData(tree, dataset, keys, mainRect) {
     }
     const result = glen ? recur(tree, 0, mainRect) : squarify(tree, mainRect, keys);
     return result.map((d)=>{
-        if (dataset.displayMode !== 'headerBoxes' || d.isLeaf) {
+        if (displayMode !== 'headerBoxes' || d.isLeaf) {
             return d;
         }
-        if (!shouldDrawCaption(dataset.displayMode, d, captions)) {
+        if (!shouldDrawCaption(displayMode, d, captions)) {
             return undefined;
         }
-        const captionHeight = getCaptionHeight(dataset.displayMode, d, font, padding);
+        const captionHeight = getCaptionHeight(displayMode, d, font, padding);
         return {
             ...d,
             h: captionHeight
@@ -893,13 +881,26 @@ class TreemapController extends chart_js.DatasetController {
             yScale.configure();
         }
     }
+ _layoutOptions() {
+        const dataset = this.getDataset();
+        const options = this.options;
+        return {
+            borderWidth: dataset.borderWidth,
+            captions: dataset.captions || {},
+            displayMode: options.displayMode,
+            groups: options.groups || [],
+            leafKey: options.leafKey,
+            spacing: helpers.valueOrDefault(dataset.spacing, 0)
+        };
+    }
     update(mode) {
         const dataset = this.getDataset();
         const { data } = this.getMeta();
-        const groups = dataset.groups || [];
+        const options = this.options;
+        const groups = options.groups || [];
         const keys = [
-            dataset.key || ''
-        ].concat(dataset.sumKeys || []);
+            options.key || ''
+        ].concat(options.sumKeys || []);
         dataset.tree = dataset.tree || dataset.data || [];
         const tree = dataset.tree;
         const treeVersion = dataset.treeVersion;
@@ -912,7 +913,7 @@ class TreemapController extends chart_js.DatasetController {
             this._prevTree = tree;
             this._prevTreeVersion = treeVersion;
             this._rectChanged = false;
-            dataset.data = buildData(tree, dataset, this._keys, this._rect);
+            dataset.data = buildData(tree, this._keys, this._rect, this._layoutOptions());
             this._dataCheck();
             this._resyncElements();
         }
@@ -926,9 +927,10 @@ class TreemapController extends chart_js.DatasetController {
         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 properties = scaleRect(dataset.data[i], xScale, yScale, spacing);
             if (reset) {
                 properties.width = 0;
                 properties.height = 0;
@@ -945,11 +947,17 @@ class TreemapController extends chart_js.DatasetController {
         const metadata = this.getMeta().data || [];
         const dataset = this.getDataset();
         const data = dataset.data;
+        const { displayMode, rtl, spacing } = this.options;
+        const layout = {
+            displayMode,
+            rtl,
+            spacing
+        };
         helpers.clipArea(ctx, chartArea);
         for(let i = 0, ilen = metadata.length; i < ilen; ++i){
             const rect = metadata[i];
             if (!rect.hidden) {
-                rect.draw(ctx, data[i]);
+                rect.draw(ctx, data[i], layout);
             }
         }
         helpers.unclipArea(ctx);
@@ -976,7 +984,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,
@@ -1106,7 +1122,7 @@ function addNormalRectPath(ctx, rect) {
 }
 
 class TreemapElement extends chart_js.Element {
-    draw(ctx, data) {
+    draw(ctx, data, layout = layoutDefaults) {
         if (!data) {
             return;
         }
@@ -1126,8 +1142,7 @@ class TreemapElement extends chart_js.Element {
         addRectPath(ctx, inner);
         ctx.fillStyle = options.backgroundColor;
         ctx.fill();
-        drawDivider(ctx, inner, options, data);
-        drawText(ctx, inner, options, data, this);
+        drawText(ctx, inner, options, data, this, layout);
         ctx.restore();
     }
     inRange(mouseX, mouseY, useFinalPosition) {
@@ -1178,16 +1193,6 @@ TreemapElement.defaults = {
         },
         padding: 3
     },
-    displayMode: 'containerBoxes',
-    dividers: {
-        display: false,
-        lineCapStyle: 'butt',
-        lineColor: 'black',
-        lineDash: [],
-        lineDashOffset: 0,
-        lineWidth: 1
-    },
-    label: undefined,
     labels: {
         align: 'center',
         color: 'black',
@@ -1209,10 +1214,7 @@ TreemapElement.defaults = {
         overflow: 'cut',
         padding: 3,
         position: 'middle'
-    },
-    rtl: false,
-    spacing: 0.5,
-    unsorted: false
+    }
 };
 TreemapElement.descriptors = {
     _indexable: false,