oolib 2.188.7 → 2.189.0

package/dist/components/Dropdowns/DropdownMulti/index.js

@@ -103,6 +103,8 @@ function DropdownMulti(_a) {
     }, [
         JSON.stringify(optionsProp), //we need this cuz options change from 'loading' to actual options in some cases
         // showOptions
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
         value
     ]);
     options = (0, react_1.useMemo)(function () {

package/dist/components/Dropdowns/DropdownSingle/index.js

@@ -129,7 +129,12 @@ function DropdownSingle(_a) {
                     searchFieldsConfig: searchFieldsConfig,
                     setFilteredOptionsInParent: setFilteredOptionsInParent,
                 });
-    }, [optionsProp, optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn, searchString]);
+    }, [
+        optionsProp,
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
+        searchString
+    ]);
     var genSelectTagsInput = function (ops) {
         if (ops === void 0) { ops = {}; }
         return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString, setSearchString: setSearchString, single_multi: 'single', placeholder: placeholder, S: S, disabled: disabled, showOptions: showOptions, S: S, style: ops.style

package/dist/index.d.ts

@@ -70,7 +70,7 @@ export { TabBarStyle1 as TabBarV2 } from "./v2/components/TabBar";
 export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
 export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
 export { HomeCover as HomeCoverV2 } from "./v2/components/HomeCover";
-export { BarChart } from "./v2/components/BarChart";
+export { BarChart } from "./v2/components/dataviz/BarChart";
 export { DataVizAccordion } from "./v2/components/DataVizAccordion";
 export { Accordion as AccordionV2 } from "./v2/components/Accordion";
 export { CheckboxList } from "./v2/components/RadioAndCheckbox/comps/CheckboxList";

package/dist/index.js

@@ -232,7 +232,7 @@ Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: fun
 var HomeCover_2 = require("./v2/components/HomeCover");
 Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_2.HomeCover; } });
 //V2 data viz comps
-var BarChart_1 = require("./v2/components/BarChart");
+var BarChart_1 = require("./v2/components/dataviz/BarChart");
 Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
 var DataVizAccordion_1 = require("./v2/components/DataVizAccordion");
 Object.defineProperty(exports, "DataVizAccordion", { enumerable: true, get: function () { return DataVizAccordion_1.DataVizAccordion; } });

package/dist/stories/v2/components/Accordion.stories.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BarChart = void 0;
 var react_1 = __importDefault(require("react"));
-var BarChart_1 = require("../../../v2/components/BarChart");
+var BarChart_1 = require("../../../v2/components/dataviz/BarChart");
 var Accordion_1 = require("../../../v2/components/Accordion");
 // import BarChartDocs from './BarChart.mdx'
 exports.default = {

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

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BarChart = void 0;
 var react_1 = __importDefault(require("react"));
-var BarChart_1 = require("../../../v2/components/BarChart");
+var BarChart_1 = require("../../../v2/components/dataviz/BarChart");
 var BarChart_mdx_1 = __importDefault(require("./BarChart.mdx"));
+var CustomTooltip_1 = __importDefault(require("../../../v2/components/dataviz/BarChart/comps/CustomTooltip"));
 exports.default = {
     title: "Oolib V 2.0/components/BarChart",
     argTypes: {
@@ -117,59 +118,85 @@ var BarChart = function (args) {
             react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "40px" } },
                 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: "Logged In Once During the First Week of Registration and Completed the Basic Profile Section Without Abandoning the Process",
+                            stack1: 60
                         },
                         {
-                            display: "Registered Users",
-                            stack1: 100,
-                            stack2: 50,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
+                            display: "Registered Users Who Successfully Verified Their Email Address and Set Up Two-Factor Authentication for Enhanced Account Security",
+                            stack1: 100
                         },
                         {
-                            display: "Created Profile",
-                            stack1: 20,
-                            stack2: 5,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
+                            display: "Created Profile With All Recommended Fields Including Biography, Education History, Work Experience, and Personal Interests",
+                            stack1: 20
                         },
                         {
-                            display: "Wrote at least 3 story",
-                            stack1: 8,
-                            stack2: 2,
-                            stack3: 1,
-                            stack4: 1,
-                            stack5: 40,
-                            stack6: 10,
+                            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",
-                            stack1: 20,
-                            stack2: 5,
-                            stack3: 10,
-                            stack4: 15,
-                            stack5: 40,
-                            stack6: 10,
+                            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",
-                            stack1: 8,
-                            stack2: 2,
-                            stack3: 1,
-                            stack4: 1,
-                            stack5: 40,
-                            stack6: 10,
+                            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"]}

package/dist/stories/v2/components/HeatMapGrid.stories.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace showPercent {
+            let control: string;
+            let description: string;
+            let defaultValue: boolean;
+        }
+    }
+    namespace args {
+        let showPercent_1: boolean;
+        export { showPercent_1 as showPercent };
+    }
+}
+export default _default;
+export function HeatMapGrid(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/HeatMapGrid.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeatMapGrid = void 0;
+var react_1 = __importDefault(require("react"));
+var HeatMapGrid_1 = require("../../../v2/components/dataviz/HeatMapGrid");
+exports.default = {
+    title: "Oolib V 2.0/components/HeatMapGrid",
+    argTypes: {
+        showPercent: {
+            control: 'boolean',
+            description: 'Toggle percentage display',
+            defaultValue: true,
+        }
+    },
+    args: {
+        showPercent: true,
+    },
+};
+var HeatMapGrid = function (args) {
+    var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
+    var handleCellClick = function (name) {
+        console.log("cell 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(HeatMapGrid_1.HeatMapGrid, { showPercent: args.showPercent, data: [
+                    {
+                        display: "Logged In Once",
+                        stack1: 60,
+                        stack2: 20,
+                        stack3: 40,
+                        stack4: 10,
+                        stack5: 40,
+                        stack6: 10,
+                        stack2Display: 'Labels Path Stack 2 Display'
+                    },
+                    {
+                        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",
+                ], 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 Heat Map Grid", onClick: handleCellClick, colorIdx: 2 })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "40px" } },
+                react_1.default.createElement("div", { style: { height: '500px', background: 'aqua' } })))));
+};
+exports.HeatMapGrid = HeatMapGrid;

