oolib 2.188.7 → 2.189.0

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

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

@@ -0,0 +1,116 @@
+"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 __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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrepareData = void 0;
+var react_1 = require("react");
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var getTotalCount_1 = require("../../../../utils/getTotalCount");
+var usePrepareData = function (_a) {
+    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent, summarizeAfterIdx = _a.summarizeAfterIdx;
+    return (0, react_1.useMemo)(function () {
+        var finalData = __spreadArray([], _data, true);
+        var totalCount = !isBreakdown
+            ? (0, getTotalCount_1.getTotalCount)({ data: finalData, countPath: valuePath })
+            : finalData.map(function (d) {
+                var valueSum = valuePath
+                    .map(function (path) { return (0, _EXPORTS_1.getVal)(d, path) || 0; }) // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
+                    .reduce(function (acc, curr) { return acc + curr; }, 0);
+                return valueSum;
+            });
+        finalData = finalData.map(function (d, index) {
+            if (!isBreakdown) {
+                var count = (0, _EXPORTS_1.getVal)(d, valuePath) || 0; // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
+                return {
+                    labels: __assign(__assign({}, (showPercent
+                        ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount) }
+                        : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+                };
+            }
+            return valuePath.map(function (path, i) {
+                var count = (0, _EXPORTS_1.getVal)(d, path) || 0;
+                return {
+                    labels: __assign(__assign({}, (showPercent
+                        ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount[index]) }
+                        : {})), { count: count, tooltipLabel: tooltipLabelsPath
+                            ? tooltipLabelsPath[i]
+                                ? (0, _EXPORTS_1.getVal)(d, tooltipLabelsPath[i]) || tooltipLabelsPath[i]
+                                : path
+                            : (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+                };
+            });
+        });
+        // Sort by total value
+        finalData.sort(function (a, b) {
+            if (!isBreakdown) {
+                return b.labels.count - a.labels.count;
+            }
+            else {
+                var bTotal = b
+                    .map(function (bItem) { return bItem.labels.count; })
+                    .reduce(function (acc, curr) { return acc + curr; }, 0);
+                var aTotal = a
+                    .map(function (aItem) { return aItem.labels.count; })
+                    .reduce(function (acc, curr) { return acc + curr; }, 0);
+                return bTotal - aTotal;
+            }
+        });
+        finalData = isBreakdown
+            ? finalData.map(function (d, i) {
+                return d.map(function (dd, ii) { return (__assign(__assign({}, dd), { labels: __assign(__assign({}, dd.labels), { dataIndex: i }) })); });
+            })
+            : finalData.map(function (d, i) { return (__assign(__assign({}, d), { labels: __assign(__assign({}, d.labels), { dataIndex: i }) })); });
+        var mainData = !isBreakdown
+            ? finalData.filter(function (_, i) { return i <= summarizeAfterIdx; })
+            : finalData;
+        var convertDataToSummrizeIntoBreakdownFormat = function (data) {
+            var reshaped = data.map(function (d, i) { return (__assign(__assign({}, d), { labels: __assign(__assign({}, d.labels), { name: "Others", tooltipLabel: d.labels.name, dataIndex: i }) })); });
+            return [reshaped];
+        };
+        var dataToSummarize = !isBreakdown
+            ? convertDataToSummrizeIntoBreakdownFormat(finalData.filter(function (_, i) { return i > summarizeAfterIdx; }))
+            : undefined;
+        var calcDataMaxValue = function (mainData, dataToSummarize, isBreakdown) {
+            //now if there is no data to summarize its simple. take the first element and get its count (for !isBreakdown) or accumulate to count for first element (isBreakdown)
+            // with dataToSummarize, its interesting, because a summarized bar is a 'summation' of everything it is summarizing. sooo.. the summation (and not the individual values) should be taken into consideration while figuring out maxValue
+            if (!dataToSummarize) {
+                return !isBreakdown
+                    ? mainData[0].labels.count
+                    : mainData[0].reduce(function (acc, b) { return acc + b.labels.count; }, 0);
+            }
+            else {
+                var totalCountOfSummarizedData = dataToSummarize[0].reduce(function (acc, b) { return acc + b.labels.count; }, 0);
+                var maxCountFromMainData = !isBreakdown
+                    ? mainData[0].labels.count
+                    : mainData[0].reduce(function (acc, b) { return acc + b.labels.count; }, 0);
+                return maxCountFromMainData > totalCountOfSummarizedData
+                    ? maxCountFromMainData
+                    : totalCountOfSummarizedData;
+            }
+        };
+        return {
+            data: mainData,
+            dataMaxValue: calcDataMaxValue(mainData, dataToSummarize, isBreakdown),
+            dataToSummarize: dataToSummarize,
+        };
+    }, [_data, labelPath, valuePath, isBreakdown, showPercent]);
+};
+exports.usePrepareData = usePrepareData;

package/package.json

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

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

@@ -1,50 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var Typo2_1 = require("../../../Typo2");
-var __1 = require("../../../../..");
-var CustomTooltip = function (props) {
-    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition;
-    if (!active || !payload || !payload.length)
-        return null;
-    // 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((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: 1000,
-        width: 'max-content',
-        maxWidth: '200px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '1rem',
-        pointerEvents: 'none', // Add this to prevent tooltip from interfering with mouse events
-    };
-    return (react_1.default.createElement("div", { 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: { 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(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(Typo2_1.UI_CAPTION_DF, { key: index }, entry.tooltipLabel)); })))));
-};
-exports.default = CustomTooltip;

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

