oolib 2.198.0 → 2.198.2

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

@@ -133,7 +133,7 @@ var CustomTooltip = function (props) {
                         } },
                         react_1.default.createElement(LegendTooltipGlyph_1.LegendTooltipGlyph, { color: entry.barColor }),
                         react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, showPercent ? entry.percentage + "%" : entry.count || "0")))); })),
-                showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { style: {
+                showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
                         height: rowHeights[index]
                             ? rowHeights[index] + "px"
                             : "auto",
@@ -144,7 +144,7 @@ var CustomTooltip = function (props) {
                         display: "flex",
                         flexDirection: "column",
                         gap: "1rem",
-                    } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { onMouseOver: function () { return setTooltipTextClampStates(function (prev) {
+                    } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, onMouseOver: function () { return setTooltipTextClampStates(function (prev) {
                         var newState = __spreadArray([], prev, true);
                         newState[index] = false;
                         return newState;
@@ -153,7 +153,7 @@ var CustomTooltip = function (props) {
                         newState[index] = true;
                         return newState;
                     }); }, ref: function (el) { return (tooltipLabelLengthRefs.current[index] = el); } },
-                    react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, { clampT: tooltipTextClampStates[index], key: index }, entry.tooltipLabel))); }))))));
+                    react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, { clampT: tooltipTextClampStates[index] }, entry.tooltipLabel))); }))))));
 };
 exports.default = CustomTooltip;
 var templateObject_1;

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

@@ -48,30 +48,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BarChart = exports.FadeGradientWhenScroll = exports.useDecideLegendOrientation = exports.useTrackMousePosition = void 0;
+var lodash_1 = __importDefault(require("lodash"));
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var CustomizedLabel_1 = require("./comps/CustomizedLabel");
-var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
+var __1 = require("../../../..");
 var usePrepareData_1 = require("../utils/usePrepareData");
 var _base_barchart_ui_configs_1 = require("./_base_barchart_ui_configs");
+var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
 var Legend_1 = require("./comps/Legend");
-var __1 = require("../../../..");
 var useTrackMousePosition = function () {
     var _a = (0, react_1.useState)({
         x: 0,
         y: 0,
     }), mousePosition = _a[0], setMousePosition = _a[1];
+    // Create a throttled version of the mouse move handler
+    var throttledHandleMouseMove = (0, react_1.useCallback)(lodash_1.default.throttle(function (e) {
+        setMousePosition({ x: e.clientX, y: e.clientY });
+    }, 1000), // ~60fps (1000ms / 60 = 16.67ms)
+    []);
     (0, react_1.useEffect)(function () {
-        var handleMouseMove = function (e) {
-            setMousePosition({ x: e.clientX, y: e.clientY });
-        };
-        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mousemove", throttledHandleMouseMove);
         // Clean up
         return function () {
-            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mousemove", throttledHandleMouseMove);
+            // Cancel any pending throttled calls
+            throttledHandleMouseMove.cancel();
         };
-    }, []);
-    return ({ mousePosition: mousePosition });
+    }, [throttledHandleMouseMove]);
+    return { mousePosition: mousePosition };
 };
 exports.useTrackMousePosition = useTrackMousePosition;
 // CHART_OFFSET_TOP & CHART_OFFSET_TOP_BREAKDOWN is the y shift on top of the entire chart, because otherwise the chart starts with bar 1 at 0,0 coordinates
@@ -326,6 +331,7 @@ var BarChart = function (_a) {
         widthThreshold: 500
     }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
     var _l = (0, react_1.useState)(undefined), activeBar = _l[0], setActiveBar = _l[1];
+    // const mousePosition = {x: 0, y: 0}
     var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
     // menu options for grouped and stacked
     if (data.length === 0)

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

@@ -172,18 +172,19 @@ var HeatMapGrid = function (_a) {
                 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: {
-                        maxWidth: yWidth + "px",
-                    } }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name)))); })),
+            } }, data.map(function (d, idx) {
+            var _a;
+            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: { maxWidth: yWidth + "px" } }, (_a = d[0]) === null || _a === void 0 ? void 0 : _a.labels.name))));
+        })),
         react_1.default.createElement("div", { ref: scrollableRef, style: {
                 gridRow: 2,
                 gridColumn: 2,

package/package.json

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