package/dist/v2/components/DataVizAccordion/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { BarChartProps } from "../BarChart";
+import { BarChartProps } from "../dataviz/BarChart";
 type ChartOptionConfig = {
     display: string;
     comp: 'PieChart' | 'BarChart';

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

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataVizAccordion = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("react");
-var BarChart_1 = require("../BarChart");
+var BarChart_1 = require("../dataviz/BarChart");
 var PieChart_1 = require("../PieChart");
 var Accordion_1 = require("../Accordion");
 var DataVizAccordion = function (_a) {

package/dist/v2/components/Dropdowns/DropdownMulti/index.js

@@ -103,6 +103,8 @@ function DropdownMulti(_a) {
     }, [
         JSON.stringify(optionsProp), //we need this cuz options change from 'loading' to actual options in some cases
         // showOptions
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
         value
     ]);
     options = (0, react_1.useMemo)(function () {

package/dist/v2/components/Dropdowns/DropdownSingle/index.js

@@ -129,7 +129,12 @@ function DropdownSingle(_a) {
                     searchFieldsConfig: searchFieldsConfig,
                     setFilteredOptionsInParent: setFilteredOptionsInParent,
                 });
-    }, [optionsProp, optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn, searchString]);
+    }, [
+        optionsProp,
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
+        searchString
+    ]);
     var genSelectTagsInput = function (ops) {
         if (ops === void 0) { ops = {}; }
         return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString, setSearchString: setSearchString, single_multi: 'single', placeholder: placeholder, S: S, disabled: disabled, showOptions: showOptions, S: S, style: ops.style

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -21,8 +21,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../../../../themes/mixins");
 var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
 var red = themes_1.colors.red, grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, onSecondary = themes_1.colors.onSecondary, invertRed = themes_1.colors.invertRed;
-var UI_BODY_SM_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), (0, mixins_1.clampText)(2));
-var UI_CAPTION_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), (0, mixins_1.clampText)(2));
+var UI_BODY_SM_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  white-space: normal;\n"], ["\n  ", ";\n  white-space: normal;\n"])), (0, mixins_1.clampText)(2));
+var UI_CAPTION_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  white-space: normal;\n"], ["\n  ", ";\n  white-space: normal;\n"])), (0, mixins_1.clampText)(2));
 var CheckboxInput = function (_a) {
     var option = _a.option, onClick = _a.onClick, S = _a.S, inputStyle = _a.inputStyle, _b = _a.value, value = _b === void 0 ? [] : _b, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult, _c = _a.className, className = _c === void 0 ? '' : _c;
     var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });

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

@@ -0,0 +1,18 @@
+export interface BaseBarChartUIConfigs {
+    barHeight: number;
+    labelToBarGap: number;
+    labelHeight: number;
+    labelToNextBarGap: number;
+    barRadius: number;
+    gapBetweenBarSections: number;
+    hoverRectStrokeWidth: number;
+    marginLeft: number;
+    marginRight: number;
+    gapBetweenBarsInGroup: number;
+}
+/**
+* if any changes are being made to the spacing and such of
+  this comps design, all these properties need to be carefully
+  observed and tweaked to ensure no ui has gotten warped due to sideeffects
+*/
+export declare const _base_barchart_ui_configs: BaseBarChartUIConfigs;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._base_barchart_ui_configs = void 0;
+/**
+* if any changes are being made to the spacing and such of
+  this comps design, all these properties need to be carefully
+  observed and tweaked to ensure no ui has gotten warped due to sideeffects
+*/
+exports._base_barchart_ui_configs = {
+    //4 of these compose a single bar section
+    barHeight: 10,
+    labelToBarGap: 6,
+    labelHeight: 16.5667,
+    labelToNextBarGap: 14,
+    //other bar section related properties
+    barRadius: 2,
+    gapBetweenBarSections: 0,
+    hoverRectStrokeWidth: 1,
+    //overall chart margin
+    marginLeft: 6,
+    marginRight: 6,
+    //grouped bar chart related properties
+    gapBetweenBarsInGroup: 3,
+};

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { TooltipProps } from 'recharts';
-import { LabelData } from '../CustomizedLabel';
+import React from "react";
+import { TooltipProps } from "recharts";
+import { CountVizLabels } from "../../../types";
 interface CustomTooltipProps extends TooltipProps<number, string> {
-    value?: LabelData[];
+    value?: CountVizLabels[];
     showPercent?: boolean;
     mousePosition?: {
         x: number;

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

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

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

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