oolib 2.125.0 → 2.125.1
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.
|
@@ -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;
|
|
@@ -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
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
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 =
|
|
66
|
-
return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className:
|
|
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 =
|
|
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:
|
|
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:
|
|
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: {
|
|
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,7 +110,7 @@ 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, { 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) {
|
|
107
114
|
setActiveBar(args[labelPath]);
|
|
108
115
|
onClick(args[labelPath]);
|
|
109
116
|
} },
|