oolib 2.188.8 → 2.190.0

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

@@ -0,0 +1,161 @@
+"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 __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../../../../..");
+var Typo2_1 = require("../../../../Typo2");
+var UI_CAPTION_DF_WITH_LINE_CLAMP = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  \n  ", "\n"], ["\n  \n  ", "\n"])), function (_a) {
+    var clampT = _a.clampT;
+    return clampT ? (0, __1.clampText)(3) : '';
+});
+var CustomTooltip = function (props) {
+    var active = props.active, value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition;
+    var tooltipWrapperRef = (0, react_1.useRef)(null);
+    var calcTooltipTop = function (_a) {
+        var _b, _c;
+        var tooltipWrapperRef = _a.tooltipWrapperRef, mousePosY = _a.mousePosY;
+        var windowHeight = window.innerHeight;
+        var tooltipWrapperBottom = (_c = (_b = tooltipWrapperRef === null || tooltipWrapperRef === void 0 ? void 0 : tooltipWrapperRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.bottom;
+        if (tooltipWrapperBottom && tooltipWrapperBottom > windowHeight) {
+            var topNegativeOffset = tooltipWrapperBottom - windowHeight;
+            return mousePosY - topNegativeOffset - 5; // plus 5 so that the bottom of the tooltip doesnt touch the bottom of the screen
+        }
+        else {
+            return mousePosY;
+        }
+    };
+    // Calculate position - align with the right side of the bars
+    var style = {
+        position: "fixed",
+        left: "".concat((mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.x) || 0, "px"),
+        top: "".concat(calcTooltipTop({ tooltipWrapperRef: tooltipWrapperRef, mousePosY: (mousePosition === null || mousePosition === void 0 ? void 0 : mousePosition.y) || 0 }), "px"),
+        transform: "translate(10px, 10px)", // Offset from cursor and center vertically
+        backgroundColor: __1.colors2.black,
+        color: __1.colors2.white,
+        border: "1px solid ".concat(__1.colors2.grey10),
+        borderRadius: "6px",
+        padding: "8px",
+        boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.12)",
+        zIndex: 100000,
+        width: "max-content",
+        maxWidth: "300px",
+        maxHeight: "500px",
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        // pointerEvents: "none", // Add this to prevent tooltip from interfering with mouse events
+    };
+    var tooltipLabelLengthRefs = (0, react_1.useRef)([]);
+    var _a = (0, react_1.useState)([]), rowHeights = _a[0], setRowHeights = _a[1];
+    var _b = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.map(function (v) { return true; })) || []), tooltipTextClampStates = _b[0], setTooltipTextClampStates = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (!tooltipTextClampStates) {
+            setTooltipTextClampStates(value === null || value === void 0 ? void 0 : value.map(function (v) { return true; }));
+        }
+    }, [value]);
+    (0, react_1.useEffect)(function () {
+        // console.log({ tooltipLabelLengthRefs });
+        var rowHeightsToSet = tooltipLabelLengthRefs.current.map(function (ref) {
+            var _a;
+            var heightOfLabelText = (_a = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height;
+            // console.log({heightOfLabelText})
+            return heightOfLabelText || null;
+        });
+        setRowHeights(rowHeightsToSet);
+    }, [tooltipTextClampStates.join()]);
+    if (!active)
+        return null;
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("div", { ref: tooltipWrapperRef, style: style },
+            react_1.default.createElement("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: showPercent ? "auto auto auto" : "auto auto",
+                    gap: "0.6rem",
+                } },
+                react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { style: { height: rowHeights[index] ? rowHeights[index] + "px" : "auto" } },
+                    react_1.default.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.6rem",
+                        } },
+                        react_1.default.createElement("div", { key: index, style: {
+                                width: "1.2rem",
+                                height: "1.2rem",
+                                borderRadius: "50%",
+                                backgroundColor: entry.color,
+                            } }),
+                        react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, { key: index }, showPercent ? entry.percentage + "%" : entry.count || "0")))); })),
+                showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { style: {
+                        height: rowHeights[index]
+                            ? rowHeights[index] + "px"
+                            : "auto",
+                    } },
+                    react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { key: index }, entry.count || "0"))); }))),
+                react_1.default.createElement("div", { style: {
+                        paddingLeft: "0.8rem",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                    } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { onMouseOver: function () { return setTooltipTextClampStates(function (prev) {
+                        var newState = __spreadArray([], prev, true);
+                        newState[index] = false;
+                        return newState;
+                    }); }, onMouseOut: function () { return setTooltipTextClampStates(function (prev) {
+                        var newState = __spreadArray([], prev, true);
+                        newState[index] = true;
+                        return newState;
+                    }); }, ref: function (el) { return (tooltipLabelLengthRefs.current[index] = el); } },
+                    react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, { clampT: tooltipTextClampStates[index], key: index }, entry.tooltipLabel))); }))))));
+};
+exports.default = CustomTooltip;
+var templateObject_1;

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

