oolib 2.197.0 → 2.197.2

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
@@ -334,9 +335,9 @@ var BarChart = function (_a) {
                 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

@@ -16,7 +16,4 @@ export interface HeatMapGridProps {
     summarizeAfterIdx?: number;
     style?: CSSProperties;
 }
-/**
- * expects exactly the same data structure as barcharts - breakdown version
- */
 export declare const HeatMapGrid: React.FC<HeatMapGridProps>;

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++) {
@@ -49,81 +53,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeatMapGrid = void 0;
 var react_1 = __importStar(require("react"));
-var BarChart_1 = require("../BarChart");
+var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../../..");
 var Typo2_1 = require("../../Typo2");
+var BarChart_1 = require("../BarChart");
 var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
 var usePrepareData_1 = require("../utils/usePrepareData");
-var __1 = require("../../../..");
-/**
- * Maps a value from an input range to a color
- * with the base color at the center point of the range
- * @param {number} value - The value to map
- * @param {number} minValue - The minimum value in the input range
- * @param {number} maxValue - The maximum value in the input range
- * @param {Object} hslColor - The base HSL color object
- * @param {number} hslColor.h - Hue component (0-360)
- * @param {number} hslColor.s - Saturation component (0-100)
- * @param {number} hslColor.l - Lightness component (0-100)
- * @param {number} minLightness - The minimum lightness (0-100) for darkest shade
- * @param {number} maxLightness - The maximum lightness (0-100) for lightest shade
- * @return {string} - A hex color code
- */
-function mapValueToColor(value, minValue, maxValue, hslColor, // Default to #be185d
-minLightness, maxLightness) {
-    if (hslColor === void 0) { hslColor = { h: 336, s: 74, l: 42 }; }
-    if (minLightness === void 0) { minLightness = 20; }
-    if (maxLightness === void 0) { maxLightness = 80; }
-    // Ensure value is within range
-    value = Math.max(minValue, Math.min(maxValue, value));
-    // Calculate the center point of the range
-    var centerPoint = (minValue + maxValue) / 2;
-    // Extract the hsl components
-    var h = hslColor.h, s = hslColor.s, baseLightness = hslColor.l;
-    // Determine lightness based on position relative to center point
-    var lightness;
-    if (value < centerPoint) {
-        // Value is below center (smaller) - scale from maxLightness to baseLightness
-        var normalizedValue = (value - minValue) / (centerPoint - minValue);
-        lightness = maxLightness - normalizedValue * (maxLightness - baseLightness);
-    }
-    else {
-        // Value is above center (larger) - scale from baseLightness to minLightness
-        var normalizedValue = (value - centerPoint) / (maxValue - centerPoint);
-        lightness = baseLightness - normalizedValue * (baseLightness - minLightness);
-    }
-    // Convert HSL back to hex
-    return "hsl(".concat(h, ", ").concat(s, "%, ").concat(lightness, "%)"); //hslToHex(h, s, lightness);
-}
-/**
- * Convert HSL values to hex color code
- * @param {number} h - Hue (0-360)
- * @param {number} s - Saturation (0-100)
- * @param {number} l - Lightness (0-100)
- * @return {string} - Hex color code
- */
-function hslToHex(h, s, l) {
-    l /= 100;
-    var a = (s * Math.min(l, 1 - l)) / 100;
-    var f = function (n) {
-        var k = (n + h / 30) % 12;
-        var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-        return Math.round(255 * color)
-            .toString(16)
-            .padStart(2, "0");
-    };
-    return "#".concat(f(0)).concat(f(8)).concat(f(4));
-}
+var mapValueToColor_1 = require("./utils/mapValueToColor");
+var useAxisMeasure_1 = require("./utils/useAxisMeasure");
+var useFader_1 = require("./utils/useFader");
 var _configs = {
     gridGap: 2,
     cellRoundness: 4,
-    cellSize: 36,
-    axisLabelWidth: 200
+    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;
     var mousePosition = (0, BarChart_1.useTrackMousePosition)().mousePosition;
     var _c = (0, react_1.useState)(false), showTooltip = _c[0], setShowTooltip = _c[1];
-    var cellColor = mapValueToColor(value.labels.count, dataMinValue, dataMaxValue);
+    var cellColor = (0, mapValueToColor_1.mapValueToColor)(value.labels.count, dataMinValue, dataMaxValue);
     var getCellColorLightness = function () {
         var splitUp = cellColor.trim().replace('hsl(', '');
         splitUp = splitUp.replace(')', '');
@@ -131,7 +80,9 @@ var HeatMapCell = function (_a) {
         var toReturn = parseInt(splitUpAry[2].replace('%', ''));
         return toReturn;
     };
-    var textColor = getCellColorLightness() > 60 ? __1.colors2.black : __1.colors2.white;
+    var textColor = value.labels.count === 0
+        ? __1.colors2.black
+        : getCellColorLightness() > 60 ? __1.colors2.black : __1.colors2.white;
     return (react_1.default.createElement("div", { onMouseOver: function () { return setShowTooltip(true); }, onMouseOut: function () { return setShowTooltip(false); } },
         showTooltip && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [__assign(__assign({}, value.labels), { tooltipLabel: value.labels.name + ' | ' + value.labels.tooltipLabel //bit of a hack but will sort later
                  })], showPercent: showPercent, mousePosition: mousePosition })),
@@ -144,11 +95,10 @@ var HeatMapCell = function (_a) {
                 justifyContent: 'center',
                 alignItems: 'center'
             } },
-            react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: { color: textColor } }, value.labels.count))));
+            react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: { color: textColor } }, "".concat(value.labels.count)))));
 };
