oolib 2.207.0 → 2.208.0

package/dist/stories/v2/components/visualization/HeatMapGrid.stories.d.ts

@@ -14,4 +14,5 @@ declare namespace _default {
 }
 export default _default;
 export function _HeatMapGrid(args: any): React.JSX.Element;
+export function _HeatMapGridPlayground(args: any): React.JSX.Element;
 import React from "react";

package/dist/stories/v2/components/visualization/HeatMapGrid.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._HeatMapGrid = void 0;
+exports._HeatMapGridPlayground = exports._HeatMapGrid = void 0;
 var react_1 = __importDefault(require("react"));
 var HeatMapGrid_1 = require("../../../../v2/components/dataviz/HeatMapGrid");
 var props2_1 = require("./configs/props2");
@@ -120,3 +120,85 @@ var _HeatMapGrid = function (args) {
             react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heaMapGridProps2, { style: { height: "300px" } })))));
 };
 exports._HeatMapGrid = _HeatMapGrid;
+var _HeatMapGridPlayground = function (args) {
+    var handleCellClick = function (name) {
+        console.log("cell clicked: ".concat(name));
+    };
+    return (react_1.default.createElement("div", { style: { padding: '20px' } },
+        react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, { showPercent: args.showPercent, data: [
+                {
+                    display: "Logged",
+                    stack1: 60,
+                    stack2: 20,
+                    stack3: 40,
+                    stack4: 10,
+                    stack5: 40,
+                    stack6: 10,
+                    stack2Display: 'Labels Path Stack 2 Display'
+                },
+                {
+                    display: "Registered Users",
+                    stack1: 100,
+                    stack2: 50,
+                    stack3: 10,
+                    stack4: 15,
+                    stack5: 40,
+                    stack6: 10,
+                },
+                {
+                    display: "Created Profile",
+                    stack1: 20,
+                    stack2: 5,
+                    stack3: 10,
+                    stack4: 15,
+                    stack5: 40,
+                    stack6: 10,
+                },
+                {
+                    display: "Wrote at least 3 story",
+                    stack1: 8,
+                    stack2: 2,
+                    stack3: 1,
+                    stack4: 1,
+                    stack5: 40,
+                    stack6: 10,
+                },
+                {
+                    display: "Created Profile again",
+                    stack1: 20,
+                    stack2: 5,
+                    stack3: 10,
+                    stack4: 15,
+                    stack5: 40,
+                    stack6: 10,
+                },
+                {
+                    display: "Wrote at least 1 story",
+                    stack1: 8,
+                    stack2: 2,
+                    stack3: 1,
+                    stack4: 1,
+                    stack5: 40,
+                    stack6: 10,
+                },
+            ], plotDataPoint: "percentage" // This can be changed to count
+            , valuePath: [
+                "stack1",
+                "stack2",
+                "stack3",
+                "stack4",
+                "stack5",
+                "stack6",
+            ], tooltipLabelsMapping: {
+                stack1: 'Stack 1',
+                stack2: 'Stack 2',
+                stack3: 'Stack 3',
+                stack4: 'Stack 4',
+                stack5: 'Stack 5',
+                stack6: 'Stack 6',
+            }, 
+            // valuePath="stack1"
+            labelPath: "display", title: "This is a Heat Map Grid", onClick: handleCellClick, colorIdx: 2 }),
+        react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heaMapGridProps2))));
+};
+exports._HeatMapGridPlayground = _HeatMapGridPlayground;

package/dist/v2/components/TabBar/index.js

@@ -25,7 +25,6 @@ var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
 var colors_1 = require("../../themes/colors");
 var icons_1 = require("../../../icons");
-var __1 = require("../../..");
 var List = icons_1.icons.List;
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
@@ -63,7 +62,7 @@ var Base = function (_a) {
                                     react_1.default.createElement(Typo, { capitalize: true }, op.display),
                                 op.message && tabBarStyle === '1' ?
                                     react_1.default.createElement(index_styled_1.StyledMessage1, null,
-                                        react_1.default.createElement(Typo2_1.UI_TAG, { style: { color: __1.colors2.white } }, op.message))
+                                        react_1.default.createElement(Typo2_1.UI_TAG, null, op.message))
                                     : op.message && tabBarStyle === '2' &&
                                         react_1.default.createElement(index_styled_1.StyledMessage2, null,
                                             react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD, { style: { margin: "auto" } }, op.message))),

