oolib 2.157.0 → 2.157.1

package/dist/index.d.ts

@@ -32,7 +32,6 @@ export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
 export { Accordion } from "./components/Accordion";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
-export { PercentBarChart } from "./components/PercentBarChart";
 export { Divider } from "./components/Divider";
 export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 export { ModalConfirm } from "./components/Modals/ModalConfirm";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = void 0;
+exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -64,8 +64,6 @@ var Accordion_1 = require("./components/Accordion");
 Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
 var PercentCompletedPie_1 = require("./components/PercentCompletedPie");
 Object.defineProperty(exports, "PercentCompletedPie", { enumerable: true, get: function () { return PercentCompletedPie_1.PercentCompletedPie; } });
-var PercentBarChart_1 = require("./components/PercentBarChart");
-Object.defineProperty(exports, "PercentBarChart", { enumerable: true, get: function () { return PercentBarChart_1.PercentBarChart; } });
 var Divider_1 = require("./components/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 var SkeletonLoader_1 = require("./components/LoadersAndProgress/SkeletonLoader");

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

@@ -129,7 +129,7 @@ var BarChart = function (args) {
                 // valuePath="stack1"
                 labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, 
                 // showPercent={true}
-                colorIdx: 0 })),
+                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: [
@@ -192,7 +192,7 @@ var BarChart = function (args) {
                     // valuePath={["stack1", "stack2", "stack3", "stack4", "stack5", "stack6"]}
                     valuePath: "stack1", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, 
                     // showPercent={true}
-                    colorIdx: 0 }),
+                    colorIdx: 2 }),
                 react_1.default.createElement(BarChart_1.BarChart, { data: [
                         {
                             display: "Logged In Once",
@@ -260,6 +260,6 @@ var BarChart = function (args) {
                     // valuePath="stack1"
                     breakdownDisplayType: "stacked", labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, 
                     // showPercent={true}
-                    colorIdx: 0 })))));
+                    colorIdx: 2 })))));
 };
 exports.BarChart = BarChart;

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { BaseConfigs } from "../..";
-import { DebugControls } from '../..';
+import { BaseConfigs, DebugControls } from "../..";
 interface LabelData {
     percentage: number;
     count: number;

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

@@ -1,12 +1,33 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomizedLabel = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var themes_1 = require("../../../../themes");
 var colors_1 = require("../../../../themes/colors");
+var TruncatedSVGText_1 = require("../TruncatedSVGText");
 var CustomizedLabel = function (_a) {
     var y = _a.y, width = _a.width, height = _a.height, value = _a.value, showPercent = _a.showPercent, showCount = _a.showCount, opacity = _a.opacity, _base_configs = _a._base_configs, _debug_controls = _a._debug_controls, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown, activeBar = _a.activeBar, TOT_HEIGHT_SINGLE_BAR_SECTION = _a.TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION = _a.TOT_HEIGHT_GROUPED_BAR_SECTION, CALC_SINGLE_BAR_SECTION_Y_POS = _a.CALC_SINGLE_BAR_SECTION_Y_POS, breakdownDisplayType = _a.breakdownDisplayType;
     if (!value)
@@ -37,12 +58,15 @@ var CustomizedLabel = function (_a) {
             return value.count;
         }
     };
+    var widthRef = (0, react_1.useRef)(null);
+    var textContainerRef = (0, react_1.useRef)(null);
     return (react_1.default.createElement("g", null,
-        react_1.default.createElement("text", { opacity: opacity, x: _base_configs.marginLeft, dy: y - (_base_configs.labelToBarGap), fill: themes_1.colors.grey80, textAnchor: "start", className: "UI_BODY_BOLD_SM" },
+        react_1.default.createElement("text", { ref: textContainerRef, opacity: opacity, x: _base_configs.marginLeft, dy: y - (_base_configs.labelToBarGap), fill: themes_1.colors.grey80, textAnchor: "start", className: "UI_BODY_BOLD_SM" },
             formatValue(),
             showPercent && !isBreakdown && (react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, fill: themes_1.colors.grey80 }, getCount())),
-            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, fill: themes_1.colors.grey80 }, name)),
-        react_1.default.createElement("rect", { style: onMouseDown ? { cursor: 'pointer' } : {}, onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: _base_configs.hoverRectStrokeWidth, y: (!isBreakdown || breakdownDisplayType === 'stacked')
+            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, fill: themes_1.colors.grey80 },
+                react_1.default.createElement(TruncatedSVGText_1.TruncatedSVGText, { text: name, textContainerRef: textContainerRef, widthRef: widthRef, widthOffset: -(_base_configs.marginLeft + _base_configs.marginRight) }))),
+        react_1.default.createElement("rect", { ref: widthRef, style: onMouseDown ? { cursor: 'pointer' } : {}, onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: _base_configs.hoverRectStrokeWidth, y: (!isBreakdown || breakdownDisplayType === 'stacked')
                 ? _base_configs.hoverRectStrokeWidth + CALC_SINGLE_BAR_SECTION_Y_POS(value.dataIndex)
                 : _base_configs.hoverRectStrokeWidth + (TOT_HEIGHT_GROUPED_BAR_SECTION + _base_configs.gapBetweenBarSections) * value[0].dataIndex, width: "calc(100% - ".concat(_base_configs.hoverRectStrokeWidth * 2, "px)"), height: (!isBreakdown || breakdownDisplayType === 'stacked') ? TOT_HEIGHT_SINGLE_BAR_SECTION : TOT_HEIGHT_GROUPED_BAR_SECTION, opacity: _debug_controls.mouseEventDetectorOpacity ||
                 (activeBar === name ? 1 : 0), stroke: colors_1.colors.grey30, rx: 5, ry: 5, strokeWidth: "".concat(_base_configs.hoverRectStrokeWidth, "px"), fillOpacity: _debug_controls.mouseEventDetectorOpacity })));

