@cashub/ui 0.48.4 → 0.48.6
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.
- package/chart/BarChart.js +12 -1
- package/chart/LineChart.js +10 -2
- package/package.json +1 -1
package/chart/BarChart.js
CHANGED
|
@@ -9,6 +9,7 @@ var _styledComponents = require("styled-components");
|
|
|
9
9
|
var _reactChartjs = require("react-chartjs-2");
|
|
10
10
|
var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
|
|
11
11
|
var _padEmptyChartBar = _interopRequireDefault(require("./utils/padEmptyChartBar"));
|
|
12
|
+
var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
|
|
12
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
15
|
const BarChart = _ref => {
|
|
@@ -27,6 +28,7 @@ const BarChart = _ref => {
|
|
|
27
28
|
_reactChartjs.defaults.plugins.tooltip.external = (0, _customTooltip.default)(theme);
|
|
28
29
|
const customOptions = (0, _react.useMemo)(() => {
|
|
29
30
|
const {
|
|
31
|
+
yAxisTopTitle,
|
|
30
32
|
tooltips = {}
|
|
31
33
|
} = options;
|
|
32
34
|
return {
|
|
@@ -36,6 +38,7 @@ const BarChart = _ref => {
|
|
|
36
38
|
suggestedMax: options.suggestedMax === undefined ? 10 : options.suggestedMax,
|
|
37
39
|
showLegend: options.showLegend === undefined ? false : options.showLegend,
|
|
38
40
|
rotateLabel: options.rotateLabel === undefined ? true : options.rotateLabel,
|
|
41
|
+
yAxisTopTitle: yAxisTopTitle ? yAxisTopTitle : '',
|
|
39
42
|
tooltipLabelPostfix: tooltips.labelPostfix || ''
|
|
40
43
|
};
|
|
41
44
|
}, [options]);
|
|
@@ -82,6 +85,9 @@ const BarChart = _ref => {
|
|
|
82
85
|
return color;
|
|
83
86
|
}
|
|
84
87
|
}
|
|
88
|
+
},
|
|
89
|
+
yAxisTopTitle: {
|
|
90
|
+
title: customOptions.yAxisTopTitle
|
|
85
91
|
}
|
|
86
92
|
},
|
|
87
93
|
scales: {
|
|
@@ -115,6 +121,11 @@ const BarChart = _ref => {
|
|
|
115
121
|
}
|
|
116
122
|
}
|
|
117
123
|
}
|
|
124
|
+
},
|
|
125
|
+
layout: {
|
|
126
|
+
padding: {
|
|
127
|
+
top: 32
|
|
128
|
+
}
|
|
118
129
|
}
|
|
119
130
|
};
|
|
120
131
|
}, [customOptions, theme.fontOnPrimary]);
|
|
@@ -122,7 +133,7 @@ const BarChart = _ref => {
|
|
|
122
133
|
height: height,
|
|
123
134
|
data: data,
|
|
124
135
|
options: defaultOptions,
|
|
125
|
-
plugins: [_padEmptyChartBar.default],
|
|
136
|
+
plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default],
|
|
126
137
|
...props
|
|
127
138
|
});
|
|
128
139
|
};
|
package/chart/LineChart.js
CHANGED
|
@@ -49,6 +49,10 @@ const LineChart = _ref => {
|
|
|
49
49
|
responsive: true,
|
|
50
50
|
maintainAspectRatio: false,
|
|
51
51
|
aspectRatio: 1,
|
|
52
|
+
interaction: {
|
|
53
|
+
mode: 'nearest',
|
|
54
|
+
intersect: false
|
|
55
|
+
},
|
|
52
56
|
plugins: {
|
|
53
57
|
legend: {
|
|
54
58
|
display: customOptions.showLegend
|
|
@@ -57,7 +61,7 @@ const LineChart = _ref => {
|
|
|
57
61
|
enabled: false,
|
|
58
62
|
intersect: false,
|
|
59
63
|
filter(context) {
|
|
60
|
-
return context.
|
|
64
|
+
return context.label !== 'null';
|
|
61
65
|
},
|
|
62
66
|
callbacks: {
|
|
63
67
|
title(context) {
|
|
@@ -65,8 +69,12 @@ const LineChart = _ref => {
|
|
|
65
69
|
return `${customOptions.tooltipTitlePrefix}${content}`;
|
|
66
70
|
},
|
|
67
71
|
label(context) {
|
|
72
|
+
const tooltipLabel = context.dataset.tooltipLabels?.[context.dataIndex];
|
|
73
|
+
if (tooltipLabel !== undefined) {
|
|
74
|
+
return `${context.dataset.label}: ${tooltipLabel}`;
|
|
75
|
+
}
|
|
68
76
|
const content = context.dataset.data[context.dataIndex].toString();
|
|
69
|
-
return `${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}`;
|
|
77
|
+
return `${context.dataset.label}: ${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}`;
|
|
70
78
|
},
|
|
71
79
|
labelColor(context) {
|
|
72
80
|
const {
|