-/**
- * expects exactly the same data structure as barcharts - breakdown version
- */
+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"])), (0, __1.clampText)(2));
+var HiddenScrollContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  \n  &::-webkit-scrollbar {\n    display: none; /* Webkit browsers */\n  }\n"], ["\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n  \n  &::-webkit-scrollbar {\n    display: none; /* Webkit browsers */\n  }\n"])));
 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, _g = _a.style, style = _g === void 0 ? {} : _g;
     var _h = (0, usePrepareData_1.usePrepareData)({
@@ -161,76 +111,132 @@ var HeatMapGrid = function (_a) {
         showPercent: showPercent,
         summarizeAfterIdx: summarizeAfterIdx,
     }), data = _h.data, dataMaxValue = _h.dataMaxValue, dataToSummarize = _h.dataToSummarize;
-    return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "auto 1fr", gap: _configs.gridGap + 'px', overflow: "auto", alignItems: "end" }, style) },
+    var scrollableRef = (0, react_1.useRef)(null);
+    var _j = (0, useFader_1.useFader)(scrollableRef), setFader = _j.setFader, showFader = _j.showFader, showHorizontalFader = _j.showHorizontalFader;
+    // Replace: const { xAxisWidth, yAxisWidth, measurementRef } = useAxisDimensions(data, _configs.axisLabelWidth);
+    var _k = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _k.xWidth, yWidth = _k.yWidth, setHorizontalRef = _k.setHorizontalRef, setVerticalRef = _k.setVerticalRef;
+    console.log({ xWidth: xWidth, yWidth: yWidth });
+    return (react_1.default.createElement("div", { style: __assign({ position: 'relative' }, style) },
         react_1.default.createElement("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: _configs.gridGap + "px",
+                display: "grid",
+                gridTemplateColumns: "".concat(yWidth, "px 1fr"),
+                gridTemplateRows: "".concat(xWidth, "px 1fr"),
+                gap: _configs.gridGap + 'px',
+                height: '100%',
             } },
-            react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
-            data.map(function (d) { return (react_1.default.createElement("div", { style: {
+            react_1.default.createElement("div", { style: { gridRow: 1, gridColumn: 1 } }),
+            react_1.default.createElement(HiddenScrollContainer, { style: {
+                    gridRow: 1,
+                    gridColumn: 2,
+                    overflowX: 'auto',
+                    overflowY: 'hidden',
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                }, onScroll: function (e) {
+                    // Sync horizontal scroll with main content area
+                    if (scrollableRef.current) {
+                        scrollableRef.current.scrollLeft = e.target.scrollLeft;
+                    }
+                } },
+                react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: _configs.gridGap + "px",
+                        minWidth: 'max-content',
+                    } }, data[0].map(function (dd, index) { return (react_1.default.createElement("div", { key: dd.labels.tooltipLabel, style: {
+                        width: _configs.cellSize + "px",
+                        height: xWidth + "px",
+                        display: "flex",
+                        alignItems: "flex-end",
+                        textWrap: "nowrap",
+                        justifyContent: 'center',
+                        position: "relative",
+                        overflow: "visible",
+                        flexShrink: 0,
+                    } },
+                    react_1.default.createElement("div", { style: {
+                            width: xWidth + "px",
+                            position: "absolute",
+                            bottom: 0,
+                            left: '50%',
+                            transformOrigin: "left bottom",
+                            transform: "rotate(-90deg) translateY(50%)",
+                            display: 'flex'
+                        } },
+                        react_1.default.createElement("div", { ref: function (el) { return setHorizontalRef(index, el); } },
+                            react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
+                                    whiteSpace: "normal",
+                                } }, dd.labels.tooltipLabel))))); }))),
+            react_1.default.createElement(HiddenScrollContainer, { style: {
+                    gridRow: 2,
+                    gridColumn: 1,
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: _configs.gridGap + "px",
+                }, onScroll: function (e) {
+                    // Sync vertical scroll with main content area
+                    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",
-                } },
-                react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
-                        width: "fit-content",
-                        maxWidth: _configs.axisLabelWidth + "px",
-                        height: "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", { style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: _configs.gridGap + "px",
-                overflowX: "auto",
-            } },
-            react_1.default.createElement("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: _configs.gridGap + "px",
-                } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
-                    width: _configs.cellSize + "px",
-                    height: _configs.axisLabelWidth + "px",
-                    display: "flex",
-                    alignItems: "flex-end",
-                    textWrap: "nowrap",
-                    justifyContent: 'center',
-                    position: "relative",
-                    overflow: "visible",
                     flexShrink: 0,
                 } },
