oolib 2.195.1 → 2.195.2

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

@@ -41,7 +41,7 @@ var BarChart = function (args) {
     };
     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(BarChart_1.BarChart, { showPercent: args.showPercent, data: [
+            react_1.default.createElement(BarChart_1.BarChart, { overflowAfterHeight: 300, showPercent: args.showPercent, data: [
                     {
                         display: "Logged In Once",
                         stack1: 45, stack2: 23, stack3: 67, stack4: 12, stack5: 89,

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

@@ -59,9 +59,8 @@ var UI_CAPTION_DF_WITH_LINE_CLAMP = (0, styled_components_1.default)(Typo2_1.UI_
     return clampT ? (0, __1.clampText)(3) : '';
 });
 var CustomTooltip = function (props) {
-    var _a;
     var value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition, activeBar = props.activeBar, breakdownCategoryName = props.breakdownCategoryName;
-    var isActive = activeBar && ((_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.name) === activeBar;
+    var isActive = props.active; //activeBar && value?.[0]?.name === activeBar
     var tooltipWrapperRef = (0, react_1.useRef)(null);
     var calcTooltipTop = function (_a) {
         var _b, _c;
@@ -99,8 +98,8 @@ var CustomTooltip = function (props) {
         // pointerEvents: "none", // Add this to prevent tooltip from interfering with mouse events
     };
     var tooltipLabelLengthRefs = (0, react_1.useRef)([]);
-    var _b = (0, react_1.useState)([]), rowHeights = _b[0], setRowHeights = _b[1];
-    var _c = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.map(function (v) { return true; })) || []), tooltipTextClampStates = _c[0], setTooltipTextClampStates = _c[1];
+    var _a = (0, react_1.useState)([]), rowHeights = _a[0], setRowHeights = _a[1];
+    var _b = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.map(function (v) { return true; })) || []), tooltipTextClampStates = _b[0], setTooltipTextClampStates = _b[1];
     (0, react_1.useEffect)(function () {
         if (!tooltipTextClampStates) {
             setTooltipTextClampStates(value === null || value === void 0 ? void 0 : value.map(function (v) { return true; }));

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

@@ -21,7 +21,7 @@ var Typo2_1 = require("../../../../Typo2");
 var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
 var Legend = function (_a) {
     var data = _a.data, label = _a.label, _b = _a.orientation, orientation = _b === void 0 ? "vertical" : _b;
-    return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))" }) },
+    return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'scroll' }) },
         label && orientation === 'vertical' && (react_1.default.createElement("div", { style: { paddingBottom: "8px" } },
             react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, label))),
         react_1.default.createElement("div", { style: __assign(__assign({ display: "flex", flexDirection: orientation === "vertical" ? "column" : "row" }, (orientation === 'horizontal' ? { flexWrap: 'wrap' } : {})), { gap: "8px" }) },

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

@@ -12,6 +12,7 @@ var LegendTooltipGlyph = function (_a) {
             height: size + 'px',
             borderRadius: "50%",
             backgroundColor: color,
+            flexShrink: 0
         } }));
 };
 exports.LegendTooltipGlyph = LegendTooltipGlyph;

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

@@ -27,7 +27,6 @@ export interface BarChartProps {
     breakdownDisplayType?: BreakdownDisplayType;
     colorIdx?: number;
     summarizeAfterIdx?: number;
-    overflowAfterHeight?: number;
     style?: React.CSSProperties;
 }
 export declare const BarChart: React.FC<BarChartProps>;

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

@@ -214,7 +214,7 @@ var renderBar = function (_a) {
 };
 var useDecideLegendOrientation = function (options) {
     if (options === void 0) { options = {}; }
-    var _a = options.widthThreshold, widthThreshold = _a === void 0 ? 500 : _a;
+    var _a = options.widthThreshold, widthThreshold = _a === void 0 ? 600 : _a;
     var vizWrapperRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)('horizontal'), orientation = _b[0], setOrientation = _b[1];
     (0, react_1.useEffect)(function () {
@@ -306,11 +306,9 @@ var FadeGradientWhenScroll = function (_a) {
 var BarChart = function (_a) {
     var _data = _a.data, valuePath = _a.valuePath, _b = _a.style, style = _b === void 0 ? {} : _b, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
     _c = _a.labelPath, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
-    labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _d = _a.breakdownDisplayType, breakdownDisplayType = _d === void 0 ? "grouped" : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.colorIdx, colorIdx = _g === void 0 ? 0 : _g, _h = _a.summarizeAfterIdx, summarizeAfterIdx = _h === void 0 ? undefined : _h, //if a number is defined, then from that 'index' onwards, bars will be compressed into a single bar with a tooltip explaining distribution
-    _j = _a.overflowAfterHeight, //if a number is defined, then from that 'index' onwards, bars will be compressed into a single bar with a tooltip explaining distribution
-    overflowAfterHeight = _j === void 0 ? 550 : _j;
+    labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _d = _a.breakdownDisplayType, breakdownDisplayType = _d === void 0 ? "grouped" : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.colorIdx, colorIdx = _g === void 0 ? 0 : _g, _h = _a.summarizeAfterIdx, summarizeAfterIdx = _h === void 0 ? undefined : _h;
     var isBreakdown = Array.isArray(valuePath);
-    var _k = (0, usePrepareData_1.usePrepareData)({
+    var _j = (0, usePrepareData_1.usePrepareData)({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
@@ -320,16 +318,16 @@ var BarChart = function (_a) {
         showPercent: showPercent,
         summarizeAfterIdx: summarizeAfterIdx,
         colorIdx: colorIdx
-    }), data = _k.data, dataMaxValue = _k.dataMaxValue, dataToSummarize = _k.dataToSummarize;
-    var _l = useDecideLegendOrientation({
+    }), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
+    var _k = useDecideLegendOrientation({
         widthThreshold: 500
-    }), vizWrapperRef = _l.vizWrapperRef, orientation = _l.orientation;
-    var _m = (0, react_1.useState)(undefined), activeBar = _m[0], setActiveBar = _m[1];
+    }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
+    var _l = (0, react_1.useState)(undefined), activeBar = _l[0], setActiveBar = _l[1];
     var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
     // menu options for grouped and stacked
     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%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', maxHeight: overflowAfterHeight, overflow: 'scroll' }) },
+    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', overflow: 'scroll' }) },
         react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
             react_1.default.createElement(BarChartRenderer, { data: data, dataToSummarize: dataToSummarize, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName }),
             dataToSummarize && (react_1.default.createElement(BarChartRenderer, { data: dataToSummarize,

package/package.json

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