@@ -1,294 +0,0 @@
-"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 __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 });
-exports.BarChart = void 0;
-var react_1 = __importStar(require("react"));
-var recharts_1 = require("recharts");
-var _EXPORTS_1 = require("../../../utils/_EXPORTS");
-var getTotalCount_1 = require("../../../utils/getTotalCount");
-var CustomizedLabel_1 = require("./comps/CustomizedLabel");
-var colors_1 = require("../../themes/colors");
-var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
-var usePrepareData = function (_a) {
-    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent;
-    return (0, react_1.useMemo)(function () {
-        var finalData = __spreadArray([], _data, true);
-        var totalCount = !isBreakdown
-            ? (0, getTotalCount_1.getTotalCount)({ data: finalData, countPath: valuePath })
-            : finalData.map(function (d) {
-                var valueSum = valuePath
-                    .map(function (path) { return (0, _EXPORTS_1.getVal)(d, path) || 0; }) // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
-                    .reduce(function (acc, curr) { return acc + curr; }, 0);
-                return valueSum;
-            });
-        finalData = finalData.map(function (d, index) {
-            if (!isBreakdown) {
-                var count = (0, _EXPORTS_1.getVal)(d, valuePath) || 0; // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
-                return {
-                    labels: __assign(__assign({}, (showPercent
-                        ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount) }
-                        : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
-                };
-            }
-            return valuePath.map(function (path, i) {
-                var count = (0, _EXPORTS_1.getVal)(d, path) || 0;
-                return {
-                    labels: __assign(__assign({}, (showPercent
-                        ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount[index]) }
-                        : {})), { count: count, tooltipLabel: tooltipLabelsPath
-                            ? tooltipLabelsPath[i] ? ((0, _EXPORTS_1.getVal)(d, tooltipLabelsPath[i]) || tooltipLabelsPath[i]) : path
-                            : ((tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path), name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
-                };
-            });
-        });
-        // Sort by total value
-        finalData.sort(function (a, b) {
-            if (!isBreakdown) {
-                return b.labels.count - a.labels.count;
-            }
-            else {
-                var bTotal = b
-                    .map(function (bItem) { return bItem.labels.count; })
-                    .reduce(function (acc, curr) { return acc + curr; }, 0);
-                var aTotal = a
-                    .map(function (aItem) { return aItem.labels.count; })
-                    .reduce(function (acc, curr) { return acc + curr; }, 0);
-                return bTotal - aTotal;
-            }
-        });
-        return isBreakdown
-            ? finalData.map(function (d, i) {
-                return d.map(function (dd, ii) { return (__assign(__assign({}, dd), { labels: __assign(__assign({}, dd.labels), { dataIndex: i }) })); });
-            })
-            : finalData.map(function (d, i) { return (__assign(__assign({}, d), { labels: __assign(__assign({}, d.labels), { dataIndex: i }) })); });
-    }, [_data, labelPath, valuePath, isBreakdown, showPercent]);
-};
-/**
-* if any changes are being made to the spacing and such of
-  this comps design, all these properties need to be carefully
-  observed and tweaked to ensure no ui has gotten warped due to sideeffects
-*/
-var _base_configs = {
-    //4 of these compose a single bar section
-    barHeight: 10,
-    labelToBarGap: 6,
-    labelHeight: 16.5667,
-    labelToNextBarGap: 14,
-    //other bar section related properties
-    barRadius: 2,
-    gapBetweenBarSections: 0,
-    hoverRectStrokeWidth: 1,
-    //overall chart margin
-    marginLeft: 6,
-    marginRight: 6,
-    //grouped bar chart related properties
-    gapBetweenBarsInGroup: 3,
-};
-// 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_configs.labelToBarGap +
-    _base_configs.labelHeight +
-    (_base_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_configs.barHeight +
-    _base_configs.labelToBarGap +
-    _base_configs.labelHeight +
-    _base_configs.labelToNextBarGap;
-var CALC_SINGLE_BAR_SECTION_Y_POS = function (index) {
-    return (TOT_HEIGHT_SINGLE_BAR_SECTION + _base_configs.gapBetweenBarSections) * index;
-};
-var CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION = function (noOfBarsInGroup) {
-    var totalHeightOfAllBars = noOfBarsInGroup * _base_configs.barHeight +
-        (noOfBarsInGroup - 1) * _base_configs.gapBetweenBarsInGroup;
-    return (totalHeightOfAllBars +
-        _base_configs.labelToBarGap +
-        _base_configs.labelHeight +
-        _base_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_configs.gapBetweenBarSections) *
-        index;
-    return (startYPosOfGroup +
-        barIndex * (_base_configs.barHeight + _base_configs.gapBetweenBarsInGroup));
-};
-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_configs.barRadius
-                : stackIndex === totalStacks - 1
-                    ? [0, _base_configs.barRadius, _base_configs.barRadius, 0]
-                    : stackIndex === 0
-                        ? [_base_configs.barRadius, 0, 0, _base_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_configs.barRadius; },
-        getDataKey: function () { return "labels.count"; },
-        getStackId: function () { return undefined; },
-        getCellFill: function (colorIdx, _stackIndex, dataVizColors) { return dataVizColors[colorIdx]; },
-    },
-};
-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;
-    var isBreakdown = Array.isArray(valuePath);
-    var data = usePrepareData({
-        _data: _data,
-        labelPath: labelPath,
-        valuePath: valuePath,
-        tooltipLabelsMapping: tooltipLabelsMapping,
-        tooltipLabelsPath: tooltipLabelsPath,
-        isBreakdown: isBreakdown,
-        showPercent: showPercent,
-    });
-    console.log({ data: data });
-    var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
-    var _h = (0, react_1.useState)({ x: 0, y: 0 }), mousePosition = _h[0], setMousePosition = _h[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);
-        };
-    }, []);
-    // menu options for grouped and stacked
-    var renderBar = function (stackIndex, lastIndex) {
-        if (stackIndex === void 0) { stackIndex = 0; }
-        var activeConfig = isBreakdown
-            ? barConfigs.isBreakdown
-            : barConfigs.isNotBreakdown;
-        var totalStacks = isBreakdown ? data[0].length : 1;
-        var currentStackId = activeConfig.getStackId(stackIndex, breakdownDisplayType);
-        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, breakdownDisplayType, totalStacks), dataKey: activeConfig.getDataKey(stackIndex), stackId: currentStackId },
-                (!isBreakdown || stackIndex === 0) && (react_1.default.createElement(recharts_1.LabelList, { dataKey: isBreakdown ? 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: isBreakdown && breakdownDisplayType === "grouped"
-                            ? CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION(data[0].length)
-                            : undefined, breakdownDisplayType: breakdownDisplayType, y: props.y,
-                        width: props.width,
-                        height: props.height,
-                        value: isBreakdown
-                            ? data[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, opacity: 1, activeBar: activeBar, _base_configs: _base_configs, _debug_controls: _debug_controls }, (onClick
-                        ? {
-                            onMouseOver: function (e, value) {
-                                setActiveBar(isBreakdown
-                                    ? data[props.index][0].labels.name
-                                    : value.name);
-                            },
-                            onMouseOut: function () { return setActiveBar(undefined); },
-                            onMouseDown: function (e, value) {
-                                var name = isBreakdown
-                                    ? data[props.index][0].labels.name
-                                    : value.name;
-                                setActiveBar(name);
-                                onClick(name);
-                            },
-                        }
-                        : {})))); } })),
-                data.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { y: !isBreakdown || breakdownDisplayType === "stacked"
-                        ? CALC_SINGLE_BAR_SECTION_Y_POS(index) + CHART_OFFSET_TOP
-                        : CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, data[0].length) + CHART_OFFSET_TOP, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_configs.barHeight, fill: activeConfig.getCellFill(colorIdx, stackIndex, colors_1.dataVizColors) })); }))));
-    };
-    return (react_1.default.createElement("div", { style: {
-            height: "".concat(isBreakdown && breakdownDisplayType === "grouped"
-                ? CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION(data[0].length) *
-                    data.length +
-                    _base_configs.gapBetweenBarSections * (data.length - 1) +
-                    _base_configs.hoverRectStrokeWidth * 2
-                : TOT_HEIGHT_SINGLE_BAR_SECTION * data.length +
-                    _base_configs.gapBetweenBarSections * (data.length - 1) +
-                    _base_configs.hoverRectStrokeWidth * 2, "px"),
-            width: "100%",
-            background: _debug_controls.chartWrapperBgColor,
-        } },
-        react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
-            react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, data: data, layout: "vertical", margin: {
-                    top: 0,
-                    right: _base_configs.marginRight,
-                    left: _base_configs.marginLeft,
-                    bottom: 0,
-                } },
-                react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
-                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, data[0].length - 1);
-                    })
-                    : renderBar()))));
-};
-exports.BarChart = BarChart;