oolib 2.195.0 → 2.195.1

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

@@ -0,0 +1,35 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Legend = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("../../../../../..");
+var Typo2_1 = require("../../../../Typo2");
+var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
+var Legend = function (_a) {
+    var data = _a.data, label = _a.label, _b = _a.orientation, orientation = _b === void 0 ? "vertical" : _b;
+    return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))" }) },
+        label && orientation === 'vertical' && (react_1.default.createElement("div", { style: { paddingBottom: "8px" } },
+            react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, label))),
+        react_1.default.createElement("div", { style: __assign(__assign({ display: "flex", flexDirection: orientation === "vertical" ? "column" : "row" }, (orientation === 'horizontal' ? { flexWrap: 'wrap' } : {})), { gap: "8px" }) },
+            label && orientation === 'horizontal' && (react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, label)),
+            data.map(function (d, index) {
+                return (react_1.default.createElement("div", { key: index, style: { display: "flex", alignItems: "center", gap: "6px" } },
+                    react_1.default.createElement(LegendTooltipGlyph_1.LegendTooltipGlyph, { color: d.color }),
+                    react_1.default.createElement(Typo2_1.UI_CAPTION_DF, null, d.text)));
+            }))));
+};
+exports.Legend = Legend;

package/dist/v2/components/dataviz/BarChart/comps/LegendTooltipGlyph/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface LegendTooltipGlyphProps {
+    color: string;
+    size?: number;
+}
+export declare const LegendTooltipGlyph: React.FC<LegendTooltipGlyphProps>;
+export {};

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LegendTooltipGlyph = void 0;
+var react_1 = __importDefault(require("react"));
+var LegendTooltipGlyph = function (_a) {
+    var color = _a.color, _b = _a.size, size = _b === void 0 ? 10 : _b;
+    return (react_1.default.createElement("div", { style: {
+            width: size + 'px',
+            height: size + 'px',
+            borderRadius: "50%",
+            backgroundColor: color,
+        } }));
+};
+exports.LegendTooltipGlyph = LegendTooltipGlyph;

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

@@ -18,6 +18,7 @@ export interface BarChartProps {
         [key: string]: string;
     };
     tooltipLabelsPath: string | string[];
+    breakdownCategoryName?: string;
     labelPath: string;
     onClick?: (name: string) => void;
     valueSuffix?: string;
@@ -26,6 +27,8 @@ export interface BarChartProps {
     breakdownDisplayType?: BreakdownDisplayType;
     colorIdx?: number;
     summarizeAfterIdx?: number;
+    overflowAfterHeight?: number;
+    style?: React.CSSProperties;
 }
 export declare const BarChart: React.FC<BarChartProps>;
 export {};

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

