oolib 2.188.8 → 2.189.0

package/dist/v2/components/{BarChart → dataviz/BarChart}/comps/CustomizedLabel/index.js

@@ -35,22 +35,32 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomizedLabel = void 0;
 var react_1 = __importStar(require("react"));
-var themes_1 = require("../../../../themes");
+var themes_1 = require("../../../../../themes");
 var TruncatedSVGText_1 = require("../TruncatedSVGText");
 var CustomizedLabel = function (_a) {
-    var y = _a.y, width = _a.width, height = _a.height, value = _a.value, showPercent = _a.showPercent, showCount = _a.showCount, opacity = _a.opacity, _base_configs = _a._base_configs, _debug_controls = _a._debug_controls, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown, activeBar = _a.activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION = _a.TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION = _a.TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS = _a.CALC_SINGLE_BAR_SECTION_Y_POS, breakdownDisplayType = _a.breakdownDisplayType;
+    var y = _a.y, width = _a.width, height = _a.height, value = _a.value, showPercent = _a.showPercent, showCount = _a.showCount, opacity = _a.opacity, _base_barchart_ui_configs = _a._base_barchart_ui_configs, _debug_controls = _a._debug_controls, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown, activeBar = _a.activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION = _a.TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION = _a.TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS = _a.CALC_SINGLE_BAR_SECTION_Y_POS, breakdownDisplayType = _a.breakdownDisplayType, _b = _a.showSumOfBreakdownValues, showSumOfBreakdownValues = _b === void 0 ? false : _b;
     if (!value)
         return null;
-    var yOffset = -(_base_configs.labelToBarGap + (_base_configs.barHeight / 2));
+    var yOffset = -(_base_barchart_ui_configs.labelToBarGap + (_base_barchart_ui_configs.barHeight / 2));
     var xOffsetRelative = 10;
     var isBreakdown = Array.isArray(value);
     var name = isBreakdown ? value[0].name : value.name;
     var formatValue = function () {
         if (isBreakdown) {
             var values_1 = value;
-            return values_1.map(function (v, index) { return (react_1.default.createElement("tspan", { key: index, fill: v.color, className: "UI_BODY_BOLD_SM" },
-                showPercent ? v.percentage.toFixed(1) + '%' : v.count,
-                index < values_1.length - 1 && (react_1.default.createElement("tspan", { fill: themes_1.colors.grey80 }, " + ")))); });
+            if (showSumOfBreakdownValues) {
+                var valueKey_1 = showPercent ? 'percentage' : 'count';
+                var suffixFunction = function (value) {
+                    return showPercent ? value.toFixed(1) + '%' : value;
+                };
+                var totValue = suffixFunction(values_1.reduce(function (acc, b) { return acc + b[valueKey_1]; }, 0));
+                return totValue;
+            }
+            else { //only used while showing the summarized data as a stacked bar
+                return values_1.map(function (v, index) { return (react_1.default.createElement("tspan", { key: index, fill: v.color, className: "UI_BODY_BOLD_SM" },
+                    showPercent ? v.percentage.toFixed(1) + '%' : v.count,
+                    index < values_1.length - 1 && (react_1.default.createElement("tspan", { fill: themes_1.colors.grey80 }, " + ")))); });
+            }
         }
         else {
             var singleValue = value;
@@ -70,14 +80,14 @@ var CustomizedLabel = function (_a) {
     var widthRef = (0, react_1.useRef)(null);
     var textContainerRef = (0, react_1.useRef)(null);
     return (react_1.default.createElement("g", null,
-        react_1.default.createElement("text", { ref: textContainerRef, opacity: opacity, x: _base_configs.marginLeft, dy: y - (_base_configs.labelToBarGap), fill: themes_1.colors.grey80, textAnchor: "start", className: "UI_BODY_BOLD_SM" },
+        react_1.default.createElement("text", { ref: textContainerRef, opacity: opacity, x: _base_barchart_ui_configs.marginLeft, dy: y - (_base_barchart_ui_configs.labelToBarGap), fill: themes_1.colors.grey80, textAnchor: "start", className: "UI_BODY_BOLD_SM" },
             formatValue(),
             showPercent && !isBreakdown && (react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, fill: themes_1.colors.grey80 }, getCount())),
             react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, fill: themes_1.colors.grey80 },
-                react_1.default.createElement(TruncatedSVGText_1.TruncatedSVGText, { text: name, textContainerRef: textContainerRef, widthRef: widthRef, widthOffset: -(_base_configs.marginLeft + _base_configs.marginRight) }))),
-        react_1.default.createElement("rect", { ref: widthRef, style: onMouseDown ? { cursor: 'pointer' } : {}, onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: _base_configs.hoverRectStrokeWidth, y: (!isBreakdown || breakdownDisplayType === 'stacked')
-                ? _base_configs.hoverRectStrokeWidth + CALC_SINGLE_BAR_SECTION_Y_POS(value.dataIndex)
-                : _base_configs.hoverRectStrokeWidth + (TOT_HEIGHT_GROUPED_BAR_SECTION + _base_configs.gapBetweenBarSections) * value[0].dataIndex, width: "calc(100% - ".concat(_base_configs.hoverRectStrokeWidth * 2, "px)"), height: (!isBreakdown || breakdownDisplayType === 'stacked') ? TOT_HEIGHT_SINGLE_BAR_SECTION : TOT_HEIGHT_GROUPED_BAR_SECTION, opacity: _debug_controls.mouseEventDetectorOpacity ||
-                (activeBar === name ? 1 : 0), stroke: themes_1.colors.grey30, rx: 5, ry: 5, strokeWidth: "".concat(_base_configs.hoverRectStrokeWidth, "px"), fillOpacity: _debug_controls.mouseEventDetectorOpacity })));
+                react_1.default.createElement(TruncatedSVGText_1.TruncatedSVGText, { text: name, textContainerRef: textContainerRef, widthRef: widthRef, widthOffset: -(_base_barchart_ui_configs.marginLeft + _base_barchart_ui_configs.marginRight) }))),
+        react_1.default.createElement("rect", { ref: widthRef, style: onMouseDown ? { cursor: 'pointer' } : {}, onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: _base_barchart_ui_configs.hoverRectStrokeWidth, y: (!isBreakdown || breakdownDisplayType === 'stacked')
+                ? _base_barchart_ui_configs.hoverRectStrokeWidth + CALC_SINGLE_BAR_SECTION_Y_POS(value.dataIndex)
+                : _base_barchart_ui_configs.hoverRectStrokeWidth + (TOT_HEIGHT_GROUPED_BAR_SECTION + _base_barchart_ui_configs.gapBetweenBarSections) * value[0].dataIndex, width: "calc(100% - ".concat(_base_barchart_ui_configs.hoverRectStrokeWidth * 2, "px)"), height: (!isBreakdown || breakdownDisplayType === 'stacked') ? TOT_HEIGHT_SINGLE_BAR_SECTION : TOT_HEIGHT_GROUPED_BAR_SECTION, opacity: _debug_controls.mouseEventDetectorOpacity ||
+                (activeBar === name ? 1 : 0), stroke: themes_1.colors.grey30, rx: 5, ry: 5, strokeWidth: "".concat(_base_barchart_ui_configs.hoverRectStrokeWidth, "px"), fillOpacity: _debug_controls.mouseEventDetectorOpacity })));
 };
 exports.CustomizedLabel = CustomizedLabel;

