@lobehub/charts 2.0.0 → 2.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/AccuracyBarChart/index.d.ts +60 -0
- package/es/AccuracyBarChart/index.js +459 -0
- package/es/AccuracyBarChart/styles.d.ts +11 -0
- package/es/AccuracyBarChart/styles.js +18 -0
- package/es/BarChart/index.js +0 -4
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import BaseChartProps from "../common/BaseChartProps";
|
|
3
|
+
export interface AccuracyBarChartProps extends Omit<BaseChartProps, 'categories'> {
|
|
4
|
+
/**
|
|
5
|
+
* Custom accuracy formatter
|
|
6
|
+
*/
|
|
7
|
+
accuracyFormatter?: (value: number) => string;
|
|
8
|
+
/**
|
|
9
|
+
* Gap between bar categories
|
|
10
|
+
*/
|
|
11
|
+
barCategoryGap?: string | number;
|
|
12
|
+
/**
|
|
13
|
+
* Single data category key (e.g., 'accuracy')
|
|
14
|
+
* @default 'accuracy'
|
|
15
|
+
*/
|
|
16
|
+
category?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Color scheme for accuracy levels
|
|
19
|
+
* @default 'gradient'
|
|
20
|
+
*/
|
|
21
|
+
colorScheme?: 'gradient' | 'threshold' | 'uniform';
|
|
22
|
+
/**
|
|
23
|
+
* Error value formatter used in tooltip when displaying value±error
|
|
24
|
+
*/
|
|
25
|
+
errorFormatter?: (value: number) => string;
|
|
26
|
+
/**
|
|
27
|
+
* Error bar data key (e.g., 'error', 'stdDev')
|
|
28
|
+
*/
|
|
29
|
+
errorKey?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Chart layout orientation
|
|
32
|
+
* @default 'vertical'
|
|
33
|
+
*/
|
|
34
|
+
layout?: 'vertical' | 'horizontal';
|
|
35
|
+
/**
|
|
36
|
+
* Show error bars on the right side
|
|
37
|
+
* @default true
|
|
38
|
+
*/
|
|
39
|
+
showErrorBars?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Show accuracy value on the left side
|
|
42
|
+
* @default true
|
|
43
|
+
*/
|
|
44
|
+
showLeftValue?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Show accuracy percentage on bars
|
|
47
|
+
* @default true
|
|
48
|
+
*/
|
|
49
|
+
showPercentage?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Threshold values for color coding (only used with 'threshold' colorScheme)
|
|
52
|
+
*/
|
|
53
|
+
thresholds?: {
|
|
54
|
+
excellent?: number;
|
|
55
|
+
fair?: number;
|
|
56
|
+
good?: number;
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
declare const AccuracyBarChart: import("react").ForwardRefExoticComponent<AccuracyBarChartProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
60
|
+
export default AccuracyBarChart;
|
|
@@ -0,0 +1,459 @@
|
|
|
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;
|
|
5
|
+
var _excluded = ["data", "category", "customCategories", "index", "yAxisAlign", "colors", "valueFormatter", "xAxisLabelFormatter", "layout", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "showPercentage", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "className", "width", "height", "style", "showErrorBars", "errorFormatter", "errorKey", "accuracyFormatter"];
|
|
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 { Skeleton } from 'antd';
|
|
21
|
+
import { css } from 'antd-style';
|
|
22
|
+
import { readableColor } from 'polished';
|
|
23
|
+
import { forwardRef, useMemo, useState } from 'react';
|
|
24
|
+
import { Flexbox } from 'react-layout-kit';
|
|
25
|
+
import { Bar, CartesianGrid, ErrorBar, Label, LabelList, Legend, BarChart as ReChartsBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
|
26
|
+
import ChartLegend from "../common/ChartLegend";
|
|
27
|
+
import ChartTooltip from "../common/ChartTooltip";
|
|
28
|
+
import CustomYAxisTick from "../common/CustomYAxisTick";
|
|
29
|
+
import NoData from "../common/NoData";
|
|
30
|
+
import { constructCategoryColors, deepEqual, getYAxisDomain } from "../common/utils";
|
|
31
|
+
import { useThemeColorRange } from "../hooks/useThemeColorRange";
|
|
32
|
+
import { defaultValueFormatter } from "../utils";
|
|
33
|
+
import { getMaxLabelLength } from "../utils/getMaxLabelLength";
|
|
34
|
+
import { useStyles } from "./styles";
|
|
35
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
36
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
37
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
38
|
+
var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
39
|
+
var _categoryColors$get;
|
|
40
|
+
var _useStyles = useStyles(),
|
|
41
|
+
cx = _useStyles.cx,
|
|
42
|
+
theme = _useStyles.theme,
|
|
43
|
+
styles = _useStyles.styles;
|
|
44
|
+
var themeColorRange = useThemeColorRange();
|
|
45
|
+
var _props$data = props.data,
|
|
46
|
+
data = _props$data === void 0 ? [] : _props$data,
|
|
47
|
+
_props$category = props.category,
|
|
48
|
+
category = _props$category === void 0 ? 'accuracy' : _props$category,
|
|
49
|
+
customCategories = props.customCategories,
|
|
50
|
+
index = props.index,
|
|
51
|
+
_props$yAxisAlign = props.yAxisAlign,
|
|
52
|
+
yAxisAlign = _props$yAxisAlign === void 0 ? 'left' : _props$yAxisAlign,
|
|
53
|
+
_props$colors = props.colors,
|
|
54
|
+
colors = _props$colors === void 0 ? themeColorRange : _props$colors,
|
|
55
|
+
_props$valueFormatter = props.valueFormatter,
|
|
56
|
+
valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
|
|
57
|
+
_props$xAxisLabelForm = props.xAxisLabelFormatter,
|
|
58
|
+
xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
|
|
59
|
+
_props$layout = props.layout,
|
|
60
|
+
layout = _props$layout === void 0 ? 'vertical' : _props$layout,
|
|
61
|
+
_props$startEndOnly = props.startEndOnly,
|
|
62
|
+
startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
|
|
63
|
+
_props$animationDurat = props.animationDuration,
|
|
64
|
+
animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
|
|
65
|
+
_props$showAnimation = props.showAnimation,
|
|
66
|
+
showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
|
|
67
|
+
_props$showXAxis = props.showXAxis,
|
|
68
|
+
showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
|
|
69
|
+
_props$showYAxis = props.showYAxis,
|
|
70
|
+
showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
|
|
71
|
+
yAxisWidth = props.yAxisWidth,
|
|
72
|
+
_props$intervalType = props.intervalType,
|
|
73
|
+
intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
|
|
74
|
+
_props$showTooltip = props.showTooltip,
|
|
75
|
+
showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
|
|
76
|
+
_props$showLegend = props.showLegend,
|
|
77
|
+
showLegend = _props$showLegend === void 0 ? false : _props$showLegend,
|
|
78
|
+
_props$showGridLines = props.showGridLines,
|
|
79
|
+
showGridLines = _props$showGridLines === void 0 ? true : _props$showGridLines,
|
|
80
|
+
_props$autoMinValue = props.autoMinValue,
|
|
81
|
+
autoMinValue = _props$autoMinValue === void 0 ? true : _props$autoMinValue,
|
|
82
|
+
_props$minValue = props.minValue,
|
|
83
|
+
minValue = _props$minValue === void 0 ? 0 : _props$minValue,
|
|
84
|
+
_props$maxValue = props.maxValue,
|
|
85
|
+
maxValue = _props$maxValue === void 0 ? 100 : _props$maxValue,
|
|
86
|
+
_props$allowDecimals = props.allowDecimals,
|
|
87
|
+
allowDecimals = _props$allowDecimals === void 0 ? true : _props$allowDecimals,
|
|
88
|
+
noDataText = props.noDataText,
|
|
89
|
+
onValueChange = props.onValueChange,
|
|
90
|
+
_props$enableLegendSl = props.enableLegendSlider,
|
|
91
|
+
enableLegendSlider = _props$enableLegendSl === void 0 ? false : _props$enableLegendSl,
|
|
92
|
+
_props$showPercentage = props.showPercentage,
|
|
93
|
+
showPercentage = _props$showPercentage === void 0 ? true : _props$showPercentage,
|
|
94
|
+
customTooltip = props.customTooltip,
|
|
95
|
+
rotateLabelX = props.rotateLabelX,
|
|
96
|
+
_props$barCategoryGap = props.barCategoryGap,
|
|
97
|
+
barCategoryGap = _props$barCategoryGap === void 0 ? '20%' : _props$barCategoryGap,
|
|
98
|
+
_props$tickGap = props.tickGap,
|
|
99
|
+
tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
|
|
100
|
+
loading = props.loading,
|
|
101
|
+
xAxisLabel = props.xAxisLabel,
|
|
102
|
+
yAxisLabel = props.yAxisLabel,
|
|
103
|
+
className = props.className,
|
|
104
|
+
_props$width = props.width,
|
|
105
|
+
width = _props$width === void 0 ? '100%' : _props$width,
|
|
106
|
+
_props$height = props.height,
|
|
107
|
+
height = _props$height === void 0 ? 400 : _props$height,
|
|
108
|
+
style = props.style,
|
|
109
|
+
_props$showErrorBars = props.showErrorBars,
|
|
110
|
+
showErrorBars = _props$showErrorBars === void 0 ? true : _props$showErrorBars,
|
|
111
|
+
_props$errorFormatter = props.errorFormatter,
|
|
112
|
+
errorFormatter = _props$errorFormatter === void 0 ? function (value) {
|
|
113
|
+
return value.toFixed(1);
|
|
114
|
+
} : _props$errorFormatter,
|
|
115
|
+
_props$errorKey = props.errorKey,
|
|
116
|
+
errorKey = _props$errorKey === void 0 ? 'error' : _props$errorKey,
|
|
117
|
+
_props$accuracyFormat = props.accuracyFormatter,
|
|
118
|
+
accuracyFormatter = _props$accuracyFormat === void 0 ? function (value) {
|
|
119
|
+
return "".concat(value.toFixed(1), "%");
|
|
120
|
+
} : _props$accuracyFormat,
|
|
121
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
122
|
+
var _useState = useState(),
|
|
123
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
124
|
+
activeBar = _useState2[0],
|
|
125
|
+
setActiveBar = _useState2[1];
|
|
126
|
+
var _useState3 = useState(),
|
|
127
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
128
|
+
activeLegend = _useState4[0],
|
|
129
|
+
setActiveLegend = _useState4[1];
|
|
130
|
+
var _useState5 = useState(60),
|
|
131
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
132
|
+
legendHeight = _useState6[0],
|
|
133
|
+
setLegendHeight = _useState6[1];
|
|
134
|
+
var calculatedYAxisWidth = useMemo(function () {
|
|
135
|
+
if (yAxisWidth) return yAxisWidth;
|
|
136
|
+
return getMaxLabelLength({
|
|
137
|
+
data: data,
|
|
138
|
+
index: index,
|
|
139
|
+
layout: layout,
|
|
140
|
+
valueFormatter: xAxisLabelFormatter
|
|
141
|
+
});
|
|
142
|
+
}, [yAxisWidth, layout, data, xAxisLabelFormatter, index]);
|
|
143
|
+
if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
|
|
144
|
+
active: true,
|
|
145
|
+
block: true,
|
|
146
|
+
style: {
|
|
147
|
+
height: height,
|
|
148
|
+
width: width
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
var CustomTooltip = customTooltip;
|
|
152
|
+
var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
|
|
153
|
+
var categoryColors = constructCategoryColors([category], colors);
|
|
154
|
+
var hasOnValueChange = !!onValueChange;
|
|
155
|
+
var onBarClick = function onBarClick(data, idx, event) {
|
|
156
|
+
event.stopPropagation();
|
|
157
|
+
if (!onValueChange) return;
|
|
158
|
+
if (deepEqual(activeBar, _objectSpread(_objectSpread({}, data.payload), {}, {
|
|
159
|
+
value: data.value
|
|
160
|
+
}))) {
|
|
161
|
+
setActiveLegend(undefined);
|
|
162
|
+
setActiveBar(undefined);
|
|
163
|
+
onValueChange === null || onValueChange === void 0 || onValueChange(null);
|
|
164
|
+
} else {
|
|
165
|
+
var _data$tooltipPayload, _data$tooltipPayload2;
|
|
166
|
+
setActiveLegend((_data$tooltipPayload = data.tooltipPayload) === null || _data$tooltipPayload === void 0 || (_data$tooltipPayload = _data$tooltipPayload[0]) === null || _data$tooltipPayload === void 0 ? void 0 : _data$tooltipPayload.dataKey);
|
|
167
|
+
setActiveBar(_objectSpread(_objectSpread({}, data.payload), {}, {
|
|
168
|
+
value: data.value
|
|
169
|
+
}));
|
|
170
|
+
onValueChange === null || onValueChange === void 0 || onValueChange(_objectSpread({
|
|
171
|
+
categoryClicked: (_data$tooltipPayload2 = data.tooltipPayload) === null || _data$tooltipPayload2 === void 0 || (_data$tooltipPayload2 = _data$tooltipPayload2[0]) === null || _data$tooltipPayload2 === void 0 ? void 0 : _data$tooltipPayload2.dataKey,
|
|
172
|
+
eventType: 'bar'
|
|
173
|
+
}, data.payload));
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
var onCategoryClick = function onCategoryClick(dataKey) {
|
|
177
|
+
if (!hasOnValueChange) return;
|
|
178
|
+
if (dataKey === activeLegend && !activeBar) {
|
|
179
|
+
setActiveLegend(undefined);
|
|
180
|
+
onValueChange === null || onValueChange === void 0 || onValueChange(null);
|
|
181
|
+
} else {
|
|
182
|
+
setActiveLegend(dataKey);
|
|
183
|
+
onValueChange === null || onValueChange === void 0 || onValueChange({
|
|
184
|
+
categoryClicked: dataKey,
|
|
185
|
+
eventType: 'category'
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
setActiveBar(undefined);
|
|
189
|
+
};
|
|
190
|
+
var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
|
|
191
|
+
|
|
192
|
+
// Custom accuracy formatter for display
|
|
193
|
+
var displayFormatter = accuracyFormatter || valueFormatter;
|
|
194
|
+
return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
195
|
+
className: className,
|
|
196
|
+
height: height,
|
|
197
|
+
ref: ref,
|
|
198
|
+
style: _objectSpread({
|
|
199
|
+
position: 'relative'
|
|
200
|
+
}, style),
|
|
201
|
+
width: width
|
|
202
|
+
}, rest), {}, {
|
|
203
|
+
children: /*#__PURE__*/_jsx(ResponsiveContainer, {
|
|
204
|
+
children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsBarChart, {
|
|
205
|
+
barCategoryGap: barCategoryGap,
|
|
206
|
+
data: data,
|
|
207
|
+
layout: layout === 'vertical' ? 'vertical' : 'horizontal',
|
|
208
|
+
margin: {
|
|
209
|
+
bottom: xAxisLabel ? 30 : undefined,
|
|
210
|
+
left: yAxisLabel ? 20 : undefined,
|
|
211
|
+
right: showErrorBars && layout === 'vertical' ? 40 : yAxisLabel ? 5 : undefined,
|
|
212
|
+
top: 5
|
|
213
|
+
},
|
|
214
|
+
onClick: hasOnValueChange && (activeLegend || activeBar) ? function () {
|
|
215
|
+
setActiveBar(undefined);
|
|
216
|
+
setActiveLegend(undefined);
|
|
217
|
+
onValueChange === null || onValueChange === void 0 || onValueChange(null);
|
|
218
|
+
} : undefined,
|
|
219
|
+
children: [showGridLines ? /*#__PURE__*/_jsx(CartesianGrid, {
|
|
220
|
+
className: styles.gridLines,
|
|
221
|
+
horizontal: layout !== 'vertical',
|
|
222
|
+
vertical: layout === 'vertical'
|
|
223
|
+
}) : undefined, layout === 'vertical' ? /*#__PURE__*/_jsx(XAxis, {
|
|
224
|
+
allowDecimals: allowDecimals,
|
|
225
|
+
angle: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle,
|
|
226
|
+
axisLine: false,
|
|
227
|
+
className: styles.label,
|
|
228
|
+
domain: yAxisDomain,
|
|
229
|
+
dy: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.verticalShift,
|
|
230
|
+
fill: "",
|
|
231
|
+
hide: !showXAxis,
|
|
232
|
+
minTickGap: tickGap,
|
|
233
|
+
stroke: "",
|
|
234
|
+
tick: {
|
|
235
|
+
transform: 'translate(-3, 0)'
|
|
236
|
+
},
|
|
237
|
+
tickFormatter: displayFormatter,
|
|
238
|
+
tickLine: false,
|
|
239
|
+
type: "number",
|
|
240
|
+
children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
|
|
241
|
+
className: cx(styles.strongLabel, styles.emphasis),
|
|
242
|
+
offset: -20,
|
|
243
|
+
position: "insideBottom",
|
|
244
|
+
style: {
|
|
245
|
+
fill: theme.colorTextSecondary,
|
|
246
|
+
fontWeight: 500,
|
|
247
|
+
textAnchor: 'middle'
|
|
248
|
+
},
|
|
249
|
+
children: xAxisLabel
|
|
250
|
+
})
|
|
251
|
+
}) : /*#__PURE__*/_jsx(XAxis, {
|
|
252
|
+
angle: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.angle,
|
|
253
|
+
axisLine: false,
|
|
254
|
+
className: styles.label,
|
|
255
|
+
dataKey: index,
|
|
256
|
+
dy: rotateLabelX === null || rotateLabelX === void 0 ? void 0 : rotateLabelX.verticalShift,
|
|
257
|
+
fill: "",
|
|
258
|
+
hide: !showXAxis,
|
|
259
|
+
interval: startEndOnly ? 'preserveStartEnd' : intervalType,
|
|
260
|
+
minTickGap: tickGap,
|
|
261
|
+
padding: {
|
|
262
|
+
left: paddingValue,
|
|
263
|
+
right: paddingValue
|
|
264
|
+
},
|
|
265
|
+
stroke: "",
|
|
266
|
+
tick: {
|
|
267
|
+
transform: 'translate(0, 6)'
|
|
268
|
+
},
|
|
269
|
+
tickFormatter: xAxisLabelFormatter,
|
|
270
|
+
tickLine: false,
|
|
271
|
+
ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
|
|
272
|
+
children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
|
|
273
|
+
className: cx(styles.strongLabel, styles.emphasis),
|
|
274
|
+
offset: -20,
|
|
275
|
+
position: "insideBottom",
|
|
276
|
+
style: {
|
|
277
|
+
fill: theme.colorTextSecondary,
|
|
278
|
+
fontWeight: 500,
|
|
279
|
+
textAnchor: 'middle'
|
|
280
|
+
},
|
|
281
|
+
children: xAxisLabel
|
|
282
|
+
})
|
|
283
|
+
}), layout === 'vertical' ? /*#__PURE__*/_jsx(YAxis, {
|
|
284
|
+
axisLine: false,
|
|
285
|
+
className: styles.label,
|
|
286
|
+
dataKey: index,
|
|
287
|
+
fill: "",
|
|
288
|
+
hide: !showYAxis,
|
|
289
|
+
interval: "preserveStartEnd",
|
|
290
|
+
stroke: "",
|
|
291
|
+
tick: function tick(props) {
|
|
292
|
+
return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
|
|
293
|
+
align: yAxisAlign,
|
|
294
|
+
formatter: xAxisLabelFormatter,
|
|
295
|
+
textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
|
|
296
|
+
yAxisLabel: Boolean(yAxisLabel)
|
|
297
|
+
}));
|
|
298
|
+
},
|
|
299
|
+
tickFormatter: xAxisLabelFormatter,
|
|
300
|
+
tickLine: false,
|
|
301
|
+
ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
|
|
302
|
+
type: "category",
|
|
303
|
+
width: calculatedYAxisWidth,
|
|
304
|
+
children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
|
|
305
|
+
angle: -90,
|
|
306
|
+
className: styles.emphasis,
|
|
307
|
+
offset: -15,
|
|
308
|
+
position: "insideLeft",
|
|
309
|
+
style: {
|
|
310
|
+
fill: theme.colorTextSecondary,
|
|
311
|
+
fontWeight: 500,
|
|
312
|
+
textAnchor: 'middle'
|
|
313
|
+
},
|
|
314
|
+
children: yAxisLabel
|
|
315
|
+
})
|
|
316
|
+
}) : /*#__PURE__*/_jsx(YAxis, {
|
|
317
|
+
allowDecimals: allowDecimals,
|
|
318
|
+
axisLine: false,
|
|
319
|
+
className: styles.label,
|
|
320
|
+
domain: yAxisDomain,
|
|
321
|
+
fill: "",
|
|
322
|
+
hide: !showYAxis,
|
|
323
|
+
stroke: "",
|
|
324
|
+
tick: function tick(props) {
|
|
325
|
+
return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
|
|
326
|
+
align: yAxisAlign,
|
|
327
|
+
formatter: displayFormatter,
|
|
328
|
+
textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
|
|
329
|
+
yAxisLabel: Boolean(yAxisLabel)
|
|
330
|
+
}));
|
|
331
|
+
},
|
|
332
|
+
tickFormatter: displayFormatter,
|
|
333
|
+
tickLine: false,
|
|
334
|
+
type: "number",
|
|
335
|
+
width: calculatedYAxisWidth,
|
|
336
|
+
children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
|
|
337
|
+
angle: -90,
|
|
338
|
+
className: styles.emphasis,
|
|
339
|
+
offset: -15,
|
|
340
|
+
position: "insideLeft",
|
|
341
|
+
style: {
|
|
342
|
+
fill: theme.colorTextSecondary,
|
|
343
|
+
fontWeight: 500,
|
|
344
|
+
textAnchor: 'middle'
|
|
345
|
+
},
|
|
346
|
+
children: yAxisLabel
|
|
347
|
+
})
|
|
348
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
|
349
|
+
content: showTooltip ? function (_ref) {
|
|
350
|
+
var active = _ref.active,
|
|
351
|
+
payload = _ref.payload,
|
|
352
|
+
label = _ref.label;
|
|
353
|
+
return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
|
|
354
|
+
active: active,
|
|
355
|
+
customCategories: customCategories,
|
|
356
|
+
label: label,
|
|
357
|
+
payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
|
|
358
|
+
var record = data.find(function (item) {
|
|
359
|
+
return item[index] === label;
|
|
360
|
+
});
|
|
361
|
+
var errVal = record === null || record === void 0 ? void 0 : record[errorKey];
|
|
362
|
+
var combined = errVal === undefined || errVal === null ? accuracyFormatter(Number(payloadItem.value)) : "".concat(accuracyFormatter(Number(payloadItem.value)), " \xB1 ").concat(errorFormatter(Number(errVal)));
|
|
363
|
+
return _objectSpread(_objectSpread({}, payloadItem), {}, {
|
|
364
|
+
formattedValue: combined
|
|
365
|
+
});
|
|
366
|
+
}),
|
|
367
|
+
valueFormatter: displayFormatter
|
|
368
|
+
}) : /*#__PURE__*/_jsx(ChartTooltip, {
|
|
369
|
+
active: active,
|
|
370
|
+
categoryColors: categoryColors,
|
|
371
|
+
customCategories: customCategories,
|
|
372
|
+
label: label,
|
|
373
|
+
payload: payload,
|
|
374
|
+
valueFormatter: function valueFormatter(val) {
|
|
375
|
+
var record = data.find(function (item) {
|
|
376
|
+
return item[index] === label;
|
|
377
|
+
});
|
|
378
|
+
var errVal = record === null || record === void 0 ? void 0 : record[errorKey];
|
|
379
|
+
if (!showErrorBars || errVal === undefined || errVal === null) return accuracyFormatter(Number(val));
|
|
380
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
381
|
+
children: [accuracyFormatter(Number(val)), /*#__PURE__*/_jsxs("span", {
|
|
382
|
+
style: {
|
|
383
|
+
color: theme.colorTextSecondary
|
|
384
|
+
},
|
|
385
|
+
children: [' ', "\xB1 $", errorFormatter(Number(errVal))]
|
|
386
|
+
})]
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
});
|
|
390
|
+
} : undefined,
|
|
391
|
+
cursor: {
|
|
392
|
+
fill: theme.colorFillTertiary
|
|
393
|
+
},
|
|
394
|
+
isAnimationActive: false,
|
|
395
|
+
position: {
|
|
396
|
+
y: 0
|
|
397
|
+
},
|
|
398
|
+
wrapperStyle: {
|
|
399
|
+
outline: 'none'
|
|
400
|
+
}
|
|
401
|
+
}), showLegend ? /*#__PURE__*/_jsx(Legend, {
|
|
402
|
+
content: function content(_ref2) {
|
|
403
|
+
var payload = _ref2.payload;
|
|
404
|
+
return ChartLegend({
|
|
405
|
+
payload: payload
|
|
406
|
+
}, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
|
|
407
|
+
return onCategoryClick(clickedLegendItem);
|
|
408
|
+
} : undefined, enableLegendSlider, customCategories);
|
|
409
|
+
},
|
|
410
|
+
height: legendHeight,
|
|
411
|
+
verticalAlign: "top"
|
|
412
|
+
}) : undefined, /*#__PURE__*/_jsxs(Bar, {
|
|
413
|
+
animationDuration: animationDuration,
|
|
414
|
+
className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n fill: ", ";\n "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
|
|
415
|
+
dataKey: category,
|
|
416
|
+
fill: '',
|
|
417
|
+
isAnimationActive: showAnimation,
|
|
418
|
+
name: category,
|
|
419
|
+
onClick: onBarClick,
|
|
420
|
+
style: {
|
|
421
|
+
cursor: onValueChange ? 'pointer' : undefined
|
|
422
|
+
},
|
|
423
|
+
type: "linear",
|
|
424
|
+
children: [showPercentage && layout === 'vertical' ? /*#__PURE__*/_jsx(LabelList, {
|
|
425
|
+
content: function content(labelProps) {
|
|
426
|
+
var _categoryColors$get2;
|
|
427
|
+
var lx = labelProps.x,
|
|
428
|
+
ly = labelProps.y,
|
|
429
|
+
lh = labelProps.height,
|
|
430
|
+
value = labelProps.value;
|
|
431
|
+
if (lx === null || lx === undefined || ly === null || ly === undefined || lh === null || lh === undefined) return null;
|
|
432
|
+
return /*#__PURE__*/_jsx("text", {
|
|
433
|
+
className: styles.percentageLabel,
|
|
434
|
+
dominantBaseline: "central",
|
|
435
|
+
style: {
|
|
436
|
+
fill: readableColor((_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)
|
|
437
|
+
},
|
|
438
|
+
x: Number(lx) + 8,
|
|
439
|
+
y: Number(ly) + Number(lh) / 2,
|
|
440
|
+
children: accuracyFormatter(Number(value !== null && value !== void 0 ? value : 0))
|
|
441
|
+
});
|
|
442
|
+
},
|
|
443
|
+
dataKey: category,
|
|
444
|
+
offset: 8,
|
|
445
|
+
position: "insideLeft"
|
|
446
|
+
}) : null, showErrorBars ? /*#__PURE__*/_jsx(ErrorBar, {
|
|
447
|
+
dataKey: errorKey,
|
|
448
|
+
direction: "x",
|
|
449
|
+
stroke: theme.colorTextSecondary
|
|
450
|
+
}) : null]
|
|
451
|
+
}, category)]
|
|
452
|
+
}) : /*#__PURE__*/_jsx(NoData, {
|
|
453
|
+
noDataText: noDataText
|
|
454
|
+
})
|
|
455
|
+
})
|
|
456
|
+
}));
|
|
457
|
+
});
|
|
458
|
+
AccuracyBarChart.displayName = 'AccuracyBarChart';
|
|
459
|
+
export default AccuracyBarChart;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
+
accuracyText: import("antd-style").SerializedStyles;
|
|
3
|
+
accuracyTextLight: import("antd-style").SerializedStyles;
|
|
4
|
+
emphasis: import("antd-style").SerializedStyles;
|
|
5
|
+
gridLines: import("antd-style").SerializedStyles;
|
|
6
|
+
label: import("antd-style").SerializedStyles;
|
|
7
|
+
leftValue: import("antd-style").SerializedStyles;
|
|
8
|
+
leftValueContainer: import("antd-style").SerializedStyles;
|
|
9
|
+
percentageLabel: import("antd-style").SerializedStyles;
|
|
10
|
+
strongLabel: import("antd-style").SerializedStyles;
|
|
11
|
+
}>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
token = _ref.token;
|
|
7
|
+
return {
|
|
8
|
+
accuracyText: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 11px;\n font-weight: 500;\n\n dominant-baseline: central;\n text-anchor: middle;\n fill: ", ";\n "])), token.colorText),
|
|
9
|
+
accuracyTextLight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 11px;\n font-weight: 500;\n\n dominant-baseline: central;\n text-anchor: middle;\n fill: ", ";\n "])), token.colorTextLightSolid),
|
|
10
|
+
emphasis: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
|
|
11
|
+
gridLines: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-width: 1;\n "])), token.colorBorderSecondary),
|
|
12
|
+
label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
|
|
13
|
+
leftValue: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: flex-end;\n\n padding-right: 8px;\n "]))),
|
|
14
|
+
leftValueContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 10;\n top: 0;\n bottom: 0;\n left: 0;\n\n display: flex;\n flex-direction: column;\n\n width: 80px;\n "]))),
|
|
15
|
+
percentageLabel: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 2px 4px;\n border-radius: 4px;\n font-size: 12px;\n "]))),
|
|
16
|
+
strongLabel: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
|
|
17
|
+
};
|
|
18
|
+
});
|
package/es/BarChart/index.js
CHANGED
|
@@ -30,7 +30,6 @@ import { constructCategoryColors, deepEqual, getYAxisDomain } from "../common/ut
|
|
|
30
30
|
import { useThemeColorRange } from "../hooks/useThemeColorRange";
|
|
31
31
|
import { defaultValueFormatter } from "../utils";
|
|
32
32
|
import { getMaxLabelLength } from "../utils/getMaxLabelLength";
|
|
33
|
-
import { renderShape } from "./renderShape";
|
|
34
33
|
import { useStyles } from "./styles";
|
|
35
34
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
36
35
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -383,9 +382,6 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
383
382
|
isAnimationActive: showAnimation,
|
|
384
383
|
name: category,
|
|
385
384
|
onClick: onBarClick,
|
|
386
|
-
shape: function shape(props) {
|
|
387
|
-
return renderShape(props, activeBar, activeLegend, layout);
|
|
388
|
-
},
|
|
389
385
|
stackId: stack ? 'a' : undefined,
|
|
390
386
|
style: {
|
|
391
387
|
cursor: onValueChange ? 'pointer' : undefined
|
package/es/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { default as AccuracyBarChart, type AccuracyBarChartProps } from './AccuracyBarChart';
|
|
1
2
|
export { default as AreaChart, type AreaChartProps } from './AreaChart';
|
|
2
3
|
export { default as BarChart, type BarChartProps } from './BarChart';
|
|
3
4
|
export { type Bar, default as BarList, type BarListProps } from './BarList';
|
package/es/index.js
CHANGED