@@ -51,10 +51,11 @@ 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 Legend_1 = require("./comps/Legend");
+var __1 = require("../../../..");
 var useTrackMousePosition = function () {
     var _a = (0, react_1.useState)({
         x: 0,
@@ -73,23 +74,39 @@ var useTrackMousePosition = function () {
     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
+// CHART_OFFSET_TOP & CHART_OFFSET_TOP_BREAKDOWN 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 CHART_OFFSET_TOP_BREAKDOWN = _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.gapBetweenTwoLabels +
+    _base_barchart_ui_configs_1._base_barchart_ui_configs.labelHeight + //twice because the text and the percent are on separate lines
+    (_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 TOT_HEIGHT_STACKED_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.gapBetweenTwoLabels +
+    _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_STACKED_BAR_SECTION_Y_POS = function (index) {
+    return (TOT_HEIGHT_STACKED_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.gapBetweenTwoLabels +
+        _base_barchart_ui_configs_1._base_barchart_ui_configs.labelHeight + //twice because the text and the percent are on separate lines
         _base_barchart_ui_configs_1._base_barchart_ui_configs.labelToNextBarGap);
 };
 var CALC_GROUPED_BAR_SECTION_Y_POS = function (index, barIndex, noOfBarsInGroup) {
@@ -100,15 +117,19 @@ var CALC_GROUPED_BAR_SECTION_Y_POS = function (index, barIndex, noOfBarsInGroup)
         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;
+    var isBreakdown = _a.isBreakdown, breakdownDisplayType = _a.breakdownDisplayType, data = _a.data, showSumOfBreakdownValues = _a.showSumOfBreakdownValues;
     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;
+        : isBreakdown && breakdownDisplayType === 'stacked' && !showSumOfBreakdownValues
+            ? (TOT_HEIGHT_STACKED_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
+            : 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.
@@ -139,110 +160,157 @@ var barConfigs = {
     },
 };
 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
+    var _b = _a.stackIndex, stackIndex = _b === void 0 ? 0 : _b, data = _a.data, isBreakdown = _a.isBreakdown, breakdownDisplayType = _a.breakdownDisplayType, showSumOfBreakdownValues = _a.showSumOfBreakdownValues, showPercent = _a.showPercent, showCount = _a.showCount, activeBar = _a.activeBar, setActiveBar = _a.setActiveBar, onClick = _a.onClick;
+    var activeConfig = isBreakdown
         ? barConfigs.isBreakdown
         : barConfigs.isNotBreakdown;
-    var totalStacks = isBreakdownToRender
-        ? dataToRender[0].length
+    var totalStacks = isBreakdown
+        ? data[0].length
         : 1;
-    var currentStackId = activeConfig.getStackId(stackIndex, breakdownDisplayTypeToRender);
-    return (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,
+    var currentStackId = activeConfig.getStackId(stackIndex, breakdownDisplayType);
+    return (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, CALC_STACKED_BAR_SECTION_Y_POS: CALC_STACKED_BAR_SECTION_Y_POS, TOT_HEIGHT_SINGLE_BAR_SECTION: TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_STACKED_BAR_SECTION: TOT_HEIGHT_STACKED_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: isBreakdownToRender
-                    ? dataToRender[props.index].map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColorsText[(colorIdx + idx) % colors_1.dataVizColorsText.length] })); })
+                value: isBreakdown
+                    ? data[props.index].map(function (item, idx) { return (__assign({}, item.labels)); })
                     : 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
+                        setActiveBar(isBreakdown
+                            ? data[props.index][0].labels.name
                             : value.name);
                     },
-                    onMouseOut: function () { return setActiveBar(undefined); },
+                    onMouseOut: function () {
+                        setActiveBar(undefined);
+                    },
                     onMouseDown: function (e, value) {
-                        var name = isBreakdownToRender
-                            ? dataToRender[props.index][0].labels.name
+                        var name = isBreakdown
+                            ? data[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) })); })));
+        data.map(function (d, index) {
+            /**
+             * note this this map works differently for breakdown & not breakdown
+             * for not breakdown - this map renders each of the inidividual bars.
+             * for breakdown - this map renders each of the individual bar groups
+             */
+            return (react_1.default.createElement(recharts_1.Cell, { y: (!isBreakdown || showSumOfBreakdownValues) // this is confusing, but showSumOfBreakdownValues is only used to render the 'compressed' other bar in normal bar charts. hence it has to have properties like a normal, non breakdown bar chart
+                    ? CALC_SINGLE_BAR_SECTION_Y_POS(index) + CHART_OFFSET_TOP
+                    : (breakdownDisplayType === "stacked" && !showSumOfBreakdownValues) //show summ happens in the summarized bar, were we dont want the double label approach
+                        ? CALC_STACKED_BAR_SECTION_Y_POS(index) + CHART_OFFSET_TOP_BREAKDOWN
+                        : breakdownDisplayType === "grouped" &&
+                            CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, data[0].length) + CHART_OFFSET_TOP_BREAKDOWN, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_barchart_ui_configs_1._base_barchart_ui_configs.barHeight, fill: !isBreakdown
+                    ? d.labels.barColor
+                    : d[stackIndex].labels.barColor }));
+        })));
+};
+var useDecideLegendOrientation = function (options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.widthThreshold, widthThreshold = _a === void 0 ? 500 : _a;
+    var vizWrapperRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)('horizontal'), orientation = _b[0], setOrientation = _b[1];
+    (0, react_1.useEffect)(function () {
+        var element = vizWrapperRef.current;
+        if (!element)
+            return;
+        var resizeObserver = new ResizeObserver(function (entries) {
+            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                var entry = entries_1[_i];
+                var width = entry.contentRect.width;
+                // If width is >= threshold, use horizontal, otherwise vertical
+                var newOrientation = width >= widthThreshold ? 'vertical' : 'horizontal';
+                setOrientation(newOrientation);
+            }
+        });
+        resizeObserver.observe(element);
+        // Set initial orientation
+        var initialWidth = element.getBoundingClientRect().width;
+        setOrientation(initialWidth >= widthThreshold ? 'vertical' : 'horizontal');
+        // Cleanup
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [widthThreshold]);
+    return {
+        vizWrapperRef: vizWrapperRef,
+        orientation: orientation
+    };
 };
 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, 
