oolib 2.174.0 → 2.175.0

package/dist/components/EmptyStates/config/index.d.ts

@@ -1,8 +1,9 @@
-export function getEmptyStatesConfig({ preset, title, contentTypeTitle, commaSeparatedTags }: {
+export function getEmptyStatesConfig({ preset, title, contentTypeTitle, commaSeparatedTags, localize }: {
     preset: any;
     title: any;
     contentTypeTitle: any;
     commaSeparatedTags: any;
+    localize: any;
 }): {
     align: string;
     image: {
@@ -13,7 +14,7 @@ export function getEmptyStatesConfig({ preset, title, contentTypeTitle, commaSep
         };
     };
     title: string;
-    subtitle: string;
+    subtitle: any;
     imageSize?: undefined;
     button?: undefined;
     link?: undefined;
@@ -28,7 +29,7 @@ export function getEmptyStatesConfig({ preset, title, contentTypeTitle, commaSep
     };
     imageSize: number;
     title: string;
-    subtitle: string;
+    subtitle: any;
     button?: undefined;
     link?: undefined;
 } | {
@@ -78,7 +79,7 @@ export function getEmptyStatesConfig({ preset, title, contentTypeTitle, commaSep
             height?: undefined;
         };
     };
-    title: string;
+    title: any;
     subtitle: string;
     link: {
         text: string;

package/dist/components/EmptyStates/config/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEmptyStatesConfig = void 0;
 var getEmptyStatesConfig = function (_a) {
-    var preset = _a.preset, title = _a.title, contentTypeTitle = _a.contentTypeTitle, commaSeparatedTags = _a.commaSeparatedTags;
+    var preset = _a.preset, title = _a.title, contentTypeTitle = _a.contentTypeTitle, commaSeparatedTags = _a.commaSeparatedTags, localize = _a.localize;
     switch (preset) {
         case "multipleCollectionsListing":
             return {
@@ -15,7 +15,7 @@ var getEmptyStatesConfig = function (_a) {
                     },
                 },
                 title: "No tags added",
-                subtitle: "Publishing under ".concat(commaSeparatedTags, " shows all tagged content here, You can edit published content in future, when required."),
+                subtitle: localize("Publishing under <word1 : ".concat(commaSeparatedTags, "> shows all tagged content here, You can edit published content in future, when required.")),
             };
         case "multiplePublishingListing":
             return {
@@ -41,7 +41,7 @@ var getEmptyStatesConfig = function (_a) {
                     },
                 },
                 title: "No ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " Added"),
-                subtitle: "Publishing under ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " shows your content here, You can edit published content in future, when required."),
+                subtitle: localize("Publishing under <word1 : ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), "> shows your content here, You can edit published content in future, when required.")),
             };
         case "singleCollectionsListing":
             return {
@@ -55,7 +55,7 @@ var getEmptyStatesConfig = function (_a) {
                 },
                 imageSize: 80,
                 title: "No ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " Added"),
-                subtitle: "Publishing under ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " shows your content here, You can edit published content in future, when required."),
+                subtitle: localize("Publishing under <word1 : ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), "> shows your content here, You can edit published content in future, when required.")),
             };
         case "profileListing":
             return {
@@ -202,7 +202,7 @@ var getEmptyStatesConfig = function (_a) {
                         opacity: 0.6,
                     },
                 },
-                title: "Cant find any content for ".concat(contentTypeTitle),
+                title: localize("Cant find any content for <word1 : ".concat(contentTypeTitle, ">")),
                 subtitle: "Sorry we couldn’t find any matches for this. Please make sure the words are spelled correctly",
                 link: {
                     // onClick: action,

package/dist/components/EmptyStates/index.js

@@ -7,14 +7,17 @@ exports.EmptyStates = void 0;
 var react_1 = __importDefault(require("react"));
 var EmptyStatesRenderer_1 = require("./comps/EmptyStatesRenderer");
 var config_1 = require("./config");
+var utilsOolib_1 = require("../../utilsOolib");
 var EmptyStates = function (_a) {
     var _b = _a.preset, preset = _b === void 0 ? "multiplePublishingListing" : _b, contentTypeTitle = _a.contentTypeTitle, titleProp = _a.title, tags = _a.tags, onClick = _a.onClick;
     var commaSeparatedTags = tags === null || tags === void 0 ? void 0 : tags.map(function (item) { return item.toLowerCase(); }).join(",");
+    var localize = (0, utilsOolib_1.useLocale)();
     var _c = (0, config_1.getEmptyStatesConfig)({
         preset: preset,
         contentTypeTitle: contentTypeTitle,
         commaSeparatedTags: commaSeparatedTags,
-        title: titleProp
+        title: titleProp,
+        localize: localize
     }), image = _c.image, title = _c.title, subtitle = _c.subtitle, link = _c.link, button = _c.button, align = _c.align;
     return (react_1.default.createElement(EmptyStatesRenderer_1.EmptyStatesRenderer, { image: image, align: align, title: title, subtitle: subtitle, link: link, button: button, onClick: onClick, preset: preset }));
 };

package/dist/stories/v2/components/BarChart.stories.js

@@ -65,7 +65,7 @@ var BarChart = function (args) {
             react_1.default.createElement(BarChart_1.BarChart, { data: [
                     {
                         display: "Logged In Once",
-                        stack1: 60,
+                        // stack1: 60,
                         stack2: 20,
                         stack3: 40,
                         stack4: 10,
@@ -125,7 +125,14 @@ var BarChart = function (args) {
                     "stack4",
                     "stack5",
                     "stack6",
-                ], 
+                ], tooltipLabelsMapping: {
+                    stack1: 'Stack 1',
+                    stack2: 'Stack 2',
+                    stack3: 'Stack 3',
+                    stack4: 'Stack 4',
+                    stack5: 'Stack 5',
+                    stack6: 'Stack 6',
+                }, 
                 // valuePath="stack1"
                 labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, 
                 // showPercent={true}
@@ -135,7 +142,7 @@ var BarChart = function (args) {
                 react_1.default.createElement(BarChart_1.BarChart, { data: [
                         {
                             display: "Logged In Once",
-                            stack1: 60,
+                            // stack1: 60,
                             stack2: 20,
                             stack3: 40,
                             stack4: 10,

package/dist/utils/getTotalCount.js

@@ -7,7 +7,7 @@ var getTotalCount = function (_a) {
     var total = 0;
     for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
         var d = data_1[_i];
-        var count = (0, _EXPORTS_1.getVal)(d, countPath);
+        var count = (0, _EXPORTS_1.getVal)(d, countPath) || 0; // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
         total += count;
     }
     return total;

package/dist/v2/components/BarChart/comps/CustomTooltip/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TooltipProps } from 'recharts';
+import { LabelData } from '../CustomizedLabel';
+interface CustomTooltipProps extends TooltipProps<number, string> {
+    value?: LabelData[];
+    showPercent?: boolean;
+}
+declare const CustomTooltip: React.FC<CustomTooltipProps>;
+export default CustomTooltip;

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

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Typo2_1 = require("../../../Typo2");
+var __1 = require("../../../../..");
+var CustomTooltip = function (props) {
+    var _a, _b;
+    var active = props.active, payload = props.payload, value = props.value, showPercent = props.showPercent;
+    if (!active || !payload || !payload.length)
+        return null;
+    // Calculate position - align with the right side of the bars
+    var style = {
+        position: 'absolute',
+        left: "".concat(((_a = props === null || props === void 0 ? void 0 : props.coordinate) === null || _a === void 0 ? void 0 : _a.x) || 0, "px"),
+        top: "".concat(((_b = props === null || props === void 0 ? void 0 : props.coordinate) === null || _b === void 0 ? void 0 : _b.y) || 0, "px"),
+        transform: 'translateX(10px)', // Small offset from the bars
+        backgroundColor: 'white',
+        border: "1px solid ".concat(__1.colors2.grey10),
+        borderRadius: '6px',
+        padding: '8px',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        zIndex: 1000,
+        width: 'max-content',
+        maxWidth: '200px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem'
+    };
+    return (react_1.default.createElement("div", { style: style }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem'
+        } },
+        react_1.default.createElement("div", { style: {
+                flex: '0 0 auto',
+                width: '1.2rem',
+                height: '1.2rem',
+                borderRadius: '0.2rem',
+                backgroundColor: entry.color,
+                display: 'flex',
+                gap: '0.5rem',
+                alignItems: 'center'
+            } }),
+        react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, { style: { flex: '0 0 auto', } }, showPercent ? entry.percentage + '%' : entry.count),
+        react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { style: { flex: '0 0 auto', } }, entry.tooltipLabel))); })));
+};
+exports.default = CustomTooltip;

package/dist/v2/components/BarChart/comps/CustomizedLabel/index.d.ts

@@ -1,13 +1,14 @@
 import React from "react";
 import { BaseConfigs, DebugControls } from "../..";
-interface LabelData {
+export interface LabelData {
     percentage: number;
     count: number;
     name: string;
     dataIndex: number;
     color: string;
+    tooltipLabel?: string;
 }
-type CustomizedLabelValue = LabelData | LabelData[];
+export type CustomizedLabelValue = LabelData | LabelData[];
 interface CustomizedLabelProps {
     y?: number | string;
     width?: number | string;

package/dist/v2/components/BarChart/index.d.ts

@@ -18,6 +18,9 @@ export interface DebugControls {
 export interface BarChartProps {
     data: any;
     valuePath: string | string[];
+    tooltipLabelsMapping: {
+        [key: string]: string;
+    };
     labelPath: string;
     onClick?: (name: string) => void;
     valueSuffix?: string;

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

@@ -52,6 +52,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BarChart = void 0;
 var react_1 = __importStar(require("react"));
@@ -60,21 +63,22 @@ var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var getTotalCount_1 = require("../../../utils/getTotalCount");
 var CustomizedLabel_1 = require("./comps/CustomizedLabel");
 var colors_1 = require("../../themes/colors");
+var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
 var usePrepareData = function (_a) {
-    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent;
+    var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent;
     return (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
         var totalCount = !isBreakdown
             ? (0, getTotalCount_1.getTotalCount)({ data: finalData, countPath: valuePath })
             : finalData.map(function (d) {
                 var valueSum = valuePath
-                    .map(function (path) { return (0, _EXPORTS_1.getVal)(d, path); })
+                    .map(function (path) { return (0, _EXPORTS_1.getVal)(d, path) || 0; }) // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
                     .reduce(function (acc, curr) { return acc + curr; }, 0);
                 return valueSum;
             });
         finalData = finalData.map(function (d, index) {
             if (!isBreakdown) {
-                var count = (0, _EXPORTS_1.getVal)(d, valuePath);
+                var count = (0, _EXPORTS_1.getVal)(d, valuePath) || 0; // fallback to 0, cuz sometimes backend systems return 'undefined' if the count of data against a field is non-existent / zero
                 return {
                     labels: __assign(__assign({}, (showPercent
                         ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount) }
@@ -82,11 +86,11 @@ var usePrepareData = function (_a) {
                 };
             }
             return valuePath.map(function (path, i) {
-                var count = (0, _EXPORTS_1.getVal)(d, path);
+                var count = (0, _EXPORTS_1.getVal)(d, path) || 0;
                 return {
                     labels: __assign(__assign({}, (showPercent
                         ? { percentage: (0, _EXPORTS_1.getPercentage)(count, totalCount[index]) }
-                        : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
+                        : {})), { count: count, tooltipLabel: (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
                 };
             });
         });
@@ -178,29 +182,27 @@ var barConfigs = {
         getDataKey: function (stackIndex) { return "".concat(stackIndex, ".labels.count"); },
         getStackId: function (stackIndex, breakdownDisplayType //replaced breakdownDisplayType
         ) { return (breakdownDisplayType === "stacked" ? "stack" : "stack-".concat(stackIndex)); },
-        getCellFill: function (colorIdx, stackIndex, dataVizColors) {
-            return dataVizColors[(colorIdx + stackIndex) % dataVizColors.length];
-        },
+        getCellFill: function (colorIdx, stackIndex, dataVizColors) { return dataVizColors[(colorIdx + stackIndex) % dataVizColors.length]; },
     },
     isNotBreakdown: {
         getBarRadius: function () { return _base_configs.barRadius; },
         getDataKey: function () { return "labels.count"; },
         getStackId: function () { return undefined; },
-        getCellFill: function (colorIdx, _stackIndex, dataVizColors) {
-            return dataVizColors[colorIdx];
-        },
+        getCellFill: function (colorIdx, _stackIndex, dataVizColors) { return dataVizColors[colorIdx]; },
     },
 };
 var BarChart = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f;
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f;
     var isBreakdown = Array.isArray(valuePath);
     var data = usePrepareData({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
+        tooltipLabelsMapping: tooltipLabelsMapping,
         isBreakdown: isBreakdown,
-        showPercent: showPercent
+        showPercent: showPercent,
     });
+    console.log({ data: data });
     var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
     // menu options for grouped and stacked
     var renderBar = function (stackIndex, lastIndex) {
@@ -236,7 +238,7 @@ var BarChart = function (_a) {
                             },
                         }
                         : {})))); } })),
-                data.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { y: (!isBreakdown || breakdownDisplayType === "stacked")
+                data.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { y: !isBreakdown || breakdownDisplayType === "stacked"
                         ? CALC_SINGLE_BAR_SECTION_Y_POS(index) + CHART_OFFSET_TOP
                         : CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, data[0].length) + CHART_OFFSET_TOP, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_configs.barHeight, fill: activeConfig.getCellFill(colorIdx, stackIndex, colors_1.dataVizColors) })); }))));
     };
@@ -261,6 +263,14 @@ var BarChart = function (_a) {
                 } },
                 react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
                 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, { 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(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }) })));
+                    }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
                 isBreakdown
                     ? data[0].map(function (_, stackIndex) {
                         return renderBar(stackIndex, data[0].length - 1);

package/package.json

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