oolib 2.199.4 → 2.199.6

package/dist/v2/components/cards/CardContent/index.js

@@ -69,6 +69,10 @@ var CardContent = function (_a) {
                     react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: title, noOfLines_M: 6 },
                         react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" }, localize(title))))) : null,
                 description ? (react_1.default.createElement(styled_2.StyledDescription, null,
-                    react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: description, noOfLines_M: 6 }, description))) : null))));
+                    react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: description, noOfLines_M: 6 }, description))) : null),
+            react_1.default.createElement("div", null, (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (
+            //show only two meta for cardContent
+            react_1.default.createElement(styled_2.StyledMetaBlockWrapper, null,
+                react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }))) : null))));
 };
 exports.CardContent = CardContent;

package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/OptimizedTooltip.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TooltipProps } from "recharts";
+interface OptimizedTooltipProps extends TooltipProps<number, string> {
+    showPercent?: boolean;
+    breakdownCategoryName?: string;
+}
+declare const OptimizedTooltip: React.FC<OptimizedTooltipProps>;
+export default OptimizedTooltip;

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

@@ -0,0 +1,118 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../../../../..");
+var Typo2_1 = require("../../../../Typo2");
+var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
+var UI_CAPTION_DF_WITH_LINE_CLAMP = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* ", " */\n"], ["\n  /* ", " */\n"])), function (_a) {
+    var clampT = _a.clampT;
+    return (clampT ? (0, __1.clampText)(3) : "");
+});
+var OptimizedTooltip = (0, react_1.memo)(function (_a) {
+    var _b, _c;
+    var active = _a.active, payload = _a.payload, label = _a.label, _d = _a.showPercent, showPercent = _d === void 0 ? false : _d, breakdownCategoryName = _a.breakdownCategoryName;
+    // Early return for better performance
+    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length))
+        return null;
+    // Transform payload data to match your original tooltip structure
+    var value = ((_c = (_b = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.map(function (entry) {
+        return {
+            barColor: entry.labels.barColor,
+            percentage: entry.labels.percentage || 0,
+            count: entry.labels.count,
+            tooltipLabel: entry.labels.tooltipLabel,
+            name: entry.labels.name,
+        };
+    })) || [];
+    var style = {
+        backgroundColor: __1.colors2.black,
+        color: __1.colors2.white,
+        border: "1px solid ".concat(__1.colors2.grey10),
+        borderRadius: "6px",
+        padding: "8px",
+        boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.12)",
+        zIndex: 100000,
+        width: "max-content",
+        maxWidth: "300px",
+        maxHeight: "500px",
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        fontSize: "12px",
+    };
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("div", { style: style },
+            breakdownCategoryName && (react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, breakdownCategoryName)),
+            react_1.default.createElement("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: showPercent ? "auto auto auto" : "auto auto",
+                    gap: "0.6rem",
+                } },
+                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 },
+                    react_1.default.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.6rem",
+                        } },
+                        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", { key: index },
+                    react_1.default.createElement(Typo2_1.UI_CAPTION_DF, null, entry.count || "0"))); }))),
+                react_1.default.createElement("div", { style: {
+                        paddingLeft: "0.8rem",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                    } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index },
+                    react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, null, entry.tooltipLabel))); }))))));
+});
+exports.default = OptimizedTooltip;
+var templateObject_1;

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

@@ -55,8 +55,8 @@ var CustomizedLabel_1 = require("./comps/CustomizedLabel");
 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 OptimizedTooltip_1 = __importDefault(require("./comps/CustomTooltip/OptimizedTooltip"));
 var useTrackMousePosition = function () {
     var _a = (0, react_1.useState)({
         x: 0,
@@ -268,14 +268,7 @@ var BarChartRenderer = function (_a) {
             } },
             react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number", domain: [0, dataMaxValue] }),
             react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
-            isBreakdown && (react_1.default.createElement(recharts_1.Tooltip, { content: function (props) {
-                    var _a;
-                    return (react_1.default.createElement(CustomTooltip_1.default, __assign({}, props, { breakdownCategoryName: breakdownCategoryName, activeBar: activeBar, mousePosition: mousePosition, showPercent: showPercent, 
-                        // god knows why the dataindex gets stored against props.label.
-                        // this is some internal recharts thing for tooltips specifically.
-                        // we dont do this.
-                        value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign({}, item.labels)); }) })));
-                }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
+            isBreakdown && (react_1.default.createElement(recharts_1.Tooltip, { cursor: false, content: react_1.default.createElement(OptimizedTooltip_1.default, null), animationDuration: 0, isAnimationActive: false, allowEscapeViewBox: { x: false, y: false }, position: { x: undefined, y: undefined } })),
             isBreakdown
                 ? data[0].map(function (_, stackIndex) {
                     //note that this map renders the individual bars within a breakdown group

package/package.json

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