oolib 2.125.1 → 2.125.3

package/dist/components/PercentBarChart/index.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, }: {
+export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, valueSuffix, }: {
     data: any;
     valuePath: string;
     labelPath: string;
     title?: string;
     onClick?: (name: string) => void;
     colors?: string[];
+    valueSuffix?: string;
 }) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -46,8 +46,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarChart = void 0;
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var Typo_1 = require("../Typo");
-var colors_1 = require("../../themes/colors");
+var getTotalCount_1 = require("../../utils/getTotalCount");
 var chartColors = [
     "rgb(120, 86, 255)",
     "rgb(255, 117, 86)",
@@ -74,46 +75,55 @@ var renderCustomizedValue = function (_a) {
     return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, fontWeight: "600", x: width + xOffset, y: y + height / 2 + yOffset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: "SANS_2" }, "".concat(value).concat(suffix || "")));
 };
 var _dataSample = [
-    { name: "AAA/A1+", value: 72.3, Type: 0 },
-    { name: "Cash & Cash Equivalents", value: 10.1, Type: 1 },
-    { name: "Sovereign", value: 9.87, Type: 2 },
-    { name: "AA+", value: 5.63, Type: 3 },
+    { name: "Great food", value: 72.3, Type: 0 },
+    { name: "Great Ambience", value: 10.1, Type: 1 },
+    { name: "Great Music", value: 9.87, Type: 2 },
+    { name: "Great Cocktails", value: 5.63, Type: 3 },
 ];
+var configs = {
+    barHeight: 24,
+    barGap: 32,
+};
 var PercentBarChart = function (_a) {
-    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.labelPath, labelPath = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e;
+    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.labelPath, labelPath = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e, _f = _a.valueSuffix, valueSuffix = _f === void 0 ? "%" : _f;
+    var totalCount = (0, getTotalCount_1.getTotalCount)({ data: _data, countPath: valuePath });
     var data = (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
-        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[labelPath], color: colors[i % colors.length] })); });
+        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount), name: (0, _EXPORTS_1.getVal)(d, labelPath), color: colors[i % colors.length] })); });
         finalData.sort(function (a, b) {
             return Number(b.value || 0) - Number(a.value || 0);
         });
         return finalData;
     }, [_data, labelPath, valuePath]);
-    var _f = (0, react_1.useState)(undefined), activeBar = _f[0], setActiveBar = _f[1];
+    var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
     var changeBarOpacityFn = function (name) {
         return activeBar && activeBar !== name ? 0.4 : 1;
     };
-    return (react_1.default.createElement("div", { style: { border: "1px solid ".concat(colors_1.colors.greyColor15) } },
-        title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { padding: "2rem", paddingBottom: "0" }, semibold: true }, title)),
+    return (react_1.default.createElement("div", null,
+        title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { paddingBottom: "2rem" }, semibold: true }, title)),
         react_1.default.createElement("div", { style: {
-                height: "".concat(70 * data.length, "px"),
+                height: "".concat((configs.barHeight + configs.barGap) * data.length, "px"),
                 width: "100%",
-                padding: "2rem",
-                paddingTop: 0,
             } },
             react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
                 react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: 20, data: data, layout: "vertical", margin: {
-                        top: 15,
+                        top: 0,
                         right: 60,
                         left: 0,
                         bottom: 0,
                     } },
                     react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
                     react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: labelPath }),
-                    react_1.default.createElement(recharts_1.Bar, { radius: [2, 4, 4, 2], style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[labelPath]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
-                            setActiveBar(args[labelPath]);
-                            onClick(args[labelPath]);
-                        } },
+                    react_1.default.createElement(recharts_1.Bar, __assign({ radius: [2, 4, 4, 2], style: onClick ? { cursor: "pointer" } : {}, dataKey: "value" }, (onClick
+                        ? {
+                            onMouseOver: function (args) { return setActiveBar(args[labelPath]); },
+                            onMouseOut: function () { return setActiveBar(undefined); },
+                            onMouseDown: function (args) {
+                                setActiveBar(args[labelPath]);
+                                onClick(args[labelPath]);
+                            },
+                        }
+                        : {})),
                         react_1.default.createElement(recharts_1.LabelList, { dataKey: labelPath, position: "top", content: function (props) {
                                 return renderCustomizedLabel({
                                     y: props.y,
@@ -127,10 +137,10 @@ var PercentBarChart = function (_a) {
                                     width: props.width,
                                     height: props.height,
                                     value: props.value,
-                                    suffix: "%",
+                                    suffix: valueSuffix,
                                     opacity: changeBarOpacityFn(props[labelPath]),
                                 });
                             } }),
-                        data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[labelPath]), key: "cell-".concat(index), height: 30, fill: entry.color })); })))))));
+                        data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[labelPath]), key: "cell-".concat(index), height: configs.barHeight, fill: entry.color })); })))))));
 };
 exports.PercentBarChart = PercentBarChart;