package/dist/v2/components/BarChart/comps/TruncatedSVGText/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const TruncatedSVGText: ({ text, textContainerRef, widthRef, widthOffset }: {
+    text: any;
+    textContainerRef: any;
+    widthRef: any;
+    widthOffset?: number;
+}) => React.JSX.Element;

package/dist/v2/components/BarChart/comps/TruncatedSVGText/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TruncatedSVGText = void 0;
+var react_1 = __importStar(require("react"));
+var TruncatedSVGText = function (_a) {
+    var _b;
+    var text = _a.text, textContainerRef = _a.textContainerRef, widthRef = _a.widthRef, _c = _a.widthOffset, widthOffset = _c === void 0 ? 0 : _c;
+    var textRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)(false), isTextTruncated = _d[0], setIsTextTruncated = _d[1];
+    (0, react_1.useEffect)(function () {
+        var truncateText = function () {
+            var _a;
+            var element = textRef.current;
+            if (!element)
+                return;
+            var currentText = text;
+            var textWidth = textContainerRef.current.getComputedTextLength();
+            var totWidth = ((_a = widthRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + widthOffset;
+            // Check if truncation is needed
+            if (textWidth > totWidth) {
+                setIsTextTruncated(true);
+                while (textWidth > totWidth && currentText.length > 0) {
+                    currentText = currentText.slice(0, -1);
+                    element.textContent = currentText + '...';
+                    textWidth = textContainerRef.current.getComputedTextLength();
+                }
+            }
+        };
+        truncateText();
+    }, [text, (_b = widthRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width]);
+    return (react_1.default.createElement("tspan", { ref: textRef, onMouseOver: function () { return console.log(text); } }, text));
+};
+exports.TruncatedSVGText = TruncatedSVGText;

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

@@ -9,7 +9,6 @@ export interface BaseConfigs {
     hoverRectStrokeWidth: number;
     marginLeft: number;
     marginRight: number;
-    startingColorIdx: number;
     gapBetweenBarsInGroup: number;
 }
 export interface DebugControls {
@@ -25,5 +24,6 @@ export interface BarChartProps {
     showCount?: boolean;
     showPercent?: boolean;
     breakdownDisplayType?: "grouped" | "stacked";
+    colorIdx?: number;
 }
 export declare const BarChart: React.FC<BarChartProps>;

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

@@ -120,7 +120,6 @@ var _base_configs = {
     //overall chart margin
     marginLeft: 6,
     marginRight: 6,
-    startingColorIdx: 0, //this defines the idx in dataVizColors, from where color values should start being used.
     //grouped bar chart related properties
     gapBetweenBarsInGroup: 3,
 };
@@ -169,21 +168,21 @@ var barConfigs = {
         getDataKey: function (stackIndex) { return "".concat(stackIndex, ".labels.count"); },
         getStackId: function (stackIndex, breakdownDisplayType //replaced breakdownDisplayType
         ) { return (breakdownDisplayType === "stacked" ? "stack" : "stack-".concat(stackIndex)); },
-        getCellFill: function (stackIndex, dataVizColors) {
-            return dataVizColors[(_base_configs.startingColorIdx + stackIndex) % dataVizColors.length];
+        getCellFill: function (colorIdx, stackIndex, dataVizColors) {
+            return dataVizColors[(colorIdx + stackIndex) % dataVizColors.length];
         },
     },
     isNotBreakdown: {
         getBarRadius: function () { return _base_configs.barRadius; },
         getDataKey: function () { return "labels.count"; },
         getStackId: function () { return undefined; },
-        getCellFill: function (_stackIndex, dataVizColors) {
-            return dataVizColors[_base_configs.startingColorIdx];
+        getCellFill: function (colorIdx, _stackIndex, dataVizColors) {
+            return dataVizColors[colorIdx];
         },
     },
 };
 var BarChart = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? false : _e;
+    var _data = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f;
     var isBreakdown = Array.isArray(valuePath);
     var data = usePrepareData({
         _data: _data,
@@ -192,7 +191,7 @@ var BarChart = function (_a) {
         isBreakdown: isBreakdown,
         showPercent: showPercent
     });
-    var _f = (0, react_1.useState)(undefined), activeBar = _f[0], setActiveBar = _f[1];
+    var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
     // menu options for grouped and stacked
     var renderBar = function (stackIndex, lastIndex) {
         if (stackIndex === void 0) { stackIndex = 0; }
@@ -209,7 +208,7 @@ var BarChart = function (_a) {
                         width: props.width,
                         height: props.height,
                         value: isBreakdown
-                            ? data[props.index].map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[idx % colors_1.dataVizColors.length] })); })
+                            ? data[props.index].map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColorsText[(colorIdx + idx) % colors_1.dataVizColorsText.length] })); })
                             : props.value, showPercent: showPercent, showCount: showCount, opacity: 1, activeBar: activeBar, _base_configs: _base_configs, _debug_controls: _debug_controls }, (onClick
                         ? {
                             onMouseOver: function (e, value) {
@@ -229,7 +228,7 @@ var BarChart = function (_a) {
                         : {})))); } })),
                 data.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { y: (!isBreakdown || breakdownDisplayType === "stacked")
                         ? CALC_SINGLE_BAR_SECTION_Y_POS(index) + CHART_OFFSET_TOP
-                        : CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, data[0].length) + CHART_OFFSET_TOP, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_configs.barHeight, fill: activeConfig.getCellFill(stackIndex, colors_1.dataVizColors) })); }))));
+                        : CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, data[0].length) + CHART_OFFSET_TOP, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_configs.barHeight, fill: activeConfig.getCellFill(colorIdx, stackIndex, colors_1.dataVizColors) })); }))));
     };
     return (react_1.default.createElement("div", { style: {
             height: "".concat(isBreakdown && breakdownDisplayType === "grouped"

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

@@ -1,6 +1,13 @@
 import React from "react";
-export declare const DataVizAccordion: ({ title, chartOptions, ...props }: {
-    [x: string]: any;
+import { BarChartProps } from "../BarChart";
+type ChartOptionConfig = {
+    display: string;
+    comp: 'PieChart' | 'BarChart';
+    props: BarChartProps;
+};
+interface DataVizAccordionProps extends BarChartProps {
     title?: string;
-    chartOptions?: any[];
-}) => React.JSX.Element;
+    chartOptions: ChartOptionConfig[];
+}
+export declare const DataVizAccordion: React.FC<DataVizAccordionProps>;
+export {};

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

@@ -32,7 +32,7 @@ var BarChart_1 = require("../BarChart");
 var PieChart_1 = require("../PieChart");
 var Accordion_1 = require("../Accordion");
 var DataVizAccordion = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? "some title" : _b, _c = _a.chartOptions, chartOptions = _c === void 0 ? [] : _c, props = __rest(_a, ["title", "chartOptions"]);
+    var title = _a.title, _b = _a.chartOptions, chartOptions = _b === void 0 ? [] : _b, props = __rest(_a, ["title", "chartOptions"]);
     var ChartComps = {
         PieChart: {
             comp: PieChart_1.PieChart,
@@ -40,23 +40,20 @@ var DataVizAccordion = function (_a) {
         },
         BarChart: {
             comp: BarChart_1.BarChart,
-            wrapperStyle: { padding: "0 1rem 0.6rem 1rem" } // to offset the 6px left & right margins on the bar chart, so that the bars align with the header text
+            wrapperStyle: { padding: "0 1rem 0.6rem 1rem" }
         },
     };
-    var _d = (0, react_2.useState)(chartOptions[0]), activeCompConfig = _d[0], setActiveCompConfig = _d[1];
+    var _c = (0, react_2.useState)(chartOptions[0]), activeCompConfig = _c[0], setActiveCompConfig = _c[1];
     var genActiveChartComp = function (activeCompConfig) {
         var ActiveChartComp = ChartComps[activeCompConfig.comp].comp;
         var wrapperStyle = ChartComps[activeCompConfig.comp].wrapperStyle;
         return (react_1.default.createElement("div", { style: __assign({ padding: "0 1.6rem 1rem 1.6rem" }, (wrapperStyle || {})) },
-            react_1.default.createElement(ActiveChartComp, __assign({}, props, (activeCompConfig.props || {})))));
+            react_1.default.createElement(ActiveChartComp, __assign({}, props, activeCompConfig.props))));
     };
-    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, actionsConfig: chartOptions.map(function (d) { return ({
+    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
             display: d.display,
             onClick: function () {
-                return setActiveCompConfig({
-                    comp: d.comp,
-                    props: d.props,
-                });
+                return setActiveCompConfig(d);
             },
         }); }) }, genActiveChartComp(activeCompConfig)));
 };