package/dist/v2/components/TabBar/index.styled.js

@@ -42,9 +42,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../../themes/mixins");
 var themes_1 = require("../../themes");
 var getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
-var Typo2_1 = require("../Typo2");
-var __1 = require("../../..");
-var secondaryContainer = themes_1.colors.secondaryContainer, onSecondary = themes_1.colors.onSecondary, white = themes_1.colors.white, black = themes_1.colors.black, grey80 = themes_1.colors.grey80, grey40 = themes_1.colors.grey40, grey10 = themes_1.colors.grey10, errorColor = themes_1.colors.error;
+var onSecondary = themes_1.colors.onSecondary, white = themes_1.colors.white, black = themes_1.colors.black, grey80 = themes_1.colors.grey80, grey40 = themes_1.colors.grey40, grey10 = themes_1.colors.grey10, errorColor = themes_1.colors.error, redBG = themes_1.colors.redBG;
 exports.wrapperStyles = {
     style1: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    :first-of-type {\n      border-radius: 1px 0 0 2px;\n    }\n    :last-of-type {\n      border-radius: 0 2px 2px 0;\n    }\n\n    background-color: white;\n    color: ", ";\n    \n    ", "  \n\n    ", "\n\n    ", "\n\n   \n  "], ["\n    :first-of-type {\n      border-radius: 1px 0 0 2px;\n    }\n    :last-of-type {\n      border-radius: 0 2px 2px 0;\n    }\n\n    background-color: white;\n    color: ", ";\n    \n    ", "  \n\n    ", "\n\n    ", "\n\n   \n  "])), function (_a) {
         var error = _a.error, active = _a.active, disabled = _a.disabled;
@@ -98,7 +96,7 @@ exports.tabStyles = {
         return message && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding-right: 0.8rem;\n      "], ["\n        padding-right: 0.8rem;\n      "])));
     }, function (_a) {
         var error = _a.error;
-        return error && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), errorColor);
+        return error && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), redBG);
     }, function (_a) {
         var disabled = _a.disabled;
         return disabled && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        cursor: not-allowed;  \n        color: ", ";\n    "], ["\n        cursor: not-allowed;  \n        color: ", ";\n    "])), grey40);
@@ -164,6 +162,6 @@ exports.StyledDot = styled_components_1.default.div(templateObject_21 || (templa
     return tabBarStyle === "2" && active ? errorColor : !active && error ? errorColor : errorColor;
 });
 exports.StyledWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n  /* min-height: 5.6rem; */\n  padding: 0.8rem 1.6rem;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 1.2rem;\n  background: #FFF;\n  gap: 0.5rem;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);\n  cursor: pointer;\n"], ["\n  display: flex;\n  /* min-height: 5.6rem; */\n  padding: 0.8rem 1.6rem;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 1.2rem;\n  background: #FFF;\n  gap: 0.5rem;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);\n  cursor: pointer;\n"])));
-exports.StyledMessage1 = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  background: ", ";\n  padding: 0.3rem 0.5rem;\n  border-radius: 2px;\n"], ["\n  background: ", ";\n  padding: 0.3rem 0.5rem;\n  border-radius: 2px;\n"])), __1.colors2.black);
-exports.StyledMessage2 = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  border-radius: 1.2rem;\n  background: ", ";\n  color: ", ";\n  margin: auto;\n  min-width: 1.6rem;\n  height: 1.6rem;\n  padding: 0 0.5rem;\n"], ["\n  border-radius: 1.2rem;\n  background: ", ";\n  color: ", ";\n  margin: auto;\n  min-width: 1.6rem;\n  height: 1.6rem;\n  padding: 0 0.5rem;\n"])), __1.colors2.green, __1.colors2.white);
+exports.StyledMessage1 = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  padding: 0.3rem 0.5rem;\n  border-radius: 2px;\n"], ["\n  background: ", ";\n  color: ", ";\n  padding: 0.3rem 0.5rem;\n  border-radius: 2px;\n"])), themes_1.colors.black, themes_1.colors.white);
+exports.StyledMessage2 = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  border-radius: 1.2rem;\n  background: ", ";\n  color: ", ";\n  margin: auto;\n  min-width: 1.6rem;\n  height: 1.6rem;\n  padding: 0 0.5rem;\n"], ["\n  border-radius: 1.2rem;\n  background: ", ";\n  color: ", ";\n  margin: auto;\n  min-width: 1.6rem;\n  height: 1.6rem;\n  padding: 0 0.5rem;\n"])), themes_1.colors.green, themes_1.colors.white);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;

package/dist/v2/components/dataviz/HeatMapGrid/index.js

@@ -58,10 +58,10 @@ var __1 = require("../../../..");
 var Typo2_1 = require("../../Typo2");
 var BarChart_1 = require("../BarChart");
 var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
-var usePrepareData_1 = require("../utils/usePrepareData");
 var mapValueToColor_1 = require("./utils/mapValueToColor");
 var useAxisMeasure_1 = require("./utils/useAxisMeasure");
 var useFader_1 = require("./utils/useFader");
+var usePrepareHeatMapData_1 = require("./utils/usePrepareHeatMapData");
 var _configs = {
     labelsToGridGap: 4,
     gridGap: 2,
@@ -101,22 +101,20 @@ var HeatMapCell = function (_a) {
 var STYLED_UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_SEMIBOLD_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), (0, __1.clampText)(2));
 var HiddenScrollContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  \n  &::-webkit-scrollbar {\n    display: none; /* Webkit browsers */\n  }\n"], ["\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  \n  &::-webkit-scrollbar {\n    display: none; /* Webkit browsers */\n  }\n"])));
 var HeatMapGrid = function (_a) {
-    var _b;
-    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _c = _a.labelPath, labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f, _g = _a.summarizeAfterIdx, summarizeAfterIdx = _g === void 0 ? 5 : _g, _h = _a.style, style = _h === void 0 ? {} : _h;
-    var _j = (0, usePrepareData_1.usePrepareData)({
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, _c = _a.showPercent, showPercent = _c === void 0 ? true : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, onClick = _a.onClick, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    var _h = (0, usePrepareHeatMapData_1.usePrepareHeatMapData)({
         _data: _data,
-        labelPath: labelPath,
         valuePath: valuePath,
         tooltipLabelsMapping: tooltipLabelsMapping,
         tooltipLabelsPath: tooltipLabelsPath,
-        isBreakdown: true,
+        labelPath: labelPath,
         showPercent: showPercent,
-        summarizeAfterIdx: summarizeAfterIdx,
-    }), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
+        colorIdx: colorIdx
+    }), tableData = _h.tableData, columnHeaders = _h.columnHeaders, dataMaxValue = _h.dataMaxValue;
     var scrollableRef = (0, react_1.useRef)(null);
-    var _k = (0, useFader_1.useFader)(scrollableRef), setFader = _k.setFader, showFader = _k.showFader, showHorizontalFader = _k.showHorizontalFader;
+    var _j = (0, useFader_1.useFader)(scrollableRef), setFader = _j.setFader, showFader = _j.showFader, showHorizontalFader = _j.showHorizontalFader;
     // Replace: const { xAxisWidth, yAxisWidth, measurementRef } = useAxisDimensions(data, _configs.axisLabelWidth);
-    var _l = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _l.xWidth, yWidth = _l.yWidth, setHorizontalRef = _l.setHorizontalRef, setVerticalRef = _l.setVerticalRef;
+    var _k = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _k.xWidth, yWidth = _k.yWidth, setHorizontalRef = _k.setHorizontalRef, setVerticalRef = _k.setVerticalRef;
     return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "".concat(yWidth, "px 1fr"), gridTemplateRows: "".concat(xWidth, "px 1fr"), gap: _configs.labelsToGridGap + 'px', height: '100%', position: 'relative' }, style) },
         react_1.default.createElement("div", { style: { gridRow: 1, gridColumn: 1 } }),
         react_1.default.createElement(HiddenScrollContainer, { style: {
@@ -137,7 +135,7 @@ var HeatMapGrid = function (_a) {
                     alignItems: "center",
                     gap: _configs.gridGap + "px",
                     minWidth: 'max-content',
-                } }, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.map(function (dd, index) { return (react_1.default.createElement("div", { key: "label-".concat(dd.labels.tooltipLabel, "-").concat(index), style: {
+                } }, columnHeaders.map(function (header, index) { return (react_1.default.createElement("div", { key: "label-".concat(header.key, "-").concat(index), style: {
                     width: _configs.cellSize + "px",
                     height: xWidth + "px",
                     display: "flex",
@@ -160,7 +158,7 @@ var HeatMapGrid = function (_a) {
                     react_1.default.createElement("div", { ref: function (el) { return setHorizontalRef(index, el); } },
                         react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
                                 whiteSpace: "normal",
-                            } }, dd.labels.tooltipLabel))))); }))),
+                            } }, header.displayLabel))))); }))),
         react_1.default.createElement(HiddenScrollContainer, { style: {
                 gridRow: 2,
                 gridColumn: 1,
@@ -174,19 +172,16 @@ var HeatMapGrid = function (_a) {
                 if (scrollableRef.current) {
                     scrollableRef.current.scrollTop = e.target.scrollTop;
                 }
-            } }, data.map(function (d, idx) {
-            var _a, _b;
-            return (react_1.default.createElement("div", { key: "name-".concat((_a = d[0]) === null || _a === void 0 ? void 0 : _a.labels.name, "-").concat(idx), style: {
-                    height: _configs.cellSize + "px",
-                    textAlign: "right",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                    flexShrink: 0,
-                } },
-                react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
-                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, (_b = d[0]) === null || _b === void 0 ? void 0 : _b.labels.name))));
-        })),
+            } }, _data.map(function (row, idx) { return (react_1.default.createElement("div", { key: "name-".concat(row[labelPath], "-").concat(idx), style: {
+                height: _configs.cellSize + "px",
+                textAlign: "right",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                flexShrink: 0,
+            } },
+            react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
+                react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, row[labelPath])))); })),
         react_1.default.createElement("div", { ref: scrollableRef, style: {
                 gridRow: 2,
                 gridColumn: 2,
@@ -208,13 +203,13 @@ var HeatMapGrid = function (_a) {
                     flexDirection: "column",
                     gap: _configs.gridGap + "px",
                     minWidth: 'max-content',
-                } }, data.map(function (d, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
+                } }, tableData.map(function (rowCells, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
                     display: "flex",
                     alignItems: "center",
                     gap: _configs.gridGap + "px",
                     flexShrink: 0,
-                } }, d.map(function (dd, colIdx) {
-                return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: false, dataMaxValue: dataMaxValue, value: dd });
+                } }, rowCells.map(function (cellData, colIdx) {
+                return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: showPercent, dataMaxValue: dataMaxValue, value: cellData });
             }))); }))),
         showFader && react_1.default.createElement("div", { style: {
                 background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))"),

package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.d.ts

@@ -0,0 +1,33 @@
+interface PrepareHeatMapDataParams {
+    _data: any[];
+    valuePath: string | string[];
+    tooltipLabelsMapping?: {
+        [key: string]: string;
+    };
+    tooltipLabelsPath?: string | string[];
+    labelPath: string;
+    showPercent: boolean;
+    colorIdx: number;
+}
+interface HeatMapCellData {
+    labels: {
+        count: number;
+        percentage?: number;
+        name: string;
+        tooltipLabel: string;
+        dataIndex: number;
+        hasData: boolean;
+        barColor: string;
+        textColor: string;
+    };
+}
+interface PreparedHeatMapData {
+    tableData: HeatMapCellData[][];
+    columnHeaders: {
+        key: string;
+        displayLabel: string;
+    }[];
+    dataMaxValue: number;
+}
+export declare const usePrepareHeatMapData: ({ _data, valuePath, tooltipLabelsMapping, tooltipLabelsPath, labelPath, showPercent, colorIdx }: PrepareHeatMapDataParams) => PreparedHeatMapData;
+export {};

package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrepareHeatMapData = void 0;
+var react_1 = require("react");
+var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
+var colors_1 = require("../../../../themes/colors");
+var usePrepareHeatMapData = function (_a) {
+    var _data = _a._data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, labelPath = _a.labelPath, showPercent = _a.showPercent, colorIdx = _a.colorIdx;
+    return (0, react_1.useMemo)(function () {
+        if (!_data || _data.length === 0) {
+            return {
+                tableData: [],
+                columnHeaders: [],
+                dataMaxValue: 0
+            };
+        }
+        var valuePathArray = Array.isArray(valuePath) ? valuePath : [valuePath];
+        // Optimized: Single pass to collect all unique columns and pre-calculate row totals
+        var columnMap = new Map(); // columnLabel -> columnIndex
+        var rowTotals = [];
+        var rowData = [];
+        // First pass: collect unique columns and calculate row totals
+        _data.forEach(function (row, rowIndex) {
+            var rowName = (0, _EXPORTS_1.getVal)(row, labelPath);
+            var cellValues = new Map();
+            var rowTotal = 0;
+            valuePathArray.forEach(function (path, pathIndex) {
+                var value = (0, _EXPORTS_1.getVal)(row, path);
+                if (value !== undefined && value !== null) {
+                    // Get column label
+                    var columnLabel = void 0;
+                    if (tooltipLabelsPath) {
+                        if (Array.isArray(tooltipLabelsPath)) {
+                            var labelPath_1 = tooltipLabelsPath[pathIndex];
+                            if (labelPath_1) {
+                                columnLabel = (0, _EXPORTS_1.getVal)(row, labelPath_1) || "Column ".concat(pathIndex);
+                            }
+                            else {
+                                columnLabel = "Column ".concat(pathIndex);
+                            }
+                        }
+                        else {
+                            columnLabel = (0, _EXPORTS_1.getVal)(row, tooltipLabelsPath) || "Column ".concat(pathIndex);
+                        }
+                    }
+                    else if (tooltipLabelsMapping) {
+                        columnLabel = tooltipLabelsMapping[path] || path;
+                    }
+                    else {
+                        columnLabel = path;
+                    }
+                    // Store cell value and add to column map
+                    cellValues.set(columnLabel, value);
+                    if (!columnMap.has(columnLabel)) {
+                        columnMap.set(columnLabel, columnMap.size);
+                    }
+                    rowTotal += value;
+                }
+            });
+            rowTotals.push(rowTotal);
+            rowData.push({ rowName: rowName, cellValues: cellValues });
+        });
+        // Create column headers in order
+        var columnHeaders = Array.from(columnMap.entries())
+            .sort(function (_a, _b) {
+            var a = _a[1];
+            var b = _b[1];
+            return a - b;
+        })
+            .map(function (_a) {
+            var key = _a[0];
+            return ({
+                key: key,
+                displayLabel: key
+            });
+        });
+        // Second pass: build table data efficiently
+        var tableData = rowData.map(function (_a, rowIndex) {
+            var rowName = _a.rowName, cellValues = _a.cellValues;
+            var rowTotal = rowTotals[rowIndex];
+            return columnHeaders.map(function (header, colIndex) {
+                var cellValue = cellValues.get(header.key) || 0;
+                var hasData = cellValues.has(header.key);
+                var percentage = rowTotal > 0 ? (cellValue / rowTotal) * 100 : 0;
+                return {
+                    labels: {
+                        count: cellValue,
+                        percentage: showPercent ? Math.ceil(percentage) : undefined,
+                        name: rowName,
+                        tooltipLabel: header.key,
+                        dataIndex: rowIndex,
+                        hasData: hasData,
+                        barColor: colors_1.dataVizColors[(colorIdx + colIndex) % colors_1.dataVizColors.length],
+                        textColor: colors_1.dataVizColorsText[(colorIdx + colIndex) % colors_1.dataVizColorsText.length]
+                    }
+                };
+            });
+        });
+        // Calculate max value efficiently
+        var dataMaxValue = 1;
+        for (var _i = 0, rowData_1 = rowData; _i < rowData_1.length; _i++) {
+            var cellValues = rowData_1[_i].cellValues;
+            for (var _a = 0, _b = Array.from(cellValues.values()); _a < _b.length; _a++) {
+                var value = _b[_a];
+                if (value > dataMaxValue) {
+                    dataMaxValue = value;
+                }
+            }
+        }
+        return {
+            tableData: tableData,
+            columnHeaders: columnHeaders,
+            dataMaxValue: dataMaxValue
+        };
+    }, [_data, valuePath, tooltipLabelsMapping, tooltipLabelsPath, labelPath, showPercent, colorIdx]);
+};
+exports.usePrepareHeatMapData = usePrepareHeatMapData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.207.0",
+  "version": "2.208.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",