+    var data = _a.data, isBreakdown = _a.isBreakdown, breakdownDisplayType = _a.breakdownDisplayType, showSumOfBreakdownValues = _a.showSumOfBreakdownValues, showPercent = _a.showPercent, showCount = _a.showCount, activeBar = _a.activeBar, setActiveBar = _a.setActiveBar, onClick = _a.onClick, 
     //
-    mousePosition = _a.mousePosition, dataMaxValue = _a.dataMaxValue, containerWidth = _a.containerWidth;
-    return (
-    // <ResponsiveContainer width="100%" height="100%">
-    react_1.default.createElement(recharts_1.BarChart, { width: containerWidth, height: CALC_TOTAL_HEIGHT_OF_CHART({
+    mousePosition = _a.mousePosition, dataMaxValue = _a.dataMaxValue, breakdownCategoryName = _a.breakdownCategoryName;
+    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: CALC_TOTAL_HEIGHT_OF_CHART({
             isBreakdown: isBreakdown,
             breakdownDisplayType: breakdownDisplayType,
+            showSumOfBreakdownValues: showSumOfBreakdownValues,
             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,
+        }) },
+        react_1.default.createElement(recharts_1.BarChart, { 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, { breakdownCategoryName: breakdownCategoryName, activeBar: activeBar, 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({}, item.labels)); }) })));
+                }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
+            isBreakdown
+                ? data[0].map(function (_, stackIndex) {
+                    //note that this map renders the individual bars within a breakdown group
+                    return renderBar({
+                        stackIndex: stackIndex,
+                        data: data,
+                        isBreakdown: isBreakdown,
+                        breakdownDisplayType: breakdownDisplayType,
+                        showSumOfBreakdownValues: showSumOfBreakdownValues,
+                        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,
-                });
-            })
-            : renderBar({
-                stackIndex: undefined,
-                data: data,
-                isBreakdown: isBreakdown,
-                breakdownDisplayType: breakdownDisplayType,
-                showSumOfBreakdownValues: showSumOfBreakdownValues,
-                colorIdx: colorIdx,
-                showPercent: showPercent,
-                showCount: showCount,
-                activeBar: activeBar,
-                setActiveBar: setActiveBar,
-                onClick: onClick,
-            }))
-    // </ResponsiveContainer>
-    );
+                }))));
+};
+var FadeGradientWhenScroll = function (_a) {
+    var _b = _a.style, style = _b === void 0 ? {} : _b;
+    return (react_1.default.createElement("div", { style: __assign({ width: '100%', height: '40px', position: 'sticky', left: 0, bottom: 0, background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))") }, style) }));
 };
 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 _data = _a.data, valuePath = _a.valuePath, _b = _a.style, style = _b === void 0 ? {} : _b, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
+    _c = _a.labelPath, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
+    labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _d = _a.breakdownDisplayType, breakdownDisplayType = _d === void 0 ? "grouped" : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.colorIdx, colorIdx = _g === void 0 ? 0 : _g, _h = _a.summarizeAfterIdx, summarizeAfterIdx = _h === void 0 ? undefined : _h, //if a number is defined, then from that 'index' onwards, bars will be compressed into a single bar with a tooltip explaining distribution
+    _j = _a.overflowAfterHeight, //if a number is defined, then from that 'index' onwards, bars will be compressed into a single bar with a tooltip explaining distribution
+    overflowAfterHeight = _j === void 0 ? 550 : _j;
     var isBreakdown = Array.isArray(valuePath);
-    var _h = (0, usePrepareData_1.usePrepareData)({
+    var _k = (0, usePrepareData_1.usePrepareData)({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
@@ -251,44 +319,29 @@ var BarChart = function (_a) {
         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];
+        colorIdx: colorIdx
+    }), data = _k.data, dataMaxValue = _k.dataMaxValue, dataToSummarize = _k.dataToSummarize;
+    var _l = useDecideLegendOrientation({
+        widthThreshold: 500
+    }), vizWrapperRef = _l.vizWrapperRef, orientation = _l.orientation;
+    var _m = (0, react_1.useState)(undefined), activeBar = _m[0], setActiveBar = _m[1];
     var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
     // menu options for grouped and stacked
     if (data.length === 0)
         return react_1.default.createElement("div", null, "No data available");
-    // At the top of your component
-    var _k = (0, react_1.useState)(undefined), containerWidth = _k[0], setContainerWidth = _k[1];
-    // Use a ref and useEffect to measure parent width
-    var containerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        var updateWidth = function () {
-            if (containerRef.current) {
-                setContainerWidth(containerRef.current.getBoundingClientRect().width);
-            }
-        };
-        updateWidth();
-        window.addEventListener('resize', updateWidth);
-        return function () { return window.removeEventListener('resize', updateWidth); };
-    }, []);
-    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("div", { ref: containerRef, style: { width: '100%', height: '100%' } },
-            react_1.default.createElement(BarChartRenderer, { containerWidth: containerWidth, 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, { containerWidth: containerWidth, data: dataToSummarize,
+    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', maxHeight: overflowAfterHeight, overflow: 'scroll' }) },
+        react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
+            react_1.default.createElement(BarChartRenderer, { data: data, dataToSummarize: dataToSummarize, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName }),
+            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 })))));
+                showSumOfBreakdownValues: true, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName })),
+            orientation === 'vertical' && react_1.default.createElement(FadeGradientWhenScroll, null)),
+        isBreakdown && react_1.default.createElement("div", { style: __assign({ position: 'sticky' }, (orientation === 'vertical' ? { top: 0 } : { bottom: 0, background: __1.colors2.white })) },
+            orientation === 'horizontal' && react_1.default.createElement(FadeGradientWhenScroll, { style: { transform: 'translateY(-100%)', top: 0, bottom: 'unset', position: 'absolute', } }),
+            react_1.default.createElement(Legend_1.Legend, { orientation: orientation, label: breakdownCategoryName, data: data[0].map(function (d) { return ({
+                    text: d.labels.tooltipLabel,
+                    color: d.labels.barColor
+                }); }) }))));
 };
 exports.BarChart = BarChart;

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