-                react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
-                        width: _configs.axisLabelWidth + "px",
-                        height: "32px",
-                        position: "absolute",
-                        bottom: '-16px',
-                        left: (_configs.cellSize / 2) + 'px',
-                        transformOrigin: "left center",
-                        transform: "rotate(-90deg)",
-                        // 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 });
-            }))); }))));
+                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)))); })),
+            react_1.default.createElement("div", { ref: scrollableRef, style: {
+                    gridRow: 2,
+                    gridColumn: 2,
+                    overflow: 'auto',
+                    position: 'relative',
+                }, onScroll: function (e) {
+                    // Sync scrolling with headers
+                    var topHeader = e.target.parentElement.children[1]; // Top-right header
+                    var leftHeader = e.target.parentElement.children[2]; // Bottom-left header
+                    if (topHeader)
+                        topHeader.scrollLeft = e.target.scrollLeft;
+                    if (leftHeader)
+                        leftHeader.scrollTop = e.target.scrollTop;
+                    // Update fader visibility on scroll
+                    setFader();
+                } },
+                react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: _configs.gridGap + "px",
+                        minWidth: 'max-content',
+                    } }, data.map(function (d, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: _configs.gridGap + "px",
+                        flexShrink: 0,
+                    } }, d.map(function (dd, colIdx) {
+                    return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: false, dataMaxValue: dataMaxValue, value: dd });
+                }))); })))),
+        showFader && react_1.default.createElement("div", { style: {
+                background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))"),
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: '100%',
+                height: '40px'
+            } }),
+        showHorizontalFader && react_1.default.createElement("div", { style: {
+                background: "linear-gradient(to left, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))"),
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                height: '100%',
+                width: '40px'
+            } })));
 };
 exports.HeatMapGrid = HeatMapGrid;
