@vectara/vectara-ui/lib/components/chart/TreeMap.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ResponsiveContainer, Tooltip, Treemap } from "recharts";
import { getChartColor, getChartColorByIndex } from "./palette";
import { chartTooltipProps } from "./chartTheme";
// Leaves render as palette-colored cells separated by a stroke; parent blocks
// render as an outline that delineates the group its children fill.
const TreeMapCell = ({ x = 0, y = 0, width = 0, height = 0, depth = 0, name = "", fill = "", leafDepth = 1 }) => {
    if (depth === leafDepth) {
        return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: fill, stroke: "var(--vui-color-empty-shade)", strokeWidth: 1.5 }), width > 50 && height > 22 && (_jsx("text", Object.assign({ x: x + 6, y: y + 16, fill: "var(--vui-color-empty-shade)", fontSize: 11, fontWeight: 600 }, { children: name })))] }));
    }
    if (depth >= 1) {
        return _jsx("rect", { x: x, y: y, width: width, height: height, fill: "none", stroke: "var(--vui-color-dark-shade)", strokeWidth: 2 });
    }
    return null;
};
export const VuiTreeMap = (_a) => {
    var { data, categoryKey, valueKey, childrenKey, colors, height = 320, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "valueKey", "childrenKey", "colors", "height", "showTooltip"]);
    const colorFor = (index) => ((colors === null || colors === void 0 ? void 0 : colors[index]) ? getChartColor(colors[index]) : getChartColorByIndex(index));
    // Build the shape Recharts expects, embedding each node's fill so the content
    // element can color it. Children of a block share the block's hue.
    const treeData = data.map((datum, index) => {
        const color = colorFor(index);
        const name = String(datum[categoryKey]);
        const children = childrenKey ? datum[childrenKey] : undefined;
        if (children) {
            return {
                name,
                fill: color,
                children: children.map((child) => ({
                    name: String(child[categoryKey]),
                    value: Number(child[valueKey]),
                    fill: color
                }))
            };
        }
        return { name, value: Number(datum[valueKey]), fill: color };
    });
    const leafDepth = childrenKey ? 2 : 1;
    return (_jsx("div", Object.assign({ className: "vuiTreeMap" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsx(Treemap, Object.assign({ data: treeData, dataKey: "value", isAnimationActive: false, content: _jsx(TreeMapCell, { leafDepth: leafDepth }) }, { children: showTooltip && _jsx(Tooltip, Object.assign({}, chartTooltipProps)) })) })) })));
};