@@ -1,14 +1,8 @@
 import React from "react";
-import { BaseConfigs, DebugControls } from "../..";
-export interface LabelData {
-    percentage: number;
-    count: number;
-    name: string;
-    dataIndex: number;
-    color: string;
-    tooltipLabel?: string;
-}
-export type CustomizedLabelValue = LabelData | LabelData[];
+import { DebugControls } from "../..";
+import { CountVizLabels } from "../../../types";
+import { BaseBarChartUIConfigs } from "../../_base_barchart_ui_configs";
+export type CustomizedLabelValue = CountVizLabels | CountVizLabels[];
 interface CustomizedLabelProps {
     y?: number | string;
     width?: number | string;
@@ -19,14 +13,15 @@ interface CustomizedLabelProps {
     opacity: number;
     activeBar?: string;
     breakdownDisplayType?: 'grouped' | 'stacked';
-    _base_configs: BaseConfigs;
+    _base_barchart_ui_configs: BaseBarChartUIConfigs;
     _debug_controls: DebugControls;
     TOT_HEIGHT_SINGLE_BAR_SECTION: number;
     TOT_HEIGHT_GROUPED_BAR_SECTION: number;
     CALC_SINGLE_BAR_SECTION_Y_POS: (index: number) => number;
+    showSumOfBreakdownValues?: boolean;
     onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
     onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
     onMouseDown?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
 }
-export declare const CustomizedLabel: ({ y, width, height, value, showPercent, showCount, opacity, _base_configs, _debug_controls, onMouseOver, onMouseOut, onMouseDown, activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS, breakdownDisplayType }: CustomizedLabelProps) => React.JSX.Element;
+export declare const CustomizedLabel: ({ y, width, height, value, showPercent, showCount, opacity, _base_barchart_ui_configs, _debug_controls, onMouseOver, onMouseOut, onMouseDown, activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS, breakdownDisplayType, showSumOfBreakdownValues }: CustomizedLabelProps) => React.JSX.Element;
 export {};

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/BarGraphCollection/index.d.ts

@@ -0,0 +1,21 @@
+export const BAR_GRAPH_HEIGHT: 250;
+export const DEFAULT_SINGLE_BAR_WIDTH: 24;
+export const BAR_GAP: 0.3;
+export function BarGraphCollection({ data: originalData, valuePath, labelPath, tooltipLabelsMapping, onClick, showCount, showPercent, groupBy, }: {
+    data: any;
+    valuePath: any;
+    labelPath?: string;
+    tooltipLabelsMapping?: {};
+    onClick: any;
+    showCount?: boolean;
+    showPercent?: boolean;
+    groupBy: any;
+}): React.JSX.Element;
+export function BarGraph({ tagCategory, index1, showCount, showPercent, onClick }: {
+    tagCategory: any;
+    index1: any;
+    showCount?: boolean;
+    showPercent?: boolean;
+    onClick: any;
+}): React.JSX.Element;
+import React from "react";