oolib 2.198.1 → 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/package.json

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