oolib 2.115.0 → 2.116.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/PercentBarChart/index.d.ts +2 -2
  2. package/dist/components/PercentBarChart/index.js +16 -15
  3. package/dist/stories/PercentBarChart.stories.js +1 -1
  4. package/package.json +1 -1
package/dist/components/PercentBarChart/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
- export declare const PercentBarChart: ({ data: _data, title, valuePath, id, onClick, colors }: {
2
+ export declare const PercentBarChart: ({ data: _data, title, valuePath, display, onClick, colors }: {
3
3
  data: any;
4
4
  valuePath: string;
5
5
  title?: string;
6
- id: string;
6
+ display: string;
7
7
  onClick?: (name: string) => void;
8
8
  colors?: string[];
9
9
  }) => React.JSX.Element;
package/dist/components/PercentBarChart/index.js CHANGED
@@ -47,6 +47,7 @@ exports.PercentBarChart = void 0;
47
47
  var react_1 = __importStar(require("react"));
48
48
  var recharts_1 = require("recharts");
49
49
  var Typo_1 = require("../Typo");
50
+ var colors_1 = require("../../themes/colors");
50
51
  var chartColors = [
51
52
  "#F53D65",
52
53
  "#666666",
@@ -62,13 +63,13 @@ var chartColors = [
62
63
  var renderCustomizedLabel = function (_a) {
63
64
  var y = _a.y, value = _a.value, opacity = _a.opacity;
64
65
  var offset = 12;
65
- return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle" }, value));
66
+ 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));
66
67
  };
67
68
  var renderCustomizedValue = function (_a) {
68
69
  var y = _a.y, width = _a.width, height = _a.height, value = _a.value, suffix = _a.suffix, opacity = _a.opacity;
69
70
  var xOffset = 6;
70
71
  var yOffset = 2;
71
- 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 || "")));
72
+ 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 || "")));
72
73
  };
73
74
  var _dataSample = [
74
75
  { name: "AAA/A1+", value: 72.3, Type: 0 },
@@ -77,21 +78,21 @@ var _dataSample = [
77
78
  { name: "AA+", value: 5.63, Type: 3 },
78
79
  ];
79
80
  var PercentBarChart = function (_a) {
80
- 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;
81
+ 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;
81
82
  var data = (0, react_1.useMemo)(function () {
82
83
  var finalData = __spreadArray([], _data, true);
83
- finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[id], color: (colors)[i % (colors).length] })); });
84
+ finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[display], color: (colors)[i % (colors).length] })); });
84
85
  finalData.sort(function (a, b) {
85
86
  return Number(b.value || 0) - Number(a.value || 0);
86
87
  });
87
88
  return finalData;
88
- }, [_data, id, valuePath]);
89
+ }, [_data, display, valuePath]);
89
90
  var _f = (0, react_1.useState)(undefined), activeBar = _f[0], setActiveBar = _f[1];
90
91
  var changeBarOpacityFn = function (name) {
91
92
  return activeBar && activeBar !== name ? 0.4 : 1;
92
93
  };
93
- return (react_1.default.createElement("div", { style: { height: "".concat(80 * data.length, "px"), width: "100%" } },
94
- title && react_1.default.createElement(Typo_1.SANS_4_5, null, title),
94
+ 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" } },
95
+ title && react_1.default.createElement(Typo_1.SANS_4_5, { style: { marginBottom: "1.5rem", marginTop: "-1rem" }, semibold: true }, title),
95
96
  react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
96
97
  react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, data: data, layout: "vertical", margin: {
97
98
  top: 15,
@@ -100,16 +101,16 @@ var PercentBarChart = function (_a) {
100
101
  bottom: 0,
101
102
  } },
102
103
  react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
103
- react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: id }),
104
- 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) {
105
- setActiveBar(args[id]);
106
- onClick(args[id]);
104
+ react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: display }),
105
+ 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) {
106
+ setActiveBar(args[display]);
107
+ onClick(args[display]);
107
108
  } },
108
- react_1.default.createElement(recharts_1.LabelList, { dataKey: id, position: "top", content: function (props) {
109
+ react_1.default.createElement(recharts_1.LabelList, { dataKey: display, position: "top", content: function (props) {
109
110
  return renderCustomizedLabel({
110
111
  y: props.y,
111
112
  value: props.value,
112
- opacity: changeBarOpacityFn(props[id]),
113
+ opacity: changeBarOpacityFn(props[display]),
113
114
  });
114
115
  } }),
115
116
  react_1.default.createElement(recharts_1.LabelList, { dataKey: "value", offset: 0, content: function (props) {
@@ -119,9 +120,9 @@ var PercentBarChart = function (_a) {
119
120
  height: props.height,
120
121
  value: props.value,
121
122
  suffix: "%",
122
- opacity: changeBarOpacityFn(props[id]),
123
+ opacity: changeBarOpacityFn(props[display]),
123
124
  });
124
125
  } }),
125
- 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 })); }))))));
126
+ 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 })); }))))));
126
127
  };
127
128
  exports.PercentBarChart = PercentBarChart;
package/dist/stories/PercentBarChart.stories.js CHANGED
@@ -20,6 +20,6 @@ var PercentBarChart_ = function (args) {
20
20
  console.log("Bar clicked: ".concat(name));
21
21
  };
22
22
  return (react_1.default.createElement("div", null,
23
- react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, id: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
23
+ react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, display: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
24
24
  };
25
25
  exports.PercentBarChart_ = PercentBarChart_;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.115.0",
3
+ "version": "2.116.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",