oolib 2.188.8 → 2.190.0

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

@@ -0,0 +1,159 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarGraph = exports.BarGraphCollection = exports.BAR_GAP = exports.DEFAULT_SINGLE_BAR_WIDTH = exports.BAR_GRAPH_HEIGHT = void 0;
+var react_1 = __importStar(require("react"));
+var __1 = require("../../../..");
+var __2 = require("../../../..");
+var styled_1 = require("./styled");
+var useGetDimensions_1 = require("./utils/useGetDimensions");
+// import { __GetContentTypeConfigNew } from "../../../../../utils/getters/gettersV2";
+var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
+var usePrepareData_1 = require("./utils/usePrepareData");
+var grey5 = __1.colors2.grey5;
+exports.BAR_GRAPH_HEIGHT = 250;
+exports.DEFAULT_SINGLE_BAR_WIDTH = 24;
+exports.BAR_GAP = 0.3;
+var BarGraphCollection = function (_a) {
+    var originalData = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "display" : _b, _c = _a.tooltipLabelsMapping, tooltipLabelsMapping = _c === void 0 ? {} : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, groupBy = _a.groupBy;
+    var containerRef = (0, react_1.useRef)();
+    var _f = (0, react_1.useState)(0), containerWidth = _f[0], setContainerWidth = _f[1];
+    var transformedData = (0, react_1.useMemo)(function () {
+        return (0, usePrepareData_1.usePrepareData)({ data: originalData, valuePath: valuePath, labelPath: labelPath, tooltipLabelsMapping: tooltipLabelsMapping, groupBy: groupBy });
+    }, [originalData, valuePath, labelPath, tooltipLabelsMapping, groupBy]);
+    var data = (0, useGetDimensions_1.useGetDimensions)(transformedData, exports.BAR_GRAPH_HEIGHT, containerWidth);
+    (0, react_1.useEffect)(function () {
+        var handleResize = function () {
+            var _a, _b;
+            setContainerWidth((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width);
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, [transformedData]);
+    if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(styled_1.StyledBarGraphContainer, { style: { width: "auto" }, ref: containerRef },
+        react_1.default.createElement(styled_1.StyledBarGraphCollectionWrapper, { style: {
+                width: "auto",
+                gap: "".concat(exports.BAR_GAP, "rem"),
+                overflowX: "auto"
+            } }, data === null || data === void 0 ? void 0 : data.map(function (tagCategory, index1) {
+            var categoryTitle = (tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.tagCategory) ? (tagCategory.tagCategory.charAt(0).toUpperCase() + tagCategory.tagCategory.slice(1)) : undefined;
+            //  __GetContentTypeConfigNew(tagCategory.tagCategory)?.general?.content?.title || 
+            return (react_1.default.createElement("div", { key: "".concat(index1, "-").concat(tagCategory.tagCategory), style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "".concat(exports.BAR_GAP, "rem"),
+                    height: "".concat(exports.BAR_GRAPH_HEIGHT + 50, "px"),
+                    marginBottom: "0.6rem"
+                } },
+                react_1.default.createElement(exports.BarGraph, { tagCategory: tagCategory, index1: index1, showCount: showCount, showPercent: showPercent, onClick: onClick }),
+                categoryTitle && react_1.default.createElement("div", { title: categoryTitle, style: {
+                        width: "".concat(tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.width, "px"),
+                        background: grey5,
+                        borderRadius: "2px",
+                        padding: "0.8rem",
+                        maxHeight: "50px",
+                        overflow: "hidden"
+                    } },
+                    react_1.default.createElement(__2.UI_BODY_SEMIBOLD_SM, null,
+                        react_1.default.createElement("p", { style: {
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                maxWidth: "100%"
+                            } }, categoryTitle)))));
+        }))));
+};
+exports.BarGraphCollection = BarGraphCollection;
+var BarGraph = function (_a) {
+    var _b;
+    var tagCategory = _a.tagCategory, index1 = _a.index1, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, onClick = _a.onClick;
+    var _e = (0, react_1.useState)({ x: 0, y: 0 }), mousePosition = _e[0], setMousePosition = _e[1];
+    var _f = (0, react_1.useState)(null), activeTooltip = _f[0], setActiveTooltip = _f[1];
+    (0, react_1.useEffect)(function () {
+        var handleMouseMove = function (e) {
+            setMousePosition({ x: e.clientX, y: e.clientY });
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        return function () {
+            window.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, []);
+    var truncateText = function (text, maxLength) {
+        if (maxLength === void 0) { maxLength = 30; }
+        if (!text)
+            return '';
+        if (text.length <= maxLength)
+            return text;
+        return text.slice(0, maxLength) + '...';
+    };
+    var handleBarMouseEnter = function (index) {
+        setActiveTooltip(index);
+    };
+    var handleBarMouseLeave = function () {
+        setActiveTooltip(null);
+    };
+    var handleBarClick = function (tag) {
+        if (onClick) {
+            onClick(tag.display);
+        }
+    };
+    return (react_1.default.createElement(styled_1.StyledBarGraphWrapper, { style: {
+            height: "".concat(exports.BAR_GRAPH_HEIGHT, "px"),
+            gap: "".concat(exports.BAR_GAP, "rem"),
+        } }, (_b = tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.tagSpecificCount) === null || _b === void 0 ? void 0 : _b.map(function (tag, index) {
+        var tooltipData = [{
+                percentage: showPercent ? tag.percentage : undefined,
+                count: showCount ? tag.count : undefined,
+                tooltipLabel: tag.display
+            }];
+        return (react_1.default.createElement("div", { key: tag._id || "".concat(index1, "-").concat(index), onMouseEnter: function () { return handleBarMouseEnter(index); }, onMouseLeave: handleBarMouseLeave, onClick: function () { return handleBarClick(tag); }, style: { cursor: onClick ? 'pointer' : 'default' } },
+            react_1.default.createElement(styled_1.StyledSingleBarWrapper, null,
+                react_1.default.createElement(styled_1.StyledBar, { style: {
+                        height: "".concat(tag.height, "px"),
+                        width: "".concat(tag.width, "px")
+                    } }),
+                react_1.default.createElement(styled_1.StyledLabelWrapper, null,
+                    react_1.default.createElement(__2.UI_BODY_SM, null, truncateText(tag === null || tag === void 0 ? void 0 : tag.display, 30))),
+                activeTooltip === index && (react_1.default.createElement(CustomTooltip_1.default, { active: true, payload: [tag], mousePosition: mousePosition, value: tooltipData, showPercent: showPercent })))));
+    })));
+};
+exports.BarGraph = BarGraph;

package/dist/v2/components/dataviz/BarGraphCollection/styled.d.ts

@@ -0,0 +1,7 @@
+export const CONTAINER_PADDING: 10;
+export const StyledBarGraphContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledBarGraphCollectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledBarGraphWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSingleBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/v2/components/dataviz/BarGraphCollection/styled.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLabelWrapper = exports.StyledBar = exports.StyledSingleBarWrapper = exports.StyledBarGraphWrapper = exports.StyledBarGraphCollectionWrapper = exports.StyledBarGraphContainer = exports.CONTAINER_PADDING = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../../..");
+exports.CONTAINER_PADDING = 10;
+var barColor = __1.colors2.secondaryContainer; // temp color
+var grey5 = __1.colors2.grey5;
+exports.StyledBarGraphContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", "px;\n    padding-bottom: 0.4rem; // UI scroll bar bottom space \n    overflow-x: auto;\n    background-color: white;\n    border-radius: 8px;\n"], ["\n    padding: ", "px;\n    padding-bottom: 0.4rem; // UI scroll bar bottom space \n    overflow-x: auto;\n    background-color: white;\n    border-radius: 8px;\n"])), exports.CONTAINER_PADDING);
+exports.StyledBarGraphCollectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n"], ["\n    display: flex;\n"])));
+exports.StyledBarGraphWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n  "], ["\n    display: flex;\n    position: relative;\n  "])));
+exports.StyledSingleBarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    height: 100%;\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    cursor: pointer;\n    border-radius: 2px;\n\n    &:hover {\n       background-color: ", ";\n    }\n"], ["\n    height: 100%;\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    cursor: pointer;\n    border-radius: 2px;\n\n    &:hover {\n       background-color: ", ";\n    }\n"])), grey5);
+exports.StyledBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border-radius: 2px;\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    ", ";\n"], ["\n    border-radius: 2px;\n    background-color: ", ";\n    color: ", ";\n    position: relative;\n    ", ";\n"])), barColor, __1.colors2.onSecondary, (0, __1.transition)("width"));
+exports.StyledLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    transform: rotate(-90deg);\n    transform-origin: left top;\n    bottom: 0;\n    left: calc(50% - 8px); // 10px for font\n    text-wrap: nowrap;\n    display: flex;\n"], ["\n    position: absolute;\n    transform: rotate(-90deg);\n    transform-origin: left top;\n    bottom: 0;\n    left: calc(50% - 8px); // 10px for font\n    text-wrap: nowrap;\n    display: flex;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.d.ts

@@ -0,0 +1 @@
+export function useGetDimensions(data: any, maxHeight: any, containerWidth: any): any;

package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetDimensions = void 0;
+var __1 = require("..");
+var styled_1 = require("../styled");
+var useGetDimensions = function (data, maxHeight, containerWidth) {
+    var singleBarWidth;
+    var totalBars = data === null || data === void 0 ? void 0 : data.reduce(function (total, tagCategory) {
+        var _a;
+        return total += (_a = tagCategory.tagSpecificCount) === null || _a === void 0 ? void 0 : _a.length;
+    }, 0);
+    var totalGapSpace = (totalBars - 1) * Math.floor(__1.BAR_GAP * 10); // BAR GAP, example 0.3 converted 3Px
+    var availableWidthForBars = (containerWidth - totalGapSpace) - (styled_1.CONTAINER_PADDING * 2); // CONTAINER_PADDING Left right 10 * 10  = 20
+    // const defaultWidthForBars = (totalBars - 1) * DEFAULT_SINGLE_BAR_WIDTH - (CONTAINER_PADDING * 2);
+    var dynamicBarWidth = availableWidthForBars / totalBars;
+    singleBarWidth = Math.max(dynamicBarWidth, __1.DEFAULT_SINGLE_BAR_WIDTH);
+    return data === null || data === void 0 ? void 0 : data.map(function (category) {
+        // total count for this category
+        var total = category.tagSpecificCount.reduce(function (sum, tag) { return sum + tag.count; }, 0);
+        var barsInCategory = category.tagSpecificCount.length;
+        var gapsInCategory = Math.max(0, barsInCategory - 1); // One less gap than bars
+        var categoryTotalWidth = (barsInCategory * singleBarWidth) + (gapsInCategory * Math.floor(__1.BAR_GAP * 10));
+        // percentage to each tag
+        return __assign(__assign({}, category), { width: categoryTotalWidth, tagSpecificCount: category.tagSpecificCount.map(function (tag) {
+                var percentage = Number((tag.count / total * 100).toFixed(1));
+                return __assign({ percentage: percentage, height: Math.round((percentage / 100) * maxHeight), width: singleBarWidth }, tag);
+            }) });
+    });
+};
+exports.useGetDimensions = useGetDimensions;

package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.d.ts

@@ -0,0 +1,11 @@
+export function usePrepareData({ data, valuePath, labelPath, tooltipLabelsMapping, groupBy }: {
+    data: any;
+    valuePath: any;
+    labelPath: any;
+    tooltipLabelsMapping: any;
+    groupBy: any;
+}): {
+    tagCategory: any;
+    totalCountOfAllTagsWithin: any;
+    tagSpecificCount: any;
+}[];

package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrepareData = void 0;
+var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
+var usePrepareData = function (_a) {
+    var data = _a.data, valuePath = _a.valuePath, labelPath = _a.labelPath, tooltipLabelsMapping = _a.tooltipLabelsMapping, groupBy = _a.groupBy;
+    // Check if it's breakdown data (array of valuePaths) or simple data
+    var isBreakdown = Array.isArray(valuePath);
+    if (!isBreakdown) {
+        // If groupBy is specified, group the data by that field
+        if (groupBy && data.length > 0 && groupBy in data[0]) {
+            // Group data by the specified field
+            var groupedData_1 = {};
+            data.forEach(function (item) {
+                var groupKey = (0, _EXPORTS_1.getVal)(item, groupBy) || 'Uncategorized';
+                if (!groupedData_1[groupKey]) {
+                    groupedData_1[groupKey] = {
+                        items: [],
+                        totalCount: 0
+                    };
+                }
+                var count = (0, _EXPORTS_1.getVal)(item, valuePath) || 0;
+                groupedData_1[groupKey].items.push({
+                    tagId: (0, _EXPORTS_1.getVal)(item, labelPath),
+                    display: (0, _EXPORTS_1.getVal)(item, labelPath),
+                    _id: Math.random().toString(36).substr(2, 9),
+                    count: count
+                });
+                groupedData_1[groupKey].totalCount += count;
+            });
+            // Convert grouped data to the expected format
+            return Object.entries(groupedData_1).map(function (_a) {
+                var key = _a[0], value = _a[1];
+                return ({
+                    tagCategory: key,
+                    totalCountOfAllTagsWithin: value.totalCount,
+                    tagSpecificCount: value.items
+                });
+            });
+        }
+        else {
+            // Simple case - single category with single values
+            return [{
+                    tagCategory: undefined,
+                    totalCountOfAllTagsWithin: data.reduce(function (sum, item) { return sum + ((0, _EXPORTS_1.getVal)(item, valuePath) || 0); }, 0),
+                    tagSpecificCount: data.map(function (item) { return ({
+                        tagId: (0, _EXPORTS_1.getVal)(item, labelPath),
+                        display: (0, _EXPORTS_1.getVal)(item, labelPath),
+                        _id: Math.random().toString(36).substr(2, 9),
+                        count: (0, _EXPORTS_1.getVal)(item, valuePath) || 0
+                    }); })
+                }];
+        }
+    }
+    else {
+        // For breakdown case, we'll create categories based on the valuePath items
+        // Each valuePath becomes a category
+        return valuePath.map(function (path, pathIndex) {
+            var categoryName = (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path;
+            var totalCount = data.reduce(function (sum, item) { return sum + ((0, _EXPORTS_1.getVal)(item, path) || 0); }, 0);
+            return {
+                tagCategory: categoryName,
+                totalCountOfAllTagsWithin: totalCount,
+                tagSpecificCount: data
+                    .map(function (item) { return ({
+                    tagId: (0, _EXPORTS_1.getVal)(item, labelPath),
+                    display: (0, _EXPORTS_1.getVal)(item, labelPath),
+                    _id: "".concat(pathIndex, "-").concat((0, _EXPORTS_1.getVal)(item, labelPath)),
+                    count: (0, _EXPORTS_1.getVal)(item, path) || 0
+                }); })
+                    .filter(function (tag) { return tag.count > 0; }) // Only include items with values
+            };
+        }).filter(function (category) { return category.tagSpecificCount.length > 0; }); // Only include categories with items
+    }
+};
+exports.usePrepareData = usePrepareData;

package/dist/v2/components/dataviz/HeatMapGrid/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface HeatMapGridProps {
+    data: any;
+    valuePath: string | string[];
+    tooltipLabelsMapping: {
+        [key: string]: string;
+    };
+    tooltipLabelsPath: string | string[];
+    labelPath: string;
+    onClick?: (name: string) => void;
+    valueSuffix?: string;
+    showCount?: boolean;
+    showPercent?: boolean;
+    breakdownDisplayType?: "grouped" | "stacked";
+    colorIdx?: number;
+    summarizeAfterIdx?: number;
+}
+/**
+ * expects exactly the same data structure as barcharts - breakdown version
+ */
+export declare const HeatMapGrid: React.FC<HeatMapGridProps>;

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

@@ -0,0 +1,230 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeatMapGrid = void 0;
+var react_1 = __importStar(require("react"));
+var BarChart_1 = require("../BarChart");
+var Typo2_1 = require("../../Typo2");
+var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
+var usePrepareData_1 = require("../utils/usePrepareData");
+var __1 = require("../../../..");
+/**
+ * Maps a value from an input range to a color
+ * with the base color at the center point of the range
+ * @param {number} value - The value to map
+ * @param {number} minValue - The minimum value in the input range
+ * @param {number} maxValue - The maximum value in the input range
+ * @param {Object} hslColor - The base HSL color object
+ * @param {number} hslColor.h - Hue component (0-360)
+ * @param {number} hslColor.s - Saturation component (0-100)
+ * @param {number} hslColor.l - Lightness component (0-100)
+ * @param {number} minLightness - The minimum lightness (0-100) for darkest shade
+ * @param {number} maxLightness - The maximum lightness (0-100) for lightest shade
+ * @return {string} - A hex color code
+ */
+function mapValueToColor(value, minValue, maxValue, hslColor, // Default to #be185d
+minLightness, maxLightness) {
+    if (hslColor === void 0) { hslColor = { h: 336, s: 74, l: 42 }; }
+    if (minLightness === void 0) { minLightness = 20; }
+    if (maxLightness === void 0) { maxLightness = 80; }
+    // Ensure value is within range
+    value = Math.max(minValue, Math.min(maxValue, value));
+    // Calculate the center point of the range
+    var centerPoint = (minValue + maxValue) / 2;
+    // Extract the hsl components
+    var h = hslColor.h, s = hslColor.s, baseLightness = hslColor.l;
+    // Determine lightness based on position relative to center point
+    var lightness;
+    if (value < centerPoint) {
+        // Value is below center (smaller) - scale from maxLightness to baseLightness
+        var normalizedValue = (value - minValue) / (centerPoint - minValue);
+        lightness = maxLightness - normalizedValue * (maxLightness - baseLightness);
+    }
+    else {
+        // Value is above center (larger) - scale from baseLightness to minLightness
+        var normalizedValue = (value - centerPoint) / (maxValue - centerPoint);
+        lightness = baseLightness - normalizedValue * (baseLightness - minLightness);
+    }
+    // Convert HSL back to hex
+    return "hsl(".concat(h, ", ").concat(s, "%, ").concat(lightness, "%)"); //hslToHex(h, s, lightness);
+}
+/**
+ * Convert HSL values to hex color code
+ * @param {number} h - Hue (0-360)
+ * @param {number} s - Saturation (0-100)
+ * @param {number} l - Lightness (0-100)
+ * @return {string} - Hex color code
+ */
+function hslToHex(h, s, l) {
+    l /= 100;
+    var a = (s * Math.min(l, 1 - l)) / 100;
+    var f = function (n) {
+        var k = (n + h / 30) % 12;
+        var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color)
+            .toString(16)
+            .padStart(2, "0");
+    };
+    return "#".concat(f(0)).concat(f(8)).concat(f(4));
+}
+var _configs = {
+    gridGap: 2,
+    cellRoundness: 4,
+    cellSize: 36,
+    axisLabelWidth: 62,
+};
+var HeatMapCell = function (_a) {
+    var value = _a.value, dataMaxValue = _a.dataMaxValue, _b = _a.dataMinValue, dataMinValue = _b === void 0 ? 0 : _b, showPercent = _a.showPercent;
+    var mousePosition = (0, BarChart_1.useTrackMousePosition)().mousePosition;
+    var _c = (0, react_1.useState)(false), showTooltip = _c[0], setShowTooltip = _c[1];
+    var cellColor = mapValueToColor(value.labels.count, dataMinValue, dataMaxValue);
+    var getCellColorLightness = function () {
+        var splitUp = cellColor.trim().replace('hsl(', '');
+        splitUp = splitUp.replace(')', '');
+        var splitUpAry = splitUp.split(',').map(function (d) { return d.trim(); });
+        var toReturn = parseInt(splitUpAry[2].replace('%', ''));
+        return toReturn;
+    };
+    var textColor = getCellColorLightness() > 60 ? __1.colors2.black : __1.colors2.white;
+    return (react_1.default.createElement("div", { onMouseOver: function () { return setShowTooltip(true); }, onMouseOut: function () { return setShowTooltip(false); } },
+        showTooltip && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [__assign(__assign({}, value.labels), { tooltipLabel: value.labels.name + ' | ' + value.labels.tooltipLabel //bit of a hack but will sort later
+                 })], showPercent: showPercent, mousePosition: mousePosition })),
+        react_1.default.createElement("div", { style: {
+                height: _configs.cellSize + "px",
+                width: _configs.cellSize + "px",
+                background: cellColor,
+                borderRadius: _configs.cellRoundness + "px",
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center'
+            } },
+            react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: { color: textColor } }, value.labels.count))));
+};
+/**
+ * expects exactly the same data structure as barcharts - breakdown version
+ */
+var HeatMapGrid = function (_a) {
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f;
+    var _g = (0, usePrepareData_1.usePrepareData)({
+        _data: _data,
+        labelPath: labelPath,
+        valuePath: valuePath,
+        tooltipLabelsMapping: tooltipLabelsMapping,
+        tooltipLabelsPath: tooltipLabelsPath,
+        isBreakdown: true,
+        showPercent: showPercent,
+        summarizeAfterIdx: summarizeAfterIdx,
+    }), data = _g.data, dataMaxValue = _g.dataMaxValue, dataToSummarize = _g.dataToSummarize;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "auto 1fr",
+                gap: _configs.gridGap + 'px',
+            } },
+            react_1.default.createElement("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: _configs.gridGap + "px",
+                } },
+                react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
+                data.map(function (d) { return (react_1.default.createElement("div", { style: {
+                        height: _configs.cellSize + "px",
+                        textAlign: "right",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-end",
+                    } },
+                    react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
+                            width: _configs.axisLabelWidth + "px",
+                            textOverflow: "ellipsis",
+                            overflow: "hidden",
+                            whiteSpace: "nowrap",
+                        } }, d[0].labels.name))); })),
+            react_1.default.createElement("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: _configs.gridGap + "px",
+                } },
+                react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: _configs.gridGap + "px",
+                    } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
+                        width: _configs.cellSize + "px",
+                        height: _configs.axisLabelWidth + "px",
+                        display: "flex",
+                        alignItems: "flex-end",
+                        textWrap: "nowrap",
+                        justifyContent: 'center',
+                        position: "relative", // Add this
+                        overflow: "visible" // Add this to allow content to overflow
+                    } },
+                    react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
+                            width: _configs.axisLabelWidth + "px",
+                            textOverflow: "ellipsis",
+                            overflow: "hidden",
+                            whiteSpace: "nowrap",
+                            position: "absolute", // Add this
+                            bottom: '-8px', // which is half of the line height of the current text
+                            left: (_configs.cellSize / 2) + 'px', // Center horizontally
+                            transformOrigin: "left center", // Change origin to bottom
+                            transform: "rotate(-90deg)", // Adjust transform
+                        } }, dd.labels.tooltipLabel))); })),
+                data.map(function (d) { return (react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: _configs.gridGap + "px",
+                    } }, d.map(function (dd) {
+                    // console.log({
+                    //   color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
+                    // });
+                    return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
+                }))); })))));
+};
+exports.HeatMapGrid = HeatMapGrid;

