oolib 2.197.5 → 2.198.1

package/dist/stories/v2/components/{BarChart.stories.d.ts → visualization/BarChart.stories.d.ts}

@@ -18,6 +18,6 @@ declare namespace _default {
     }
 }
 export default _default;
-export function BarChart(args: any): React.JSX.Element;
+export function _BarChart(args: any): React.JSX.Element;
 import BarChartDocs from './BarChart.mdx';
 import React from "react";

package/dist/stories/v2/components/{BarChart.stories.js → visualization/BarChart.stories.js}

@@ -3,14 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BarChart = void 0;
+exports._BarChart = void 0;
 var react_1 = __importDefault(require("react"));
-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");
+var BarChart_1 = require("../../../../v2/components/dataviz/BarChart");
 exports.default = {
-    title: "Oolib V 2.0/components/BarChart",
+    title: "Oolib V 2.0/Visualization/BarChart",
     argTypes: {
         showPercent: {
             control: 'boolean',
@@ -34,7 +32,7 @@ var data = [
     { display: "Created Profile", stack1: 20, stack2: 5, stack3: 10, stack4: 15 },
     { display: "Wrote at least 1 story", stack1: 8, stack2: 2 },
 ];
-var BarChart = function (args) {
+var _BarChart = function (args) {
     var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
     var handleBarClick = function (name) {
         console.log("Bar clicked: ".concat(name));
@@ -250,4 +248,4 @@ var BarChart = function (args) {
                 // valuePath="stack1"
                 breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: args.showPercent, colorIdx: 2 }))));
 };
-exports.BarChart = BarChart;
+exports._BarChart = _BarChart;

package/dist/stories/v2/components/{BarGraphCollection.stories.d.ts → visualization/BarGraphCollection.stories.d.ts}

@@ -15,5 +15,5 @@ declare namespace _default {
     }
 }
 export default _default;
-export function BarGraphCollection_(args: any): React.JSX.Element;
+export function _BarGraphCollection_(args: any): React.JSX.Element;
 import React from "react";

package/dist/stories/v2/components/{BarGraphCollection.stories.js → visualization/BarGraphCollection.stories.js}

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BarGraphCollection_ = void 0;
+exports._BarGraphCollection_ = void 0;
 var react_1 = __importDefault(require("react"));
-var Container_1 = require("../../../components/Container");
-var BarGraphCollection_1 = require("../../../v2/components/dataviz/BarGraphCollection");
+var Container_1 = require("../../../../components/Container");
+var BarGraphCollection_1 = require("../../../../v2/components/dataviz/BarGraphCollection");
 exports.default = {
-    title: "Oolib V 2.0/components/BarGraphCollection",
+    title: "Oolib V 2.0/visualization/BarGraphCollection",
     argTypes: {
         showPercent: {
             name: "Show Percent",
@@ -23,7 +23,7 @@ exports.default = {
         // showCount: true,
     }
 };
-var BarGraphCollection_ = function (args) {
+var _BarGraphCollection_ = function (args) {
     var data = [
         { display: "Tool- Ticker Tape", value: 5, category: "subject" },
         { display: "CCP Session", value: 3, category: "subject" },
@@ -1187,4 +1187,4 @@ var BarGraphCollection_ = function (args) {
             "groupBy": "category",
             "totalDataCount": 209, debug: args.debug })));
 };
-exports.BarGraphCollection_ = BarGraphCollection_;
+exports._BarGraphCollection_ = _BarGraphCollection_;

package/dist/stories/v2/components/{HeatMapGrid.stories.d.ts → visualization/HeatMapGrid.stories.d.ts}

@@ -13,5 +13,5 @@ declare namespace _default {
     }
 }
 export default _default;
-export function HeatMapGrid(args: any): React.JSX.Element;
+export function _HeatMapGrid(args: any): React.JSX.Element;
 import React from "react";

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

@@ -0,0 +1,122 @@
+"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._HeatMapGrid = void 0;
+var react_1 = __importDefault(require("react"));
+var HeatMapGrid_1 = require("../../../../v2/components/dataviz/HeatMapGrid");
+var props2_1 = require("./configs/props2");
+exports.default = {
+    title: "Oolib V 2.0/visualization/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", padding: '20px' } },
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, { showPercent: args.showPercent, data: [
+                    {
+                        display: "Logged",
+                        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, style: { height: "300px" } })),
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heatMapGridProps, { style: { height: "300px" } }))),
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heatMapGridProps, { style: { height: "300px" } }))),
+        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
+            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heaMapGridProps2, { style: { height: "300px" } })))));
+};
+exports._HeatMapGrid = _HeatMapGrid;

