npm - oolib - Versions diffs - 2.195.0 → 2.195.2 - Mend

oolib 2.195.0 → 2.195.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/stories/v2/components/BarChart.stories.js CHANGED Viewed

@@ -39,92 +39,159 @@ var BarChart = function (args) {
     var handleBarClick = function (name) {
         console.log("Bar clicked: ".concat(name));
     };
-    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" } },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(BarChart_1.BarChart, { showPercent: args.showPercent, data: [
+    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", padding: '20px' } },
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(BarChart_1.BarChart, { overflowAfterHeight: 300, showPercent: args.showPercent, data: [
                     {
                         display: "Logged In Once",
-                        // stack1: 60,
-                        stack2: 20,
-                        stack3: 40,
-                        stack4: 10,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 45, stack2: 23, stack3: 67, stack4: 12, stack5: 89,
+                        stack6: 34, stack7: 56, stack8: 78, stack9: 21, stack10: 43,
+                        stack11: 65, stack12: 87, stack13: 32, stack14: 54, stack15: 76,
+                        stack16: 19, stack17: 41, stack18: 63, stack19: 85, stack20: 28,
                         stack2Display: 'Labels Path Stack 2 Display'
                     },
                     {
                         display: "Registered Users",
-                        stack1: 100,
-                        stack2: 50,
-                        stack3: 10,
-                        stack4: 15,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 92, stack3: 71, stack4: 25, stack5: 84,
+                        stack6: 47, stack7: 69, stack8: 13, stack9: 56, stack10: 91,
+                        stack11: 29, stack12: 73, stack13: 46, stack14: 82, stack15: 17,
+                        stack16: 64, stack17: 39, stack18: 75, stack19: 22, stack20: 58
                     },
                     {
                         display: "Created Profile",
-                        stack1: 20,
-                        stack2: 5,
-                        stack3: 10,
-                        stack4: 15,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 33, stack2: 77, stack3: 14, stack4: 59, stack5: 86,
+                        stack6: 31, stack7: 68, stack8: 42, stack9: 95, stack10: 26,
+                        stack11: 71, stack12: 48, stack13: 83, stack14: 16, stack15: 62,
+                        stack16: 37, stack17: 74, stack18: 29, stack19: 85, stack20: 51
                     },
                     {
                         display: "Wrote at least 3 story",
-                        stack1: 8,
-                        stack2: 2,
-                        stack3: 1,
-                        stack4: 1,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 18, stack2: 52, stack3: 79, stack4: 35, stack5: 61,
+                        stack6: 93, stack7: 24, stack8: 67, stack9: 41, stack10: 88,
+                        stack11: 15, stack12: 53, stack13: 76, stack14: 32, stack15: 68,
+                        stack16: 94, stack17: 27, stack18: 49, stack19: 81, stack20: 36
                     },
                     {
                         display: "Created Profile again",
-                        stack1: 20,
-                        stack2: 5,
-                        stack3: 10,
-                        stack4: 15,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 44, stack2: 87, stack3: 21, stack4: 63, stack5: 96,
+                        stack6: 38, stack7: 72, stack8: 55, stack9: 19, stack10: 81,
+                        stack11: 46, stack12: 92, stack13: 28, stack14: 65, stack15: 37,
+                        stack16: 74, stack17: 51, stack18: 83, stack19: 26, stack20: 69
                     },
                     {
                         display: "Wrote at least 1 story",
-                        stack1: 8,
-                        stack2: 2,
-                        stack3: 1,
-                        stack4: 1,
-                        stack5: 40,
-                        stack6: 10,
+                        stack1: 57, stack2: 23, stack3: 89, stack4: 41, stack5: 76,
+                        stack6: 12, stack7: 64, stack8: 98, stack9: 33, stack10: 78,
+                        stack11: 55, stack12: 17, stack13: 91, stack14: 48, stack15: 82,
+                        stack16: 26, stack17: 69, stack18: 43, stack19: 95, stack20: 31
+                    }
+                ], plotDataPoint: "percentage", valuePath: [
+                    "stack1", "stack2", "stack3", "stack4", "stack5",
+                    // "stack6", "stack7", "stack8", "stack9", "stack10",
+                    // "stack11", "stack12", "stack13", "stack14", "stack15",
+                    // "stack16", "stack17", "stack18", "stack19", "stack20"
+                ], breakdownCategoryName: "Age of org.", tooltipLabelsMapping: {
+                    stack1: 'Stack 1', stack2: 'Stack 2', stack3: 'Stack 3', stack4: 'Stack 4', stack5: 'Stack 5',
+                    stack6: 'Stack 6', stack7: 'Stack 7', stack8: 'Stack 8', stack9: 'Stack 9', stack10: 'Stack 10',
+                    stack11: 'Stack 11', stack12: 'Stack 12', stack13: 'Stack 13', stack14: 'Stack 14', stack15: 'Stack 15',
+                    stack16: 'Stack 16', stack17: 'Stack 17', stack18: 'Stack 18', stack19: 'Stack 19', stack20: 'Stack 20'
+                }, labelPath: "display", title: "This is a Stacked BarChart with 20 Stacks", onClick: handleBarClick, colorIdx: 2 })),
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(BarChart_1.BarChart, { data: [
+                    {
+                        display: "Logged In Once During the First Week of Registration and Completed the Basic Profile Section Without Abandoning the Process",
+                        stack1: 60
+                    },
+                    {
+                        display: "Registered Users Who Successfully Verified Their Email Address and Set Up Two-Factor Authentication for Enhanced Account Security",
+                        stack1: 100
+                    },
+                    {
+                        display: "Created Profile With All Recommended Fields Including Biography, Education History, Work Experience, and Personal Interests",
+                        stack1: 20
+                    },
+                    {
+                        display: "Wrote at least 3 stories With Over 2,000 Words Each and Received More Than 50 Positive Engagements from Other Community Members",
+                        stack1: 8
+                    },
+                    {
+                        display: "Created Profile again After Deleting Their Previous One Due to Privacy Concerns or Desire to Start Fresh with New Information",
+                        stack1: 20
+                    },
+                    {
+                        display: "Wrote at least 1 story That Was Featured on the Homepage and Remained in the Top Trending Section for More Than 48 Hours",
+                        stack1: 8
+                    },
+                    {
+                        display: "Completed Onboarding Including All Optional Tutorials and Achieved a Perfect Score on the Platform Knowledge Assessment Test",
+                        stack1: 78
+                    },
+                    {
+                        display: "Added Payment Method and Set Up Recurring Billing for Premium Subscription Without Encountering Any Technical Issues During Checkout",
+                        stack1: 42
+                    },
+                    {
+                        display: "Made First Purchase Within 24 Hours of Creating Their Account and Left a Five-Star Review for the Product or Service",
+                        stack1: 35
+                    },
+                    {
+                        display: "Referred a Friend Through the Official Referral Program and Both Received the Maximum Possible Bonus Credits as a Result",
+                        stack1: 27
+                    },
+                    {
+                        display: "Participated in the Annual User Satisfaction Survey and Provided Detailed Feedback on Potential Platform Improvements",
+                        stack1: 54
+                    },
+                    {
+                        display: "Downloaded the Mobile Application on Multiple Devices and Enabled Cross-Platform Synchronization for Seamless User Experience",
+                        stack1: 89
+                    },
+                    {
+                        display: "Configured Advanced Notification Preferences to Receive Real-Time Alerts for Specific Activities Relevant to Their Interests",
+                        stack1: 31
+                    },
+                    {
+                        display: "Successfully Recovered Account After Forgetting Password by Following the Secure Password Reset Protocol Without Support Assistance",
+                        stack1: 46
                     },
+                    {
+                        display: "Achieved Gold Tier Status in the Loyalty Program by Consistently Engaging with the Platform for More Than Six Consecutive Months",
+                        stack1: 15
+                    },
+                    {
+                        display: "Converted From Free Trial to Paid Subscription Before the Trial Period Ended and Opted for the Annual Payment Plan with Auto-Renewal",
+                        stack1: 67
+                    },
+                    {
+                        display: "Customized Their Dashboard Layout to Optimize Workflow Efficiency Based on Their Unique Usage Patterns and Preferences",
+                        stack1: 72
+                    },
+                    {
+                        display: "Signed Up for Beta Testing Program and Provided Valuable Feedback on Experimental Features Before General Public Release",
+                        stack1: 19
+                    },
+                    {
+                        display: "Linked All Available Social Media Accounts to Enable Cross-Platform Sharing and Enhanced Social Networking Capabilities",
+                        stack1: 38
+                    },
+                    {
+                        display: "Reported a Critical Bug That Was Subsequently Fixed in the Next Software Update and Received Official Recognition for the Contribution",
+                        stack1: 5
+                    }
                 ], plotDataPoint: "percentage" // This can be changed to count
-                , valuePath: [
-                    "stack1",
-                    "stack2",
-                    "stack3",
-                    "stack4",
-                    "stack5",
-                    "stack6",
-                ], tooltipLabelsMapping: {
-                    stack1: 'Stack 1',
-                    stack2: 'Stack 2',
-                    stack3: 'Stack 3',
-                    stack4: 'Stack 4',
-                    stack5: 'Stack 5',
-                    stack6: 'Stack 6',
-                },
-                // valuePath="stack1"
-                labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 }),
-            react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { showPercent: args.showPercent, showCount: args.showCount, data: [
+                ,
+                // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
+                valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 })),
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(BarChart_1.BarChart, { data: [
                     {
                         display: "Logged In Once",
-                        // stack1: 60,
+                        stack1: 60,
                         stack2: 20,
                         stack3: 40,
                         stack4: 10,
                         stack5: 40,
                         stack6: 10,
-                        stack2Display: 'Labels Path Stack 2 Display'
                     },
                     {
                         display: "Registered Users",
@@ -180,168 +247,7 @@ var BarChart = function (args) {
                     "stack5",
                     "stack6",
                 ],
-                // tooltipLabelsMapping={{
-                //   stack1: 'Stack 1',
-                //   stack2: 'Stack 2',
-                //   stack3: 'Stack 3',
-                //   stack4: 'Stack 4',
-                //   stack5: 'Stack 5',
-                //   stack6: 'Stack 6',
-                // }}
                 // valuePath="stack1"
-                labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 })),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "40px" } },
-                react_1.default.createElement(BarChart_1.BarChart, { data: [
-                        {
-                            display: "Logged In Once During the First Week of Registration and Completed the Basic Profile Section Without Abandoning the Process",
-                            stack1: 60
-                        },
-                        {
-                            display: "Registered Users Who Successfully Verified Their Email Address and Set Up Two-Factor Authentication for Enhanced Account Security",
-                            stack1: 100
-                        },
-                        {
-                            display: "Created Profile With All Recommended Fields Including Biography, Education History, Work Experience, and Personal Interests",
-                            stack1: 20
-                        },
-                        {
-                            display: "Wrote at least 3 stories With Over 2,000 Words Each and Received More Than 50 Positive Engagements from Other Community Members",
-                            stack1: 8
-                        },
-                        {
-                            display: "Created Profile again After Deleting Their Previous One Due to Privacy Concerns or Desire to Start Fresh with New Information",
-                            stack1: 20
-                        },
-                        {
-                            display: "Wrote at least 1 story That Was Featured on the Homepage and Remained in the Top Trending Section for More Than 48 Hours",
-                            stack1: 8
-                        },
-                        {
-                            display: "Completed Onboarding Including All Optional Tutorials and Achieved a Perfect Score on the Platform Knowledge Assessment Test",
-                            stack1: 78
-                        },
-                        {
-                            display: "Added Payment Method and Set Up Recurring Billing for Premium Subscription Without Encountering Any Technical Issues During Checkout",
-                            stack1: 42
-                        },
-                        {
-                            display: "Made First Purchase Within 24 Hours of Creating Their Account and Left a Five-Star Review for the Product or Service",
-                            stack1: 35
-                        },
-                        {
-                            display: "Referred a Friend Through the Official Referral Program and Both Received the Maximum Possible Bonus Credits as a Result",
-                            stack1: 27
-                        },
-                        {
-                            display: "Participated in the Annual User Satisfaction Survey and Provided Detailed Feedback on Potential Platform Improvements",
-                            stack1: 54
-                        },
-                        {
-                            display: "Downloaded the Mobile Application on Multiple Devices and Enabled Cross-Platform Synchronization for Seamless User Experience",
-                            stack1: 89
-                        },
-                        {
-                            display: "Configured Advanced Notification Preferences to Receive Real-Time Alerts for Specific Activities Relevant to Their Interests",
-                            stack1: 31
-                        },
-                        {
-                            display: "Successfully Recovered Account After Forgetting Password by Following the Secure Password Reset Protocol Without Support Assistance",
-                            stack1: 46
-                        },
-                        {
-                            display: "Achieved Gold Tier Status in the Loyalty Program by Consistently Engaging with the Platform for More Than Six Consecutive Months",
-                            stack1: 15
-                        },
-                        {
-                            display: "Converted From Free Trial to Paid Subscription Before the Trial Period Ended and Opted for the Annual Payment Plan with Auto-Renewal",
-                            stack1: 67
-                        },
-                        {
-                            display: "Customized Their Dashboard Layout to Optimize Workflow Efficiency Based on Their Unique Usage Patterns and Preferences",
-                            stack1: 72
-                        },
-                        {
-                            display: "Signed Up for Beta Testing Program and Provided Valuable Feedback on Experimental Features Before General Public Release",
-                            stack1: 19
-                        },
-                        {
-                            display: "Linked All Available Social Media Accounts to Enable Cross-Platform Sharing and Enhanced Social Networking Capabilities",
-                            stack1: 38
-                        },
-                        {
-                            display: "Reported a Critical Bug That Was Subsequently Fixed in the Next Software Update and Received Official Recognition for the Contribution",
-                            stack1: 5
-                        }
-                    ], plotDataPoint: "percentage" // This can be changed to count
-                    ,
-                    // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
-                    valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 }),
-                react_1.default.createElement(BarChart_1.BarChart, { data: [
-                        {
-                            display: "Logged In Once",
-                            stack1: 60,
-                            stack2: 20,
-                            stack3: 40,
-                            stack4: 10,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Registered Users",
-                            stack1: 100,
-                            stack2: 50,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Created Profile",
-                            stack1: 20,
-                            stack2: 5,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Wrote at least 3 story",
-                            stack1: 8,
-                            stack2: 2,
-                            stack3: 1,
-                            stack4: 1,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Created Profile again",
-                            stack1: 20,
-                            stack2: 5,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                        {
-                            display: "Wrote at least 1 story",
-                            stack1: 8,
-                            stack2: 2,
-                            stack3: 1,
-                            stack4: 1,
-                            stack5: 40,
-                            stack6: 10,
-                        },
-                    ], plotDataPoint: "percentage" // This can be changed to count
-                    , valuePath: [
-                        "stack1",
-                        "stack2",
-                        "stack3",
-                        "stack4",
-                        "stack5",
-                        "stack6",
-                    ],
-                    // valuePath="stack1"
-                    breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 })))));
+                breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 }))));
 };
 exports.BarChart = BarChart;