package/dist/v2/components/dataviz/types.d.ts

@@ -0,0 +1,12 @@
+export interface CountVizLabels {
+    percentage?: number;
+    count: number;
+    name: string;
+    dataIndex: number;
+    color: string;
+    tooltipLabel?: string;
+}
+export interface CountVizDatum {
+    labels: CountVizLabels;
+}
+export type CountVizData = (CountVizDatum | CountVizDatum[])[];

package/dist/v2/components/dataviz/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/v2/components/dataviz/utils/usePrepareData.d.ts

@@ -0,0 +1,20 @@
+import { CountVizData } from "../types";
+interface PrepareDataParams {
+    _data: any;
+    labelPath: string;
+    valuePath: string | string[];
+    isBreakdown: boolean;
+    showPercent: boolean;
+    tooltipLabelsMapping?: {
+        [key: string]: string;
+    };
+    tooltipLabelsPath: string | string[];
+    summarizeAfterIdx?: number;
+}
+interface PreparedData {
+    data: CountVizData;
+    dataToSummarize: CountVizData;
+    dataMaxValue: number;
+}
+export declare const usePrepareData: ({ _data, labelPath, valuePath, tooltipLabelsMapping, tooltipLabelsPath, isBreakdown, showPercent, summarizeAfterIdx, }: PrepareDataParams) => PreparedData;
+export {};