package/dist/v2/themes/colors.d.ts

@@ -1,4 +1,5 @@
 export declare const dataVizColors: string[];
+export declare const dataVizColorsText: string[];
 export declare const colors: {
     primary: string;
     secondary: string;

package/dist/v2/themes/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colors = exports.dataVizColors = void 0;
+exports.colors = exports.dataVizColorsText = exports.dataVizColors = void 0;
 var primary = "#006686";
 var secondary = "#456272";
 var tertiary = "#764F8B";
@@ -61,20 +61,16 @@ exports.dataVizColors = [
     "#AC8E68",
     "#CF8AF2",
 ];
-// export const dataVizColors = [
-//         "#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)",
-// ]
+exports.dataVizColorsText = [
+    "#E92519",
+    "#0A8D1E",
+    "#C57800",
+    "#197BDE",
+    "#997F00",
+    "#13918C",
+    "#93662D",
+    "#B554E6",
+];
 exports.colors = {
     primary: primary,
     secondary: secondary,

package/package.json

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

package/dist/components/PercentBarChart/comps/CustomizedLabel/index.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-import { TBaseConfigs } from "../..";
-type TCustomizedLabeValue = {
-    percentage: number;
-    count: number;
-    name: string;
-};
-export declare const CustomizedLabel: ({ y, width, height, value, plotDataPoint, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-    value?: TCustomizedLabeValue;
-    opacity: number;
-    plotDataPoint?: "percentage" | "count";
-    _base_configs: TBaseConfigs;
-    onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
-    onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
-    onMouseDown?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
-}) => React.JSX.Element;
-export {};

package/dist/components/PercentBarChart/comps/CustomizedLabel/index.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomizedLabel = void 0;
-var react_1 = __importDefault(require("react"));
-var themes_1 = require("../../../../themes");
-var CustomizedLabel = function (_a) {
-    var y = _a.y, width = _a.width, //i think this is the width and the height of the bar. dont need it just yet..
-    height = _a.height, value = _a.value, plotDataPoint = _a.plotDataPoint, opacity = _a.opacity, _base_configs = _a._base_configs, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown;
-    var yOffset = -(_base_configs.labelToBarGap + _base_configs.barHeight);
-    var percent = value.percentage;
-    var count = value.count;
-    var name = value.name;
-    var percentXOffset = 0;
-    var xOffsetRelative = 10;
-    return (react_1.default.createElement("g", null,
-        react_1.default.createElement("text", { opacity: opacity, x: percentXOffset, y: y + yOffset, fill: themes_1.colors.greyColor100, textAnchor: "start", dominantBaseline: "middle", className: "UI_BODY_BOLD_SM" },
-            plotDataPoint === "percentage"
-                ? percent + "%"
-                : plotDataPoint === "count"
-                    ? count
-                    : "",
-            plotDataPoint === "percentage" && ( // basically no need to show this only if plotDataPoint is count, since in that case, count is already shown above
-            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, count)),
-            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, name)),
-        react_1.default.createElement("rect", { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: percentXOffset, y: y + _base_configs.mouseEventDetectorYOffset, width: width, height: _base_configs.mouseEventDetectorHeight, fill: "red", "fill-opacity": _base_configs.mouseEventDetectorOpacity })));
-};
-exports.CustomizedLabel = CustomizedLabel;