package/dist/stories/v2/components/{PieChart.stories.d.ts → visualization/PieChart.stories.d.ts}

@@ -3,5 +3,5 @@ declare namespace _default {
     let parameters: {};
 }
 export default _default;
-export function PieChart(args: any): React.JSX.Element;
+export function _PieChart(args: any): React.JSX.Element;
 import React from "react";

package/dist/stories/v2/components/{PieChart.stories.js → visualization/PieChart.stories.js}

@@ -1,14 +1,26 @@
 "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.PieChart = void 0;
+exports._PieChart = void 0;
 var react_1 = __importDefault(require("react"));
-var PieChart_1 = require("../../../v2/components/PieChart");
+var PieChart_1 = require("../../../../v2/components/dataviz/PieChart");
+var props1_1 = require("./configs/props1");
 // import BarChartDocs from './BarChart.mdx'
 exports.default = {
-    title: "Oolib V 2.0/components/PieChart",
+    title: "Oolib V 2.0/Visualization/PieChart",
     // argTypes: {
     //   HeaderStyle: {
     //     options: ["HeaderStyle1", "HeaderStyle2", "HeaderStyle3"],
@@ -55,22 +67,13 @@ var data = [
     { display: 'Created Profile', stack1: 20, stack2: 5, stack3: 10, stack4: 15 },
     { display: 'Wrote at least 1 story', stack1: 8, stack2: 2 }
 ];
-var PieChart = function (args) {
+var _PieChart = function (args) {
     var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
     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(PieChart_1.PieChart, { 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", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, showPercent: true, colorIdx: 0 })));
+    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(PieChart_1.PieChart, __assign({}, props1_1.chartProps1)))));
 };
-exports.PieChart = PieChart;
+exports._PieChart = _PieChart;

package/dist/stories/v2/components/visualization/configs/props1.d.ts

@@ -0,0 +1,102 @@
+export namespace chartProps1 {
+    let overflowAfterHeight: number;
+    let data: ({
+        display: string;
+        stack1: number;
+        stack2: number;
+        stack3: number;
+        stack4: number;
+        stack5: number;
+        stack6: number;
+        stack7: number;
+        stack8: number;
+        stack9: number;
+        stack10: number;
+        stack11: number;
+        stack12: number;
+        stack13: number;
+        stack14: number;
+        stack15: number;
+        stack16: number;
+        stack17: number;
+        stack18: number;
+        stack19: number;
+        stack20: number;
+        stack2Display: string;
+    } | {
+        display: string;
+        stack1: number;
+        stack3: number;
+        stack4: number;
+        stack5: number;
+        stack6: number;
+        stack7: number;
+        stack8: number;
+        stack9: number;
+        stack10: number;
+        stack11: number;
+        stack12: number;
+        stack13: number;
+        stack14: number;
+        stack15: number;
+        stack16: number;
+        stack17: number;
+        stack18: number;
+        stack19: number;
+        stack20: number;
+        stack2?: undefined;
+        stack2Display?: undefined;
+    } | {
+        display: string;
+        stack1: number;
+        stack2: number;
+        stack3: number;
+        stack4: number;
+        stack5: number;
+        stack6: number;
+        stack7: number;
+        stack8: number;
+        stack9: number;
+        stack10: number;
+        stack11: number;
+        stack12: number;
+        stack13: number;
+        stack14: number;
+        stack15: number;
+        stack16: number;
+        stack17: number;
+        stack18: number;
+        stack19: number;
+        stack20: number;
+        stack2Display?: undefined;
+    })[];
+    let plotDataPoint: string;
+    let valuePath: string[];
+    let breakdownCategoryName: string;
+    namespace tooltipLabelsMapping {
+        let stack1: string;
+        let stack2: string;
+        let stack3: string;
+        let stack4: string;
+        let stack5: string;
+        let stack6: string;
+        let stack7: string;
+        let stack8: string;
+        let stack9: string;
+        let stack10: string;
+        let stack11: string;
+        let stack12: string;
+        let stack13: string;
+        let stack14: string;
+        let stack15: string;
+        let stack16: string;
+        let stack17: string;
+        let stack18: string;
+        let stack19: string;
+        let stack20: string;
+    }
+    let labelPath: string;
+    let title: string;
+    function onClick(): void;
+    let colorIdx: number;
+}

package/dist/stories/v2/components/visualization/configs/props1.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chartProps1 = void 0;
+exports.chartProps1 = {
+    overflowAfterHeight: 300,
+    // showPercent: showPercent,
+    data: [
+        {
+            display: "Logged In Once",
+            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: 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: 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: 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: 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: 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: function () { },
+    colorIdx: 2
+};

package/dist/stories/v2/components/visualization/configs/props2.d.ts

@@ -0,0 +1,45 @@
+export namespace heatMapGridProps {
+    let data: {
+        value: string;
+        display: string;
+        count: number;
+        compType0: string;
+        compType1: string;
+        children: {
+            value: string;
+            display: string[];
+            count: number;
+            compType0: string;
+            compType1: string;
+        }[];
+    }[];
+    let valuePath: string[];
+    let tooltipLabelsPath: string[];
+    let labelPath: string;
+    let colorIdx: number;
+}
+export namespace heaMapGridProps2 {
+    let data_1: {
+        value: string;
+        display: string;
+        count: number;
+        compType0: string;
+        compType1: string;
+        children: {
+            value: string;
+            display: string;
+            count: number;
+            compType0: string;
+            compType1: string;
+        }[];
+    }[];
+    export { data_1 as data };
+    let tooltipLabelsPath_1: string[];
+    export { tooltipLabelsPath_1 as tooltipLabelsPath };
+    let valuePath_1: string[];
+    export { valuePath_1 as valuePath };
+    let labelPath_1: string;
+    export { labelPath_1 as labelPath };
+    let colorIdx_1: number;
+    export { colorIdx_1 as colorIdx };
+}

package/dist/stories/v2/components/{HeatMapGrid.stories.js → visualization/configs/props2.js}

@@ -10,117 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     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.HeatMapGrid = void 0;
-var react_1 = __importDefault(require("react"));
-var HeatMapGrid_1 = require("../../../v2/components/dataviz/HeatMapGrid");
-var __1 = require("../../..");
-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", padding: '20px' } },
-        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
-            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, { showPercent: args.showPercent, data: [
-                    {
-                        display: "Logged",
-                        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, style: { height: "300px" } })),
-        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
-            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, heatMapGridProps, { style: { height: "300px" } }))),
-        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
-            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, heatMapGridProps, { style: { height: "300px" } }))),
-        react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
-            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, heaMapGridProps2, { style: { height: "300px" } })))));
-};
-exports.HeatMapGrid = HeatMapGrid;
-var heatMapGridProps = __assign({
+exports.heaMapGridProps2 = exports.heatMapGridProps = void 0;
+exports.heatMapGridProps = __assign({
     "data": [
         {
             "value": "iAgree",
@@ -986,7 +878,7 @@ var heatMapGridProps = __assign({
     "labelPath": "display",
     "colorIdx": 3
 });
-var heaMapGridProps2 = {
+exports.heaMapGridProps2 = {
     "data": [
         {
             "value": "reasons_for_not_engaging_with_eg_fundraising",

package/dist/stories/v2/components/visualization/vizPlayground.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    let title: string;
+    let parameters: {};
+}
+export default _default;
+export function _Playground(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/visualization/vizPlayground.stories.js

@@ -0,0 +1,55 @@
+"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._Playground = void 0;
+var react_1 = __importDefault(require("react"));
+var PieChart_1 = require("../../../../v2/components/dataviz/PieChart");
+var HeatMapGrid_1 = require("../../../../v2/components/dataviz/HeatMapGrid");
+var BarChart_1 = require("../../../../v2/components/dataviz/BarChart");
+var BarGraphCollection_1 = require("../../../../v2/components/dataviz/BarGraphCollection");
+var __1 = require("../../../..");
+var props1_1 = require("./configs/props1");
+var props2_1 = require("./configs/props2");
+exports.default = {
+    title: "Oolib V 2.0/Visualization/VIZ PLayground",
+    parameters: {},
+};
+var WrapperComp = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement("div", { style: { border: "1px solid ".concat(__1.colors2.grey20), padding: '10px', borderRadius: "8px" } }, children);
+};
+var _Playground = function (args) {
+    var colors = ["#5C80FF", "#FFA800", "#00BC8F", "#5C51CE"];
+    var handleBarClick = function (name) {
+        console.log("Bar clicked: ".concat(name));
+    };
+    return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", padding: '20px' } },
+        react_1.default.createElement(WrapperComp, null,
+            react_1.default.createElement(PieChart_1.PieChart, __assign({}, props1_1.chartProps1, { style: { height: "500px" } }))),
+        react_1.default.createElement(WrapperComp, null,
+            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props1_1.chartProps1, { style: { height: "500px" } }))),
+        react_1.default.createElement(WrapperComp, null),
+        react_1.default.createElement(WrapperComp, null,
+            react_1.default.createElement(BarChart_1.BarChart, __assign({}, props1_1.chartProps1, { style: { height: "500px" } }))),
+        react_1.default.createElement(WrapperComp, null,
+            react_1.default.createElement(PieChart_1.PieChart, __assign({}, props2_1.heaMapGridProps2, { style: { height: "500px" } }))),
+        react_1.default.createElement(WrapperComp, null,
+            react_1.default.createElement(HeatMapGrid_1.HeatMapGrid, __assign({}, props2_1.heaMapGridProps2, { style: { height: "500px" } }))),
+        react_1.default.createElement(WrapperComp, null),
+        react_1.default.createElement(WrapperComp, null,
+            react_1.default.createElement(BarChart_1.BarChart, __assign({}, props2_1.heaMapGridProps2, { style: { height: "500px" } })))));
+};
+exports._Playground = _Playground;

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

@@ -29,7 +29,7 @@ exports.DataVizAccordion = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("react");
 var BarChart_1 = require("../dataviz/BarChart");
-var PieChart_1 = require("../PieChart");
+var PieChart_1 = require("../dataviz/PieChart");
 var Accordion_1 = require("../Accordion");
 var DataVizAccordion = function (_a) {
     var title = _a.title, _b = _a.chartOptions, chartOptions = _b === void 0 ? [] : _b, props = __rest(_a, ["title", "chartOptions"]);

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

@@ -29,6 +29,12 @@ export interface BarChartProps {
     summarizeAfterIdx?: number;
     style?: React.CSSProperties;
 }
+export declare const useDecideLegendOrientation: (options?: {
+    widthThreshold?: number;
+}) => {
+    vizWrapperRef: React.MutableRefObject<HTMLDivElement>;
+    orientation: "horizontal" | "vertical";
+};
 export declare const FadeGradientWhenScroll: ({ style }: {
     style?: {};
 }) => React.JSX.Element;

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

@@ -47,7 +47,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BarChart = exports.FadeGradientWhenScroll = exports.useTrackMousePosition = void 0;
+exports.BarChart = exports.FadeGradientWhenScroll = exports.useDecideLegendOrientation = exports.useTrackMousePosition = void 0;
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var CustomizedLabel_1 = require("./comps/CustomizedLabel");
@@ -244,6 +244,7 @@ var useDecideLegendOrientation = function (options) {
         orientation: orientation
     };
 };
+exports.useDecideLegendOrientation = useDecideLegendOrientation;
 var BarChartRenderer = function (_a) {
     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, 
     //
@@ -321,7 +322,7 @@ var BarChart = function (_a) {
         colorIdx: colorIdx
     }), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
     console.log({ data: data, valuePath: valuePath });
-    var _k = useDecideLegendOrientation({
+    var _k = (0, exports.useDecideLegendOrientation)({
         widthThreshold: 500
     }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
     var _l = (0, react_1.useState)(undefined), activeBar = _l[0], setActiveBar = _l[1];

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

@@ -172,18 +172,19 @@ var HeatMapGrid = function (_a) {
                 if (scrollableRef.current) {
                     scrollableRef.current.scrollTop = e.target.scrollTop;
                 }
-            } }, data.map(function (d, idx) { return (react_1.default.createElement("div", { key: idx, style: {
-                height: _configs.cellSize + "px",
-                textAlign: "right",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "flex-end",
-                flexShrink: 0,
-            } },
-            react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
-                react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
-                        maxWidth: yWidth + "px",
-                    } }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name)))); })),
+            } }, data.map(function (d, idx) {
+            var _a;
+            return (react_1.default.createElement("div", { key: idx, style: {
+                    height: _configs.cellSize + "px",
+                    textAlign: "right",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-end",
+                    flexShrink: 0,
+                } },
+                react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
+                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, (_a = d[0]) === null || _a === void 0 ? void 0 : _a.labels.name))));
+        })),
         react_1.default.createElement("div", { ref: scrollableRef, style: {
                 gridRow: 2,
                 gridColumn: 2,

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

@@ -0,0 +1,21 @@
+import React, { CSSProperties } from "react";
+export interface PieChartProps {
+    data: any;
+    valuePath: string | string[];
+    tooltipLabelsMapping?: {
+        [key: string]: string;
+    };
+    tooltipLabelsPath?: string | string[];
+    breakdownCategoryName?: string;
+    labelPath: string;
+    title?: string;
+    onClick?: (name: string) => void;
+    colors?: string[];
+    colorIdx?: number;
+    plotDataPoint?: "percentage" | "count";
+    showPercent?: boolean;
+    showCount?: boolean;
+    innerLabel?: string;
+    style?: CSSProperties;
+}
+export declare const PieChart: React.FunctionComponent<PieChartProps>;

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

@@ -0,0 +1,177 @@
+"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 __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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = void 0;
+var react_1 = __importStar(require("react"));
+var recharts_1 = require("recharts");
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var Legend_1 = require("../BarChart/comps/Legend");
+var __1 = require("../../../..");
+var BarChart_1 = require("../BarChart");
+var usePrepareData_1 = require("../utils/usePrepareData");
+var chartColors = [
+    "#5C80FF",
+    "#FFA800",
+    "#00BC8F",
+    "#FF51CE",
+    "rgb(173, 89, 108)",
+    "rgb(114, 190, 244)",
+    "rgb(255, 178, 122)",
+    "rgb(14, 126, 161)",
+    "rgb(60, 169, 116)",
+    "rgb(254, 187, 178)",
+    "rgb(204, 128, 217)",
+    "rgb(91, 184, 175)",
+];
+var usePieChartData = function (barChartData, isBreakdown) {
+    return (0, react_1.useMemo)(function () {
+        if (!barChartData || barChartData.length === 0) {
+            return [];
+        }
+        if (!isBreakdown) {
+            // For non-breakdown data, the structure is already compatible
+            return barChartData.map(function (item) { return ({
+                labels: {
+                    percentage: item.labels.percentage,
+                    count: item.labels.count,
+                    name: item.labels.name,
+                    tooltipLabel: item.labels.tooltipLabel || item.labels.name,
+                },
+            }); });
+        }
+        else {
+            // For breakdown data, sum all values for each main category
+            return barChartData.map(function (itemArray) {
+                var totalCount = itemArray.reduce(function (sum, item) { return sum + item.labels.count; }, 0);
+                var mainItem = itemArray[0]; // Use the first item for the main label
+                // Calculate total across all items for percentage calculation
+                var grandTotal = barChartData.reduce(function (total, group) {
+                    return total + group.reduce(function (groupSum, item) { return groupSum + item.labels.count; }, 0);
+                }, 0);
+                return {
+                    labels: {
+                        percentage: (0, _EXPORTS_1.getPercentage)(totalCount, grandTotal),
+                        count: totalCount,
+                        name: mainItem.labels.name,
+                        tooltipLabel: mainItem.labels.tooltipLabel || mainItem.labels.name,
+                    },
+                };
+            });
+        }
+    }, [barChartData, isBreakdown]);
+};
+var CustomLabel = function (_a) {
+    var viewBox = _a.viewBox, value = _a.value;
+    var cx = viewBox.cx, cy = viewBox.cy;
+    return (react_1.default.createElement("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "central", className: "text-sm font-medium" }, value));
+};
+var RADIAN = Math.PI / 180;
+var renderCustomizedLabel = function (_a) {
+    var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, percent = _a.percent, dataKey = _a.dataKey, index = _a.index;
+    // Calculate position closer to the center of the slice
+    var radius = innerRadius + (outerRadius - innerRadius) * 0.45; // Moved closer to center
+    var x = cx + radius * Math.cos(-midAngle * RADIAN);
+    var y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return (react_1.default.createElement("text", { key: index, x: x, y: y, fill: "black" // Changed to white for better contrast
+        , textAnchor: "middle" // Always center the text
+        , dominantBaseline: "central", className: "UI_CAPTION_SEMIBOLD" }, "".concat((percent * 100).toFixed(0), "%")));
+};
+var renderActiveShape = function (props) {
+    var _a, _b;
+    var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload, midAngle = props.midAngle;
+    var radius = innerRadius + (outerRadius - innerRadius) * 0.45; // Moved closer to center
+    var x = cx + radius * Math.cos(-midAngle * RADIAN);
+    var y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return (react_1.default.createElement("g", null,
+        react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 8, startAngle: startAngle, endAngle: endAngle, fill: fill }),
+        react_1.default.createElement("text", { x: x, y: y, fill: "black", textAnchor: "middle", dominantBaseline: "central", className: "UI_CAPTION_SEMIBOLD" }, "".concat((((_b = (_a = payload.payload) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.percentage) || 0).toFixed(0), "%"))));
+};
+var PieChart = function (_a) {
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.colors, colors = _c === void 0 ? chartColors : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.plotDataPoint, plotDataPoint = _e === void 0 ? "percentage" : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.showCount, showCount = _g === void 0 ? false : _g, innerLabel = _a.innerLabel, style = _a.style;
+    var isBreakdown = Array.isArray(valuePath);
+    var barChartData = (0, usePrepareData_1.usePrepareData)({
+        _data: _data,
+        labelPath: labelPath,
+        valuePath: valuePath,
+        tooltipLabelsMapping: tooltipLabelsMapping,
+        tooltipLabelsPath: tooltipLabelsPath,
+        isBreakdown: isBreakdown,
+        showPercent: showPercent,
+        summarizeAfterIdx: undefined, // PieChart doesn't use summarization
+        colorIdx: colorIdx
+    }).data;
+    // Adapt the BarChart data format to PieChart format
+    var data = usePieChartData(barChartData, isBreakdown);
+    var _h = (0, BarChart_1.useDecideLegendOrientation)({
+        widthThreshold: 500
+    }), vizWrapperRef = _h.vizWrapperRef, orientation = _h.orientation;
+    var _j = (0, react_1.useState)(), activeIndex = _j[0], setActiveIndex = _j[1];
+    var onPieEnter = function (_, index) {
+        setActiveIndex(index);
+    };
+    var onPieLeave = function () {
+        setActiveIndex(undefined);
+    };
+    var onPieClick = function (_, index) {
+        if (onClick) {
+            onClick(data[index].labels.name);
+        }
+    };
+    if (data.length === 0)
+        return react_1.default.createElement("div", null, "No data available");
+    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative' }) },
+        react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
+            react_1.default.createElement("div", { className: "w-full", style: { height: "300px" } },
+                react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
+                    react_1.default.createElement(recharts_1.PieChart, null,
+                        react_1.default.createElement(recharts_1.Pie, { data: data, cx: "50%", cy: "50%", label: renderCustomizedLabel, fill: "#8884d8", dataKey: "labels.count", nameKey: "labels.name", innerRadius: 70, outerRadius: 140, labelLine: false, activeShape: renderActiveShape, onMouseEnter: onPieEnter, onMouseLeave: onPieLeave, onClick: onClick ? onPieClick : undefined, style: onClick ? { cursor: "pointer" } : {}, activeIndex: activeIndex }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colors[(index + colorIdx) % colors.length], opacity: activeIndex !== undefined && activeIndex !== index ? 0.4 : 1 })); })))))),
+        react_1.default.createElement("div", { style: __assign({ position: 'sticky' }, (orientation === 'vertical' ? { top: 0 } : { bottom: 0, background: __1.colors2.white })) },
+            react_1.default.createElement(Legend_1.Legend, { orientation: orientation, label: breakdownCategoryName || "Categories", data: data.map(function (d, index) { return ({
+                    text: d.labels.tooltipLabel || d.labels.name,
+                    color: colors[(index + colorIdx) % colors.length]
+                }); }) }))));
+};
+exports.PieChart = PieChart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.197.5",
+  "version": "2.198.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -1,13 +0,0 @@
-import React from "react";
-export interface PieChartProps {
-    data: any;
-    valuePath: string;
-    labelPath: string;
-    title?: string;
-    onClick?: (name: string) => void;
-    colors?: string[];
-    colorIdx?: number;
-    plotDataPoint?: "percentage" | "count";
-    innerLabel?: string;
-}
-export declare const PieChart: React.FC<PieChartProps>;

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