@@ -3,7 +3,8 @@ export interface CountVizLabels {
     count: number;
     name: string;
     dataIndex: number;
-    color: string;
+    barColor: string;
+    textColor: string;
     tooltipLabel?: string;
 }
 export interface CountVizDatum {

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

@@ -10,11 +10,12 @@ interface PrepareDataParams {
     };
     tooltipLabelsPath: string | string[];
     summarizeAfterIdx?: number;
+    colorIdx?: number;
 }
 interface PreparedData {
     data: CountVizData;
     dataToSummarize: CountVizData;
     dataMaxValue: number;
 }
-export declare const usePrepareData: ({ _data, labelPath, valuePath, tooltipLabelsMapping, tooltipLabelsPath, isBreakdown, showPercent, summarizeAfterIdx, }: PrepareDataParams) => PreparedData;
+export declare const usePrepareData: ({ _data, labelPath, valuePath, tooltipLabelsMapping, tooltipLabelsPath, isBreakdown, showPercent, summarizeAfterIdx, colorIdx }: PrepareDataParams) => PreparedData;
 export {};

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

@@ -24,8 +24,17 @@ exports.usePrepareData = void 0;
 var react_1 = require("react");
 var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
 var getTotalCount_1 = require("../../../../utils/getTotalCount");
+var colors_1 = require("../../../themes/colors");
+var getBarColorForBreakdownData = function (_a) {
+    var colorIdx = _a.colorIdx, index = _a.index;
+    return colors_1.dataVizColors[(colorIdx + index) % colors_1.dataVizColors.length];
+};
+var getTextColorForBreakdownData = function (_a) {
+    var colorIdx = _a.colorIdx, index = _a.index;
+    return colors_1.dataVizColorsText[(colorIdx + index) % colors_1.dataVizColorsText.length];
+};
 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;
