oolib 2.114.0 → 2.116.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, display, onClick, colors }: {
     data: any;
     valuePath: string;
+    title?: string;
     display: string;
-    onBarClick?: (name: string) => void;
-    colors?: {
-        [key: string]: string;
-    };
+    onClick?: (name: string) => void;
+    colors?: string[];
 }) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -46,16 +46,30 @@ 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 colors_1 = require("../../themes/colors");
+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;
-    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle" }, value));
+    return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: 'SANS_2' }, value));
 };
 var renderCustomizedValue = function (_a) {
     var y = _a.y, width = _a.width, height = _a.height, value = _a.value, suffix = _a.suffix, opacity = _a.opacity;
     var xOffset = 6;
     var yOffset = 2;
-    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" }, "".concat(value).concat(suffix || "")));
+    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 },
@@ -64,27 +78,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.display, display = _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[display], color: (colors)[i % (colors).length] })); });
         finalData.sort(function (a, b) {
             return Number(b.value || 0) - Number(a.value || 0);
         });
         return finalData;
     }, [_data, display, 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%" } },
+    return (react_1.default.createElement("div", { style: { height: "".concat(80 * data.length, "px"), width: "100%", border: "1px solid ".concat(colors_1.colors.greyColor15), padding: "3rem 2rem" } },
+        title && react_1.default.createElement(Typo_1.SANS_4_5, { style: { marginBottom: "1.5rem", marginTop: "-1rem" }, semibold: true }, 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,
@@ -96,7 +104,7 @@ var PercentBarChart = function (_a) {
                 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]);
+                        onClick(args[display]);
                     } },
                     react_1.default.createElement(recharts_1.LabelList, { dataKey: display, position: "top", content: function (props) {
                             return renderCustomizedLabel({

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, display: "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.116.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",