oolib 2.196.0 → 2.197.1

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))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'scroll' }) },
+    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: 'auto' }) },
         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/index.d.ts

@@ -29,5 +29,8 @@ export interface BarChartProps {
     summarizeAfterIdx?: number;
     style?: React.CSSProperties;
 }
+export declare const FadeGradientWhenScroll: ({ style }: {
+    style?: {};
+}) => React.JSX.Element;
 export declare const BarChart: React.FC<BarChartProps>;
 export {};

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.useTrackMousePosition = void 0;
+exports.BarChart = exports.FadeGradientWhenScroll = exports.useTrackMousePosition = void 0;
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var CustomizedLabel_1 = require("./comps/CustomizedLabel");
@@ -303,6 +303,7 @@ var FadeGradientWhenScroll = function (_a) {
     var _b = _a.style, style = _b === void 0 ? {} : _b;
     return (react_1.default.createElement("div", { style: __assign({ width: '100%', height: '40px', position: 'sticky', left: 0, bottom: 0, background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))") }, style) }));
 };
+exports.FadeGradientWhenScroll = FadeGradientWhenScroll;
 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
@@ -327,16 +328,16 @@ var BarChart = function (_a) {
     // 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', 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: 'auto' }) },
         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,
                 isBreakdown: true,
                 breakdownDisplayType: "stacked",
                 showSumOfBreakdownValues: true, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName })),
-            orientation === 'vertical' && react_1.default.createElement(FadeGradientWhenScroll, null)),
+            orientation === 'vertical' && react_1.default.createElement(exports.FadeGradientWhenScroll, null)),
         isBreakdown && react_1.default.createElement("div", { style: __assign({ position: 'sticky' }, (orientation === 'vertical' ? { top: 0 } : { bottom: 0, background: __1.colors2.white })) },
-            orientation === 'horizontal' && react_1.default.createElement(FadeGradientWhenScroll, { style: { transform: 'translateY(-100%)', top: 0, bottom: 'unset', position: 'absolute', } }),
+            orientation === 'horizontal' && react_1.default.createElement(exports.FadeGradientWhenScroll, { style: { transform: 'translateY(-100%)', top: 0, bottom: 'unset', position: 'absolute', } }),
             react_1.default.createElement(Legend_1.Legend, { orientation: orientation, label: breakdownCategoryName, data: data[0].map(function (d) { return ({
                     text: d.labels.tooltipLabel,
                     color: d.labels.barColor

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 export interface HeatMapGridProps {
     data: any;
     valuePath: string | string[];
@@ -14,6 +14,7 @@ export interface HeatMapGridProps {
     breakdownDisplayType?: "grouped" | "stacked";
     colorIdx?: number;
     summarizeAfterIdx?: number;
+    style?: CSSProperties;
 }
 /**
  * expects exactly the same data structure as barcharts - breakdown version

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -54,6 +58,7 @@ var Typo2_1 = require("../../Typo2");
 var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
 var usePrepareData_1 = require("../utils/usePrepareData");
 var __1 = require("../../../..");
+var styled_components_1 = __importDefault(require("styled-components"));
 /**
  * Maps a value from an input range to a color
  * with the base color at the center point of the range
@@ -116,8 +121,8 @@ function hslToHex(h, s, l) {
 var _configs = {
     gridGap: 2,
     cellRoundness: 4,
-    cellSize: 36,
-    axisLabelWidth: 62,
+    cellSize: 40,
+    axisLabelWidth: 150
 };
 var HeatMapCell = function (_a) {
     var value = _a.value, dataMaxValue = _a.dataMaxValue, _b = _a.dataMinValue, dataMinValue = _b === void 0 ? 0 : _b, showPercent = _a.showPercent;
@@ -146,12 +151,17 @@ var HeatMapCell = function (_a) {
             } },
             react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: { color: textColor } }, value.labels.count))));
 };
+var STYLED_UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_SEMIBOLD_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n"], ["\n  ", "\n\n"
+    /**
+     * expects exactly the same data structure as barcharts - breakdown version
+     */
+])), (0, __1.clampText)(2));
 /**
  * expects exactly the same data structure as barcharts - breakdown version
  */
 var HeatMapGrid = function (_a) {
-    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.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f;
-    var _g = (0, usePrepareData_1.usePrepareData)({
+    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.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    var _h = (0, usePrepareData_1.usePrepareData)({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
@@ -160,12 +170,34 @@ var HeatMapGrid = function (_a) {
         isBreakdown: true,
         showPercent: showPercent,
         summarizeAfterIdx: summarizeAfterIdx,
-    }), data = _g.data, dataMaxValue = _g.dataMaxValue, dataToSummarize = _g.dataToSummarize;
-    return (react_1.default.createElement("div", null,
+    }), data = _h.data, dataMaxValue = _h.dataMaxValue, dataToSummarize = _h.dataToSummarize;
+    var vizRef = (0, react_1.useRef)(null);
+    var wrapperRef = (0, react_1.useRef)(null);
+    var setFader = function () {
+        var _a, _b, _c, _d;
+        if (vizRef.current && wrapperRef.current && ((_b = (_a = vizRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.bottom) > ((_d = (_c = wrapperRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.bottom)) {
+            if (!showFader) {
+                setShowFader(true);
+            }
+        }
+        else {
+            setShowFader(false);
+        }
+    };
+    var _j = (0, react_1.useState)(false), showFader = _j[0], setShowFader = _j[1];
+    (0, react_1.useEffect)(function () {
+        setFader();
+    }, []);
+    (0, __1.useScroll)(setFader);
+    return (react_1.default.createElement("div", { ref: wrapperRef, style: __assign({ position: 'relative' }, style) },
         react_1.default.createElement("div", { style: {
+                position: 'relative',
                 display: "grid",
                 gridTemplateColumns: "auto 1fr",
                 gap: _configs.gridGap + 'px',
+                overflow: "auto",
+                alignItems: "end",
+                height: '100%'
             } },
             react_1.default.createElement("div", { style: {
                     display: "flex",
@@ -180,16 +212,20 @@ var HeatMapGrid = function (_a) {
                         alignItems: "center",
                         justifyContent: "flex-end",
                     } },
-                    react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
-                            width: _configs.axisLabelWidth + "px",
-                            textOverflow: "ellipsis",
-                            overflow: "hidden",
-                            whiteSpace: "nowrap",
-                        } }, d[0].labels.name))); })),
-            react_1.default.createElement("div", { style: {
+                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
+                            // width: "fit-content",
+                            maxWidth: _configs.axisLabelWidth + "px",
+                            // maxHeight: "2.4em",
+                            // lineHeight: "1.2em",
+                            // overflow: "hidden",
+                            // wordBreak: "break-word", 
+                        } }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name))); })),
+            react_1.default.createElement("div", { ref: vizRef, style: {
                     display: "flex",
                     flexDirection: "column",
                     gap: _configs.gridGap + "px",
+                    overflowX: "auto", //horizontal scroll
+                    position: 'relative'
                 } },
                 react_1.default.createElement("div", { style: {
                         display: "flex",
@@ -202,29 +238,38 @@ var HeatMapGrid = function (_a) {
                         alignItems: "flex-end",
                         textWrap: "nowrap",
                         justifyContent: 'center',
-                        position: "relative", // Add this
-                        overflow: "visible" // Add this to allow content to overflow
+                        position: "relative",
+                        overflow: "visible",
+                        flexShrink: 0,
                     } },
-                    react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
+                    react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
                             width: _configs.axisLabelWidth + "px",
-                            textOverflow: "ellipsis",
-                            overflow: "hidden",
-                            whiteSpace: "nowrap",
                             position: "absolute", // Add this
-                            bottom: '-8px', // which is half of the line height of the current text
-                            left: (_configs.cellSize / 2) + 'px', // Center horizontally
-                            transformOrigin: "left center", // Change origin to bottom
-                            transform: "rotate(-90deg)", // Adjust transform
+                            bottom: 0, // which is half of the line height of the current text
+                            left: '50%', // Center horizontally
+                            transformOrigin: "left bottom", // Change origin to bottom
+                            transform: "rotate(-90deg) translateY(50%)", // Adjust transform
+                            // Multi-line 
+                            whiteSpace: "normal",
+                            // overflow: "hidden",
+                            // display: "-webkit-box",
+                            // WebkitBoxOrient: "vertical",
+                            // WebkitLineClamp: 2, 
+                            // textOverflow: "ellipsis",
+                            // lineHeight: "16px", 
                         } }, dd.labels.tooltipLabel))); })),
                 data.map(function (d) { return (react_1.default.createElement("div", { style: {
                         display: "flex",
                         alignItems: "center",
                         gap: _configs.gridGap + "px",
+                        // flexShrink: 0, 
                     } }, d.map(function (dd) {
                     // console.log({
                     //   color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
                     // });
                     return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
-                }))); })))));
+                }))); }))),
+        showFader && react_1.default.createElement(BarChart_1.FadeGradientWhenScroll, { style: { position: 'absolute', bottom: 0, left: 0 } })));
 };
 exports.HeatMapGrid = HeatMapGrid;
+var templateObject_1;

package/package.json

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