package/dist/v2/components/{BarChart → dataviz/BarChart}/index.d.ts

@@ -1,22 +1,18 @@
 import React from "react";
-export interface BaseConfigs {
-    barHeight: number;
-    labelToBarGap: number;
-    labelHeight: number;
-    labelToNextBarGap: number;
-    barRadius: number;
-    gapBetweenBarSections: number;
-    hoverRectStrokeWidth: number;
-    marginLeft: number;
-    marginRight: number;
-    gapBetweenBarsInGroup: number;
-}
+import { CountVizData } from "../types";
 export interface DebugControls {
     mouseEventDetectorOpacity: number;
     chartWrapperBgColor: string;
 }
+export declare const useTrackMousePosition: () => {
+    mousePosition: {
+        x: number;
+        y: number;
+    };
+};
+type BreakdownDisplayType = "grouped" | "stacked";
 export interface BarChartProps {
-    data: any;
+    data: CountVizData;
     valuePath: string | string[];
     tooltipLabelsMapping: {
         [key: string]: string;
@@ -27,7 +23,9 @@ export interface BarChartProps {
     valueSuffix?: string;
     showCount?: boolean;
     showPercent?: boolean;
-    breakdownDisplayType?: "grouped" | "stacked";
+    breakdownDisplayType?: BreakdownDisplayType;
     colorIdx?: number;
+    summarizeAfterIdx?: number;
 }
 export declare const BarChart: React.FC<BarChartProps>;
+export {};

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

@@ -0,0 +1,276 @@
+"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.BarChart = exports.useTrackMousePosition = void 0;
+var react_1 = __importStar(require("react"));
+var recharts_1 = require("recharts");
+var CustomizedLabel_1 = require("./comps/CustomizedLabel");
+var colors_1 = require("../../../themes/colors");
+var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
+var usePrepareData_1 = require("../utils/usePrepareData");
+var _base_barchart_ui_configs_1 = require("./_base_barchart_ui_configs");
+var useTrackMousePosition = function () {
+    var _a = (0, react_1.useState)({
+        x: 0,
+        y: 0,
+    }), mousePosition = _a[0], setMousePosition = _a[1];
+    (0, react_1.useEffect)(function () {
+        var handleMouseMove = function (e) {
+            setMousePosition({ x: e.clientX, y: e.clientY });
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        // Clean up
+        return function () {
+            window.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, []);
+    return ({ mousePosition: mousePosition });
+};
+exports.useTrackMousePosition = useTrackMousePosition;
+// CHART_OFFSET_TOP is the y shift on top of the entire chart, because otherwise the chart starts with bar 1 at 0,0 coordinates
+var CHART_OFFSET_TOP = _base_barchart_ui_configs_1._base_barchart_ui_configs.labelToBarGap +
+    _base_barchart_ui_configs_1._base_barchart_ui_configs.labelHeight +
+    (_base_barchart_ui_configs_1._base_barchart_ui_configs.labelToNextBarGap / 2 - 2); //this minus 2 is just to correct the extra white space that the labelHeight takes on top of the text
+var TOT_HEIGHT_SINGLE_BAR_SECTION = _base_barchart_ui_configs_1._base_barchart_ui_configs.barHeight +
+    _base_barchart_ui_configs_1._base_barchart_ui_configs.labelToBarGap +
+    _base_barchart_ui_configs_1._base_barchart_ui_configs.labelHeight +
+    _base_barchart_ui_configs_1._base_barchart_ui_configs.labelToNextBarGap;
+var CALC_SINGLE_BAR_SECTION_Y_POS = function (index) {
+    return (TOT_HEIGHT_SINGLE_BAR_SECTION + _base_barchart_ui_configs_1._base_barchart_ui_configs.gapBetweenBarSections) * index;
+};
+var CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION = function (noOfBarsInGroup) {
+    var totalHeightOfAllBars = noOfBarsInGroup * _base_barchart_ui_configs_1._base_barchart_ui_configs.barHeight +
+        (noOfBarsInGroup - 1) * _base_barchart_ui_configs_1._base_barchart_ui_configs.gapBetweenBarsInGroup;
+    return (totalHeightOfAllBars +
+        _base_barchart_ui_configs_1._base_barchart_ui_configs.labelToBarGap +
+        _base_barchart_ui_configs_1._base_barchart_ui_configs.labelHeight +
+        _base_barchart_ui_configs_1._base_barchart_ui_configs.labelToNextBarGap);
+};
+var CALC_GROUPED_BAR_SECTION_Y_POS = function (index, barIndex, noOfBarsInGroup) {
+    var TOTAL_HEIGHT_GROUPED_BAR_SECTION = CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION(noOfBarsInGroup);
+    var startYPosOfGroup = (TOTAL_HEIGHT_GROUPED_BAR_SECTION + _base_barchart_ui_configs_1._base_barchart_ui_configs.gapBetweenBarSections) *
+        index;
+    return (startYPosOfGroup +
+        barIndex * (_base_barchart_ui_configs_1._base_barchart_ui_configs.barHeight + _base_barchart_ui_configs_1._base_barchart_ui_configs.gapBetweenBarsInGroup));
+};
+var CALC_TOTAL_HEIGHT_OF_CHART = function (_a) {
+    var isBreakdown = _a.isBreakdown, breakdownDisplayType = _a.breakdownDisplayType, data = _a.data;
+    return isBreakdown && breakdownDisplayType === "grouped"
+        ? CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION(data[0].length) *
+            data.length +
+            _base_barchart_ui_configs_1._base_barchart_ui_configs.gapBetweenBarSections * (data.length - 1) +
+            _base_barchart_ui_configs_1._base_barchart_ui_configs.hoverRectStrokeWidth * 2
+        : TOT_HEIGHT_SINGLE_BAR_SECTION * data.length +
+            _base_barchart_ui_configs_1._base_barchart_ui_configs.gapBetweenBarSections * (data.length - 1) +
+            _base_barchart_ui_configs_1._base_barchart_ui_configs.hoverRectStrokeWidth * 2;
+};
+var _debug_controls = {
+    mouseEventDetectorOpacity: 0, //only increase this for debugging. nothing else.
+    chartWrapperBgColor: "", //set this to some color value for debugging
+};
+var barConfigs = {
+    isBreakdown: {
+        getBarRadius: function (stackIndex, breakdownDisplayType, //replaced breakdownDisplayType
+        totalStacks) {
+            return breakdownDisplayType === "grouped" //replaced breakdownDisplayType
+                ? _base_barchart_ui_configs_1._base_barchart_ui_configs.barRadius
+                : stackIndex === totalStacks - 1
+                    ? [0, _base_barchart_ui_configs_1._base_barchart_ui_configs.barRadius, _base_barchart_ui_configs_1._base_barchart_ui_configs.barRadius, 0]
+                    : stackIndex === 0
+                        ? [_base_barchart_ui_configs_1._base_barchart_ui_configs.barRadius, 0, 0, _base_barchart_ui_configs_1._base_barchart_ui_configs.barRadius]
+                        : 0;
+        },
+        getDataKey: function (stackIndex) { return "".concat(stackIndex, ".labels.count"); },
+        getStackId: function (stackIndex, breakdownDisplayType //replaced breakdownDisplayType
+        ) { return (breakdownDisplayType === "stacked" ? "stack" : "stack-".concat(stackIndex)); },
+        getCellFill: function (colorIdx, stackIndex, dataVizColors) { return dataVizColors[(colorIdx + stackIndex) % dataVizColors.length]; },
+    },
+    isNotBreakdown: {
+        getBarRadius: function () { return _base_barchart_ui_configs_1._base_barchart_ui_configs.barRadius; },
+        getDataKey: function () { return "labels.count"; },
+        getStackId: function () { return undefined; },
+        getCellFill: function (colorIdx, _stackIndex, dataVizColors) { return dataVizColors[colorIdx]; },
+    },
+};
+var renderBar = function (_a) {
+    var _b = _a.stackIndex, stackIndex = _b === void 0 ? 0 : _b, dataToRender = _a.data, isBreakdownToRender = _a.isBreakdown, breakdownDisplayTypeToRender = _a.breakdownDisplayType, showSumOfBreakdownValues = _a.showSumOfBreakdownValues, 
+    //
+    colorIdx = _a.colorIdx, showPercent = _a.showPercent, showCount = _a.showCount, activeBar = _a.activeBar, setActiveBar = _a.setActiveBar, onClick = _a.onClick;
+    var activeConfig = isBreakdownToRender
+        ? barConfigs.isBreakdown
+        : barConfigs.isNotBreakdown;
+    var totalStacks = isBreakdownToRender
+        ? dataToRender[0].length
+        : 1;
+    var currentStackId = activeConfig.getStackId(stackIndex, breakdownDisplayTypeToRender);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(recharts_1.Bar, { key: "stack-".concat(stackIndex), radius: activeConfig.getBarRadius(stackIndex, breakdownDisplayTypeToRender, totalStacks), dataKey: activeConfig.getDataKey(stackIndex), stackId: currentStackId },
+            (!isBreakdownToRender || stackIndex === 0) && (react_1.default.createElement(recharts_1.LabelList, { dataKey: isBreakdownToRender ? function (dataPoint) { return dataPoint; } : "labels", offset: 0, position: "bottom", content: function (props) { return (react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ CALC_SINGLE_BAR_SECTION_Y_POS: CALC_SINGLE_BAR_SECTION_Y_POS, TOT_HEIGHT_SINGLE_BAR_SECTION: TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION: isBreakdownToRender &&
+                        breakdownDisplayTypeToRender === "grouped"
+                        ? CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION(dataToRender[0].length)
+                        : undefined,
+                    breakdownDisplayType: breakdownDisplayTypeToRender,
+                    y: props.y,
+                    width: props.width,
+                    height: props.height,
+                    value: isBreakdownToRender
+                        ? dataToRender[props.index].map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColorsText[(colorIdx + idx) % colors_1.dataVizColorsText.length] })); })
+                        : props.value, showPercent: showPercent, showCount: showCount, showSumOfBreakdownValues: showSumOfBreakdownValues, opacity: 1, activeBar: activeBar, _base_barchart_ui_configs: _base_barchart_ui_configs_1._base_barchart_ui_configs, _debug_controls: _debug_controls }, (onClick
+                    ? {
+                        onMouseOver: function (e, value) {
+                            setActiveBar(isBreakdownToRender
+                                ? dataToRender[props.index][0].labels.name
+                                : value.name);
+                        },
+                        onMouseOut: function () { return setActiveBar(undefined); },
+                        onMouseDown: function (e, value) {
+                            var name = isBreakdownToRender
+                                ? dataToRender[props.index][0].labels.name
+                                : value.name;
+                            setActiveBar(name);
+                            onClick(name);
+                        },
+                    }
+                    : {})))); } })),
+            dataToRender.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { y: !isBreakdownToRender || breakdownDisplayTypeToRender === "stacked"
+                    ? CALC_SINGLE_BAR_SECTION_Y_POS(index) + CHART_OFFSET_TOP
+                    : CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, dataToRender[0].length) + CHART_OFFSET_TOP, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_barchart_ui_configs_1._base_barchart_ui_configs.barHeight, fill: activeConfig.getCellFill(colorIdx, stackIndex, colors_1.dataVizColors) })); }))));
+};
+var BarChartRenderer = function (_a) {
+    var data = _a.data, isBreakdown = _a.isBreakdown, breakdownDisplayType = _a.breakdownDisplayType, showSumOfBreakdownValues = _a.showSumOfBreakdownValues, colorIdx = _a.colorIdx, showPercent = _a.showPercent, showCount = _a.showCount, activeBar = _a.activeBar, setActiveBar = _a.setActiveBar, onClick = _a.onClick, 
+    //
+    mousePosition = _a.mousePosition, dataMaxValue = _a.dataMaxValue;
+    return (react_1.default.createElement(recharts_1.BarChart, { width: 500, height: CALC_TOTAL_HEIGHT_OF_CHART({
+            isBreakdown: isBreakdown,
+            breakdownDisplayType: breakdownDisplayType,
+            data: data
+        }), data: data, layout: "vertical", margin: {
+            top: 0,
+            right: _base_barchart_ui_configs_1._base_barchart_ui_configs.marginRight,
+            left: _base_barchart_ui_configs_1._base_barchart_ui_configs.marginLeft,
+            bottom: 0,
+        } },
+        react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number", domain: [0, dataMaxValue] }),
+        react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
+        isBreakdown && (react_1.default.createElement(recharts_1.Tooltip, { content: function (props) {
+                var _a;
+                return (react_1.default.createElement(CustomTooltip_1.default, __assign({}, props, { mousePosition: mousePosition, showPercent: showPercent, 
+                    // god knows why the dataindex gets stored against props.label.
+                    // this is some internal recharts thing for tooltips specifically.
+                    // we dont do this.
+                    value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }) })));
+            }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
+        isBreakdown
+            ? data[0].map(function (_, stackIndex) {
+                return renderBar({
+                    stackIndex: stackIndex,
+                    data: data,
+                    isBreakdown: isBreakdown,
+                    breakdownDisplayType: breakdownDisplayType,
+                    showSumOfBreakdownValues: showSumOfBreakdownValues,
+                    colorIdx: colorIdx,
+                    showPercent: showPercent,
+                    showCount: showCount,
+                    activeBar: activeBar,
+                    setActiveBar: setActiveBar,
+                    onClick: onClick,
+                });
+            })
+            : renderBar({
+                stackIndex: undefined,
+                data: data,
+                isBreakdown: isBreakdown,
+                breakdownDisplayType: breakdownDisplayType,
+                showSumOfBreakdownValues: showSumOfBreakdownValues,
+                colorIdx: colorIdx,
+                showPercent: showPercent,
+                showCount: showCount,
+                activeBar: activeBar,
+                setActiveBar: setActiveBar,
+                onClick: onClick,
+            })));
+};
+var BarChart = 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.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _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;
+    var isBreakdown = Array.isArray(valuePath);
+    var _h = (0, usePrepareData_1.usePrepareData)({
+        _data: _data,
+        labelPath: labelPath,
+        valuePath: valuePath,
+        tooltipLabelsMapping: tooltipLabelsMapping,
+        tooltipLabelsPath: tooltipLabelsPath,
+        isBreakdown: isBreakdown,
+        showPercent: showPercent,
+        summarizeAfterIdx: summarizeAfterIdx,
+    }), data = _h.data, dataMaxValue = _h.dataMaxValue, dataToSummarize = _h.dataToSummarize;
+    var _j = (0, react_1.useState)(undefined), activeBar = _j[0], setActiveBar = _j[1];
+    var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
+    // menu options for grouped and stacked
+    return (react_1.default.createElement("div", { style: {
+            height: "".concat(CALC_TOTAL_HEIGHT_OF_CHART({
+                isBreakdown: isBreakdown,
+                breakdownDisplayType: breakdownDisplayType,
+                data: data
+            }) + (isBreakdown ? 0 : CALC_TOTAL_HEIGHT_OF_CHART({
+                isBreakdown: true,
+                breakdownDisplayType: 'stacked',
+                data: dataToSummarize
+            })), "px"),
+            width: "100%",
+            background: _debug_controls.chartWrapperBgColor,
+        } },
+        react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(BarChartRenderer, { data: data, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, colorIdx: colorIdx, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue }),
+                dataToSummarize && (react_1.default.createElement(BarChartRenderer, { data: dataToSummarize,
+                    isBreakdown: true,
+                    breakdownDisplayType: "stacked",
+                    showSumOfBreakdownValues: true, colorIdx: colorIdx, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue }))))));
+};
+exports.BarChart = BarChart;

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 });