oolib 2.188.8 → 2.190.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,10 @@ 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"));
+var BarGraphCollection_1 = require("../../../v2/components/dataviz/BarGraphCollection");
 exports.default = {
     title: "Oolib V 2.0/components/BarChart",
     argTypes: {
@@ -112,64 +114,165 @@ var BarChart = function (args) {
                     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: [
+                    {
+                        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 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",
-                            // 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/BarGraphCollection.stories.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace showPercent {
+            let name: string;
+            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 BarGraphCollection_(args: any): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarGraphCollection_ = void 0;
+var react_1 = __importDefault(require("react"));
+var Container_1 = require("../../../components/Container");
+var BarGraphCollection_1 = require("../../../v2/components/dataviz/BarGraphCollection");
+exports.default = {
+    title: "Oolib V 2.0/components/BarGraphCollection",
+    argTypes: {
+        showPercent: {
+            name: "Show Percent",
+            control: 'boolean',
+            description: 'Toggle percentage display',
+            defaultValue: true,
+        }
+    },
+    args: {
+        showPercent: true,
+        // showCount: true,
+    }
+};
+var BarGraphCollection_ = function (args) {
+    var data = [
+        { display: "Tool- Ticker Tape", value: 5, category: "subject" },
+        { display: "CCP Session", value: 3, category: "subject" },
+        { display: "RES", value: 3, category: "subject" },
+        { display: "ASHA", value: 6, category: "stakeholder" },
+        { display: "Doctor", value: 3, category: "stakeholder" },
+        { display: "Nurse", value: 1, category: "stakeholder" },
+        { display: "Painpoint", value: 2, category: "type" },
+        { display: "Success", value: 1, category: "type" },
+        { display: "Service Design", value: 2, category: "lens" },
+        { display: "Medical", value: 2, category: "lens" }
+    ];
+    var handleBarClick = function (name) {
+        console.log("Bar clicked: ".concat(name));
+    };
+    return (react_1.default.createElement(Container_1.Container, null,
+        react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { showPercent: args.showPercent, showCount: args.showCount, 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 Stacked BarChart", onClick: handleBarClick, colorIdx: 2 }),
+        react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { data: data, valuePath: "value", labelPath: "display", 
+            // groupBy="category"
+            showPercent: args.showPercent, showCount: args.showCount, onClick: function (name) { return console.log("Clicked on ".concat(name)); } }),
+        react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { data: data, valuePath: "value", labelPath: "display", groupBy: "category", showCount: args.showCount, showPercent: args.showPercent, onClick: function (name) { return console.log("Clicked on ".concat(name)); } })));
+};
+exports.BarGraphCollection_ = BarGraphCollection_;

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/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;