+var templateObject_1, templateObject_2;

package/dist/v2/components/dataviz/HeatMapGrid/utils/mapValueToColor.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Maps a value from an input range to a color
+ * with the base color at the center point of the range
+ * @param {number} value - The value to map
+ * @param {number} minValue - The minimum value in the input range
+ * @param {number} maxValue - The maximum value in the input range
+ * @param {Object} hslColor - The base HSL color object
+ * @param {number} hslColor.h - Hue component (0-360)
+ * @param {number} hslColor.s - Saturation component (0-100)
+ * @param {number} hslColor.l - Lightness component (0-100)
+ * @param {number} minLightness - The minimum lightness (0-100) for darkest shade
+ * @param {number} maxLightness - The maximum lightness (0-100) for lightest shade
+ * @return {string} - A hex color code
+ */
+export declare function mapValueToColor(value: any, minValue: any, maxValue: any, hslColor?: {
+    h: number;
+    s: number;
+    l: number;
+}, // Default to #be185d
+minLightness?: number, maxLightness?: number): string;

package/dist/v2/components/dataviz/HeatMapGrid/utils/mapValueToColor.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapValueToColor = mapValueToColor;
+var __1 = require("../../../../..");
+/**
+ * Maps a value from an input range to a color
+ * with the base color at the center point of the range
+ * @param {number} value - The value to map
+ * @param {number} minValue - The minimum value in the input range
+ * @param {number} maxValue - The maximum value in the input range
+ * @param {Object} hslColor - The base HSL color object
+ * @param {number} hslColor.h - Hue component (0-360)
+ * @param {number} hslColor.s - Saturation component (0-100)
+ * @param {number} hslColor.l - Lightness component (0-100)
+ * @param {number} minLightness - The minimum lightness (0-100) for darkest shade
+ * @param {number} maxLightness - The maximum lightness (0-100) for lightest shade
+ * @return {string} - A hex color code
+ */
+function mapValueToColor(value, minValue, maxValue, hslColor, // Default to #be185d
+minLightness, maxLightness) {
+    if (hslColor === void 0) { hslColor = { h: 336, s: 74, l: 42 }; }
+    if (minLightness === void 0) { minLightness = 20; }
+    if (maxLightness === void 0) { maxLightness = 80; }
+    // Ensure value is within range
+    value = Math.max(minValue, Math.min(maxValue, value));
+    if (value === 0)
+        return __1.colors2.grey10;
+    // Calculate the center point of the range
+    var centerPoint = (minValue + maxValue) / 2;
+    // Extract the hsl components
+    var h = hslColor.h, s = hslColor.s, baseLightness = hslColor.l;
+    // Determine lightness based on position relative to center point
+    var lightness;
+    if (value < centerPoint) {
+        // Value is below center (smaller) - scale from maxLightness to baseLightness
+        var normalizedValue = (value - minValue) / (centerPoint - minValue);
+        lightness = maxLightness - normalizedValue * (maxLightness - baseLightness);
+    }
+    else {
+        // Value is above center (larger) - scale from baseLightness to minLightness
+        var normalizedValue = (value - centerPoint) / (maxValue - centerPoint);
+        lightness = baseLightness - normalizedValue * (baseLightness - minLightness);
+    }
+    return "hsl(".concat(h, ", ").concat(s, "%, ").concat(lightness, "%)");
+}

package/dist/v2/components/dataviz/HeatMapGrid/utils/useAxisMeasure.d.ts

@@ -0,0 +1,6 @@
+export declare const useAxisMeasure: (defaultAxisLabelWidth: number) => {
+    xWidth: number;
+    yWidth: number;
+    setHorizontalRef: (index: number, el: HTMLDivElement | null) => void;
+    setVerticalRef: (index: number, el: HTMLDivElement | null) => void;
+};