package/dist/components/PercentBarChart/index.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-export type TBaseConfigs = {
-    barHeight: number;
-    labelToBarGap: number;
-    barGap: number;
-    mouseEventDetectorYOffset: number;
-    mouseEventDetectorHeight: number;
-    mouseEventDetectorOpacity: number;
-};
-export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, plotDataPoint, }: {
-    data: any;
-    valuePath: string;
-    labelPath: string;
-    title?: string;
-    onClick?: (name: string) => void;
-    colors?: string[];
-    colorIdx?: number;
-    valueSuffix?: string;
-    plotDataPoint?: 'percentage' | 'count';
-    showCount?: boolean;
-    showPercent?: boolean;
-}) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -1,153 +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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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.PercentBarChart = void 0;
-var react_1 = __importStar(require("react"));
-var recharts_1 = require("recharts");
-var _EXPORTS_1 = require("../../utils/_EXPORTS");
-var Typo_1 = require("../Typo");
-var getTotalCount_1 = require("../../utils/getTotalCount");
-var CustomizedLabel_1 = require("./comps/CustomizedLabel");
-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)",
-];
-//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
-var _base_configs = {
-    barRadius: 16,
-    barHeight: 6,
-    labelToBarGap: 6,
-    barGap: 30,
-    wrapperMarginBottom: -16,
-    barCategoryGap: 18, // does some wierd shit really, simply pushes the entire graph down by this number. We need to to unhide the first label, which is happening only because we are using <Cell/> comp. too many inconsistencies in recharts
-    mouseEventDetectorYOffset: -34, //this is inside CustomizedLabel. a big rect spread across the bar and label and gap to detect mouse events and transition smoothly to the next bar.
-    mouseEventDetectorHeight: 40,
-    mouseEventDetectorOpacity: 0 //only increase this for debugging. nothing else.
-};
-var PercentBarChart = function (_a) {
-    var _data = _a.data, title = _a.title, _b = _a.valuePath, valuePath = _b === void 0 ? "value" : _b, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
-    _c = _a.labelPath, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
-    labelPath = _c === void 0 ? "name" : _c, // same as above for label path
-    onClick = _a.onClick, _d = _a.colors, colors = _d === void 0 ? chartColors : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
-    _f = _a.plotDataPoint, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
-    plotDataPoint = _f === void 0 ? 'percentage' : _f;
-    var totalCount = (0, getTotalCount_1.getTotalCount)({ data: _data, countPath: valuePath });
-    var data = (0, react_1.useMemo)(function () {
-        var finalData = __spreadArray([], _data, true);
-        finalData = finalData.map(function (d, i) {
-            var count = (0, _EXPORTS_1.getVal)(d, valuePath);
-            return ({
-                labels: __assign(__assign({}, (plotDataPoint === 'percentage' ? { percentage: (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount) } : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
-            });
-        });
-        finalData.sort(function (a, b) {
-            return Number((0, _EXPORTS_1.getVal)(b, "labels.".concat(plotDataPoint)) || 0) - Number((0, _EXPORTS_1.getVal)(a, "labels.".concat(plotDataPoint)) || 0);
-        });
-        return finalData;
-    }, [_data, labelPath, valuePath]);
-    var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
-    var changeBarOpacityFn = function (name) {
-        return activeBar && activeBar !== name ? 0.4 : 1;
-    };
-    return (react_1.default.createElement("div", null,
-        title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { paddingBottom: "2rem" }, semibold: true }, title)),
-        react_1.default.createElement("div", { style: {
-                height: "".concat(((_base_configs.barHeight + _base_configs.barGap) * data.length), "px"),
-                width: "100%",
-            } },
-            react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
-                react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: _base_configs.barCategoryGap, 
-                    // barSize={_base_configs.barHeight}
-                    data: data, layout: "vertical", margin: {
-                        top: 0,
-                        right: 0,
-                        left: 0,
-                        bottom: _base_configs.wrapperMarginBottom,
-                    }, onMouseEnter: function () {
-                        var args = [];
-                        for (var _i = 0; _i < arguments.length; _i++) {
-                            args[_i] = arguments[_i];
-                        }
-                        return console.log('mouse enter', args);
-                    }, onMouseLeave: function () {
-                        var args = [];
-                        for (var _i = 0; _i < arguments.length; _i++) {
-                            args[_i] = arguments[_i];
-                        }
-                        return console.log('mouse leave', args);
-                    } },
-                    react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
-                    react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
-                    react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.".concat(plotDataPoint) },
-                        react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ y: props.y,
-                                width: props.width,
-                                height: props.height,
-                                value: props.value, //here value is the percentage
-                                plotDataPoint: plotDataPoint, opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
-                                ? {
-                                    onMouseOver: function (e, value) { return setActiveBar(value.name); },
-                                    onMouseOut: function () { return setActiveBar(undefined); },
-                                    onMouseDown: function (e, value) {
-                                        setActiveBar(value.name);
-                                        onClick(value.name);
-                                    },
-                                }
-                                : {}))); } }),
-                        data.map(function (d, index) { return (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(d.labels.name), key: "cell-".concat(index), height: _base_configs.barHeight, fill: colors[colorIdx] }))); })))))));
-};
-exports.PercentBarChart = PercentBarChart;

package/dist/stories/Oolib/components/PercentBarChart.stories.d.ts

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

package/dist/stories/Oolib/components/PercentBarChart.stories.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PercentBarChart_ = void 0;
-var react_1 = __importDefault(require("react"));
-var PercentBarChart_1 = require("../../../components/PercentBarChart");
-exports.default = {
-    title: "Components/PercentBarChart",
-};
-var data = [
-    { display: 'Logged In Once', value: 60 },
-    { display: 'Registered Users', value: 100 },
-    { display: 'Created Profile', value: 20 },
-    { display: 'Wrote at least 1 story', value: 8 }
-];
-var PercentBarChart_ = function (args) {
-    var handleBarClick = function (name) {
-        console.log("Bar clicked: ".concat(name));
-    };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "display", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
-};
-exports.PercentBarChart_ = PercentBarChart_;