@yamada-ui/charts 2.0.0-next-20240820160301 → 2.0.0-next-20240908154823
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +7 -13
- package/dist/area-chart-split.js +4 -2
- package/dist/area-chart-split.js.map +1 -1
- package/dist/area-chart-split.mjs +1 -1
- package/dist/area-chart.d.mts +1 -2
- package/dist/area-chart.d.ts +1 -2
- package/dist/area-chart.js +57 -50
- package/dist/area-chart.js.map +1 -1
- package/dist/area-chart.mjs +12 -12
- package/dist/bar-chart.d.mts +1 -2
- package/dist/bar-chart.d.ts +1 -2
- package/dist/bar-chart.js +15 -9
- package/dist/bar-chart.js.map +1 -1
- package/dist/bar-chart.mjs +11 -11
- package/dist/chart-legend.mjs +3 -3
- package/dist/chart-tooltip.d.mts +3 -1
- package/dist/chart-tooltip.d.ts +3 -1
- package/dist/chart-tooltip.js +9 -1
- package/dist/chart-tooltip.js.map +1 -1
- package/dist/chart-tooltip.mjs +3 -3
- package/dist/chart.types.d.mts +12 -5
- package/dist/chart.types.d.ts +12 -5
- package/dist/chart.types.js.map +1 -1
- package/dist/{chunk-STBYN5JW.mjs → chunk-3AOICU4Q.mjs} +2 -2
- package/dist/chunk-3HQ2UC3I.mjs +45 -0
- package/dist/chunk-3HQ2UC3I.mjs.map +1 -0
- package/dist/{chunk-FALZDKAW.mjs → chunk-3VKCTSPC.mjs} +10 -11
- package/dist/chunk-3VKCTSPC.mjs.map +1 -0
- package/dist/{chunk-S5NKKKV5.mjs → chunk-5PSRSNGH.mjs} +7 -8
- package/dist/chunk-5PSRSNGH.mjs.map +1 -0
- package/dist/{chunk-F34FV5DY.mjs → chunk-6YUJLLGN.mjs} +59 -3
- package/dist/chunk-6YUJLLGN.mjs.map +1 -0
- package/dist/{chunk-KBBHISBO.mjs → chunk-BYL7HWNN.mjs} +13 -14
- package/dist/chunk-BYL7HWNN.mjs.map +1 -0
- package/dist/chunk-D5IRVU4W.mjs +46 -0
- package/dist/chunk-D5IRVU4W.mjs.map +1 -0
- package/dist/{chunk-DGOXJ373.mjs → chunk-EL2VTGFB.mjs} +2 -2
- package/dist/{chunk-6L73M52L.mjs → chunk-FPFCMFCJ.mjs} +7 -9
- package/dist/chunk-FPFCMFCJ.mjs.map +1 -0
- package/dist/{chunk-Q7CCSKX3.mjs → chunk-JTQ5QCML.mjs} +4 -4
- package/dist/chunk-JTQ5QCML.mjs.map +1 -0
- package/dist/chunk-KVE6VXTJ.mjs +37 -0
- package/dist/chunk-KVE6VXTJ.mjs.map +1 -0
- package/dist/{chunk-PNE3JG54.mjs → chunk-MGTMKKSH.mjs} +5 -3
- package/dist/chunk-MGTMKKSH.mjs.map +1 -0
- package/dist/chunk-PG7ZV76C.mjs +155 -0
- package/dist/chunk-PG7ZV76C.mjs.map +1 -0
- package/dist/{chunk-D7EZKGCJ.mjs → chunk-PPBHLDVN.mjs} +2 -2
- package/dist/{chunk-AODYT4HF.mjs → chunk-RKO6KM3T.mjs} +13 -14
- package/dist/chunk-RKO6KM3T.mjs.map +1 -0
- package/dist/chunk-SBPKRYF2.mjs +199 -0
- package/dist/chunk-SBPKRYF2.mjs.map +1 -0
- package/dist/{chunk-FCMP6QEZ.mjs → chunk-SWATR7CU.mjs} +14 -15
- package/dist/chunk-SWATR7CU.mjs.map +1 -0
- package/dist/{chunk-MT5JI4OR.mjs → chunk-T5DNDBW6.mjs} +11 -3
- package/dist/chunk-T5DNDBW6.mjs.map +1 -0
- package/dist/{chunk-5Q6O726L.mjs → chunk-TCSYDMC7.mjs} +2 -2
- package/dist/{chunk-UHQ6WE5D.mjs → chunk-TMHSYM3V.mjs} +17 -13
- package/dist/chunk-TMHSYM3V.mjs.map +1 -0
- package/dist/{chunk-AOGTJ4EN.mjs → chunk-VMBRDEM2.mjs} +2 -2
- package/dist/{chunk-XUAAKVRL.mjs → chunk-WMG5U5AU.mjs} +26 -13
- package/dist/chunk-WMG5U5AU.mjs.map +1 -0
- package/dist/{chunk-6BNJZIBK.mjs → chunk-X7XFG7TS.mjs} +10 -12
- package/dist/chunk-X7XFG7TS.mjs.map +1 -0
- package/dist/{chunk-MOFNE6PO.mjs → chunk-XRF3TNSQ.mjs} +6 -30
- package/dist/chunk-XRF3TNSQ.mjs.map +1 -0
- package/dist/{chunk-VK4VQQYY.mjs → chunk-YNJ423BR.mjs} +2 -2
- package/dist/{chunk-BGMNYKQY.mjs → chunk-ZQWVMOT6.mjs} +9 -7
- package/dist/chunk-ZQWVMOT6.mjs.map +1 -0
- package/dist/donut-chart.d.mts +3 -3
- package/dist/donut-chart.d.ts +3 -3
- package/dist/donut-chart.js +109 -58
- package/dist/donut-chart.js.map +1 -1
- package/dist/donut-chart.mjs +9 -8
- package/dist/index.d.mts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +599 -167
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +30 -22
- package/dist/index.mjs.map +1 -1
- package/dist/line-chart.d.mts +1 -2
- package/dist/line-chart.d.ts +1 -2
- package/dist/line-chart.js +15 -10
- package/dist/line-chart.js.map +1 -1
- package/dist/line-chart.mjs +11 -11
- package/dist/pie-chart.d.mts +2 -3
- package/dist/pie-chart.d.ts +2 -3
- package/dist/pie-chart.js +13 -7
- package/dist/pie-chart.js.map +1 -1
- package/dist/pie-chart.mjs +8 -8
- package/dist/radar-chart.d.mts +3 -3
- package/dist/radar-chart.d.ts +3 -3
- package/dist/radar-chart.js +90 -70
- package/dist/radar-chart.js.map +1 -1
- package/dist/radar-chart.mjs +9 -8
- package/dist/radial-chart.d.mts +53 -0
- package/dist/radial-chart.d.ts +53 -0
- package/dist/radial-chart.js +767 -0
- package/dist/radial-chart.js.map +1 -0
- package/dist/radial-chart.mjs +18 -0
- package/dist/radial-chart.mjs.map +1 -0
- package/dist/rechart-properties.d.mts +5 -1
- package/dist/rechart-properties.d.ts +5 -1
- package/dist/rechart-properties.js +60 -1
- package/dist/rechart-properties.js.map +1 -1
- package/dist/rechart-properties.mjs +7 -1
- package/dist/use-area-chart.d.mts +1 -2
- package/dist/use-area-chart.d.ts +1 -2
- package/dist/use-area-chart.js +7 -9
- package/dist/use-area-chart.js.map +1 -1
- package/dist/use-area-chart.mjs +2 -2
- package/dist/use-bar-chart.d.mts +1 -2
- package/dist/use-bar-chart.d.ts +1 -2
- package/dist/use-bar-chart.js +4 -5
- package/dist/use-bar-chart.js.map +1 -1
- package/dist/use-bar-chart.mjs +2 -2
- package/dist/use-chart-axis.d.mts +0 -1
- package/dist/use-chart-axis.d.ts +0 -1
- package/dist/use-chart-axis.js.map +1 -1
- package/dist/use-chart-axis.mjs +2 -2
- package/dist/use-chart-grid.d.mts +0 -1
- package/dist/use-chart-grid.d.ts +0 -1
- 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 +22 -0
- package/dist/use-chart-label-list.d.ts +22 -0
- package/dist/use-chart-label-list.js +93 -0
- package/dist/use-chart-label-list.js.map +1 -0
- package/dist/use-chart-label-list.mjs +10 -0
- package/dist/use-chart-label-list.mjs.map +1 -0
- package/dist/use-chart-label.d.mts +20 -0
- package/dist/use-chart-label.d.ts +20 -0
- package/dist/use-chart-label.js +82 -0
- package/dist/use-chart-label.js.map +1 -0
- package/dist/use-chart-label.mjs +10 -0
- package/dist/use-chart-label.mjs.map +1 -0
- package/dist/use-chart-legend.d.mts +0 -1
- package/dist/use-chart-legend.d.ts +0 -1
- package/dist/use-chart-legend.js.map +1 -1
- package/dist/use-chart-legend.mjs +2 -2
- package/dist/use-chart-reference-line.d.mts +0 -1
- package/dist/use-chart-reference-line.d.ts +0 -1
- package/dist/use-chart-reference-line.js +1 -1
- 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 +0 -1
- package/dist/use-chart-tooltip.d.ts +0 -1
- package/dist/use-chart-tooltip.js.map +1 -1
- package/dist/use-chart-tooltip.mjs +2 -2
- package/dist/use-chart.d.mts +0 -1
- package/dist/use-chart.d.ts +0 -1
- package/dist/use-chart.js.map +1 -1
- package/dist/use-chart.mjs +2 -2
- package/dist/use-line-chart.d.mts +1 -2
- package/dist/use-line-chart.d.ts +1 -2
- package/dist/use-line-chart.js +4 -6
- package/dist/use-line-chart.js.map +1 -1
- package/dist/use-line-chart.mjs +2 -2
- package/dist/use-pie-chart.d.mts +1 -2
- package/dist/use-pie-chart.d.ts +1 -2
- package/dist/use-pie-chart.js +3 -4
- package/dist/use-pie-chart.js.map +1 -1
- package/dist/use-pie-chart.mjs +2 -2
- package/dist/use-polar-grid.d.mts +24 -0
- package/dist/use-polar-grid.d.ts +24 -0
- package/dist/use-polar-grid.js +90 -0
- package/dist/use-polar-grid.js.map +1 -0
- package/dist/use-polar-grid.mjs +10 -0
- package/dist/use-polar-grid.mjs.map +1 -0
- package/dist/use-radar-chart.d.mts +3 -13
- package/dist/use-radar-chart.d.ts +3 -13
- package/dist/use-radar-chart.js +3 -35
- package/dist/use-radar-chart.js.map +1 -1
- package/dist/use-radar-chart.mjs +2 -2
- package/dist/use-radial-chart.d.mts +80 -0
- package/dist/use-radial-chart.d.ts +80 -0
- package/dist/use-radial-chart.js +228 -0
- package/dist/use-radial-chart.js.map +1 -0
- package/dist/use-radial-chart.mjs +10 -0
- package/dist/use-radial-chart.mjs.map +1 -0
- package/package.json +4 -4
- package/dist/chunk-6BNJZIBK.mjs.map +0 -1
- package/dist/chunk-6L73M52L.mjs.map +0 -1
- package/dist/chunk-AODYT4HF.mjs.map +0 -1
- package/dist/chunk-BGMNYKQY.mjs.map +0 -1
- package/dist/chunk-F34FV5DY.mjs.map +0 -1
- package/dist/chunk-FALZDKAW.mjs.map +0 -1
- package/dist/chunk-FCMP6QEZ.mjs.map +0 -1
- package/dist/chunk-KBBHISBO.mjs.map +0 -1
- package/dist/chunk-MOFNE6PO.mjs.map +0 -1
- package/dist/chunk-MT5JI4OR.mjs.map +0 -1
- package/dist/chunk-PNE3JG54.mjs.map +0 -1
- package/dist/chunk-Q7CCSKX3.mjs.map +0 -1
- package/dist/chunk-S5NKKKV5.mjs.map +0 -1
- package/dist/chunk-UHQ6WE5D.mjs.map +0 -1
- package/dist/chunk-XUAAKVRL.mjs.map +0 -1
- /package/dist/{chunk-STBYN5JW.mjs.map → chunk-3AOICU4Q.mjs.map} +0 -0
- /package/dist/{chunk-DGOXJ373.mjs.map → chunk-EL2VTGFB.mjs.map} +0 -0
- /package/dist/{chunk-D7EZKGCJ.mjs.map → chunk-PPBHLDVN.mjs.map} +0 -0
- /package/dist/{chunk-5Q6O726L.mjs.map → chunk-TCSYDMC7.mjs.map} +0 -0
- /package/dist/{chunk-AOGTJ4EN.mjs.map → chunk-VMBRDEM2.mjs.map} +0 -0
- /package/dist/{chunk-VK4VQQYY.mjs.map → chunk-YNJ423BR.mjs.map} +0 -0
@@ -0,0 +1,199 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
useRadialChart
|
4
|
+
} from "./chunk-PG7ZV76C.mjs";
|
5
|
+
import {
|
6
|
+
useChartLabelList
|
7
|
+
} from "./chunk-D5IRVU4W.mjs";
|
8
|
+
import {
|
9
|
+
usePolarGrid
|
10
|
+
} from "./chunk-3HQ2UC3I.mjs";
|
11
|
+
import {
|
12
|
+
useChartTooltip
|
13
|
+
} from "./chunk-VMBRDEM2.mjs";
|
14
|
+
import {
|
15
|
+
useChartLegend
|
16
|
+
} from "./chunk-TCSYDMC7.mjs";
|
17
|
+
import {
|
18
|
+
ChartLegend
|
19
|
+
} from "./chunk-EL2VTGFB.mjs";
|
20
|
+
import {
|
21
|
+
ChartTooltip
|
22
|
+
} from "./chunk-T5DNDBW6.mjs";
|
23
|
+
import {
|
24
|
+
ChartProvider,
|
25
|
+
useChart
|
26
|
+
} from "./chunk-3AOICU4Q.mjs";
|
27
|
+
|
28
|
+
// src/radial-chart.tsx
|
29
|
+
import {
|
30
|
+
forwardRef,
|
31
|
+
omitThemeProps,
|
32
|
+
ui,
|
33
|
+
useMultiComponentStyle
|
34
|
+
} from "@yamada-ui/core";
|
35
|
+
import { cx } from "@yamada-ui/utils";
|
36
|
+
import { useMemo } from "react";
|
37
|
+
import {
|
38
|
+
ResponsiveContainer,
|
39
|
+
RadialBarChart as RechartsRadialChart,
|
40
|
+
Legend,
|
41
|
+
Tooltip,
|
42
|
+
RadialBar,
|
43
|
+
LabelList,
|
44
|
+
PolarGrid
|
45
|
+
} from "recharts";
|
46
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
47
|
+
var RadialChart = forwardRef((props, ref) => {
|
48
|
+
const [styles, mergedProps] = useMultiComponentStyle("RadialChart", props);
|
49
|
+
const {
|
50
|
+
className,
|
51
|
+
data,
|
52
|
+
dataKey,
|
53
|
+
chartProps,
|
54
|
+
radialBarProps,
|
55
|
+
containerProps,
|
56
|
+
withPolarGrid = false,
|
57
|
+
withTooltip = true,
|
58
|
+
withLegend = false,
|
59
|
+
tooltipProps,
|
60
|
+
tooltipAnimationDuration,
|
61
|
+
tooltipDataSource = "all",
|
62
|
+
valueFormatter,
|
63
|
+
unit,
|
64
|
+
legendProps,
|
65
|
+
innerRadius,
|
66
|
+
outerRadius,
|
67
|
+
startAngle,
|
68
|
+
endAngle,
|
69
|
+
fillOpacity,
|
70
|
+
labelListProps = [],
|
71
|
+
polarGridProps,
|
72
|
+
strokeDasharray,
|
73
|
+
...rest
|
74
|
+
} = omitThemeProps(mergedProps);
|
75
|
+
const {
|
76
|
+
getRadialChartProps,
|
77
|
+
getRadialBarProps,
|
78
|
+
radialVars,
|
79
|
+
setHighlightedArea
|
80
|
+
} = useRadialChart({
|
81
|
+
data,
|
82
|
+
dataKey,
|
83
|
+
styles,
|
84
|
+
chartProps,
|
85
|
+
radialBarProps,
|
86
|
+
innerRadius,
|
87
|
+
outerRadius,
|
88
|
+
startAngle,
|
89
|
+
endAngle,
|
90
|
+
fillOpacity
|
91
|
+
});
|
92
|
+
const { getContainerProps } = useChart({ containerProps });
|
93
|
+
const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
|
94
|
+
tooltipProps,
|
95
|
+
tooltipAnimationDuration,
|
96
|
+
styles
|
97
|
+
});
|
98
|
+
const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
|
99
|
+
legendProps
|
100
|
+
});
|
101
|
+
const { getLabelLineProps } = useChartLabelList({ labelListProps, styles });
|
102
|
+
const { getPolarGridProps } = usePolarGrid({
|
103
|
+
polarGridProps,
|
104
|
+
strokeDasharray,
|
105
|
+
styles
|
106
|
+
});
|
107
|
+
const labelLists = useMemo(
|
108
|
+
() => labelListProps.map((_, index) => /* @__PURE__ */ jsx(
|
109
|
+
LabelList,
|
110
|
+
{
|
111
|
+
...getLabelLineProps({
|
112
|
+
index,
|
113
|
+
className: "ui-radial-chart__label-list"
|
114
|
+
})
|
115
|
+
},
|
116
|
+
`labelList-${index}`
|
117
|
+
)),
|
118
|
+
[getLabelLineProps, labelListProps]
|
119
|
+
);
|
120
|
+
return /* @__PURE__ */ jsx(ChartProvider, { value: { styles }, children: /* @__PURE__ */ jsx(
|
121
|
+
ui.div,
|
122
|
+
{
|
123
|
+
ref,
|
124
|
+
className: cx("ui-radial-chart", className),
|
125
|
+
__css: { maxW: "full", vars: radialVars, ...styles.container },
|
126
|
+
...rest,
|
127
|
+
children: /* @__PURE__ */ jsx(
|
128
|
+
ResponsiveContainer,
|
129
|
+
{
|
130
|
+
...getContainerProps({ className: "ui-radial-chart__container" }),
|
131
|
+
children: /* @__PURE__ */ jsxs(
|
132
|
+
RechartsRadialChart,
|
133
|
+
{
|
134
|
+
...getRadialChartProps({
|
135
|
+
className: "ui-radial-chart__chart"
|
136
|
+
}),
|
137
|
+
children: [
|
138
|
+
withPolarGrid ? /* @__PURE__ */ jsx(
|
139
|
+
PolarGrid,
|
140
|
+
{
|
141
|
+
...getPolarGridProps({
|
142
|
+
className: "ui-radial-chart__polar-grid"
|
143
|
+
})
|
144
|
+
}
|
145
|
+
) : null,
|
146
|
+
/* @__PURE__ */ jsx(
|
147
|
+
RadialBar,
|
148
|
+
{
|
149
|
+
...getRadialBarProps({
|
150
|
+
className: "ui-radial-chart__radial-bar"
|
151
|
+
}),
|
152
|
+
children: labelLists
|
153
|
+
}
|
154
|
+
),
|
155
|
+
withLegend ? /* @__PURE__ */ jsx(
|
156
|
+
Legend,
|
157
|
+
{
|
158
|
+
content: ({ payload }) => /* @__PURE__ */ jsx(
|
159
|
+
ChartLegend,
|
160
|
+
{
|
161
|
+
className: "ui-radial-chart__legend",
|
162
|
+
payload,
|
163
|
+
onHighlight: setHighlightedArea,
|
164
|
+
...computedLegendProps
|
165
|
+
}
|
166
|
+
),
|
167
|
+
...getLegendProps()
|
168
|
+
}
|
169
|
+
) : null,
|
170
|
+
withTooltip ? /* @__PURE__ */ jsx(
|
171
|
+
Tooltip,
|
172
|
+
{
|
173
|
+
content: ({ payload }) => /* @__PURE__ */ jsx(
|
174
|
+
ChartTooltip,
|
175
|
+
{
|
176
|
+
className: "ui-radial-chart__tooltip",
|
177
|
+
isRadialChart: tooltipDataSource === "segment" ? true : false,
|
178
|
+
payload: tooltipDataSource === "segment" ? payload : data,
|
179
|
+
valueFormatter,
|
180
|
+
unit,
|
181
|
+
...computedTooltipProps
|
182
|
+
}
|
183
|
+
),
|
184
|
+
...getTooltipProps()
|
185
|
+
}
|
186
|
+
) : null
|
187
|
+
]
|
188
|
+
}
|
189
|
+
)
|
190
|
+
}
|
191
|
+
)
|
192
|
+
}
|
193
|
+
) });
|
194
|
+
});
|
195
|
+
|
196
|
+
export {
|
197
|
+
RadialChart
|
198
|
+
};
|
199
|
+
//# sourceMappingURL=chunk-SBPKRYF2.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/radial-chart.tsx"],"sourcesContent":["import {\n forwardRef,\n omitThemeProps,\n ui,\n useMultiComponentStyle,\n type HTMLUIProps,\n type ThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n ResponsiveContainer,\n RadialBarChart as RechartsRadialChart,\n Legend,\n Tooltip,\n RadialBar,\n LabelList,\n PolarGrid,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport {\n useChartLabelList,\n type UseChartLabelListOptions,\n} from \"./use-chart-label-list\"\nimport { useChartLegend, type UseChartLegendProps } from \"./use-chart-legend\"\nimport {\n useChartTooltip,\n type UseChartTooltipOptions,\n} from \"./use-chart-tooltip\"\nimport type { UsePolarGridOptions } from \"./use-polar-grid\"\nimport { usePolarGrid } from \"./use-polar-grid\"\nimport { useRadialChart, type UseRadialChartOptions } from \"./use-radial-chart\"\n\ntype RadialChartOptions = {\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\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 * 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\nexport type RadialChartProps = HTMLUIProps<\"div\"> &\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] = useMultiComponentStyle(\"RadialChart\", props)\n const {\n className,\n data,\n dataKey,\n chartProps,\n radialBarProps,\n containerProps,\n withPolarGrid = false,\n withTooltip = true,\n withLegend = false,\n tooltipProps,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n valueFormatter,\n unit,\n legendProps,\n innerRadius,\n outerRadius,\n startAngle,\n endAngle,\n fillOpacity,\n labelListProps = [],\n polarGridProps,\n strokeDasharray,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n getRadialChartProps,\n getRadialBarProps,\n radialVars,\n setHighlightedArea,\n } = useRadialChart({\n data,\n dataKey,\n styles,\n chartProps,\n radialBarProps,\n innerRadius,\n outerRadius,\n startAngle,\n endAngle,\n fillOpacity,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { tooltipProps: computedTooltipProps, getTooltipProps } =\n useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n const { getLabelLineProps } = useChartLabelList({ labelListProps, styles })\n const { getPolarGridProps } = usePolarGrid({\n polarGridProps,\n strokeDasharray,\n styles,\n })\n\n const labelLists = useMemo(\n () =>\n labelListProps.map((_, index) => (\n <LabelList\n key={`labelList-${index}`}\n {...getLabelLineProps({\n index,\n className: \"ui-radial-chart__label-list\",\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 valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsRadialChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAmIC,cAsBE,YAtBF;AAlED,IAAM,cAAc,WAAoC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,eAAe,KAAK;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,CAAC;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,kBAAkB,IAAI,SAAS,EAAE,eAAe,CAAC;AACzD,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,IAC1D,gBAAgB;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,EAAE,aAAa,qBAAqB,eAAe,IAAI,eAAe;AAAA,IAC1E;AAAA,EACF,CAAC;AACD,QAAM,EAAE,kBAAkB,IAAI,kBAAkB,EAAE,gBAAgB,OAAO,CAAC;AAC1E,QAAM,EAAE,kBAAkB,IAAI,aAAa;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa;AAAA,IACjB,MACE,eAAe,IAAI,CAAC,GAAG,UACrB;AAAA,MAAC;AAAA;AAAA,QAEE,GAAG,kBAAkB;AAAA,UACpB;AAAA,UACA,WAAW;AAAA,QACb,CAAC;AAAA;AAAA,MAJI,aAAa,KAAK;AAAA,IAKzB,CACD;AAAA,IACH,CAAC,mBAAmB,cAAc;AAAA,EACpC;AAEA,SACE,oBAAC,iBAAc,OAAO,EAAE,OAAO,GAC7B;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAC1C,OAAO,EAAE,MAAM,QAAQ,MAAM,YAAY,GAAG,OAAO,UAAU;AAAA,MAC5D,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,kBAAkB,EAAE,WAAW,6BAA6B,CAAC;AAAA,UAEjE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,oBAAoB;AAAA,gBACtB,WAAW;AAAA,cACb,CAAC;AAAA,cAEA;AAAA,gCACC;AAAA,kBAAC;AAAA;AAAA,oBACE,GAAG,kBAAkB;AAAA,sBACpB,WAAW;AAAA,oBACb,CAAC;AAAA;AAAA,gBACH,IACE;AAAA,gBAEJ;AAAA,kBAAC;AAAA;AAAA,oBACE,GAAG,kBAAkB;AAAA,sBACpB,WAAW;AAAA,oBACb,CAAC;AAAA,oBAEA;AAAA;AAAA,gBACH;AAAA,gBAEC,aACC;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS,CAAC,EAAE,QAAQ,MAClB;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV;AAAA,wBACA,aAAa;AAAA,wBACZ,GAAG;AAAA;AAAA,oBACN;AAAA,oBAED,GAAG,eAAe;AAAA;AAAA,gBACrB,IACE;AAAA,gBAEH,cACC;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS,CAAC,EAAE,QAAQ,MAClB;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,eACE,sBAAsB,YAAY,OAAO;AAAA,wBAE3C,SAAS,sBAAsB,YAAY,UAAU;AAAA,wBACrD;AAAA,wBACA;AAAA,wBACC,GAAG;AAAA;AAAA,oBACN;AAAA,oBAED,GAAG,gBAAgB;AAAA;AAAA,gBACtB,IACE;AAAA;AAAA;AAAA,UACN;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;","names":[]}
|
@@ -1,38 +1,38 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useAreaChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-X7XFG7TS.mjs";
|
5
5
|
import {
|
6
6
|
AreaGradient
|
7
7
|
} from "./chunk-MSIOYYWR.mjs";
|
8
8
|
import {
|
9
9
|
AreaSplit
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-MGTMKKSH.mjs";
|
11
11
|
import {
|
12
12
|
useChartAxis
|
13
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-YNJ423BR.mjs";
|
14
14
|
import {
|
15
15
|
useChartGrid
|
16
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-PPBHLDVN.mjs";
|
17
17
|
import {
|
18
18
|
useChartReferenceLine
|
19
|
-
} from "./chunk-
|
20
|
-
import {
|
21
|
-
useChartLegend
|
22
|
-
} from "./chunk-5Q6O726L.mjs";
|
19
|
+
} from "./chunk-JTQ5QCML.mjs";
|
23
20
|
import {
|
24
21
|
useChartTooltip
|
25
|
-
} from "./chunk-
|
22
|
+
} from "./chunk-VMBRDEM2.mjs";
|
23
|
+
import {
|
24
|
+
useChartLegend
|
25
|
+
} from "./chunk-TCSYDMC7.mjs";
|
26
26
|
import {
|
27
27
|
ChartLegend
|
28
|
-
} from "./chunk-
|
28
|
+
} from "./chunk-EL2VTGFB.mjs";
|
29
29
|
import {
|
30
30
|
ChartTooltip
|
31
|
-
} from "./chunk-
|
31
|
+
} from "./chunk-T5DNDBW6.mjs";
|
32
32
|
import {
|
33
33
|
ChartProvider,
|
34
34
|
useChart
|
35
|
-
} from "./chunk-
|
35
|
+
} from "./chunk-3AOICU4Q.mjs";
|
36
36
|
|
37
37
|
// src/area-chart.tsx
|
38
38
|
import {
|
@@ -206,8 +206,7 @@ var AreaChart = forwardRef((props, ref) => {
|
|
206
206
|
{
|
207
207
|
ref,
|
208
208
|
className: cx("ui-area-chart", className),
|
209
|
-
|
210
|
-
__css: { ...styles.container },
|
209
|
+
__css: { maxW: "full", vars: areaVars, ...styles.container },
|
211
210
|
...rest,
|
212
211
|
children: /* @__PURE__ */ jsx(
|
213
212
|
ResponsiveContainer,
|
@@ -288,4 +287,4 @@ var AreaChart = forwardRef((props, ref) => {
|
|
288
287
|
export {
|
289
288
|
AreaChart
|
290
289
|
};
|
291
|
-
//# sourceMappingURL=chunk-
|
290
|
+
//# sourceMappingURL=chunk-SWATR7CU.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/area-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\nimport {\n CartesianGrid,\n Legend,\n AreaChart as ReChartsAreaChart,\n Area,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n Label,\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 type { UseAreaChartOptions } from \"./use-area-chart\"\nimport { useAreaChart } from \"./use-area-chart\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport type { UseChartAxisOptions } from \"./use-chart-axis\"\nimport { useChartAxis } from \"./use-chart-axis\"\nimport type { UseChartGridOptions } from \"./use-chart-grid\"\nimport { useChartGrid } from \"./use-chart-grid\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport type { UseChartReferenceLineOptions } from \"./use-chart-reference-line\"\nimport { useChartReferenceLine } from \"./use-chart-reference-line\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\n\ntype AreaChartOptions = {\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n}\n\nexport type AreaChartProps = HTMLUIProps<\"div\"> &\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] = useMultiComponentStyle(\"AreaChart\", props)\n const {\n className,\n series,\n dataKey,\n layoutType,\n tickLine,\n gridAxis,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n xAxisLabel,\n yAxisLabel,\n xAxisLabelProps,\n yAxisLabelProps,\n type = \"default\",\n withTooltip = true,\n withLegend = false,\n referenceLineProps = [],\n containerProps,\n unit,\n gridProps,\n strokeDasharray,\n yAxisTickFormatter,\n xAxisTickFormatter,\n valueFormatter,\n labelFormatter,\n tooltipProps,\n tooltipAnimationDuration,\n legendProps,\n data,\n chartProps,\n areaProps,\n withGradient,\n withDots,\n withActiveDots,\n curveType,\n strokeWidth,\n connectNulls,\n fillOpacity,\n splitColors,\n splitOffset,\n syncId,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n getAreaChartProps,\n getAreaSplitProps,\n getAreaProps,\n getAreaGradientProps,\n areaVars,\n setHighlightedArea,\n } = useAreaChart({\n layoutType,\n type,\n series,\n referenceLineProps,\n data,\n chartProps,\n areaProps,\n withGradient,\n withDots,\n withActiveDots,\n curveType,\n strokeWidth,\n connectNulls,\n fillOpacity,\n splitColors,\n splitOffset,\n syncId,\n xAxisLabel,\n yAxisLabel,\n styles,\n })\n const { getContainerProps } = useChart({ containerProps })\n const {\n getXAxisProps,\n getYAxisProps,\n getXAxisLabelProps,\n getYAxisLabelProps,\n } = useChartAxis({\n dataKey,\n type,\n layoutType,\n tickLine,\n gridAxis,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n xAxisLabel,\n yAxisLabel,\n xAxisLabelProps,\n yAxisLabelProps,\n unit,\n yAxisTickFormatter,\n xAxisTickFormatter,\n styles,\n })\n const { getReferenceLineProps } = useChartReferenceLine({\n referenceLineProps,\n styles,\n })\n const { getGridProps } = useChartGrid({\n gridProps,\n gridAxis,\n strokeDasharray,\n styles,\n })\n const { tooltipProps: computedTooltipProps, getTooltipProps } =\n useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n\n const areas = useMemo(\n () =>\n series.map(({ dataKey }, index) => {\n const { id, stroke, ...rest } = getAreaProps({\n index,\n className: \"ui-area-chart__area\",\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 index,\n className: \"ui-area-chart__reference-line\",\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 payload={payload}\n valueFormatter={valueFormatter}\n labelFormatter={labelFormatter}\n unit={unit}\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"],"mappings":"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","names":["dataKey","rest"]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useTooltip
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-3AOICU4Q.mjs";
|
5
5
|
|
6
6
|
// src/chart-tooltip.tsx
|
7
7
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -10,18 +10,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
var ChartTooltip = forwardRef(
|
11
11
|
({
|
12
12
|
label,
|
13
|
+
dataKey = "value",
|
13
14
|
className,
|
14
15
|
payload = [],
|
15
16
|
valueFormatter,
|
16
17
|
labelFormatter,
|
17
18
|
unit,
|
19
|
+
isRadialChart,
|
18
20
|
...rest
|
19
21
|
}, ref) => {
|
20
22
|
var _a;
|
21
23
|
const { styles } = useTooltip();
|
22
24
|
const items = payload.map(
|
23
|
-
({
|
25
|
+
({
|
26
|
+
color: colorProp,
|
27
|
+
name: nameProp,
|
28
|
+
[dataKey]: valueProp,
|
29
|
+
payload: payload2
|
30
|
+
} = {}, index) => {
|
24
31
|
var _a2;
|
32
|
+
const name = isRadialChart ? payload2 == null ? void 0 : payload2.name : nameProp;
|
25
33
|
const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
|
26
34
|
let value;
|
27
35
|
if (isArray(valueProp)) {
|
@@ -90,4 +98,4 @@ var ChartTooltip = forwardRef(
|
|
90
98
|
export {
|
91
99
|
ChartTooltip
|
92
100
|
};
|
93
|
-
//# sourceMappingURL=chunk-
|
101
|
+
//# sourceMappingURL=chunk-T5DNDBW6.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/chart-tooltip.tsx"],"sourcesContent":["import { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, isArray, type Dict } from \"@yamada-ui/utils\"\nimport { useTooltip } from \"./use-chart\"\n\nexport type ChartTooltipProps = {\n label?: string\n dataKey?: string\n payload: Dict[] | undefined\n valueFormatter?: (value: any) => string\n labelFormatter?: (label: string) => string\n unit?: string\n isRadialChart?: boolean\n}\n\nexport const ChartTooltip = forwardRef<ChartTooltipProps, \"div\">(\n (\n {\n label,\n dataKey = \"value\",\n className,\n payload = [],\n valueFormatter,\n labelFormatter,\n unit,\n isRadialChart,\n ...rest\n },\n ref,\n ) => {\n const { styles } = useTooltip()\n\n const items = payload.map(\n (\n {\n color: colorProp,\n name: nameProp,\n [dataKey]: valueProp,\n payload,\n } = {},\n index,\n ) => {\n const name = isRadialChart ? payload?.name : nameProp\n const color = colorProp ?? payload?.color\n let value: string\n\n if (isArray(valueProp)) {\n value = valueProp\n .map((value) => {\n return `${valueFormatter?.(value) ?? value}`\n })\n .join(\" - \")\n } else {\n value = valueFormatter?.(valueProp) ?? valueProp\n }\n\n return (\n <ui.div\n className=\"ui-chart__tooltip-item\"\n key={`tooltip-payload-${index}`}\n __css={styles.tooltipItem}\n >\n <ui.div\n className=\"ui-chart__tooltip-swatch\"\n background={color}\n __css={styles.tooltipSwatch}\n />\n\n <ui.span\n className=\"ui-chart__tooltip-label\"\n __css={styles.tooltipLabel}\n >\n {name}\n </ui.span>\n\n <ui.span\n className=\"ui-chart__tooltip-value\"\n __css={styles.tooltipValue}\n >\n {value}\n {unit ? unit : \"\"}\n </ui.span>\n </ui.div>\n )\n },\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-chart__tooltip\", className)}\n __css={styles.tooltip}\n {...rest}\n >\n {label ? (\n <ui.p className=\"ui-chart__tooltip-title\" __css={styles.tooltipTitle}>\n {labelFormatter?.(label) ?? label}\n </ui.p>\n ) : null}\n\n <ui.div className=\"ui-chart__tooltip-list\" __css={styles.tooltipList}>\n {items}\n </ui.div>\n </ui.div>\n )\n },\n)\n"],"mappings":";;;;;;AAAA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,eAA0B;AA4D3B,cAaA,YAbA;AA/CL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU,CAAC;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AA5BP;AA6BI,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,QAAQ,QAAQ;AAAA,MACpB,CACE;AAAA,QACE,OAAO;AAAA,QACP,MAAM;AAAA,QACN,CAAC,UAAU;AAAA,QACX,SAAAA;AAAA,MACF,IAAI,CAAC,GACL,UACG;AAxCX,YAAAC;AAyCQ,cAAM,OAAO,gBAAgBD,YAAA,gBAAAA,SAAS,OAAO;AAC7C,cAAM,QAAQ,gCAAaA,YAAA,gBAAAA,SAAS;AACpC,YAAI;AAEJ,YAAI,QAAQ,SAAS,GAAG;AACtB,kBAAQ,UACL,IAAI,CAACE,WAAU;AA/C5B,gBAAAD;AAgDc,mBAAO,IAAGA,MAAA,iDAAiBC,YAAjB,OAAAD,MAA2BC,MAAK;AAAA,UAC5C,CAAC,EACA,KAAK,KAAK;AAAA,QACf,OAAO;AACL,mBAAQD,MAAA,iDAAiB,eAAjB,OAAAA,MAA+B;AAAA,QACzC;AAEA,eACE;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAU;AAAA,YAEV,OAAO,OAAO;AAAA,YAEd;AAAA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAO,OAAO;AAAA;AAAA,cAChB;AAAA,cAEA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,OAAO;AAAA,kBAEb;AAAA;AAAA,cACH;AAAA,cAEA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,OAAO;AAAA,kBAEb;AAAA;AAAA,oBACA,OAAO,OAAO;AAAA;AAAA;AAAA,cACjB;AAAA;AAAA;AAAA,UAtBK,mBAAmB,KAAK;AAAA,QAuB/B;AAAA,MAEJ;AAAA,IACF;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA,kBACC,oBAAC,GAAG,GAAH,EAAK,WAAU,2BAA0B,OAAO,OAAO,cACrD,iEAAiB,WAAjB,YAA2B,OAC9B,IACE;AAAA,UAEJ,oBAAC,GAAG,KAAH,EAAO,WAAU,0BAAyB,OAAO,OAAO,aACtD,iBACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["payload","_a","value"]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
legendProperties
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-6YUJLLGN.mjs";
|
5
5
|
|
6
6
|
// src/use-chart-legend.ts
|
7
7
|
import { splitObject } from "@yamada-ui/utils";
|
@@ -30,4 +30,4 @@ var useChartLegend = ({
|
|
30
30
|
export {
|
31
31
|
useChartLegend
|
32
32
|
};
|
33
|
-
//# sourceMappingURL=chunk-
|
33
|
+
//# sourceMappingURL=chunk-TCSYDMC7.mjs.map
|
@@ -1,23 +1,26 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useRadarChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-XRF3TNSQ.mjs";
|
5
5
|
import {
|
6
|
-
|
7
|
-
} from "./chunk-
|
6
|
+
usePolarGrid
|
7
|
+
} from "./chunk-3HQ2UC3I.mjs";
|
8
8
|
import {
|
9
9
|
useChartTooltip
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-VMBRDEM2.mjs";
|
11
|
+
import {
|
12
|
+
useChartLegend
|
13
|
+
} from "./chunk-TCSYDMC7.mjs";
|
11
14
|
import {
|
12
15
|
ChartLegend
|
13
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-EL2VTGFB.mjs";
|
14
17
|
import {
|
15
18
|
ChartTooltip
|
16
|
-
} from "./chunk-
|
19
|
+
} from "./chunk-T5DNDBW6.mjs";
|
17
20
|
import {
|
18
21
|
ChartProvider,
|
19
22
|
useChart
|
20
|
-
} from "./chunk-
|
23
|
+
} from "./chunk-3AOICU4Q.mjs";
|
21
24
|
|
22
25
|
// src/radar-chart.tsx
|
23
26
|
import {
|
@@ -76,7 +79,6 @@ var RadarChart = forwardRef((props, ref) => {
|
|
76
79
|
const {
|
77
80
|
getRadarProps,
|
78
81
|
getRadarChartProps,
|
79
|
-
getPolarGridProps,
|
80
82
|
getPolarAngleAxisProps,
|
81
83
|
getPolarRadiusAxisProps,
|
82
84
|
radarVars,
|
@@ -87,7 +89,6 @@ var RadarChart = forwardRef((props, ref) => {
|
|
87
89
|
dataKey,
|
88
90
|
radarProps,
|
89
91
|
chartProps,
|
90
|
-
polarGridProps,
|
91
92
|
polarAngleAxisProps,
|
92
93
|
polarAngleAxisTickProps,
|
93
94
|
polarRadiusAxisProps,
|
@@ -98,7 +99,6 @@ var RadarChart = forwardRef((props, ref) => {
|
|
98
99
|
fillOpacity,
|
99
100
|
polarAngleAxisTickFormatter,
|
100
101
|
polarRadiusAxisTickFormatter,
|
101
|
-
strokeDasharray,
|
102
102
|
styles
|
103
103
|
});
|
104
104
|
const { getContainerProps } = useChart({ containerProps });
|
@@ -110,6 +110,11 @@ var RadarChart = forwardRef((props, ref) => {
|
|
110
110
|
const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
|
111
111
|
legendProps
|
112
112
|
});
|
113
|
+
const { getPolarGridProps } = usePolarGrid({
|
114
|
+
polarGridProps,
|
115
|
+
strokeDasharray,
|
116
|
+
styles
|
117
|
+
});
|
113
118
|
const radars = useMemo(
|
114
119
|
() => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ jsx(
|
115
120
|
Radar,
|
@@ -125,8 +130,7 @@ var RadarChart = forwardRef((props, ref) => {
|
|
125
130
|
{
|
126
131
|
ref,
|
127
132
|
className: cx("ui-radar-chart", className),
|
128
|
-
|
129
|
-
__css: { ...styles.container },
|
133
|
+
__css: { maxW: "full", vars: radarVars, ...styles.container },
|
130
134
|
...rest,
|
131
135
|
children: /* @__PURE__ */ jsx(
|
132
136
|
ResponsiveContainer,
|
@@ -206,4 +210,4 @@ var RadarChart = forwardRef((props, ref) => {
|
|
206
210
|
export {
|
207
211
|
RadarChart
|
208
212
|
};
|
209
|
-
//# sourceMappingURL=chunk-
|
213
|
+
//# sourceMappingURL=chunk-TMHSYM3V.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/radar-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n ResponsiveContainer,\n RadarChart as ReChartsRadarChart,\n PolarGrid,\n PolarAngleAxis,\n PolarRadiusAxis,\n Radar,\n Tooltip,\n Legend,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePolarGrid, type UsePolarGridOptions } from \"./use-polar-grid\"\nimport type { UseRadarChartOptions } from \"./use-radar-chart\"\nimport { useRadarChart } from \"./use-radar-chart\"\n\ntype RadarChartOptions = {\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\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 true\n */\n withPolarGrid?: boolean\n /**\n * Determines whether polarAngleAxis should be displayed.\n *\n * @default true\n */\n withPolarAngleAxis?: boolean\n /**\n * Determines whether polarRadiusAxis should be displayed.\n *\n * @default false\n */\n withPolarRadiusAxis?: boolean\n /**\n * Unit displayed next to each tick in y-axis.\n */\n unit?: string\n}\n\nexport type RadarChartProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"RadarChart\"> &\n RadarChartOptions &\n UseChartProps &\n Omit<UseChartTooltipOptions, \"labelFormatter\"> &\n UseChartLegendProps &\n UsePolarGridOptions &\n UseRadarChartOptions\n\n/**\n * `RadarChart` is a component for drawing radar charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/radar-chart\n */\nexport const RadarChart = forwardRef<RadarChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"RadarChart\", props)\n const {\n className,\n data,\n series,\n dataKey,\n radarProps,\n chartProps,\n polarGridProps,\n polarAngleAxisProps,\n polarAngleAxisTickProps,\n polarRadiusAxisProps,\n polarRadiusAxisTickProps,\n containerProps,\n tooltipProps,\n legendProps,\n tooltipAnimationDuration,\n unit,\n valueFormatter,\n polarAngleAxisTickFormatter,\n polarRadiusAxisTickFormatter,\n strokeDasharray,\n withDots,\n withActiveDots,\n strokeWidth,\n fillOpacity,\n withTooltip = true,\n withLegend = false,\n withPolarGrid = true,\n withPolarAngleAxis = true,\n withPolarRadiusAxis = false,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n getRadarProps,\n getRadarChartProps,\n getPolarAngleAxisProps,\n getPolarRadiusAxisProps,\n radarVars,\n setHighlightedArea,\n } = useRadarChart({\n data,\n series,\n dataKey,\n radarProps,\n chartProps,\n polarAngleAxisProps,\n polarAngleAxisTickProps,\n polarRadiusAxisProps,\n polarRadiusAxisTickProps,\n withDots,\n withActiveDots,\n strokeWidth,\n fillOpacity,\n polarAngleAxisTickFormatter,\n polarRadiusAxisTickFormatter,\n styles,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { tooltipProps: computedTooltipProps, getTooltipProps } =\n useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n const { getPolarGridProps } = usePolarGrid({\n polarGridProps,\n strokeDasharray,\n styles,\n })\n\n const radars = useMemo(\n () =>\n series.map(({ dataKey }, index) => (\n <Radar\n key={`radar-${dataKey}`}\n {...getRadarProps({ index, className: \"ui-radar-chart__radar\" })}\n />\n )),\n [getRadarProps, series],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-radar-chart\", className)}\n __css={{ maxW: \"full\", vars: radarVars, ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-radar-chart__container\" })}\n >\n <ReChartsRadarChart\n {...getRadarChartProps({ className: \"ui-radar-chart__chart\" })}\n >\n {withPolarGrid ? (\n <PolarGrid\n {...getPolarGridProps({\n className: \"ui-radar-chart__polar-grid\",\n })}\n />\n ) : null}\n {withPolarAngleAxis ? (\n <PolarAngleAxis\n {...getPolarAngleAxisProps({\n className: \"ui-radar-chart__polar-angle-axis\",\n })}\n />\n ) : null}\n {withPolarRadiusAxis ? (\n <PolarRadiusAxis\n {...getPolarRadiusAxisProps({\n className: \"ui-radar-chart__polar-radius-axis\",\n })}\n />\n ) : null}\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-line-chart__tooltip\"\n label={label}\n payload={payload}\n valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n\n {radars}\n </ReChartsRadarChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":["dataKey"]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
tooltipProperties
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-6YUJLLGN.mjs";
|
5
5
|
import {
|
6
6
|
getClassName
|
7
7
|
} from "./chunk-QL3DB7OJ.mjs";
|
@@ -44,4 +44,4 @@ var useChartTooltip = ({
|
|
44
44
|
export {
|
45
45
|
useChartTooltip
|
46
46
|
};
|
47
|
-
//# sourceMappingURL=chunk-
|
47
|
+
//# sourceMappingURL=chunk-VMBRDEM2.mjs.map
|
@@ -1,23 +1,26 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
|
-
|
4
|
-
} from "./chunk-
|
3
|
+
useChartLabel
|
4
|
+
} from "./chunk-KVE6VXTJ.mjs";
|
5
5
|
import {
|
6
|
-
|
7
|
-
} from "./chunk-
|
6
|
+
usePieChart
|
7
|
+
} from "./chunk-ZQWVMOT6.mjs";
|
8
8
|
import {
|
9
9
|
useChartTooltip
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-VMBRDEM2.mjs";
|
11
|
+
import {
|
12
|
+
useChartLegend
|
13
|
+
} from "./chunk-TCSYDMC7.mjs";
|
11
14
|
import {
|
12
15
|
ChartLegend
|
13
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-EL2VTGFB.mjs";
|
14
17
|
import {
|
15
18
|
ChartTooltip
|
16
|
-
} from "./chunk-
|
19
|
+
} from "./chunk-T5DNDBW6.mjs";
|
17
20
|
import {
|
18
21
|
ChartProvider,
|
19
22
|
useChart
|
20
|
-
} from "./chunk-
|
23
|
+
} from "./chunk-3AOICU4Q.mjs";
|
21
24
|
|
22
25
|
// src/donut-chart.tsx
|
23
26
|
import {
|
@@ -30,6 +33,7 @@ import { cx } from "@yamada-ui/utils";
|
|
30
33
|
import { useMemo } from "react";
|
31
34
|
import {
|
32
35
|
Cell,
|
36
|
+
Label,
|
33
37
|
Legend,
|
34
38
|
Pie,
|
35
39
|
PieChart as RechartsPieChart,
|
@@ -65,6 +69,7 @@ var DonutChart = forwardRef((props, ref) => {
|
|
65
69
|
outerRadius,
|
66
70
|
strokeWidth,
|
67
71
|
legendProps,
|
72
|
+
labelProps,
|
68
73
|
...rest
|
69
74
|
} = omitThemeProps(mergedProps);
|
70
75
|
const {
|
@@ -100,6 +105,7 @@ var DonutChart = forwardRef((props, ref) => {
|
|
100
105
|
const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
|
101
106
|
legendProps
|
102
107
|
});
|
108
|
+
const { getLabelProps } = useChartLabel({ labelProps, styles });
|
103
109
|
const cells = useMemo(
|
104
110
|
() => data.map(({ name }, index) => /* @__PURE__ */ jsx(
|
105
111
|
Cell,
|
@@ -115,8 +121,7 @@ var DonutChart = forwardRef((props, ref) => {
|
|
115
121
|
{
|
116
122
|
ref,
|
117
123
|
className: cx("ui-donut-chart", className),
|
118
|
-
|
119
|
-
__css: { ...styles.container },
|
124
|
+
__css: { maxW: "full", vars: pieVars, ...styles.container },
|
120
125
|
...rest,
|
121
126
|
children: /* @__PURE__ */ jsx(
|
122
127
|
ResponsiveContainer,
|
@@ -127,13 +132,21 @@ var DonutChart = forwardRef((props, ref) => {
|
|
127
132
|
{
|
128
133
|
...getPieChartProps({ className: "ui-donut-chart__chart" }),
|
129
134
|
children: [
|
130
|
-
/* @__PURE__ */
|
135
|
+
/* @__PURE__ */ jsxs(
|
131
136
|
Pie,
|
132
137
|
{
|
133
138
|
...getPieProps({
|
134
139
|
className: "ui-donut-chart__donut"
|
135
140
|
}),
|
136
|
-
children:
|
141
|
+
children: [
|
142
|
+
cells,
|
143
|
+
/* @__PURE__ */ jsx(
|
144
|
+
Label,
|
145
|
+
{
|
146
|
+
...getLabelProps({ className: "ui-donut-chart__label" })
|
147
|
+
}
|
148
|
+
)
|
149
|
+
]
|
137
150
|
}
|
138
151
|
),
|
139
152
|
withLegend ? /* @__PURE__ */ jsx(
|
@@ -180,4 +193,4 @@ var DonutChart = forwardRef((props, ref) => {
|
|
180
193
|
export {
|
181
194
|
DonutChart
|
182
195
|
};
|
183
|
-
//# sourceMappingURL=chunk-
|
196
|
+
//# sourceMappingURL=chunk-WMG5U5AU.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import {\n forwardRef,\n omitThemeProps,\n ui,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n Cell,\n Label,\n Legend,\n Pie,\n PieChart as RechartsPieChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { PieChartProps } from \"./pie-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLabel, type UseChartLabelOptions } from \"./use-chart-label\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ntype DonutChartOptions = {\n /**\n * Controls innerRadius of the chart segments.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '60%'\n */\n innerRadius?: number | string\n}\n\nexport type DonutChartProps = PieChartProps &\n DonutChartOptions &\n UseChartLabelOptions\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"DonutChart\", props)\n const {\n className,\n data,\n pieProps,\n chartProps,\n cellProps,\n containerProps,\n withTooltip = true,\n withLegend = false,\n tooltipProps,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n valueFormatter,\n labelFormatter,\n unit,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n withLabelLines,\n labelOffset,\n isPercent,\n innerRadius = withLabels ? \"60%\" : \"80%\",\n outerRadius,\n strokeWidth,\n legendProps,\n labelProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n } = usePieChart({\n data,\n pieProps,\n chartProps,\n cellProps,\n innerRadius,\n outerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n strokeWidth,\n withLabels,\n withLabelLines,\n labelOffset,\n isPercent,\n labelFormatter,\n styles,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { tooltipProps: computedTooltipProps, getTooltipProps } =\n useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n const { getLabelProps } = useChartLabel({ labelProps, styles })\n\n const cells = useMemo(\n () =>\n data.map(({ name }, index) => (\n <Cell\n key={`donut-cell-${name}`}\n {...getCellProps({ index, className: \"ui-donut-chart__cell\" })}\n />\n )),\n [data, getCellProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-donut-chart\", className)}\n __css={{ maxW: \"full\", vars: pieVars, ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-donut-chart__container\" })}\n >\n <RechartsPieChart\n {...getPieChartProps({ className: \"ui-donut-chart__chart\" })}\n >\n <Pie\n {...getPieProps({\n className: \"ui-donut-chart__donut\",\n })}\n >\n {cells}\n <Label\n {...getLabelProps({ className: \"ui-donut-chart__label\" })}\n />\n </Pie>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-donut-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-donut-chart__tooltip\"\n label={label}\n payload={tooltipDataSource === \"segment\" ? payload : data}\n valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsPieChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":[]}
|