oolib 2.197.1 → 2.197.2

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

@@ -53,71 +53,15 @@ 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("../../../..");
-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
- * @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,
@@ -128,7 +72,7 @@ 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(')', '');
@@ -136,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 })),
@@ -149,16 +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)))));
 };
-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 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)({
@@ -171,69 +111,41 @@ var HeatMapGrid = function (_a) {
         showPercent: showPercent,
         summarizeAfterIdx: summarizeAfterIdx,
     }), 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) },
+    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: {
-                position: 'relative',
                 display: "grid",
-                gridTemplateColumns: "auto 1fr",
+                gridTemplateColumns: "".concat(yWidth, "px 1fr"),
+                gridTemplateRows: "".concat(xWidth, "px 1fr"),
                 gap: _configs.gridGap + 'px',
-                overflow: "auto",
-                alignItems: "end",
-                height: '100%'
+                height: '100%',
             } },
-            react_1.default.createElement("div", { style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: _configs.gridGap + "px",
-                } },
-                react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
-                data.map(function (d) { return (react_1.default.createElement("div", { style: {
-                        height: _configs.cellSize + "px",
-                        textAlign: "right",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "flex-end",
-                    } },
-                    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: { 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",
-                    } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
+                        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: _configs.axisLabelWidth + "px",
+                        height: xWidth + "px",
                         display: "flex",
                         alignItems: "flex-end",
                         textWrap: "nowrap",
@@ -242,34 +154,89 @@ var HeatMapGrid = function (_a) {
                         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",
+                    flexShrink: 0,
+                } },
+                react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
                     react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
-                            width: _configs.axisLabelWidth + "px",
-                            position: "absolute", // Add this
-                            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: {
+                            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) {
-                    // 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 } })));
+                        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;
+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.1",
+  "version": "2.197.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",