+    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, colorIdx = _a.colorIdx;
     return (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
         if (finalData.length === 0)
@@ -44,11 +53,17 @@ var usePrepareData = function (_a) {
                 return {
                     labels: __assign(__assign({}, (showPercent
                         ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount) }
-                        : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+                        : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath), barColor: colors_1.dataVizColors[colorIdx], textColor: colors_1.dataVizColorsText[colorIdx] }),
                 };
             }
             return valuePath.map(function (path, i) {
                 var count = (0, _EXPORTS_1.getVal)(d, path) || 0;
+                /**
+                 * for breakdown first we assign a color to each valuepath.
+                 * and then that color stays consistent for that valuepath across different breakdown groups
+                 */
+                var barColor = getBarColorForBreakdownData({ colorIdx: colorIdx, index: i });
+                var textColor = getTextColorForBreakdownData({ colorIdx: colorIdx, index: i });
                 return {
                     labels: __assign(__assign({}, (showPercent
                         ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount[index]) }
@@ -56,7 +71,7 @@ var usePrepareData = function (_a) {
                             ? 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) }),
+                            : (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path, name: (0, _EXPORTS_1.getVal)(d, labelPath), barColor: barColor, textColor: textColor }),
                 };
             });
         });
@@ -66,6 +81,10 @@ var usePrepareData = function (_a) {
                 return b.labels.count - a.labels.count;
             }
             else {
+                /**
+                 * this sorts the order of the entire breakdown group/stack
+                 * putting the one with the total largest count first all the way to the least
+                 */
                 var bTotal = b
                     .map(function (bItem) { return bItem.labels.count; })
                     .reduce(function (acc, curr) { return acc + curr; }, 0);
@@ -75,34 +94,57 @@ var usePrepareData = function (_a) {
                 return bTotal - aTotal;
             }
         });
+        // Sort inner arrays from largest to smallest when it's a breakdown
+        if (isBreakdown) {
+            finalData.forEach(function (innerArray) {
+                innerArray.sort(function (a, b) {
+                    return b.labels.count - a.labels.count;
+                });
+            });
+        }
         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; })
+            ? (summarizeAfterIdx ? finalData.filter(function (_, i) { return i <= summarizeAfterIdx; }) : finalData)
             : 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 }) })); });
+            var reshaped = data.map(function (d, i) { return (__assign(__assign({}, d), { labels: __assign(__assign({}, d.labels), { name: "Others", tooltipLabel: d.labels.name, dataIndex: i, barColor: getBarColorForBreakdownData({ colorIdx: colorIdx + 1, index: i }), textColor: getTextColorForBreakdownData({ colorIdx: colorIdx + 1, index: i }) }) })); });
             return [reshaped];
         };
-        var dataToSummarize = !isBreakdown
+        var dataToSummarize = (!isBreakdown && summarizeAfterIdx)
             ? 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
+            var getHighestNumInArray = function (ary) {
+                var highest = 0;
+                ary.forEach(function (item) { if (item.labels.count > highest)
+                    highest = item.labels.count; });
+                return highest;
+            };
+            var getHighestNumInArrayOfArrays = function (ary) {
+                var highest = 0;
+                ary.forEach(function (subAry) {
+                    var subHighest = getHighestNumInArray(subAry);
+                    if (subHighest > highest)
+                        highest = subHighest;
+                });
+                return highest;
+            };
             if (!dataToSummarize) {
                 return !isBreakdown
-                    ? mainData[0].labels.count
-                    : mainData[0].reduce(function (acc, b) { return acc + b.labels.count; }, 0);
+                    ? getHighestNumInArray(mainData) //if not breakdown, simply get the highest count in this single level array structre : [ { labels: { count: <>, ... }}, ... ]
+                    : getHighestNumInArrayOfArrays(mainData); // if breakdown, get the highest count across all the nested arrays in this structure : [ [ { labels: { count: <>, ... }}, ... ], ... ]
             }
             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);
+                    ? getHighestNumInArray(mainData)
+                    : getHighestNumInArrayOfArrays(mainData);
                 return maxCountFromMainData > totalCountOfSummarizedData
                     ? maxCountFromMainData
                     : totalCountOfSummarizedData;

package/dist/v2/themes/colors.js

@@ -105,5 +105,5 @@ exports.colors = {
     greenBG: greenBG,
     greenStroke: greenStroke,
     redBG: redBG,
-    red: red
+    red: red,
 };