@@ -1,126 +0,0 @@
-"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 __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));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PieChart = void 0;
-var react_1 = __importStar(require("react"));
-var recharts_1 = require("recharts");
-var _EXPORTS_1 = require("../../../utils/_EXPORTS");
-var getTotalCount_1 = require("../../../utils/getTotalCount");
-var chartColors = [
-    "#5C80FF",
-    "#FFA800",
-    "#00BC8F",
-    "#FF51CE",
-    "rgb(173, 89, 108)",
-    "rgb(114, 190, 244)",
-    "rgb(255, 178, 122)",
-    "rgb(14, 126, 161)",
-    "rgb(60, 169, 116)",
-    "rgb(254, 187, 178)",
-    "rgb(204, 128, 217)",
-    "rgb(91, 184, 175)",
-];
-var usePrepareData = function (_a) {
-    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, plotDataPoint = _a.plotDataPoint;
-    return (0, react_1.useMemo)(function () {
-        var finalData = __spreadArray([], _data, true);
-        var totalCount = (0, getTotalCount_1.getTotalCount)({ data: finalData, countPath: valuePath });
-        finalData = finalData.map(function (d) { return ({
-            labels: __assign(__assign({}, (plotDataPoint === "percentage"
-                ? { percentage: (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount) }
-                : {})), { count: (0, _EXPORTS_1.getVal)(d, valuePath), name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
-        }); });
-        // Sort by value
-        finalData.sort(function (a, b) { return b.labels.count - a.labels.count; });
-        return finalData;
-    }, [_data, labelPath, valuePath, plotDataPoint]);
-};
-var CustomLabel = function (_a) {
-    var viewBox = _a.viewBox, value = _a.value;
-    var cx = viewBox.cx, cy = viewBox.cy;
-    return (react_1.default.createElement("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "central", className: "text-sm font-medium" }, value));
-};
-var renderActiveShape = function (props) {
-    var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload;
-    return (react_1.default.createElement("g", null,
-        react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 8, startAngle: startAngle, endAngle: endAngle, fill: fill }),
-        react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, startAngle: startAngle, endAngle: endAngle, innerRadius: innerRadius - 4, outerRadius: innerRadius - 2, fill: fill })));
-};
-var PieChart = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.colors, colors = _c === void 0 ? chartColors : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.plotDataPoint, plotDataPoint = _e === void 0 ? "percentage" : _e, innerLabel = _a.innerLabel;
-    var data = usePrepareData({
-        _data: _data,
-        labelPath: labelPath,
-        valuePath: valuePath,
-        plotDataPoint: plotDataPoint,
-    });
-    var _f = (0, react_1.useState)(), activeIndex = _f[0], setActiveIndex = _f[1];
-    var onPieEnter = function (_, index) {
-        setActiveIndex(index);
-    };
-    var onPieLeave = function () {
-        setActiveIndex(undefined);
-    };
-    var onPieClick = function (_, index) {
-        if (onClick) {
-            onClick(data[index].labels.name);
-        }
-    };
-    return (react_1.default.createElement("div", { className: "w-full", style: { height: "300px" } },
-        react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
-            react_1.default.createElement(recharts_1.PieChart, null,
-                react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "labels.count", nameKey: "labels.name", cx: "50%", cy: "50%", innerRadius: 60, outerRadius: 80, paddingAngle: 1, activeIndex: activeIndex, activeShape: renderActiveShape, onMouseEnter: onPieEnter, onMouseLeave: onPieLeave, onClick: onClick ? onPieClick : undefined, style: onClick ? { cursor: "pointer" } : {} }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colors[(index + colorIdx) % colors.length], opacity: activeIndex !== undefined && activeIndex !== index ? 0.4 : 1 })); }))))));
-};
-exports.PieChart = PieChart;