oolib 2.114.0 → 2.115.0

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

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

package/dist/components/PercentBarChart/index.js

@@ -46,6 +46,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarChart = void 0;
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
+var Typo_1 = require("../Typo");
+var chartColors = [
+    "#F53D65",
+    "#666666",
+    "#EBAF4D",
+    "#0ACC22",
+    "#E60000",
+    "#66DAB0",
+    "#6A2B99",
+    "#ff836d",
+    "#b4a8d0",
+    "#ff7167",
+];
 var renderCustomizedLabel = function (_a) {
     var y = _a.y, value = _a.value, opacity = _a.opacity;
     var offset = 12;
@@ -64,27 +77,21 @@ var _dataSample = [
     { name: "AA+", value: 5.63, Type: 3 },
 ];
 var PercentBarChart = function (_a) {
-    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.display, display = _d === void 0 ? "name" : _d, onBarClick = _a.onBarClick, _e = _a.colors, colors = _e === void 0 ? {
-        hoverInvertRed: '#FBC3C3',
-        yellow: '#FFCC00',
-        green: '#08A84B',
-        blue: '#33A4FF'
-    } : _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.id, id = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e;
     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[display], color: Object.values(colors)[i % Object.values(colors).length] })); });
-        // console.log({ finalData })
+        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[id], color: (colors)[i % (colors).length] })); });
         finalData.sort(function (a, b) {
             return Number(b.value || 0) - Number(a.value || 0);
         });
         return finalData;
-    }, [_data, display, valuePath]);
+    }, [_data, id, valuePath]);
     var _f = (0, react_1.useState)(undefined), activeBar = _f[0], setActiveBar = _f[1];
-    //   console.log({ activeBar });
     var changeBarOpacityFn = function (name) {
         return activeBar && activeBar !== name ? 0.4 : 1;
     };
     return (react_1.default.createElement("div", { style: { height: "".concat(80 * data.length, "px"), width: "100%" } },
+        title && react_1.default.createElement(Typo_1.SANS_4_5, null, title),
         react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
             react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, data: data, layout: "vertical", margin: {
                     top: 15,
@@ -93,16 +100,16 @@ var PercentBarChart = function (_a) {
                     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: display }),
-                react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[display]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
-                        setActiveBar(args[display]);
-                        onBarClick(args[display]);
+                react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: id }),
+                react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[id]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
+                        setActiveBar(args[id]);
+                        onClick(args[id]);
                     } },
-                    react_1.default.createElement(recharts_1.LabelList, { dataKey: display, position: "top", content: function (props) {
+                    react_1.default.createElement(recharts_1.LabelList, { dataKey: id, position: "top", content: function (props) {
                             return renderCustomizedLabel({
                                 y: props.y,
                                 value: props.value,
-                                opacity: changeBarOpacityFn(props[display]),
+                                opacity: changeBarOpacityFn(props[id]),
                             });
                         } }),
                     react_1.default.createElement(recharts_1.LabelList, { dataKey: "value", offset: 0, content: function (props) {
@@ -112,9 +119,9 @@ var PercentBarChart = function (_a) {
                                 height: props.height,
                                 value: props.value,
                                 suffix: "%",
-                                opacity: changeBarOpacityFn(props[display]),
+                                opacity: changeBarOpacityFn(props[id]),
                             });
                         } }),
-                    data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[display]), 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[id]), key: "cell-".concat(index), height: 30, fill: entry.color })); }))))));
 };
 exports.PercentBarChart = PercentBarChart;

package/dist/stories/{PercentageBarChart.stories.js → PercentBarChart.stories.js}

@@ -9,7 +9,6 @@ var PercentBarChart_1 = require("../components/PercentBarChart");
 exports.default = {
     title: "Components/PercentBarChart",
 };
-var uid = 0;
 var data = [
     { name: 'AAA/A1+', value: 72.3, Type: 0 },
     { name: 'Cash & Cash Equivalents', value: 10.1, Type: 1 },
@@ -21,6 +20,6 @@ var PercentBarChart_ = function (args) {
         console.log("Bar clicked: ".concat(name));
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, valuePath: "value", display: "name", onBarClick: handleBarClick })));
+        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, id: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
 };
 exports.PercentBarChart_ = PercentBarChart_;

package/package.json

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