package/dist/v2/components/dataviz/HeatMapGrid/utils/useAxisMeasure.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAxisMeasure = void 0;
+var react_1 = require("react");
+var useAxisMeasure = function (defaultAxisLabelWidth) {
+    var _a = (0, react_1.useState)(defaultAxisLabelWidth), xWidth = _a[0], setXWidth = _a[1];
+    var _b = (0, react_1.useState)(defaultAxisLabelWidth), yWidth = _b[0], setYWidth = _b[1];
+    var horizontalRefs = (0, react_1.useRef)([]);
+    var verticalRefs = (0, react_1.useRef)([]);
+    // Functions to set refs
+    var setHorizontalRef = function (index, el) {
+        console.log({ horEL: el });
+        horizontalRefs.current[index] = el;
+    };
+    var setVerticalRef = function (index, el) {
+        console.log({ verEL: el });
+        verticalRefs.current[index] = el;
+    };
+    console.log({ horizontalRefs: horizontalRefs, verticalRefs: verticalRefs });
+    (0, react_1.useEffect)(function () {
+        // Measure horizontal labels
+        var maxHorizontalWidth = 0;
+        horizontalRefs.current.forEach(function (ref) {
+            console.log({ ref: ref });
+            if (ref) {
+                var width = ref.offsetWidth;
+                maxHorizontalWidth = Math.max(maxHorizontalWidth, width);
+            }
+        });
+        // Measure vertical labels  
+        var maxVerticalWidth = 0;
+        verticalRefs.current.forEach(function (ref) {
+            if (ref) {
+                var width = ref.offsetWidth;
+                maxVerticalWidth = Math.max(maxVerticalWidth, width);
+            }
+        });
+        // Update state if measured width is less than config
+        if (maxHorizontalWidth > 0 && maxHorizontalWidth < defaultAxisLabelWidth) {
+            setXWidth(maxHorizontalWidth + 10); // +10 for padding
+        }
+        if (maxVerticalWidth > 0 && maxVerticalWidth < defaultAxisLabelWidth) {
+            setYWidth(maxVerticalWidth + 10); // +10 for padding
+        }
+    }, []);
+    return {
+        xWidth: xWidth,
+        yWidth: yWidth,
+        setHorizontalRef: setHorizontalRef,
+        setVerticalRef: setVerticalRef
+    };
+};
+exports.useAxisMeasure = useAxisMeasure;

package/dist/v2/components/dataviz/HeatMapGrid/utils/useFader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const useFader: (scrollableRef: React.RefObject<HTMLDivElement>) => {
+    showFader: boolean;
+    showHorizontalFader: boolean;
+    setFader: () => void;
+};

package/dist/v2/components/dataviz/HeatMapGrid/utils/useFader.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFader = void 0;
+var react_1 = require("react");
+var __1 = require("../../../../..");
+var useFader = function (scrollableRef) {
+    var _a = (0, react_1.useState)(false), showFader = _a[0], setShowFader = _a[1];
+    var _b = (0, react_1.useState)(false), showHorizontalFader = _b[0], setShowHorizontalFader = _b[1];
+    var setFader = function () {
+        if (scrollableRef.current) {
+            var _a = scrollableRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
+            // Vertical fader logic
+            var hasMoreContentToScrollDown = scrollTop + clientHeight < scrollHeight - 5;
+            if (hasMoreContentToScrollDown && !showFader) {
+                setShowFader(true);
+            }
+            else if (!hasMoreContentToScrollDown && showFader) {
+                setShowFader(false);
+            }
+            // Horizontal fader logic
+            var hasMoreContentToScrollRight = scrollLeft + clientWidth < scrollWidth - 5;
+            if (hasMoreContentToScrollRight && !showHorizontalFader) {
+                setShowHorizontalFader(true);
+            }
+            else if (!hasMoreContentToScrollRight && showHorizontalFader) {
+                setShowHorizontalFader(false);
+            }
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        setFader();
+    }, []);
+    (0, __1.useScroll)(setFader);
+    return { showFader: showFader, showHorizontalFader: showHorizontalFader, setFader: setFader };
+};
+exports.useFader = useFader;

package/package.json

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