@yamada-ui/charts 1.5.4-dev-20241005224505 → 1.5.4-dev-20241006000212
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/area-chart-gradient.d.mts +1 -1
- package/dist/area-chart-gradient.d.ts +1 -1
- package/dist/area-chart-gradient.js +5 -5
- package/dist/area-chart-gradient.js.map +1 -1
- package/dist/area-chart-gradient.mjs +1 -1
- package/dist/area-chart-split.d.mts +1 -1
- package/dist/area-chart-split.d.ts +1 -1
- package/dist/area-chart-split.js +2 -2
- package/dist/area-chart-split.js.map +1 -1
- package/dist/area-chart-split.mjs +1 -1
- package/dist/area-chart.d.mts +8 -8
- package/dist/area-chart.d.ts +8 -8
- package/dist/area-chart.js +180 -175
- package/dist/area-chart.js.map +1 -1
- package/dist/area-chart.mjs +13 -13
- package/dist/bar-chart.d.mts +8 -8
- package/dist/bar-chart.d.ts +8 -8
- package/dist/bar-chart.js +137 -127
- package/dist/bar-chart.js.map +1 -1
- package/dist/bar-chart.mjs +11 -11
- package/dist/chart-legend.d.mts +1 -1
- package/dist/chart-legend.d.ts +1 -1
- package/dist/chart-legend.js +2 -2
- package/dist/chart-legend.js.map +1 -1
- package/dist/chart-legend.mjs +3 -3
- package/dist/chart-tooltip.d.mts +4 -4
- package/dist/chart-tooltip.d.ts +4 -4
- package/dist/chart-tooltip.js +7 -7
- package/dist/chart-tooltip.js.map +1 -1
- package/dist/chart-tooltip.mjs +3 -3
- package/dist/chart-utils.js.map +1 -1
- package/dist/chart-utils.mjs +1 -1
- package/dist/chart.types.d.mts +14 -14
- package/dist/chart.types.d.ts +14 -14
- package/dist/chart.types.js.map +1 -1
- package/dist/{chunk-YSPGYMRF.mjs → chunk-5VLSGWQD.mjs} +8 -8
- package/dist/{chunk-YSPGYMRF.mjs.map → chunk-5VLSGWQD.mjs.map} +1 -1
- package/dist/{chunk-XYUYAHJX.mjs → chunk-6JRMEI6J.mjs} +2 -2
- package/dist/chunk-6JRMEI6J.mjs.map +1 -0
- package/dist/{chunk-VKBRU4Z4.mjs → chunk-AYVTBRCS.mjs} +29 -28
- package/dist/chunk-AYVTBRCS.mjs.map +1 -0
- package/dist/{chunk-6O5G3WYP.mjs → chunk-EZG52466.mjs} +29 -21
- package/dist/chunk-EZG52466.mjs.map +1 -0
- package/dist/{chunk-VEFEKDMH.mjs → chunk-FDALM73K.mjs} +15 -14
- package/dist/chunk-FDALM73K.mjs.map +1 -0
- package/dist/{chunk-2GQHI23M.mjs → chunk-GU4SGNWX.mjs} +5 -5
- package/dist/chunk-GU4SGNWX.mjs.map +1 -0
- package/dist/{chunk-MVRWZTQ5.mjs → chunk-NLXYCM5J.mjs} +2 -2
- package/dist/chunk-NLXYCM5J.mjs.map +1 -0
- package/dist/{chunk-54WAXZP7.mjs → chunk-NMPNNSBN.mjs} +74 -74
- package/dist/chunk-NMPNNSBN.mjs.map +1 -0
- package/dist/{chunk-OEM3VCHN.mjs → chunk-NQPC5LPY.mjs} +82 -82
- package/dist/chunk-NQPC5LPY.mjs.map +1 -0
- package/dist/{chunk-AYVZF37W.mjs → chunk-OG5CVPPV.mjs} +3 -3
- package/dist/chunk-OG5CVPPV.mjs.map +1 -0
- package/dist/{chunk-X6CD7LHX.mjs → chunk-OUIKA4AX.mjs} +3 -3
- package/dist/{chunk-X6CD7LHX.mjs.map → chunk-OUIKA4AX.mjs.map} +1 -1
- package/dist/{chunk-3EHZJFIA.mjs → chunk-PKQB4BFG.mjs} +28 -28
- package/dist/chunk-PKQB4BFG.mjs.map +1 -0
- package/dist/{chunk-C3ZYUDXE.mjs → chunk-QPMW56KA.mjs} +52 -48
- package/dist/chunk-QPMW56KA.mjs.map +1 -0
- package/dist/{chunk-IJRYXT4V.mjs → chunk-R2LOTDR3.mjs} +2 -2
- package/dist/{chunk-IJRYXT4V.mjs.map → chunk-R2LOTDR3.mjs.map} +1 -1
- package/dist/{chunk-6OYWQ3NO.mjs → chunk-SCY5V45W.mjs} +56 -56
- package/dist/chunk-SCY5V45W.mjs.map +1 -0
- package/dist/{chunk-CQTRL3BW.mjs → chunk-SYBJTMPL.mjs} +90 -90
- package/dist/chunk-SYBJTMPL.mjs.map +1 -0
- package/dist/{chunk-XKVM7WUW.mjs → chunk-TA7YJAW4.mjs} +47 -47
- package/dist/{chunk-XKVM7WUW.mjs.map → chunk-TA7YJAW4.mjs.map} +1 -1
- package/dist/{chunk-O3LMKYXK.mjs → chunk-TU6MKMMV.mjs} +29 -28
- package/dist/chunk-TU6MKMMV.mjs.map +1 -0
- package/dist/{chunk-QL3DB7OJ.mjs → chunk-TXNC7GLT.mjs} +1 -1
- package/dist/{chunk-QL3DB7OJ.mjs.map → chunk-TXNC7GLT.mjs.map} +1 -1
- package/dist/{chunk-EE6KEX6V.mjs → chunk-U325CYNR.mjs} +6 -6
- package/dist/chunk-U325CYNR.mjs.map +1 -0
- package/dist/{chunk-OPPMMNGP.mjs → chunk-UER5GW4M.mjs} +33 -24
- package/dist/chunk-UER5GW4M.mjs.map +1 -0
- package/dist/{chunk-FYAC4RRZ.mjs → chunk-UTD4XZDM.mjs} +11 -10
- package/dist/chunk-UTD4XZDM.mjs.map +1 -0
- package/dist/{chunk-A3IWA366.mjs → chunk-VK65X6Q2.mjs} +4 -4
- package/dist/chunk-VK65X6Q2.mjs.map +1 -0
- package/dist/{chunk-OJ2MLZZ7.mjs → chunk-X6PIY2M3.mjs} +7 -7
- package/dist/chunk-X6PIY2M3.mjs.map +1 -0
- package/dist/{chunk-MSG3WFBO.mjs → chunk-YIAK5DIM.mjs} +7 -6
- package/dist/chunk-YIAK5DIM.mjs.map +1 -0
- package/dist/{chunk-NETTMC2D.mjs → chunk-YTUEG4IY.mjs} +45 -45
- package/dist/chunk-YTUEG4IY.mjs.map +1 -0
- package/dist/{chunk-VUTCH2CU.mjs → chunk-YX23LEQ7.mjs} +13 -13
- package/dist/chunk-YX23LEQ7.mjs.map +1 -0
- package/dist/{chunk-DZL5KQOJ.mjs → chunk-ZRV4LO67.mjs} +42 -42
- package/dist/chunk-ZRV4LO67.mjs.map +1 -0
- package/dist/donut-chart.js +91 -89
- package/dist/donut-chart.js.map +1 -1
- package/dist/donut-chart.mjs +10 -10
- package/dist/index.d.mts +14 -14
- package/dist/index.d.ts +14 -14
- package/dist/index.js +2069 -2043
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -28
- package/dist/index.mjs.map +1 -1
- package/dist/line-chart.d.mts +7 -7
- package/dist/line-chart.d.ts +7 -7
- package/dist/line-chart.js +140 -138
- package/dist/line-chart.js.map +1 -1
- package/dist/line-chart.mjs +11 -11
- package/dist/pie-chart-label.d.mts +9 -9
- package/dist/pie-chart-label.d.ts +9 -9
- package/dist/pie-chart-label.js +14 -13
- package/dist/pie-chart-label.js.map +1 -1
- package/dist/pie-chart-label.mjs +1 -1
- package/dist/pie-chart.d.mts +11 -11
- package/dist/pie-chart.d.ts +11 -11
- package/dist/pie-chart.js +89 -87
- package/dist/pie-chart.js.map +1 -1
- package/dist/pie-chart.mjs +9 -9
- package/dist/radar-chart.d.mts +11 -11
- package/dist/radar-chart.d.ts +11 -11
- package/dist/radar-chart.js +81 -73
- package/dist/radar-chart.js.map +1 -1
- package/dist/radar-chart.mjs +9 -9
- package/dist/radial-chart.d.mts +10 -10
- package/dist/radial-chart.d.ts +10 -10
- package/dist/radial-chart.js +63 -62
- package/dist/radial-chart.js.map +1 -1
- package/dist/radial-chart.mjs +10 -10
- package/dist/use-area-chart.d.mts +53 -53
- package/dist/use-area-chart.d.ts +53 -53
- package/dist/use-area-chart.js +50 -46
- package/dist/use-area-chart.js.map +1 -1
- package/dist/use-area-chart.mjs +2 -2
- package/dist/use-bar-chart.d.mts +32 -32
- package/dist/use-bar-chart.d.ts +32 -32
- package/dist/use-bar-chart.js +30 -21
- package/dist/use-bar-chart.js.map +1 -1
- package/dist/use-bar-chart.mjs +2 -2
- package/dist/use-chart-axis.d.mts +27 -27
- package/dist/use-chart-axis.d.ts +27 -27
- package/dist/use-chart-axis.js +26 -26
- package/dist/use-chart-axis.js.map +1 -1
- package/dist/use-chart-axis.mjs +2 -2
- package/dist/use-chart-grid.d.mts +8 -8
- package/dist/use-chart-grid.d.ts +8 -8
- package/dist/use-chart-grid.js +3 -3
- package/dist/use-chart-grid.js.map +1 -1
- package/dist/use-chart-grid.mjs +2 -2
- package/dist/use-chart-label-list.d.mts +4 -4
- package/dist/use-chart-label-list.d.ts +4 -4
- package/dist/use-chart-label-list.js +5 -4
- package/dist/use-chart-label-list.js.map +1 -1
- package/dist/use-chart-label-list.mjs +2 -2
- package/dist/use-chart-label.d.mts +1 -1
- package/dist/use-chart-label.d.ts +1 -1
- package/dist/use-chart-label.js.map +1 -1
- package/dist/use-chart-label.mjs +2 -2
- package/dist/use-chart-legend.d.mts +1 -1
- package/dist/use-chart-legend.d.ts +1 -1
- package/dist/use-chart-legend.js +1 -1
- package/dist/use-chart-legend.js.map +1 -1
- package/dist/use-chart-legend.mjs +1 -1
- package/dist/use-chart-reference-line.d.mts +4 -4
- package/dist/use-chart-reference-line.d.ts +4 -4
- package/dist/use-chart-reference-line.js +8 -7
- package/dist/use-chart-reference-line.js.map +1 -1
- package/dist/use-chart-reference-line.mjs +2 -2
- package/dist/use-chart-tooltip.d.mts +7 -7
- package/dist/use-chart-tooltip.d.ts +7 -7
- package/dist/use-chart-tooltip.js +4 -4
- package/dist/use-chart-tooltip.js.map +1 -1
- package/dist/use-chart-tooltip.mjs +2 -2
- package/dist/use-chart.d.mts +6 -10
- package/dist/use-chart.d.ts +6 -10
- package/dist/use-chart.js +2 -2
- package/dist/use-chart.js.map +1 -1
- package/dist/use-chart.mjs +2 -2
- package/dist/use-line-chart.d.mts +43 -43
- package/dist/use-line-chart.d.ts +43 -43
- package/dist/use-line-chart.js +26 -25
- package/dist/use-line-chart.js.map +1 -1
- package/dist/use-line-chart.mjs +2 -2
- package/dist/use-pie-chart.d.mts +47 -47
- package/dist/use-pie-chart.d.ts +47 -47
- package/dist/use-pie-chart.js +40 -38
- package/dist/use-pie-chart.js.map +1 -1
- package/dist/use-pie-chart.mjs +3 -3
- package/dist/use-polar-grid.d.mts +5 -5
- package/dist/use-polar-grid.d.ts +5 -5
- package/dist/use-polar-grid.js.map +1 -1
- package/dist/use-polar-grid.mjs +2 -2
- package/dist/use-radar-chart.d.mts +41 -41
- package/dist/use-radar-chart.d.ts +41 -41
- package/dist/use-radar-chart.js +27 -19
- package/dist/use-radar-chart.js.map +1 -1
- package/dist/use-radar-chart.mjs +2 -2
- package/dist/use-radial-chart.d.mts +17 -17
- package/dist/use-radial-chart.d.ts +17 -17
- package/dist/use-radial-chart.js +11 -11
- package/dist/use-radial-chart.js.map +1 -1
- package/dist/use-radial-chart.mjs +2 -2
- package/package.json +3 -3
- package/dist/chunk-2GQHI23M.mjs.map +0 -1
- package/dist/chunk-3EHZJFIA.mjs.map +0 -1
- package/dist/chunk-54WAXZP7.mjs.map +0 -1
- package/dist/chunk-6O5G3WYP.mjs.map +0 -1
- package/dist/chunk-6OYWQ3NO.mjs.map +0 -1
- package/dist/chunk-A3IWA366.mjs.map +0 -1
- package/dist/chunk-AYVZF37W.mjs.map +0 -1
- package/dist/chunk-C3ZYUDXE.mjs.map +0 -1
- package/dist/chunk-CQTRL3BW.mjs.map +0 -1
- package/dist/chunk-DZL5KQOJ.mjs.map +0 -1
- package/dist/chunk-EE6KEX6V.mjs.map +0 -1
- package/dist/chunk-FYAC4RRZ.mjs.map +0 -1
- package/dist/chunk-MSG3WFBO.mjs.map +0 -1
- package/dist/chunk-MVRWZTQ5.mjs.map +0 -1
- package/dist/chunk-NETTMC2D.mjs.map +0 -1
- package/dist/chunk-O3LMKYXK.mjs.map +0 -1
- package/dist/chunk-OEM3VCHN.mjs.map +0 -1
- package/dist/chunk-OJ2MLZZ7.mjs.map +0 -1
- package/dist/chunk-OPPMMNGP.mjs.map +0 -1
- package/dist/chunk-VEFEKDMH.mjs.map +0 -1
- package/dist/chunk-VKBRU4Z4.mjs.map +0 -1
- package/dist/chunk-VUTCH2CU.mjs.map +0 -1
- package/dist/chunk-XYUYAHJX.mjs.map +0 -1
@@ -1,185 +1,185 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useAreaChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-QPMW56KA.mjs";
|
5
5
|
import {
|
6
6
|
AreaGradient
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-U325CYNR.mjs";
|
8
8
|
import {
|
9
9
|
AreaSplit
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-OG5CVPPV.mjs";
|
11
11
|
import {
|
12
12
|
useChartAxis
|
13
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-PKQB4BFG.mjs";
|
14
14
|
import {
|
15
15
|
useChartGrid
|
16
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-GU4SGNWX.mjs";
|
17
17
|
import {
|
18
18
|
useChartReferenceLine
|
19
|
-
} from "./chunk-
|
19
|
+
} from "./chunk-UTD4XZDM.mjs";
|
20
20
|
import {
|
21
21
|
useChartTooltip
|
22
|
-
} from "./chunk-
|
22
|
+
} from "./chunk-X6PIY2M3.mjs";
|
23
23
|
import {
|
24
24
|
useChartLegend
|
25
|
-
} from "./chunk-
|
25
|
+
} from "./chunk-R2LOTDR3.mjs";
|
26
26
|
import {
|
27
27
|
ChartLegend
|
28
|
-
} from "./chunk-
|
28
|
+
} from "./chunk-OUIKA4AX.mjs";
|
29
29
|
import {
|
30
30
|
ChartTooltip
|
31
|
-
} from "./chunk-
|
31
|
+
} from "./chunk-5VLSGWQD.mjs";
|
32
32
|
import {
|
33
33
|
ChartProvider,
|
34
34
|
useChart
|
35
|
-
} from "./chunk-
|
35
|
+
} from "./chunk-VK65X6Q2.mjs";
|
36
36
|
|
37
37
|
// src/area-chart.tsx
|
38
38
|
import {
|
39
|
-
ui,
|
40
39
|
forwardRef,
|
41
|
-
|
42
|
-
|
40
|
+
omitThemeProps,
|
41
|
+
ui,
|
42
|
+
useComponentMultiStyle
|
43
43
|
} from "@yamada-ui/core";
|
44
44
|
import { cx } from "@yamada-ui/utils";
|
45
45
|
import { Fragment, useMemo } from "react";
|
46
46
|
import {
|
47
|
+
Area,
|
47
48
|
CartesianGrid,
|
49
|
+
Label,
|
48
50
|
Legend,
|
49
51
|
AreaChart as ReChartsAreaChart,
|
50
|
-
Area,
|
51
52
|
ReferenceLine,
|
52
53
|
ResponsiveContainer,
|
53
54
|
Tooltip,
|
54
55
|
XAxis,
|
55
|
-
YAxis
|
56
|
-
Label
|
56
|
+
YAxis
|
57
57
|
} from "recharts";
|
58
58
|
import { jsx, jsxs } from "react/jsx-runtime";
|
59
59
|
var AreaChart = forwardRef((props, ref) => {
|
60
60
|
const [styles, mergedProps] = useComponentMultiStyle("AreaChart", props);
|
61
61
|
const {
|
62
|
+
type = "default",
|
62
63
|
className,
|
63
|
-
|
64
|
+
connectNulls,
|
65
|
+
curveType,
|
66
|
+
data,
|
64
67
|
dataKey,
|
68
|
+
fillOpacity,
|
69
|
+
gridAxis,
|
70
|
+
labelFormatter,
|
65
71
|
layoutType,
|
72
|
+
series,
|
73
|
+
splitColors,
|
74
|
+
splitOffset,
|
75
|
+
strokeDasharray,
|
76
|
+
strokeWidth,
|
77
|
+
syncId,
|
66
78
|
tickLine,
|
67
|
-
|
79
|
+
tooltipAnimationDuration,
|
80
|
+
unit,
|
81
|
+
valueFormatter,
|
82
|
+
withActiveDots,
|
83
|
+
withDots,
|
84
|
+
withGradient,
|
85
|
+
withLegend = false,
|
86
|
+
withTooltip = true,
|
68
87
|
withXAxis,
|
69
88
|
withYAxis,
|
70
|
-
xAxisProps,
|
71
|
-
yAxisProps,
|
72
89
|
xAxisLabel,
|
90
|
+
xAxisTickFormatter,
|
73
91
|
yAxisLabel,
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
withTooltip = true,
|
78
|
-
withLegend = false,
|
79
|
-
referenceLineProps = [],
|
92
|
+
yAxisTickFormatter,
|
93
|
+
areaProps,
|
94
|
+
chartProps,
|
80
95
|
containerProps,
|
81
|
-
unit,
|
82
96
|
gridProps,
|
83
|
-
strokeDasharray,
|
84
|
-
yAxisTickFormatter,
|
85
|
-
xAxisTickFormatter,
|
86
|
-
valueFormatter,
|
87
|
-
labelFormatter,
|
88
|
-
tooltipProps,
|
89
|
-
tooltipAnimationDuration,
|
90
97
|
legendProps,
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
curveType,
|
98
|
-
strokeWidth,
|
99
|
-
connectNulls,
|
100
|
-
fillOpacity,
|
101
|
-
splitColors,
|
102
|
-
splitOffset,
|
103
|
-
syncId,
|
98
|
+
referenceLineProps = [],
|
99
|
+
tooltipProps,
|
100
|
+
xAxisLabelProps,
|
101
|
+
xAxisProps,
|
102
|
+
yAxisLabelProps,
|
103
|
+
yAxisProps,
|
104
104
|
...rest
|
105
105
|
} = omitThemeProps(mergedProps);
|
106
106
|
const {
|
107
|
+
areaVars,
|
108
|
+
setHighlightedArea,
|
107
109
|
getAreaChartProps,
|
108
|
-
getAreaSplitProps,
|
109
|
-
getAreaProps,
|
110
110
|
getAreaGradientProps,
|
111
|
-
|
112
|
-
|
111
|
+
getAreaProps,
|
112
|
+
getAreaSplitProps
|
113
113
|
} = useAreaChart({
|
114
|
-
layoutType,
|
115
114
|
type,
|
116
|
-
series,
|
117
|
-
referenceLineProps,
|
118
|
-
data,
|
119
|
-
chartProps,
|
120
|
-
areaProps,
|
121
|
-
withGradient,
|
122
|
-
withDots,
|
123
|
-
withActiveDots,
|
124
|
-
curveType,
|
125
|
-
strokeWidth,
|
126
115
|
connectNulls,
|
116
|
+
curveType,
|
117
|
+
data,
|
127
118
|
fillOpacity,
|
119
|
+
layoutType,
|
120
|
+
series,
|
128
121
|
splitColors,
|
129
122
|
splitOffset,
|
123
|
+
strokeWidth,
|
124
|
+
styles,
|
130
125
|
syncId,
|
126
|
+
withActiveDots,
|
127
|
+
withDots,
|
128
|
+
withGradient,
|
131
129
|
xAxisLabel,
|
132
130
|
yAxisLabel,
|
133
|
-
|
131
|
+
areaProps,
|
132
|
+
chartProps,
|
133
|
+
referenceLineProps
|
134
134
|
});
|
135
135
|
const { getContainerProps } = useChart({ containerProps });
|
136
136
|
const {
|
137
|
-
getXAxisProps,
|
138
|
-
getYAxisProps,
|
139
137
|
getXAxisLabelProps,
|
140
|
-
|
138
|
+
getXAxisProps,
|
139
|
+
getYAxisLabelProps,
|
140
|
+
getYAxisProps
|
141
141
|
} = useChartAxis({
|
142
|
-
dataKey,
|
143
142
|
type,
|
143
|
+
dataKey,
|
144
|
+
gridAxis,
|
144
145
|
layoutType,
|
146
|
+
styles,
|
145
147
|
tickLine,
|
146
|
-
|
148
|
+
unit,
|
147
149
|
withXAxis,
|
148
150
|
withYAxis,
|
149
|
-
xAxisProps,
|
150
|
-
yAxisProps,
|
151
151
|
xAxisLabel,
|
152
|
+
xAxisTickFormatter,
|
152
153
|
yAxisLabel,
|
154
|
+
yAxisTickFormatter,
|
153
155
|
xAxisLabelProps,
|
156
|
+
xAxisProps,
|
154
157
|
yAxisLabelProps,
|
155
|
-
|
156
|
-
yAxisTickFormatter,
|
157
|
-
xAxisTickFormatter,
|
158
|
-
styles
|
158
|
+
yAxisProps
|
159
159
|
});
|
160
160
|
const { getReferenceLineProps } = useChartReferenceLine({
|
161
|
-
|
162
|
-
|
161
|
+
styles,
|
162
|
+
referenceLineProps
|
163
163
|
});
|
164
164
|
const { getGridProps } = useChartGrid({
|
165
|
-
gridProps,
|
166
165
|
gridAxis,
|
167
166
|
strokeDasharray,
|
168
|
-
styles
|
167
|
+
styles,
|
168
|
+
gridProps
|
169
169
|
});
|
170
|
-
const { tooltipProps: computedTooltipProps
|
171
|
-
|
170
|
+
const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
|
171
|
+
styles,
|
172
172
|
tooltipAnimationDuration,
|
173
|
-
|
173
|
+
tooltipProps
|
174
174
|
});
|
175
|
-
const { legendProps: computedLegendProps
|
175
|
+
const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
|
176
176
|
legendProps
|
177
177
|
});
|
178
178
|
const areas = useMemo(
|
179
179
|
() => series.map(({ dataKey: dataKey2 }, index) => {
|
180
180
|
const { id, stroke, ...rest2 } = getAreaProps({
|
181
|
-
|
182
|
-
|
181
|
+
className: "ui-area-chart__area",
|
182
|
+
index
|
183
183
|
});
|
184
184
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
185
185
|
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(AreaGradient, { ...getAreaGradientProps({ id, color: stroke }) }) }),
|
@@ -193,8 +193,8 @@ var AreaChart = forwardRef((props, ref) => {
|
|
193
193
|
ReferenceLine,
|
194
194
|
{
|
195
195
|
...getReferenceLineProps({
|
196
|
-
|
197
|
-
|
196
|
+
className: "ui-area-chart__reference-line",
|
197
|
+
index
|
198
198
|
})
|
199
199
|
},
|
200
200
|
`referenceLine-${index}`
|
@@ -262,10 +262,10 @@ var AreaChart = forwardRef((props, ref) => {
|
|
262
262
|
{
|
263
263
|
className: "ui-area-chart__tooltip",
|
264
264
|
label,
|
265
|
-
payload,
|
266
|
-
valueFormatter,
|
267
265
|
labelFormatter,
|
266
|
+
payload,
|
268
267
|
unit,
|
268
|
+
valueFormatter,
|
269
269
|
...computedTooltipProps
|
270
270
|
}
|
271
271
|
),
|
@@ -289,4 +289,4 @@ AreaChart.__ui__ = "AreaChart";
|
|
289
289
|
export {
|
290
290
|
AreaChart
|
291
291
|
};
|
292
|
-
//# sourceMappingURL=chunk-
|
292
|
+
//# sourceMappingURL=chunk-SYBJTMPL.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/area-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseAreaChartOptions } from \"./use-area-chart\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartAxisOptions } from \"./use-chart-axis\"\nimport type { UseChartGridOptions } from \"./use-chart-grid\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartReferenceLineOptions } from \"./use-chart-reference-line\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\nimport {\n Area,\n CartesianGrid,\n Label,\n Legend,\n AreaChart as ReChartsAreaChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\nimport { AreaGradient } from \"./area-chart-gradient\"\nimport { AreaSplit } from \"./area-chart-split\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { useAreaChart } from \"./use-area-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartAxis } from \"./use-chart-axis\"\nimport { useChartGrid } from \"./use-chart-grid\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartReferenceLine } from \"./use-chart-reference-line\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\n\ninterface AreaChartOptions {\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n}\n\nexport interface AreaChartProps\n extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeDasharray\" | \"strokeWidth\">,\n ThemeProps<\"AreaChart\">,\n AreaChartOptions,\n UseAreaChartOptions,\n UseChartProps,\n UseChartAxisOptions,\n UseChartReferenceLineOptions,\n UseChartGridOptions,\n UseChartTooltipOptions,\n UseChartLegendProps {}\n\n/**\n * `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/area-chart\n */\nexport const AreaChart = forwardRef<AreaChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"AreaChart\", props)\n const {\n type = \"default\",\n className,\n connectNulls,\n curveType,\n data,\n dataKey,\n fillOpacity,\n gridAxis,\n labelFormatter,\n layoutType,\n series,\n splitColors,\n splitOffset,\n strokeDasharray,\n strokeWidth,\n syncId,\n tickLine,\n tooltipAnimationDuration,\n unit,\n valueFormatter,\n withActiveDots,\n withDots,\n withGradient,\n withLegend = false,\n withTooltip = true,\n withXAxis,\n withYAxis,\n xAxisLabel,\n xAxisTickFormatter,\n yAxisLabel,\n yAxisTickFormatter,\n areaProps,\n chartProps,\n containerProps,\n gridProps,\n legendProps,\n referenceLineProps = [],\n tooltipProps,\n xAxisLabelProps,\n xAxisProps,\n yAxisLabelProps,\n yAxisProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n areaVars,\n setHighlightedArea,\n getAreaChartProps,\n getAreaGradientProps,\n getAreaProps,\n getAreaSplitProps,\n } = useAreaChart({\n type,\n connectNulls,\n curveType,\n data,\n fillOpacity,\n layoutType,\n series,\n splitColors,\n splitOffset,\n strokeWidth,\n styles,\n syncId,\n withActiveDots,\n withDots,\n withGradient,\n xAxisLabel,\n yAxisLabel,\n areaProps,\n chartProps,\n referenceLineProps,\n })\n const { getContainerProps } = useChart({ containerProps })\n const {\n getXAxisLabelProps,\n getXAxisProps,\n getYAxisLabelProps,\n getYAxisProps,\n } = useChartAxis({\n type,\n dataKey,\n gridAxis,\n layoutType,\n styles,\n tickLine,\n unit,\n withXAxis,\n withYAxis,\n xAxisLabel,\n xAxisTickFormatter,\n yAxisLabel,\n yAxisTickFormatter,\n xAxisLabelProps,\n xAxisProps,\n yAxisLabelProps,\n yAxisProps,\n })\n const { getReferenceLineProps } = useChartReferenceLine({\n styles,\n referenceLineProps,\n })\n const { getGridProps } = useChartGrid({\n gridAxis,\n strokeDasharray,\n styles,\n gridProps,\n })\n const { getTooltipProps, tooltipProps: computedTooltipProps } =\n useChartTooltip({\n styles,\n tooltipAnimationDuration,\n tooltipProps,\n })\n const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n legendProps,\n })\n\n const areas = useMemo(\n () =>\n series.map(({ dataKey }, index) => {\n const { id, stroke, ...rest } = getAreaProps({\n className: \"ui-area-chart__area\",\n index,\n })\n\n return (\n <Fragment key={`area-${dataKey}`}>\n <defs>\n <AreaGradient {...getAreaGradientProps({ id, color: stroke })} />\n </defs>\n\n <Area id={id} stroke={stroke} {...rest} />\n </Fragment>\n )\n }),\n [getAreaGradientProps, getAreaProps, series],\n )\n\n const referenceLinesItems = useMemo(\n () =>\n referenceLineProps.map((_, index) => (\n <ReferenceLine\n key={`referenceLine-${index}`}\n {...getReferenceLineProps({\n className: \"ui-area-chart__reference-line\",\n index,\n })}\n />\n )),\n [getReferenceLineProps, referenceLineProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-area-chart\", className)}\n __css={{ maxW: \"full\", vars: areaVars, ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-area-chart__container\" })}\n >\n <ReChartsAreaChart\n {...getAreaChartProps({ className: \"ui-area-chart__chart\" })}\n >\n <CartesianGrid\n {...getGridProps({ className: \"ui-area-chart__grid\" })}\n />\n\n <XAxis {...getXAxisProps({ className: \"ui-area-chart__x-axis\" })}>\n <Label\n {...getXAxisLabelProps({\n className: \"ui-area-chart__x-axis-label\",\n })}\n />\n </XAxis>\n\n <YAxis {...getYAxisProps({ className: \"ui-area-chart__y-axis\" })}>\n <Label\n {...getYAxisLabelProps({\n className: \"ui-area-chart__y-axis-label\",\n })}\n />\n </YAxis>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-area-chart__legend\"\n payload={payload}\n onHighlight={setHighlightedArea}\n {...computedLegendProps}\n />\n )}\n {...getLegendProps()}\n />\n ) : null}\n\n {withTooltip ? (\n <Tooltip\n content={({ label, payload }) => (\n <ChartTooltip\n className=\"ui-area-chart__tooltip\"\n label={label}\n labelFormatter={labelFormatter}\n payload={payload}\n unit={unit}\n valueFormatter={valueFormatter}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n\n {type === \"split\" ? (\n <defs>\n <AreaSplit {...getAreaSplitProps()} />\n </defs>\n ) : null}\n\n {areas}\n {referenceLinesItems}\n </ReChartsAreaChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n\nAreaChart.displayName = \"AreaChart\"\nAreaChart.__ui__ = \"AreaChart\"\n"],"mappings":"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","names":["dataKey","rest"]}
|
@@ -1,29 +1,29 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useRadialChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-YX23LEQ7.mjs";
|
5
5
|
import {
|
6
6
|
useChartLabelList
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-YIAK5DIM.mjs";
|
8
8
|
import {
|
9
9
|
usePolarGrid
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-6JRMEI6J.mjs";
|
11
11
|
import {
|
12
12
|
useChartTooltip
|
13
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-X6PIY2M3.mjs";
|
14
14
|
import {
|
15
15
|
useChartLegend
|
16
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-R2LOTDR3.mjs";
|
17
17
|
import {
|
18
18
|
ChartLegend
|
19
|
-
} from "./chunk-
|
19
|
+
} from "./chunk-OUIKA4AX.mjs";
|
20
20
|
import {
|
21
21
|
ChartTooltip
|
22
|
-
} from "./chunk-
|
22
|
+
} from "./chunk-5VLSGWQD.mjs";
|
23
23
|
import {
|
24
24
|
ChartProvider,
|
25
25
|
useChart
|
26
|
-
} from "./chunk-
|
26
|
+
} from "./chunk-VK65X6Q2.mjs";
|
27
27
|
|
28
28
|
// src/radial-chart.tsx
|
29
29
|
import {
|
@@ -35,13 +35,13 @@ import {
|
|
35
35
|
import { cx } from "@yamada-ui/utils";
|
36
36
|
import { useMemo } from "react";
|
37
37
|
import {
|
38
|
-
|
39
|
-
RadialBarChart as RechartsRadialChart,
|
38
|
+
LabelList,
|
40
39
|
Legend,
|
41
|
-
|
40
|
+
PolarGrid,
|
42
41
|
RadialBar,
|
43
|
-
|
44
|
-
|
42
|
+
RadialBarChart as RechartsRadialChart,
|
43
|
+
ResponsiveContainer,
|
44
|
+
Tooltip
|
45
45
|
} from "recharts";
|
46
46
|
import { jsx, jsxs } from "react/jsx-runtime";
|
47
47
|
var RadialChart = forwardRef((props, ref) => {
|
@@ -50,67 +50,67 @@ var RadialChart = forwardRef((props, ref) => {
|
|
50
50
|
className,
|
51
51
|
data,
|
52
52
|
dataKey,
|
53
|
-
|
54
|
-
|
55
|
-
containerProps,
|
56
|
-
withPolarGrid = false,
|
57
|
-
withTooltip = true,
|
58
|
-
withLegend = false,
|
59
|
-
tooltipProps,
|
60
|
-
tooltipAnimationDuration,
|
61
|
-
tooltipDataSource = "all",
|
62
|
-
valueFormatter,
|
63
|
-
unit,
|
64
|
-
legendProps,
|
53
|
+
endAngle,
|
54
|
+
fillOpacity,
|
65
55
|
innerRadius,
|
66
56
|
outerRadius,
|
67
57
|
startAngle,
|
68
|
-
|
69
|
-
|
58
|
+
strokeDasharray,
|
59
|
+
tooltipAnimationDuration,
|
60
|
+
tooltipDataSource = "all",
|
61
|
+
unit,
|
62
|
+
valueFormatter,
|
63
|
+
withLegend = false,
|
64
|
+
withPolarGrid = false,
|
65
|
+
withTooltip = true,
|
66
|
+
chartProps,
|
67
|
+
containerProps,
|
70
68
|
labelListProps = [],
|
69
|
+
legendProps,
|
71
70
|
polarGridProps,
|
72
|
-
|
71
|
+
radialBarProps,
|
72
|
+
tooltipProps,
|
73
73
|
...rest
|
74
74
|
} = omitThemeProps(mergedProps);
|
75
75
|
const {
|
76
|
-
getRadialChartProps,
|
77
|
-
getRadialBarProps,
|
78
76
|
radialVars,
|
79
|
-
setHighlightedArea
|
77
|
+
setHighlightedArea,
|
78
|
+
getRadialBarProps,
|
79
|
+
getRadialChartProps
|
80
80
|
} = useRadialChart({
|
81
81
|
data,
|
82
82
|
dataKey,
|
83
|
-
|
84
|
-
|
85
|
-
radialBarProps,
|
83
|
+
endAngle,
|
84
|
+
fillOpacity,
|
86
85
|
innerRadius,
|
87
86
|
outerRadius,
|
88
87
|
startAngle,
|
89
|
-
|
90
|
-
|
88
|
+
styles,
|
89
|
+
chartProps,
|
90
|
+
radialBarProps
|
91
91
|
});
|
92
92
|
const { getContainerProps } = useChart({ containerProps });
|
93
|
-
const { tooltipProps: computedTooltipProps
|
94
|
-
|
93
|
+
const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
|
94
|
+
styles,
|
95
95
|
tooltipAnimationDuration,
|
96
|
-
|
96
|
+
tooltipProps
|
97
97
|
});
|
98
|
-
const { legendProps: computedLegendProps
|
98
|
+
const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
|
99
99
|
legendProps
|
100
100
|
});
|
101
|
-
const { getLabelLineProps } = useChartLabelList({
|
101
|
+
const { getLabelLineProps } = useChartLabelList({ styles, labelListProps });
|
102
102
|
const { getPolarGridProps } = usePolarGrid({
|
103
|
-
polarGridProps,
|
104
103
|
strokeDasharray,
|
105
|
-
styles
|
104
|
+
styles,
|
105
|
+
polarGridProps
|
106
106
|
});
|
107
107
|
const labelLists = useMemo(
|
108
108
|
() => labelListProps.map((_, index) => /* @__PURE__ */ jsx(
|
109
109
|
LabelList,
|
110
110
|
{
|
111
111
|
...getLabelLineProps({
|
112
|
-
|
113
|
-
|
112
|
+
className: "ui-radial-chart__label-list",
|
113
|
+
index
|
114
114
|
})
|
115
115
|
},
|
116
116
|
`labelList-${index}`
|
@@ -176,8 +176,8 @@ var RadialChart = forwardRef((props, ref) => {
|
|
176
176
|
className: "ui-radial-chart__tooltip",
|
177
177
|
isRadialChart: tooltipDataSource === "segment" ? true : false,
|
178
178
|
payload: tooltipDataSource === "segment" ? payload : data,
|
179
|
-
valueFormatter,
|
180
179
|
unit,
|
180
|
+
valueFormatter,
|
181
181
|
...computedTooltipProps
|
182
182
|
}
|
183
183
|
),
|
@@ -198,4 +198,4 @@ RadialChart.__ui__ = "RadialChart";
|
|
198
198
|
export {
|
199
199
|
RadialChart
|
200
200
|
};
|
201
|
-
//# sourceMappingURL=chunk-
|
201
|
+
//# sourceMappingURL=chunk-TA7YJAW4.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/radial-chart.tsx"],"sourcesContent":["import
|
1
|
+
{"version":3,"sources":["../src/radial-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartLabelListOptions } from \"./use-chart-label-list\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport type { UsePolarGridOptions } from \"./use-polar-grid\"\nimport type { UseRadialChartOptions } from \"./use-radial-chart\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n LabelList,\n Legend,\n PolarGrid,\n RadialBar,\n RadialBarChart as RechartsRadialChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLabelList } from \"./use-chart-label-list\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePolarGrid } from \"./use-polar-grid\"\nimport { useRadialChart } from \"./use-radial-chart\"\n\ninterface RadialChartOptions {\n /**\n * Determines which data is displayed in the tooltip.\n *\n * @default 'all'\n */\n tooltipDataSource?: TooltipDataSourceType\n /**\n * Unit displayed next to each value in tooltip.\n */\n unit?: string\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n /**\n * Determines whether polarGrid should be displayed.\n *\n * @default false\n */\n withPolarGrid?: boolean\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n}\n\nexport interface RadialChartProps\n extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeDasharray\">,\n ThemeProps<\"radialChart\">,\n RadialChartOptions,\n UseRadialChartOptions,\n UseChartTooltipOptions,\n UseChartLegendProps,\n UseChartLabelListOptions,\n UsePolarGridOptions,\n UseChartProps {}\n\n/**\n * `RadialChart` is a component for drawing radial charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/radial-chart\n */\nexport const RadialChart = forwardRef<RadialChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"RadialChart\", props)\n const {\n className,\n data,\n dataKey,\n endAngle,\n fillOpacity,\n innerRadius,\n outerRadius,\n startAngle,\n strokeDasharray,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n unit,\n valueFormatter,\n withLegend = false,\n withPolarGrid = false,\n withTooltip = true,\n chartProps,\n containerProps,\n labelListProps = [],\n legendProps,\n polarGridProps,\n radialBarProps,\n tooltipProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n radialVars,\n setHighlightedArea,\n getRadialBarProps,\n getRadialChartProps,\n } = useRadialChart({\n data,\n dataKey,\n endAngle,\n fillOpacity,\n innerRadius,\n outerRadius,\n startAngle,\n styles,\n chartProps,\n radialBarProps,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { getTooltipProps, tooltipProps: computedTooltipProps } =\n useChartTooltip({\n styles,\n tooltipAnimationDuration,\n tooltipProps,\n })\n const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n legendProps,\n })\n const { getLabelLineProps } = useChartLabelList({ styles, labelListProps })\n const { getPolarGridProps } = usePolarGrid({\n strokeDasharray,\n styles,\n polarGridProps,\n })\n\n const labelLists = useMemo(\n () =>\n labelListProps.map((_, index) => (\n <LabelList\n key={`labelList-${index}`}\n {...getLabelLineProps({\n className: \"ui-radial-chart__label-list\",\n index,\n })}\n />\n )),\n [getLabelLineProps, labelListProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-radial-chart\", className)}\n __css={{ maxW: \"full\", vars: radialVars, ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-radial-chart__container\" })}\n >\n <RechartsRadialChart\n {...getRadialChartProps({\n className: \"ui-radial-chart__chart\",\n })}\n >\n {withPolarGrid ? (\n <PolarGrid\n {...getPolarGridProps({\n className: \"ui-radial-chart__polar-grid\",\n })}\n />\n ) : null}\n\n <RadialBar\n {...getRadialBarProps({\n className: \"ui-radial-chart__radial-bar\",\n })}\n >\n {labelLists}\n </RadialBar>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-radial-chart__legend\"\n payload={payload}\n onHighlight={setHighlightedArea}\n {...computedLegendProps}\n />\n )}\n {...getLegendProps()}\n />\n ) : null}\n\n {withTooltip ? (\n <Tooltip\n content={({ payload }) => (\n <ChartTooltip\n className=\"ui-radial-chart__tooltip\"\n isRadialChart={\n tooltipDataSource === \"segment\" ? true : false\n }\n payload={tooltipDataSource === \"segment\" ? payload : data}\n unit={unit}\n valueFormatter={valueFormatter}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsRadialChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n\nRadialChart.displayName = \"RadialChart\"\nRadialChart.__ui__ = \"RadialChart\"\n"],"mappings":"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","names":[]}
|