oolib 2.125.0 → 2.125.2

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 +1 -1
  2. package/dist/components/PercentBarChart/index.js +30 -19
  3. package/dist/stories/PercentBarChart.stories.js +1 -1
  4. package/package.json +1 -1
package/dist/components/PercentBarChart/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors }: {
2
+ export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, }: {
3
3
  data: any;
4
4
  valuePath: string;
5
5
  labelPath: string;
package/dist/components/PercentBarChart/index.js CHANGED
@@ -49,27 +49,29 @@ var recharts_1 = require("recharts");
49
49
  var Typo_1 = require("../Typo");
50
50
  var colors_1 = require("../../themes/colors");
51
51
  var chartColors = [
52
- "#F53D65",
53
- "#666666",
54
- "#EBAF4D",
55
- "#0ACC22",
56
- "#E60000",
57
- "#66DAB0",
58
- "#6A2B99",
59
- "#ff836d",
60
- "#b4a8d0",
61
- "#ff7167",
52
+ "rgb(120, 86, 255)",
53
+ "rgb(255, 117, 86)",
54
+ "rgb(128, 226, 218)",
55
+ "rgb(250, 187, 59)",
56
+ "rgb(173, 89, 108)",
57
+ "rgb(114, 190, 244)",
58
+ "rgb(255, 178, 122)",
59
+ "rgb(14, 126, 161)",
60
+ "rgb(60, 169, 116)",
61
+ "rgb(254, 187, 178)",
62
+ "rgb(204, 128, 217)",
63
+ "rgb(91, 184, 175)",
62
64
  ];
63
65
  var renderCustomizedLabel = function (_a) {
64
66
  var y = _a.y, value = _a.value, opacity = _a.opacity;
65
- var offset = 12;
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));
67
+ var offset = 9;
68
+ 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));
67
69
  };
68
70
  var renderCustomizedValue = function (_a) {
69
71
  var y = _a.y, width = _a.width, height = _a.height, value = _a.value, suffix = _a.suffix, opacity = _a.opacity;
70
- var xOffset = 6;
72
+ var xOffset = 5;
71
73
  var yOffset = 2;
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 || "")));
74
+ 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 || "")));
73
75
  };
74
76
  var _dataSample = [
75
77
  { name: "AAA/A1+", value: 72.3, Type: 0 },
@@ -81,7 +83,7 @@ var PercentBarChart = function (_a) {
81
83
  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;
82
84
  var data = (0, react_1.useMemo)(function () {
83
85
  var finalData = __spreadArray([], _data, true);
84
- finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[labelPath], color: (colors)[i % (colors).length] })); });
86
+ finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[labelPath], color: colors[i % colors.length] })); });
85
87
  finalData.sort(function (a, b) {
86
88
  return Number(b.value || 0) - Number(a.value || 0);
87
89
  });
@@ -92,8 +94,13 @@ var PercentBarChart = function (_a) {
92
94
  return activeBar && activeBar !== name ? 0.4 : 1;
93
95
  };
94
96
  return (react_1.default.createElement("div", { style: { border: "1px solid ".concat(colors_1.colors.greyColor15) } },
95
- title && react_1.default.createElement(Typo_1.SANS_4_5, { style: { padding: "2rem", paddingBottom: "0" }, semibold: true }, title),
96
- react_1.default.createElement("div", { style: { height: "".concat(80 * data.length, "px"), width: "100%", padding: "2rem", paddingTop: 0 } },
97
+ title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { padding: "2rem", paddingBottom: "0" }, semibold: true }, title)),
98
+ react_1.default.createElement("div", { style: {
99
+ height: "".concat(70 * data.length, "px"),
100
+ width: "100%",
101
+ padding: "2rem",
102
+ paddingTop: 0,
103
+ } },
97
104
  react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
98
105
  react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: 20, data: data, layout: "vertical", margin: {
99
106
  top: 15,
@@ -103,10 +110,14 @@ var PercentBarChart = function (_a) {
103
110
  } },
104
111
  react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
105
112
  react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: labelPath }),
106
- react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[labelPath]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
113
+ react_1.default.createElement(recharts_1.Bar, __assign({ radius: [2, 4, 4, 2], style: onClick ? { cursor: "pointer" } : {}, dataKey: "value", unit: "%" }, (onClick ? {
114
+ onMouseOver: function (args) { return setActiveBar(args[labelPath]); },
115
+ onMouseOut: function () { return setActiveBar(undefined); },
116
+ onMouseDown: function (args) {
107
117
  setActiveBar(args[labelPath]);
108
118
  onClick(args[labelPath]);
109
- } },
119
+ }
120
+ } : {})),
110
121
  react_1.default.createElement(recharts_1.LabelList, { dataKey: labelPath, position: "top", content: function (props) {
111
122
  return renderCustomizedLabel({
112
123
  y: props.y,
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, labelPath: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
23
+ react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "name", valuePath: "value", title: "This is PercentBarChart representing the data" })));
24
24
  };
25
25
  exports.PercentBarChart_ = PercentBarChart_;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.125.0",
3
+ "version": "2.125.2",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",