package/dist/v2/components/dataviz/BarChart/_base_barchart_ui_configs.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ export interface BaseBarChartUIConfigs {
     barHeight: number;
     labelToBarGap: number;
     labelHeight: number;
+    gapBetweenTwoLabels: number;
     labelToNextBarGap: number;
     barRadius: number;
     gapBetweenBarSections: number;

package/dist/v2/components/dataviz/BarChart/_base_barchart_ui_configs.js CHANGED Viewed

@@ -11,6 +11,7 @@ exports._base_barchart_ui_configs = {
     barHeight: 10,
     labelToBarGap: 6,
     labelHeight: 16.5667,
+    gapBetweenTwoLabels: 2,
     labelToNextBarGap: 14,
     //other bar section related properties
     barRadius: 2,

package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/index.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ import { CountVizLabels } from "../../../types";
 interface CustomTooltipProps extends TooltipProps<number, string> {
     value?: CountVizLabels[];
     showPercent?: boolean;
+    activeBar?: string;
+    breakdownCategoryName?: string;
     mousePosition?: {
         x: number;
         y: number;

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

@@ -53,12 +53,14 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var __1 = require("../../../../../..");
 var Typo2_1 = require("../../../../Typo2");
+var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
 var UI_CAPTION_DF_WITH_LINE_CLAMP = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  \n  ", "\n"], ["\n  \n  ", "\n"])), function (_a) {
     var clampT = _a.clampT;
     return clampT ? (0, __1.clampText)(3) : '';
 });
 var CustomTooltip = function (props) {
-    var active = props.active, value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition;
+    var value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition, activeBar = props.activeBar, breakdownCategoryName = props.breakdownCategoryName;
+    var isActive = props.active; //activeBar && value?.[0]?.name === activeBar
     var tooltipWrapperRef = (0, react_1.useRef)(null);
     var calcTooltipTop = function (_a) {
         var _b, _c;
@@ -113,28 +115,24 @@ var CustomTooltip = function (props) {
         });
         setRowHeights(rowHeightsToSet);
     }, [tooltipTextClampStates.join()]);
-    if (!active)
+    if (!isActive)
         return null;
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement("div", { ref: tooltipWrapperRef, style: style },
+            breakdownCategoryName && react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, breakdownCategoryName),
             react_1.default.createElement("div", { style: {
                     display: "grid",
                     gridTemplateColumns: showPercent ? "auto auto auto" : "auto auto",
                     gap: "0.6rem",
                 } },
-                react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { style: { height: rowHeights[index] ? rowHeights[index] + "px" : "auto" } },
+                react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: { height: rowHeights[index] ? rowHeights[index] + "px" : "auto" } },
                     react_1.default.createElement("div", { style: {
                             display: "flex",
                             alignItems: "center",
                             gap: "0.6rem",
                         } },
-                        react_1.default.createElement("div", { key: index, style: {
-                                width: "1.2rem",
-                                height: "1.2rem",
-                                borderRadius: "50%",
-                                backgroundColor: entry.color,
-                            } }),
-                        react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, { key: index }, showPercent ? entry.percentage + "%" : entry.count || "0")))); })),
+                        react_1.default.createElement(LegendTooltipGlyph_1.LegendTooltipGlyph, { color: entry.barColor }),
+                        react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, showPercent ? entry.percentage + "%" : entry.count || "0")))); })),
                 showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { style: {
                         height: rowHeights[index]
                             ? rowHeights[index] + "px"

package/dist/v2/components/dataviz/BarChart/comps/CustomizedLabel/index.d.ts CHANGED Viewed

@@ -16,12 +16,14 @@ interface CustomizedLabelProps {
     _base_barchart_ui_configs: BaseBarChartUIConfigs;
     _debug_controls: DebugControls;
     TOT_HEIGHT_SINGLE_BAR_SECTION: number;
+    TOT_HEIGHT_STACKED_BAR_SECTION: number;
     TOT_HEIGHT_GROUPED_BAR_SECTION: number;
     CALC_SINGLE_BAR_SECTION_Y_POS: (index: number) => number;
+    CALC_STACKED_BAR_SECTION_Y_POS: (index: number) => number;
     showSumOfBreakdownValues?: boolean;
     onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
     onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
     onMouseDown?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: CustomizedLabelValue) => void;
 }
-export declare const CustomizedLabel: ({ y, width, height, value, showPercent, showCount, opacity, _base_barchart_ui_configs, _debug_controls, onMouseOver, onMouseOut, onMouseDown, activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS, breakdownDisplayType, showSumOfBreakdownValues }: CustomizedLabelProps) => React.JSX.Element;
+export declare const CustomizedLabel: ({ y, width, height, value, showPercent, showCount, opacity, _base_barchart_ui_configs, _debug_controls, onMouseOver, onMouseOut, onMouseDown, activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_STACKED_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS, CALC_STACKED_BAR_SECTION_Y_POS, breakdownDisplayType, showSumOfBreakdownValues, }: CustomizedLabelProps) => React.JSX.Element;
 export {};

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'scroll' }) },
+        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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,18 @@
+"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,
+            flexShrink: 0
+        } }));
+};
+exports.LegendTooltipGlyph = LegendTooltipGlyph;

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

@@ -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,7 @@ export interface BarChartProps {
     breakdownDisplayType?: BreakdownDisplayType;
     colorIdx?: number;
     summarizeAfterIdx?: number;
+    style?: React.CSSProperties;
 }
 export declare const BarChart: React.FC<BarChartProps>;
 export {};

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

@@ -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,155 @@ 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 ? 600 : _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;
     var isBreakdown = Array.isArray(valuePath);
-    var _h = (0, usePrepareData_1.usePrepareData)({
+    var _j = (0, usePrepareData_1.usePrepareData)({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
@@ -251,44 +317,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 = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
+    var _k = useDecideLegendOrientation({
+        widthThreshold: 500
+    }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
+    var _l = (0, react_1.useState)(undefined), activeBar = _l[0], setActiveBar = _l[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', 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.195.0",
+  "version": "2.195.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -106,6 +106,6 @@
     "phosphor-react": "^1.4.1",
     "react-datepicker": "^7.6.0",
     "react-player": "^2.12.0",
-    "recharts": "^2.12.7"
+    "recharts": "^2.15.3"
   }
 }