oolib 2.194.1 → 2.195.1

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

@@ -1,44 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomizedLabel = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 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_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;
+    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_STACKED_BAR_SECTION = _a.TOT_HEIGHT_STACKED_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, CALC_STACKED_BAR_SECTION_Y_POS = _a.CALC_STACKED_BAR_SECTION_Y_POS, breakdownDisplayType = _a.breakdownDisplayType, _b = _a.showSumOfBreakdownValues, showSumOfBreakdownValues = _b === void 0 ? false : _b;
     if (!value)
         return null;
     var yOffset = -(_base_barchart_ui_configs.labelToBarGap + (_base_barchart_ui_configs.barHeight / 2));
@@ -57,7 +26,7 @@ var CustomizedLabel = function (_a) {
                 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" },
+                return values_1.map(function (v, index) { return (react_1.default.createElement("tspan", { key: index, fill: v.textColor, 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 }, " + ")))); });
             }
@@ -77,17 +46,28 @@ var CustomizedLabel = function (_a) {
             return value.count;
         }
     };
-    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_barchart_ui_configs.marginLeft, dy: y - (_base_barchart_ui_configs.labelToBarGap), fill: themes_1.colors.grey80, textAnchor: "start", className: "UI_BODY_BOLD_SM" },
+        (isBreakdown && !showSumOfBreakdownValues) && //meaning if its a breakdown and  we are showing values as v1 + v2 + v3 which occupies too much space and hence we need double line
+            react_1.default.createElement("text", { className: "UI_BODY_SM", opacity: opacity, x: _base_barchart_ui_configs.marginLeft, dy: y - (_base_barchart_ui_configs.labelToBarGap + _base_barchart_ui_configs.labelHeight + _base_barchart_ui_configs.gapBetweenTwoLabels), fill: themes_1.colors.grey80, textAnchor: "start" }, name),
+        react_1.default.createElement("text", { 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_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')
+            (isBreakdown && !showSumOfBreakdownValues) ? null : react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, fill: themes_1.colors.grey80 }, name)),
+        react_1.default.createElement("rect", { style: onMouseDown ? { cursor: 'pointer' } : {}, onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) {
+                onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value);
+            }, onMouseOut: function (e) {
+                onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value);
+            }, x: _base_barchart_ui_configs.hoverRectStrokeWidth, y: (!isBreakdown || showSumOfBreakdownValues)
                 ? _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 ||
+                : breakdownDisplayType === 'stacked'
+                    ? _base_barchart_ui_configs.hoverRectStrokeWidth + CALC_STACKED_BAR_SECTION_Y_POS(value[0].dataIndex)
+                    : breakdownDisplayType === 'grouped' &&
+                        _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 || showSumOfBreakdownValues)
+                ? TOT_HEIGHT_SINGLE_BAR_SECTION
+                : breakdownDisplayType === 'stacked'
+                    ? TOT_HEIGHT_STACKED_BAR_SECTION
+                    : breakdownDisplayType === 'grouped' &&
+                        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/dataviz/BarChart/comps/Legend/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface LegendData {
+    color: string;
+    text: string;
+}
+interface LegendProps {
+    data: LegendData[];
+    label?: string;
+    orientation?: "vertical" | "horizontal";
+}
+export declare const Legend: React.FC<LegendProps>;
+export {};

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