package/dist/stories/PercentBarChart.stories.js

@@ -10,16 +10,16 @@ exports.default = {
     title: "Components/PercentBarChart",
 };
 var data = [
-    { name: 'AAA/A1+', value: 72.3, Type: 0 },
-    { name: 'Cash & Cash Equivalents', value: 10.1, Type: 1 },
-    { name: 'Sovereign', value: 9.87, Type: 2 },
-    { name: 'AA+', value: 5.63, Type: 3 },
+    { name: "Great food", value: 72.3, Type: 0 },
+    { name: "Great Ambience", value: 10.1, Type: 1 },
+    { name: "Great Music", value: 9.87, Type: 2 },
+    { name: "Great Cocktails", value: 5.63, Type: 3 },
 ];
 var PercentBarChart_ = function (args) {
     var handleBarClick = function (name) {
         console.log("Bar clicked: ".concat(name));
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
+        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "name", valuePath: "value", title: "This is PercentBarChart representing the data" })));
 };
 exports.PercentBarChart_ = PercentBarChart_;

package/dist/utils/_EXPORTS/index.d.ts

@@ -21,3 +21,5 @@ export { getDaysDiff } from "../momentjs/getDaysDiff";
 export { stitchLink } from "../stitchLink";
 export { decideLinkCompAndTarget } from "../../components/cards/utils/decideLinkCompAndTarget";
 export { isExternalUrl } from "../../components/cards/utils/isExternalUrl";
+export { getPercentage } from "../getPercentage";
+export { getTotalCount } from "../getTotalCount";

package/dist/utils/_EXPORTS/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isExternalUrl = exports.decideLinkCompAndTarget = exports.stitchLink = exports.getDaysDiff = exports.useContainerQuery = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.makeArrayFromLength = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
+exports.getTotalCount = exports.getPercentage = exports.isExternalUrl = exports.decideLinkCompAndTarget = exports.stitchLink = exports.getDaysDiff = exports.useContainerQuery = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.makeArrayFromLength = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
 //the holy setter, getter & deleter
 var getVal_1 = require("../getterSetterDeleter/getVal");
 Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -52,3 +52,7 @@ var decideLinkCompAndTarget_1 = require("../../components/cards/utils/decideLink
 Object.defineProperty(exports, "decideLinkCompAndTarget", { enumerable: true, get: function () { return decideLinkCompAndTarget_1.decideLinkCompAndTarget; } });
 var isExternalUrl_1 = require("../../components/cards/utils/isExternalUrl");
 Object.defineProperty(exports, "isExternalUrl", { enumerable: true, get: function () { return isExternalUrl_1.isExternalUrl; } });
+var getPercentage_1 = require("../getPercentage");
+Object.defineProperty(exports, "getPercentage", { enumerable: true, get: function () { return getPercentage_1.getPercentage; } });
+var getTotalCount_1 = require("../getTotalCount");
+Object.defineProperty(exports, "getTotalCount", { enumerable: true, get: function () { return getTotalCount_1.getTotalCount; } });

package/dist/utils/getPercentage.d.ts

@@ -0,0 +1 @@
+export declare const getPercentage: (d1: number, d2: number) => number;

package/dist/utils/getPercentage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPercentage = void 0;
+var getPercentage = function (d1, d2) {
+    return (Math.round((d1 / d2) * 10000)) / 100;
+};
+exports.getPercentage = getPercentage;

package/dist/utils/getTotalCount.d.ts

@@ -0,0 +1,4 @@
+export function getTotalCount({ data, countPath }: {
+    data: any;
+    countPath: any;
+}): number;

package/dist/utils/getTotalCount.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTotalCount = void 0;
+var _EXPORTS_1 = require("./_EXPORTS");
+var getTotalCount = function (_a) {
+    var data = _a.data, countPath = _a.countPath;
+    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);
+        total += count;
+    }
+    return total;
+};
+exports.getTotalCount = getTotalCount;

package/package.json

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