@lobehub/charts 5.0.0 → 5.1.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.
- package/es/ComposedChart/index.d.ts +5 -0
- package/es/ComposedChart/index.js +333 -0
- package/es/ComposedChart/styles.d.ts +6 -0
- package/es/ComposedChart/styles.js +13 -0
- package/es/ComposedChart/types.d.ts +62 -0
- package/es/ComposedChart/types.js +1 -0
- package/es/common/ChartTooltip/index.d.ts +1 -1
- package/es/common/ChartTooltip/index.js +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ComposedChartProps } from './types';
|
|
3
|
+
export type { ComposedChartProps, SeriesItem } from './types';
|
|
4
|
+
declare const ComposedChart: import("react").ForwardRefExoticComponent<ComposedChartProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export default ComposedChart;
|
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _templateObject, _templateObject2;
|
|
5
|
+
var _excluded = ["data", "index", "series", "yAxisLeft", "yAxisRight", "colors", "xAxisLabelFormatter", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "intervalType", "showTooltip", "showLegend", "showGridLines", "allowDecimals", "noDataText", "enableLegendSlider", "rotateLabelX", "tickGap", "loading", "xAxisLabel", "className", "width", "height", "style"];
|
|
6
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
10
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
11
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
12
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
13
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
14
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
15
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
16
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
17
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
18
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
19
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
20
|
+
import { Flexbox, Skeleton } from '@lobehub/ui';
|
|
21
|
+
import { css, cssVar, cx } from 'antd-style';
|
|
22
|
+
import { forwardRef, useMemo, useState } from 'react';
|
|
23
|
+
import { Bar, CartesianGrid, Label, Legend, Line, ComposedChart as ReChartsComposedChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
|
24
|
+
import ChartLegend from "../common/ChartLegend";
|
|
25
|
+
import ChartTooltip from "../common/ChartTooltip";
|
|
26
|
+
import CustomYAxisTick from "../common/CustomYAxisTick";
|
|
27
|
+
import NoData from "../common/NoData";
|
|
28
|
+
import { useThemeColorRange } from "../hooks/useThemeColorRange";
|
|
29
|
+
import { defaultValueFormatter } from "../utils";
|
|
30
|
+
import { getMaxLabelLength } from "../utils/getMaxLabelLength";
|
|
31
|
+
import { styles } from "./styles";
|
|
32
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
33
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
|
+
var ComposedChart = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
35
|
+
var _data$at, _yAxisLeft$valueForma3, _yAxisRight$valueForm3;
|
|
36
|
+
var themeColorRange = useThemeColorRange();
|
|
37
|
+
var _props$data = props.data,
|
|
38
|
+
data = _props$data === void 0 ? [] : _props$data,
|
|
39
|
+
index = props.index,
|
|
40
|
+
_props$series = props.series,
|
|
41
|
+
series = _props$series === void 0 ? [] : _props$series,
|
|
42
|
+
yAxisLeft = props.yAxisLeft,
|
|
43
|
+
yAxisRight = props.yAxisRight,
|
|
44
|
+
_props$colors = props.colors,
|
|
45
|
+
colors = _props$colors === void 0 ? themeColorRange : _props$colors,
|
|
46
|
+
_props$xAxisLabelForm = props.xAxisLabelFormatter,
|
|
47
|
+
xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
|
|
48
|
+
_props$startEndOnly = props.startEndOnly,
|
|
49
|
+
startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
|
|
50
|
+
_props$animationDurat = props.animationDuration,
|
|
51
|
+
animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
|
|
52
|
+
_props$showAnimation = props.showAnimation,
|
|
53
|
+
showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
|
|
54
|
+
_props$showXAxis = props.showXAxis,
|
|
55
|
+
showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
|
|
56
|
+
_props$showYAxis = props.showYAxis,
|
|
57
|
+
showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
|
|
58
|
+
_props$intervalType = props.intervalType,
|
|
59
|
+
intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
|
|
60
|
+
_props$showTooltip = props.showTooltip,
|
|
61
|
+
showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
|
|
62
|
+
_props$showLegend = props.showLegend,
|
|
63
|
+
showLegend = _props$showLegend === void 0 ? true : _props$showLegend,
|
|
64
|
+
_props$showGridLines = props.showGridLines,
|
|
65
|
+
showGridLines = _props$showGridLines === void 0 ? true : _props$showGridLines,
|
|
66
|
+
_props$allowDecimals = props.allowDecimals,
|
|
67
|
+
allowDecimals = _props$allowDecimals === void 0 ? true : _props$allowDecimals,
|
|
68
|
+
noDataText = props.noDataText,
|
|
69
|
+
_props$enableLegendSl = props.enableLegendSlider,
|
|
70
|
+
enableLegendSlider = _props$enableLegendSl === void 0 ? false : _props$enableLegendSl,
|
|
71
|
+
rotateLabelX = props.rotateLabelX,
|
|
72
|
+
_props$tickGap = props.tickGap,
|
|
73
|
+
tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
|
|
74
|
+
loading = props.loading,
|
|
75
|
+
xAxisLabel = props.xAxisLabel,
|
|
76
|
+
className = props.className,
|
|
77
|
+
_props$width = props.width,
|
|
78
|
+
width = _props$width === void 0 ? '100%' : _props$width,
|
|
79
|
+
_props$height = props.height,
|
|
80
|
+
height = _props$height === void 0 ? 280 : _props$height,
|
|
81
|
+
style = props.style,
|
|
82
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
83
|
+
var _useState = useState(60),
|
|
84
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
85
|
+
legendHeight = _useState2[0],
|
|
86
|
+
setLegendHeight = _useState2[1];
|
|
87
|
+
var seriesColorMap = useMemo(function () {
|
|
88
|
+
var map = new Map();
|
|
89
|
+
series.forEach(function (s, i) {
|
|
90
|
+
var _s$color;
|
|
91
|
+
map.set(s.key, (_s$color = s.color) !== null && _s$color !== void 0 ? _s$color : colors[i % colors.length]);
|
|
92
|
+
});
|
|
93
|
+
return map;
|
|
94
|
+
}, [series, colors]);
|
|
95
|
+
var categoryColors = seriesColorMap;
|
|
96
|
+
var customCategories = useMemo(function () {
|
|
97
|
+
return series.reduce(function (acc, item) {
|
|
98
|
+
if (item.name) acc[item.key] = item.name;
|
|
99
|
+
return acc;
|
|
100
|
+
}, {});
|
|
101
|
+
}, [series]);
|
|
102
|
+
var hasRightAxis = series.some(function (s) {
|
|
103
|
+
return s.axis === 'right';
|
|
104
|
+
});
|
|
105
|
+
var leftYAxisWidth = useMemo(function () {
|
|
106
|
+
var _yAxisLeft$valueForma;
|
|
107
|
+
if (yAxisLeft !== null && yAxisLeft !== void 0 && yAxisLeft.width) return yAxisLeft.width;
|
|
108
|
+
var leftFormatter = (_yAxisLeft$valueForma = yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _yAxisLeft$valueForma !== void 0 ? _yAxisLeft$valueForma : defaultValueFormatter;
|
|
109
|
+
return getMaxLabelLength({
|
|
110
|
+
data: data,
|
|
111
|
+
index: index,
|
|
112
|
+
layout: 'horizontal',
|
|
113
|
+
valueFormatter: leftFormatter
|
|
114
|
+
});
|
|
115
|
+
}, [yAxisLeft, data, index]);
|
|
116
|
+
var rightYAxisWidth = useMemo(function () {
|
|
117
|
+
var _yAxisRight$valueForm;
|
|
118
|
+
if (yAxisRight !== null && yAxisRight !== void 0 && yAxisRight.width) return yAxisRight.width;
|
|
119
|
+
var rightFormatter = (_yAxisRight$valueForm = yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter) !== null && _yAxisRight$valueForm !== void 0 ? _yAxisRight$valueForm : defaultValueFormatter;
|
|
120
|
+
return getMaxLabelLength({
|
|
121
|
+
data: data,
|
|
122
|
+
index: index,
|
|
123
|
+
layout: 'horizontal',
|
|
124
|
+
valueFormatter: rightFormatter
|
|
125
|
+
});
|
|
126
|
+
}, [yAxisRight, data, index]);
|
|
127
|
+
if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Block, {
|
|
128
|
+
active: true,
|
|
129
|
+
height: height,
|
|
130
|
+
width: width
|
|
131
|
+
});
|
|
132
|
+
var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
|
|
133
|
+
return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
134
|
+
className: className,
|
|
135
|
+
height: height,
|
|
136
|
+
ref: ref,
|
|
137
|
+
style: _objectSpread({
|
|
138
|
+
position: 'relative'
|
|
139
|
+
}, style),
|
|
140
|
+
width: width
|
|
141
|
+
}, rest), {}, {
|
|
142
|
+
children: /*#__PURE__*/_jsx(ResponsiveContainer, {
|
|
143
|
+
children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsComposedChart, {
|
|
144
|
+
data: data,
|
|
145
|
+
margin: {
|
|
146
|
+
bottom: xAxisLabel ? 30 : undefined,
|
|
147
|
+
left: yAxisLeft !== null && yAxisLeft !== void 0 && yAxisLeft.label ? 20 : undefined,
|
|
148
|
+
right: hasRightAxis ? yAxisRight !== null && yAxisRight !== void 0 && yAxisRight.label ? 20 : 5 : undefined,
|
|
149
|
+
top: 5
|
|
150
|
+
},
|
|
151
|
+
children: [showGridLines && /*#__PURE__*/_jsx(CartesianGrid, {
|
|
152
|
+
className: styles.gridLines,
|
|
153
|
+
horizontal: true,
|
|
154
|
+
vertical: false
|
|
155
|
+
}), /*#__PURE__*/_jsx(XAxis, {
|
|
156
|
+
angle: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle,
|
|
157
|
+
axisLine: false,
|
|
158
|
+
className: styles.label,
|
|
159
|
+
dataKey: index,
|
|
160
|
+
dy: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.verticalShift,
|
|
161
|
+
fill: "",
|
|
162
|
+
hide: !showXAxis,
|
|
163
|
+
interval: startEndOnly ? 'preserveStartEnd' : intervalType,
|
|
164
|
+
minTickGap: tickGap,
|
|
165
|
+
padding: {
|
|
166
|
+
left: paddingValue,
|
|
167
|
+
right: paddingValue
|
|
168
|
+
},
|
|
169
|
+
stroke: "",
|
|
170
|
+
tick: {
|
|
171
|
+
transform: 'translate(0, 6)'
|
|
172
|
+
},
|
|
173
|
+
tickFormatter: xAxisLabelFormatter,
|
|
174
|
+
tickLine: false,
|
|
175
|
+
ticks: startEndOnly ? [data[0][index], (_data$at = data.at(-1)) === null || _data$at === void 0 ? void 0 : _data$at[index]] : undefined,
|
|
176
|
+
children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
|
|
177
|
+
className: cx(styles.strongLabel, styles.emphasis),
|
|
178
|
+
offset: -20,
|
|
179
|
+
position: "insideBottom",
|
|
180
|
+
style: {
|
|
181
|
+
fill: cssVar.colorTextSecondary,
|
|
182
|
+
fontWeight: 500,
|
|
183
|
+
textAnchor: 'middle'
|
|
184
|
+
},
|
|
185
|
+
children: xAxisLabel
|
|
186
|
+
})
|
|
187
|
+
}), /*#__PURE__*/_jsx(YAxis, {
|
|
188
|
+
allowDecimals: allowDecimals,
|
|
189
|
+
axisLine: false,
|
|
190
|
+
className: styles.label,
|
|
191
|
+
fill: "",
|
|
192
|
+
hide: !showYAxis,
|
|
193
|
+
orientation: "left",
|
|
194
|
+
stroke: "",
|
|
195
|
+
tick: function tick(tickProps) {
|
|
196
|
+
var _yAxisLeft$valueForma2;
|
|
197
|
+
return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, tickProps), {}, {
|
|
198
|
+
align: "left",
|
|
199
|
+
formatter: (_yAxisLeft$valueForma2 = yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _yAxisLeft$valueForma2 !== void 0 ? _yAxisLeft$valueForma2 : defaultValueFormatter,
|
|
200
|
+
textAnchor: "end",
|
|
201
|
+
yAxisLabel: Boolean(yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.label)
|
|
202
|
+
}));
|
|
203
|
+
},
|
|
204
|
+
tickFormatter: (_yAxisLeft$valueForma3 = yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _yAxisLeft$valueForma3 !== void 0 ? _yAxisLeft$valueForma3 : defaultValueFormatter,
|
|
205
|
+
tickLine: false,
|
|
206
|
+
type: "number",
|
|
207
|
+
width: leftYAxisWidth,
|
|
208
|
+
yAxisId: "left",
|
|
209
|
+
children: (yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.label) && /*#__PURE__*/_jsx(Label, {
|
|
210
|
+
angle: -90,
|
|
211
|
+
className: styles.emphasis,
|
|
212
|
+
offset: -15,
|
|
213
|
+
position: "insideLeft",
|
|
214
|
+
style: {
|
|
215
|
+
fill: cssVar.colorTextSecondary,
|
|
216
|
+
fontWeight: 500,
|
|
217
|
+
textAnchor: 'middle'
|
|
218
|
+
},
|
|
219
|
+
children: yAxisLeft.label
|
|
220
|
+
})
|
|
221
|
+
}), hasRightAxis && /*#__PURE__*/_jsx(YAxis, {
|
|
222
|
+
allowDecimals: allowDecimals,
|
|
223
|
+
axisLine: false,
|
|
224
|
+
className: styles.label,
|
|
225
|
+
fill: "",
|
|
226
|
+
hide: !showYAxis,
|
|
227
|
+
orientation: "right",
|
|
228
|
+
stroke: "",
|
|
229
|
+
tick: function tick(tickProps) {
|
|
230
|
+
var _yAxisRight$valueForm2;
|
|
231
|
+
return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, tickProps), {}, {
|
|
232
|
+
align: "right",
|
|
233
|
+
formatter: (_yAxisRight$valueForm2 = yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter) !== null && _yAxisRight$valueForm2 !== void 0 ? _yAxisRight$valueForm2 : defaultValueFormatter,
|
|
234
|
+
textAnchor: "start",
|
|
235
|
+
yAxisLabel: Boolean(yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.label)
|
|
236
|
+
}));
|
|
237
|
+
},
|
|
238
|
+
tickFormatter: (_yAxisRight$valueForm3 = yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter) !== null && _yAxisRight$valueForm3 !== void 0 ? _yAxisRight$valueForm3 : defaultValueFormatter,
|
|
239
|
+
tickLine: false,
|
|
240
|
+
type: "number",
|
|
241
|
+
width: rightYAxisWidth,
|
|
242
|
+
yAxisId: "right",
|
|
243
|
+
children: (yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.label) && /*#__PURE__*/_jsx(Label, {
|
|
244
|
+
angle: 90,
|
|
245
|
+
className: styles.emphasis,
|
|
246
|
+
offset: -15,
|
|
247
|
+
position: "insideRight",
|
|
248
|
+
style: {
|
|
249
|
+
fill: cssVar.colorTextSecondary,
|
|
250
|
+
fontWeight: 500,
|
|
251
|
+
textAnchor: 'middle'
|
|
252
|
+
},
|
|
253
|
+
children: yAxisRight.label
|
|
254
|
+
})
|
|
255
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
|
256
|
+
content: showTooltip ? function (_ref) {
|
|
257
|
+
var active = _ref.active,
|
|
258
|
+
payload = _ref.payload,
|
|
259
|
+
label = _ref.label;
|
|
260
|
+
return /*#__PURE__*/_jsx(ChartTooltip, {
|
|
261
|
+
active: active,
|
|
262
|
+
categoryColors: categoryColors,
|
|
263
|
+
customCategories: customCategories,
|
|
264
|
+
label: label,
|
|
265
|
+
payload: payload,
|
|
266
|
+
valueFormatter: function valueFormatter(value, name) {
|
|
267
|
+
var _ref2, _currentSeries$valueF;
|
|
268
|
+
var currentSeries = series.find(function (item) {
|
|
269
|
+
return item.key === name;
|
|
270
|
+
});
|
|
271
|
+
var formatter = (_ref2 = (_currentSeries$valueF = currentSeries === null || currentSeries === void 0 ? void 0 : currentSeries.valueFormatter) !== null && _currentSeries$valueF !== void 0 ? _currentSeries$valueF : (currentSeries === null || currentSeries === void 0 ? void 0 : currentSeries.axis) === 'right' ? yAxisRight === null || yAxisRight === void 0 ? void 0 : yAxisRight.valueFormatter : yAxisLeft === null || yAxisLeft === void 0 ? void 0 : yAxisLeft.valueFormatter) !== null && _ref2 !== void 0 ? _ref2 : defaultValueFormatter;
|
|
272
|
+
return formatter(value);
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
} : undefined,
|
|
276
|
+
cursor: {
|
|
277
|
+
fill: cssVar.colorFillTertiary
|
|
278
|
+
},
|
|
279
|
+
isAnimationActive: false,
|
|
280
|
+
position: {
|
|
281
|
+
y: 0
|
|
282
|
+
},
|
|
283
|
+
wrapperStyle: {
|
|
284
|
+
outline: 'none'
|
|
285
|
+
}
|
|
286
|
+
}), showLegend && /*#__PURE__*/_jsx(Legend, {
|
|
287
|
+
content: function content(_ref3) {
|
|
288
|
+
var payload = _ref3.payload;
|
|
289
|
+
return ChartLegend({
|
|
290
|
+
payload: payload
|
|
291
|
+
}, categoryColors, setLegendHeight, undefined, undefined, enableLegendSlider, customCategories);
|
|
292
|
+
},
|
|
293
|
+
height: legendHeight,
|
|
294
|
+
verticalAlign: "top"
|
|
295
|
+
}), series.map(function (s) {
|
|
296
|
+
var _seriesColorMap$get, _s$axis;
|
|
297
|
+
var color = (_seriesColorMap$get = seriesColorMap.get(s.key)) !== null && _seriesColorMap$get !== void 0 ? _seriesColorMap$get : cssVar.colorPrimary;
|
|
298
|
+
var axisId = (_s$axis = s.axis) !== null && _s$axis !== void 0 ? _s$axis : 'left';
|
|
299
|
+
if (s.type === 'bar') {
|
|
300
|
+
return /*#__PURE__*/_jsx(Bar, {
|
|
301
|
+
animationDuration: animationDuration,
|
|
302
|
+
className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n fill: ", ";\n "])), color)),
|
|
303
|
+
dataKey: s.key,
|
|
304
|
+
fill: "",
|
|
305
|
+
isAnimationActive: showAnimation,
|
|
306
|
+
name: s.key,
|
|
307
|
+
yAxisId: axisId
|
|
308
|
+
}, s.key);
|
|
309
|
+
}
|
|
310
|
+
if (s.type === 'line') {
|
|
311
|
+
return /*#__PURE__*/_jsx(Line, {
|
|
312
|
+
animationDuration: animationDuration,
|
|
313
|
+
className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stroke: ", ";\n "])), color)),
|
|
314
|
+
dataKey: s.key,
|
|
315
|
+
dot: false,
|
|
316
|
+
isAnimationActive: showAnimation,
|
|
317
|
+
name: s.key,
|
|
318
|
+
stroke: "",
|
|
319
|
+
strokeWidth: 2,
|
|
320
|
+
type: "monotone",
|
|
321
|
+
yAxisId: axisId
|
|
322
|
+
}, s.key);
|
|
323
|
+
}
|
|
324
|
+
return null;
|
|
325
|
+
})]
|
|
326
|
+
}) : /*#__PURE__*/_jsx(NoData, {
|
|
327
|
+
noDataText: noDataText
|
|
328
|
+
})
|
|
329
|
+
})
|
|
330
|
+
}));
|
|
331
|
+
});
|
|
332
|
+
ComposedChart.displayName = 'ComposedChart';
|
|
333
|
+
export default ComposedChart;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { createStaticStyles } from 'antd-style';
|
|
4
|
+
export var styles = createStaticStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
cssVar = _ref.cssVar;
|
|
7
|
+
return {
|
|
8
|
+
emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
|
|
9
|
+
gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-width: 1;\n "])), cssVar.colorBorderSecondary),
|
|
10
|
+
label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), cssVar.colorTextDescription),
|
|
11
|
+
strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), cssVar.colorTextSecondary)
|
|
12
|
+
};
|
|
13
|
+
});
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import type { NoDataProps } from "../common/NoData";
|
|
3
|
+
import type { IntervalType, LabelFormatter, ValueFormatter } from "../types/charts";
|
|
4
|
+
import type BaseAnimationTimingProps from '../common/BaseAnimationTimingProps';
|
|
5
|
+
export interface SeriesItem {
|
|
6
|
+
/**
|
|
7
|
+
* Which y-axis this series is bound to.
|
|
8
|
+
* @default 'left'
|
|
9
|
+
*/
|
|
10
|
+
axis?: 'left' | 'right';
|
|
11
|
+
/** Override color for this series. Falls back to the chart-level `colors` array. */
|
|
12
|
+
color?: string;
|
|
13
|
+
/** Data key in the `data` array */
|
|
14
|
+
key: string;
|
|
15
|
+
/** Display name shown in legend / tooltip. Defaults to `key`. */
|
|
16
|
+
name?: string;
|
|
17
|
+
/** Chart type for this series */
|
|
18
|
+
type: 'bar' | 'line';
|
|
19
|
+
/** Per-series value formatter used in tooltip */
|
|
20
|
+
valueFormatter?: ValueFormatter;
|
|
21
|
+
}
|
|
22
|
+
export interface YAxisConfig {
|
|
23
|
+
/** Label string rendered alongside the axis */
|
|
24
|
+
label?: string;
|
|
25
|
+
/** Custom tick formatter */
|
|
26
|
+
valueFormatter?: ValueFormatter;
|
|
27
|
+
/** Fixed axis width in pixels */
|
|
28
|
+
width?: number;
|
|
29
|
+
}
|
|
30
|
+
export interface ComposedChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDivElement> {
|
|
31
|
+
allowDecimals?: boolean;
|
|
32
|
+
colors?: string[];
|
|
33
|
+
data: any[];
|
|
34
|
+
enableLegendSlider?: boolean;
|
|
35
|
+
height?: string | number;
|
|
36
|
+
/** The key in `data` used as the shared x-axis category */
|
|
37
|
+
index: string;
|
|
38
|
+
intervalType?: IntervalType;
|
|
39
|
+
loading?: boolean;
|
|
40
|
+
noDataText?: NoDataProps['noDataText'];
|
|
41
|
+
rotateLabelX?: {
|
|
42
|
+
angle: number;
|
|
43
|
+
verticalShift?: number;
|
|
44
|
+
xAxisHeight?: number;
|
|
45
|
+
};
|
|
46
|
+
/** Series definitions — each item maps to a Bar or Line renderer */
|
|
47
|
+
series: SeriesItem[];
|
|
48
|
+
showGridLines?: boolean;
|
|
49
|
+
showLegend?: boolean;
|
|
50
|
+
showTooltip?: boolean;
|
|
51
|
+
showXAxis?: boolean;
|
|
52
|
+
showYAxis?: boolean;
|
|
53
|
+
startEndOnly?: boolean;
|
|
54
|
+
tickGap?: number;
|
|
55
|
+
width?: string | number;
|
|
56
|
+
xAxisLabel?: string;
|
|
57
|
+
xAxisLabelFormatter?: LabelFormatter;
|
|
58
|
+
/** Left y-axis configuration */
|
|
59
|
+
yAxisLeft?: YAxisConfig;
|
|
60
|
+
/** Right y-axis configuration */
|
|
61
|
+
yAxisRight?: YAxisConfig;
|
|
62
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -9,7 +9,7 @@ export interface ChartTooltipProps {
|
|
|
9
9
|
footer?: ReactNode;
|
|
10
10
|
label: string;
|
|
11
11
|
payload: any;
|
|
12
|
-
valueFormatter: ValueFormatter;
|
|
12
|
+
valueFormatter: ValueFormatter | ((value: number, name?: string) => string);
|
|
13
13
|
}
|
|
14
14
|
declare const ChartTooltip: ({ active, payload, label, categoryColors, valueFormatter, customCategories, footer, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
15
15
|
export default ChartTooltip;
|
|
@@ -53,7 +53,7 @@ var ChartTooltip = function ChartTooltip(_ref2) {
|
|
|
53
53
|
return /*#__PURE__*/_jsx(ChartTooltipRow, {
|
|
54
54
|
color: (_categoryColors$get = categoryColors.get(name)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary,
|
|
55
55
|
name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[name]) || name,
|
|
56
|
-
value: valueFormatter(value)
|
|
56
|
+
value: valueFormatter(value, name)
|
|
57
57
|
}, "id-".concat(idx));
|
|
58
58
|
})
|
|
59
59
|
}), footer]
|
package/es/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export { type Bar, default as BarList, type BarListProps } from './BarList';
|
|
|
5
5
|
export { default as ChartTooltip, type ChartTooltipProps } from './common/ChartTooltip';
|
|
6
6
|
export { default as ChartTooltipFrame } from './common/ChartTooltip/ChartTooltipFrame';
|
|
7
7
|
export { default as ChartTooltipRow } from './common/ChartTooltip/ChartTooltipRow';
|
|
8
|
+
export { default as ComposedChart, type ComposedChartProps, type SeriesItem } from './ComposedChart';
|
|
8
9
|
export * from './DataBars';
|
|
9
10
|
export { default as DonutChart, type DonutChartProps } from './DonutChart';
|
|
10
11
|
export { default as FunnelChart, type FunnelChartProps } from './FunnelChart';
|
package/es/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export { default as BarList } from "./BarList";
|
|
|
5
5
|
export { default as ChartTooltip } from "./common/ChartTooltip";
|
|
6
6
|
export { default as ChartTooltipFrame } from "./common/ChartTooltip/ChartTooltipFrame";
|
|
7
7
|
export { default as ChartTooltipRow } from "./common/ChartTooltip/ChartTooltipRow";
|
|
8
|
+
export { default as ComposedChart } from "./ComposedChart";
|
|
8
9
|
export * from "./DataBars";
|
|
9
10
|
export { default as DonutChart } from "./DonutChart";
|
|
10
11
|
export { default as FunnelChart } from "./FunnelChart";
|