npm - oolib - Versions diffs - 2.175.0 → 2.175.2 - Mend

oolib 2.175.0 → 2.175.2

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

Files changed (9) hide show

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

@@ -62,7 +62,11 @@ var BarChart = function (args) {
     };
     return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" } },
         react_1.default.createElement("div", null,
-            react_1.default.createElement(BarChart_1.BarChart, { data: [
+            react_1.default.createElement(BarChart_1.BarChart
+            // showPercent={false}
+            , {
+                // showPercent={false}
+                data: [
                     {
                         display: "Logged In Once",
                         // stack1: 60,
@@ -71,6 +75,7 @@ var BarChart = function (args) {
                         stack4: 10,
                         stack5: 40,
                         stack6: 10,
+                        stack2Display: 'Labels Path Stack 2 Display'
                     },
                     {
                         display: "Registered Users",

package/dist/v2/components/Accordion/index.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ interface AccordionProps {
     title: React.ReactNode;
     children: React.ReactNode;
     defaultExpanded?: boolean;
+    accordionOverflow?: string;
     onViewTypeChange?: (type: "grouped" | "stacked") => void;
     currentViewType?: "grouped" | "stacked";
     actionsConfig?: {

package/dist/v2/components/Accordion/index.js CHANGED Viewed

@@ -52,7 +52,7 @@ var StyledContainer = styled_components_1.default.div(templateObject_1 || (templ
 var StyledHeader = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 var StyledRightHeaderSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var ArrowWrapper = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"], ["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"])), function (props) { return (props.isExpanded ? 0 : 180); }, (0, mixins_1.transition)("transform"));
-var StyledContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  overflow: hidden;\n  ", "\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  overflow: hidden;\n  ", "\n  height: ", ";\n"])), (0, mixins_1.transition)("height"), function (_a) {
+var StyledContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"])), (0, mixins_1.transition)("height"), function (_a) {
     var height = _a.height;
     return height;
 });
@@ -88,7 +88,9 @@ var useCalculateWrapperHeight = function (_a) {
     });
 };
 var Accordion = function (_a) {
-    var title = _a.title, children = _a.children, _b = _a.defaultExpanded, defaultExpanded = _b === void 0 ? true : _b, _c = _a.actionsConfig, actionsConfig = _c === void 0 ? [
+    var title = _a.title, children = _a.children, _b = _a.defaultExpanded, defaultExpanded = _b === void 0 ? true : _b, _c = _a.accordionOverflow, accordionOverflow = _c === void 0 ? 'hidden' : _c, //in some cases we need to toggle the overflow to let a tooltip stick out and show for example (in DataVizAccordion)
+    _d = _a.actionsConfig, //in some cases we need to toggle the overflow to let a tooltip stick out and show for example (in DataVizAccordion)
+    actionsConfig = _d === void 0 ? [
         {
             display: "Grouped",
             onClick: function () { return console.log("grouped"); },
@@ -97,9 +99,9 @@ var Accordion = function (_a) {
             display: "Stacked",
             onClick: function () { return console.log("stacked"); },
         },
-    ] : _c;
-    var _d = (0, react_1.useState)(defaultExpanded), isExpanded = _d[0], setIsExpanded = _d[1];
-    var _e = useCalculateWrapperHeight({ isExpanded: isExpanded }), wrapperRef = _e.wrapperRef, wrapperHeight = _e.wrapperHeight;
+    ] : _d;
+    var _e = (0, react_1.useState)(defaultExpanded), isExpanded = _e[0], setIsExpanded = _e[1];
+    var _f = useCalculateWrapperHeight({ isExpanded: isExpanded }), wrapperRef = _f.wrapperRef, wrapperHeight = _f.wrapperHeight;
     return (react_1.default.createElement(StyledContainer, null,
         react_1.default.createElement(StyledHeader, { onClick: function () { return setIsExpanded(!isExpanded); } },
             react_1.default.createElement("div", { style: { flex: "1 0 0" } },
@@ -108,7 +110,7 @@ var Accordion = function (_a) {
                 react_1.default.createElement(ArrowWrapper, { isExpanded: isExpanded },
                     react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })),
                 actionsConfig && (react_1.default.createElement(ActionMenu_1.ActionMenu, { CustomSelectComp: CustomActionMenuSelectButton, actions: actionsConfig })))),
-        react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight },
+        react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight, style: { overflow: accordionOverflow } },
             react_1.default.createElement(StyledContentInnerWrapper, { ref: wrapperRef }, children))));
 };
 exports.Accordion = Accordion;

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { TooltipProps } from 'recharts';
 import { LabelData } from '../CustomizedLabel';
 interface CustomTooltipProps extends TooltipProps<number, string> {
     value?: LabelData[];
     showPercent?: boolean;
+    setAccordionOverflow?: Dispatch<SetStateAction<string>>;
 }
 declare const CustomTooltip: React.FC<CustomTooltipProps>;
 export default CustomTooltip;

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

@@ -1,14 +1,44 @@
 "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 () {
+    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 });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var Typo2_1 = require("../../../Typo2");
 var __1 = require("../../../../..");
 var CustomTooltip = function (props) {
     var _a, _b;
-    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent;
+    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent, setAccordionOverflow = props.setAccordionOverflow;
     if (!active || !payload || !payload.length)
         return null;
     // Calculate position - align with the right side of the bars
@@ -29,6 +59,10 @@ var CustomTooltip = function (props) {
         flexDirection: 'column',
         gap: '0.5rem'
     };
+    (0, react_1.useEffect)(function () {
+        setAccordionOverflow && setAccordionOverflow('visible');
+        return function () { return setAccordionOverflow && setAccordionOverflow('hidden'); };
+    }, []);
     return (react_1.default.createElement("div", { style: style }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
             display: 'flex',
             alignItems: 'center',

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 export interface BaseConfigs {
     barHeight: number;
     labelToBarGap: number;
@@ -21,6 +21,7 @@ export interface BarChartProps {
     tooltipLabelsMapping: {
         [key: string]: string;
     };
+    tooltipLabelsPath: string | string[];
     labelPath: string;
     onClick?: (name: string) => void;
     valueSuffix?: string;
@@ -28,5 +29,6 @@ export interface BarChartProps {
     showPercent?: boolean;
     breakdownDisplayType?: "grouped" | "stacked";
     colorIdx?: number;
+    setAccordionOverflow?: Dispatch<SetStateAction<string>>;
 }
 export declare const BarChart: React.FC<BarChartProps>;

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

@@ -65,7 +65,7 @@ var CustomizedLabel_1 = require("./comps/CustomizedLabel");
 var colors_1 = require("../../themes/colors");
 var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
 var usePrepareData = function (_a) {
-    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent;
+    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent;
     return (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
         var totalCount = !isBreakdown
@@ -90,7 +90,9 @@ var usePrepareData = function (_a) {
                 return {
                     labels: __assign(__assign({}, (showPercent
                         ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount[index]) }
-                        : {})), { count: count, tooltipLabel: (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+                        : {})), { count: count, tooltipLabel: tooltipLabelsPath
+                            ? tooltipLabelsPath[i] ? ((0, _EXPORTS_1.getVal)(d, tooltipLabelsPath[i]) || tooltipLabelsPath[i]) : path
+                            : ((tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path), name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
                 };
             });
         });
@@ -192,13 +194,14 @@ var barConfigs = {
     },
 };
 var BarChart = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, _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 _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f, setAccordionOverflow = _a.setAccordionOverflow;
     var isBreakdown = Array.isArray(valuePath);
     var data = usePrepareData({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
         tooltipLabelsMapping: tooltipLabelsMapping,
+        tooltipLabelsPath: tooltipLabelsPath,
         isBreakdown: isBreakdown,
         showPercent: showPercent,
     });
@@ -269,7 +272,7 @@ var BarChart = function (_a) {
                             // god knows why the dataindex gets stored against props.label.
                             // this is some internal recharts thing for tooltips specifically.
                             // we dont do this.
-                            value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }) })));
+                            value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }), setAccordionOverflow: setAccordionOverflow })));
                     }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
                 isBreakdown
                     ? data[0].map(function (_, stackIndex) {

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

@@ -44,17 +44,18 @@ var DataVizAccordion = function (_a) {
         },
     };
     var _c = (0, react_2.useState)(chartOptions[0]), activeCompConfig = _c[0], setActiveCompConfig = _c[1];
-    var genActiveChartComp = function (activeCompConfig) {
+    var genActiveChartComp = function (activeCompConfig, setAccordionOverflow) {
         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, { setAccordionOverflow: setAccordionOverflow }))));
     };
-    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
+    var _d = (0, react_2.useState)('hidden'), accordionOverflow = _d[0], setAccordionOverflow = _d[1];
+    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, accordionOverflow: accordionOverflow, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
             display: d.display,
             onClick: function () {
                 return setActiveCompConfig(d);
             },
-        }); }) }, genActiveChartComp(activeCompConfig)));
+        }); }) }, genActiveChartComp(activeCompConfig, setAccordionOverflow)));
 };
 exports.DataVizAccordion = DataVizAccordion;

package/package.json CHANGED Viewed

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