@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.
Files changed (202) hide show
  1. package/README.md +7 -13
  2. package/dist/area-chart-split.js +4 -2
  3. package/dist/area-chart-split.js.map +1 -1
  4. package/dist/area-chart-split.mjs +1 -1
  5. package/dist/area-chart.d.mts +1 -2
  6. package/dist/area-chart.d.ts +1 -2
  7. package/dist/area-chart.js +57 -50
  8. package/dist/area-chart.js.map +1 -1
  9. package/dist/area-chart.mjs +12 -12
  10. package/dist/bar-chart.d.mts +1 -2
  11. package/dist/bar-chart.d.ts +1 -2
  12. package/dist/bar-chart.js +15 -9
  13. package/dist/bar-chart.js.map +1 -1
  14. package/dist/bar-chart.mjs +11 -11
  15. package/dist/chart-legend.mjs +3 -3
  16. package/dist/chart-tooltip.d.mts +3 -1
  17. package/dist/chart-tooltip.d.ts +3 -1
  18. package/dist/chart-tooltip.js +9 -1
  19. package/dist/chart-tooltip.js.map +1 -1
  20. package/dist/chart-tooltip.mjs +3 -3
  21. package/dist/chart.types.d.mts +12 -5
  22. package/dist/chart.types.d.ts +12 -5
  23. package/dist/chart.types.js.map +1 -1
  24. package/dist/{chunk-STBYN5JW.mjs → chunk-3AOICU4Q.mjs} +2 -2
  25. package/dist/chunk-3HQ2UC3I.mjs +45 -0
  26. package/dist/chunk-3HQ2UC3I.mjs.map +1 -0
  27. package/dist/{chunk-FALZDKAW.mjs → chunk-3VKCTSPC.mjs} +10 -11
  28. package/dist/chunk-3VKCTSPC.mjs.map +1 -0
  29. package/dist/{chunk-S5NKKKV5.mjs → chunk-5PSRSNGH.mjs} +7 -8
  30. package/dist/chunk-5PSRSNGH.mjs.map +1 -0
  31. package/dist/{chunk-F34FV5DY.mjs → chunk-6YUJLLGN.mjs} +59 -3
  32. package/dist/chunk-6YUJLLGN.mjs.map +1 -0
  33. package/dist/{chunk-KBBHISBO.mjs → chunk-BYL7HWNN.mjs} +13 -14
  34. package/dist/chunk-BYL7HWNN.mjs.map +1 -0
  35. package/dist/chunk-D5IRVU4W.mjs +46 -0
  36. package/dist/chunk-D5IRVU4W.mjs.map +1 -0
  37. package/dist/{chunk-DGOXJ373.mjs → chunk-EL2VTGFB.mjs} +2 -2
  38. package/dist/{chunk-6L73M52L.mjs → chunk-FPFCMFCJ.mjs} +7 -9
  39. package/dist/chunk-FPFCMFCJ.mjs.map +1 -0
  40. package/dist/{chunk-Q7CCSKX3.mjs → chunk-JTQ5QCML.mjs} +4 -4
  41. package/dist/chunk-JTQ5QCML.mjs.map +1 -0
  42. package/dist/chunk-KVE6VXTJ.mjs +37 -0
  43. package/dist/chunk-KVE6VXTJ.mjs.map +1 -0
  44. package/dist/{chunk-PNE3JG54.mjs → chunk-MGTMKKSH.mjs} +5 -3
  45. package/dist/chunk-MGTMKKSH.mjs.map +1 -0
  46. package/dist/chunk-PG7ZV76C.mjs +155 -0
  47. package/dist/chunk-PG7ZV76C.mjs.map +1 -0
  48. package/dist/{chunk-D7EZKGCJ.mjs → chunk-PPBHLDVN.mjs} +2 -2
  49. package/dist/{chunk-AODYT4HF.mjs → chunk-RKO6KM3T.mjs} +13 -14
  50. package/dist/chunk-RKO6KM3T.mjs.map +1 -0
  51. package/dist/chunk-SBPKRYF2.mjs +199 -0
  52. package/dist/chunk-SBPKRYF2.mjs.map +1 -0
  53. package/dist/{chunk-FCMP6QEZ.mjs → chunk-SWATR7CU.mjs} +14 -15
  54. package/dist/chunk-SWATR7CU.mjs.map +1 -0
  55. package/dist/{chunk-MT5JI4OR.mjs → chunk-T5DNDBW6.mjs} +11 -3
  56. package/dist/chunk-T5DNDBW6.mjs.map +1 -0
  57. package/dist/{chunk-5Q6O726L.mjs → chunk-TCSYDMC7.mjs} +2 -2
  58. package/dist/{chunk-UHQ6WE5D.mjs → chunk-TMHSYM3V.mjs} +17 -13
  59. package/dist/chunk-TMHSYM3V.mjs.map +1 -0
  60. package/dist/{chunk-AOGTJ4EN.mjs → chunk-VMBRDEM2.mjs} +2 -2
  61. package/dist/{chunk-XUAAKVRL.mjs → chunk-WMG5U5AU.mjs} +26 -13
  62. package/dist/chunk-WMG5U5AU.mjs.map +1 -0
  63. package/dist/{chunk-6BNJZIBK.mjs → chunk-X7XFG7TS.mjs} +10 -12
  64. package/dist/chunk-X7XFG7TS.mjs.map +1 -0
  65. package/dist/{chunk-MOFNE6PO.mjs → chunk-XRF3TNSQ.mjs} +6 -30
  66. package/dist/chunk-XRF3TNSQ.mjs.map +1 -0
  67. package/dist/{chunk-VK4VQQYY.mjs → chunk-YNJ423BR.mjs} +2 -2
  68. package/dist/{chunk-BGMNYKQY.mjs → chunk-ZQWVMOT6.mjs} +9 -7
  69. package/dist/chunk-ZQWVMOT6.mjs.map +1 -0
  70. package/dist/donut-chart.d.mts +3 -3
  71. package/dist/donut-chart.d.ts +3 -3
  72. package/dist/donut-chart.js +109 -58
  73. package/dist/donut-chart.js.map +1 -1
  74. package/dist/donut-chart.mjs +9 -8
  75. package/dist/index.d.mts +6 -2
  76. package/dist/index.d.ts +6 -2
  77. package/dist/index.js +599 -167
  78. package/dist/index.js.map +1 -1
  79. package/dist/index.mjs +30 -22
  80. package/dist/index.mjs.map +1 -1
  81. package/dist/line-chart.d.mts +1 -2
  82. package/dist/line-chart.d.ts +1 -2
  83. package/dist/line-chart.js +15 -10
  84. package/dist/line-chart.js.map +1 -1
  85. package/dist/line-chart.mjs +11 -11
  86. package/dist/pie-chart.d.mts +2 -3
  87. package/dist/pie-chart.d.ts +2 -3
  88. package/dist/pie-chart.js +13 -7
  89. package/dist/pie-chart.js.map +1 -1
  90. package/dist/pie-chart.mjs +8 -8
  91. package/dist/radar-chart.d.mts +3 -3
  92. package/dist/radar-chart.d.ts +3 -3
  93. package/dist/radar-chart.js +90 -70
  94. package/dist/radar-chart.js.map +1 -1
  95. package/dist/radar-chart.mjs +9 -8
  96. package/dist/radial-chart.d.mts +53 -0
  97. package/dist/radial-chart.d.ts +53 -0
  98. package/dist/radial-chart.js +767 -0
  99. package/dist/radial-chart.js.map +1 -0
  100. package/dist/radial-chart.mjs +18 -0
  101. package/dist/radial-chart.mjs.map +1 -0
  102. package/dist/rechart-properties.d.mts +5 -1
  103. package/dist/rechart-properties.d.ts +5 -1
  104. package/dist/rechart-properties.js +60 -1
  105. package/dist/rechart-properties.js.map +1 -1
  106. package/dist/rechart-properties.mjs +7 -1
  107. package/dist/use-area-chart.d.mts +1 -2
  108. package/dist/use-area-chart.d.ts +1 -2
  109. package/dist/use-area-chart.js +7 -9
  110. package/dist/use-area-chart.js.map +1 -1
  111. package/dist/use-area-chart.mjs +2 -2
  112. package/dist/use-bar-chart.d.mts +1 -2
  113. package/dist/use-bar-chart.d.ts +1 -2
  114. package/dist/use-bar-chart.js +4 -5
  115. package/dist/use-bar-chart.js.map +1 -1
  116. package/dist/use-bar-chart.mjs +2 -2
  117. package/dist/use-chart-axis.d.mts +0 -1
  118. package/dist/use-chart-axis.d.ts +0 -1
  119. package/dist/use-chart-axis.js.map +1 -1
  120. package/dist/use-chart-axis.mjs +2 -2
  121. package/dist/use-chart-grid.d.mts +0 -1
  122. package/dist/use-chart-grid.d.ts +0 -1
  123. package/dist/use-chart-grid.js.map +1 -1
  124. package/dist/use-chart-grid.mjs +2 -2
  125. package/dist/use-chart-label-list.d.mts +22 -0
  126. package/dist/use-chart-label-list.d.ts +22 -0
  127. package/dist/use-chart-label-list.js +93 -0
  128. package/dist/use-chart-label-list.js.map +1 -0
  129. package/dist/use-chart-label-list.mjs +10 -0
  130. package/dist/use-chart-label-list.mjs.map +1 -0
  131. package/dist/use-chart-label.d.mts +20 -0
  132. package/dist/use-chart-label.d.ts +20 -0
  133. package/dist/use-chart-label.js +82 -0
  134. package/dist/use-chart-label.js.map +1 -0
  135. package/dist/use-chart-label.mjs +10 -0
  136. package/dist/use-chart-label.mjs.map +1 -0
  137. package/dist/use-chart-legend.d.mts +0 -1
  138. package/dist/use-chart-legend.d.ts +0 -1
  139. package/dist/use-chart-legend.js.map +1 -1
  140. package/dist/use-chart-legend.mjs +2 -2
  141. package/dist/use-chart-reference-line.d.mts +0 -1
  142. package/dist/use-chart-reference-line.d.ts +0 -1
  143. package/dist/use-chart-reference-line.js +1 -1
  144. package/dist/use-chart-reference-line.js.map +1 -1
  145. package/dist/use-chart-reference-line.mjs +2 -2
  146. package/dist/use-chart-tooltip.d.mts +0 -1
  147. package/dist/use-chart-tooltip.d.ts +0 -1
  148. package/dist/use-chart-tooltip.js.map +1 -1
  149. package/dist/use-chart-tooltip.mjs +2 -2
  150. package/dist/use-chart.d.mts +0 -1
  151. package/dist/use-chart.d.ts +0 -1
  152. package/dist/use-chart.js.map +1 -1
  153. package/dist/use-chart.mjs +2 -2
  154. package/dist/use-line-chart.d.mts +1 -2
  155. package/dist/use-line-chart.d.ts +1 -2
  156. package/dist/use-line-chart.js +4 -6
  157. package/dist/use-line-chart.js.map +1 -1
  158. package/dist/use-line-chart.mjs +2 -2
  159. package/dist/use-pie-chart.d.mts +1 -2
  160. package/dist/use-pie-chart.d.ts +1 -2
  161. package/dist/use-pie-chart.js +3 -4
  162. package/dist/use-pie-chart.js.map +1 -1
  163. package/dist/use-pie-chart.mjs +2 -2
  164. package/dist/use-polar-grid.d.mts +24 -0
  165. package/dist/use-polar-grid.d.ts +24 -0
  166. package/dist/use-polar-grid.js +90 -0
  167. package/dist/use-polar-grid.js.map +1 -0
  168. package/dist/use-polar-grid.mjs +10 -0
  169. package/dist/use-polar-grid.mjs.map +1 -0
  170. package/dist/use-radar-chart.d.mts +3 -13
  171. package/dist/use-radar-chart.d.ts +3 -13
  172. package/dist/use-radar-chart.js +3 -35
  173. package/dist/use-radar-chart.js.map +1 -1
  174. package/dist/use-radar-chart.mjs +2 -2
  175. package/dist/use-radial-chart.d.mts +80 -0
  176. package/dist/use-radial-chart.d.ts +80 -0
  177. package/dist/use-radial-chart.js +228 -0
  178. package/dist/use-radial-chart.js.map +1 -0
  179. package/dist/use-radial-chart.mjs +10 -0
  180. package/dist/use-radial-chart.mjs.map +1 -0
  181. package/package.json +4 -4
  182. package/dist/chunk-6BNJZIBK.mjs.map +0 -1
  183. package/dist/chunk-6L73M52L.mjs.map +0 -1
  184. package/dist/chunk-AODYT4HF.mjs.map +0 -1
  185. package/dist/chunk-BGMNYKQY.mjs.map +0 -1
  186. package/dist/chunk-F34FV5DY.mjs.map +0 -1
  187. package/dist/chunk-FALZDKAW.mjs.map +0 -1
  188. package/dist/chunk-FCMP6QEZ.mjs.map +0 -1
  189. package/dist/chunk-KBBHISBO.mjs.map +0 -1
  190. package/dist/chunk-MOFNE6PO.mjs.map +0 -1
  191. package/dist/chunk-MT5JI4OR.mjs.map +0 -1
  192. package/dist/chunk-PNE3JG54.mjs.map +0 -1
  193. package/dist/chunk-Q7CCSKX3.mjs.map +0 -1
  194. package/dist/chunk-S5NKKKV5.mjs.map +0 -1
  195. package/dist/chunk-UHQ6WE5D.mjs.map +0 -1
  196. package/dist/chunk-XUAAKVRL.mjs.map +0 -1
  197. /package/dist/{chunk-STBYN5JW.mjs.map → chunk-3AOICU4Q.mjs.map} +0 -0
  198. /package/dist/{chunk-DGOXJ373.mjs.map → chunk-EL2VTGFB.mjs.map} +0 -0
  199. /package/dist/{chunk-D7EZKGCJ.mjs.map → chunk-PPBHLDVN.mjs.map} +0 -0
  200. /package/dist/{chunk-5Q6O726L.mjs.map → chunk-TCSYDMC7.mjs.map} +0 -0
  201. /package/dist/{chunk-AOGTJ4EN.mjs.map → chunk-VMBRDEM2.mjs.map} +0 -0
  202. /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":"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","names":[]}
@@ -1,38 +1,38 @@
1
1
  "use client"
2
2
  import {
3
3
  useAreaChart
4
- } from "./chunk-6BNJZIBK.mjs";
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-PNE3JG54.mjs";
10
+ } from "./chunk-MGTMKKSH.mjs";
11
11
  import {
12
12
  useChartAxis
13
- } from "./chunk-VK4VQQYY.mjs";
13
+ } from "./chunk-YNJ423BR.mjs";
14
14
  import {
15
15
  useChartGrid
16
- } from "./chunk-D7EZKGCJ.mjs";
16
+ } from "./chunk-PPBHLDVN.mjs";
17
17
  import {
18
18
  useChartReferenceLine
19
- } from "./chunk-Q7CCSKX3.mjs";
20
- import {
21
- useChartLegend
22
- } from "./chunk-5Q6O726L.mjs";
19
+ } from "./chunk-JTQ5QCML.mjs";
23
20
  import {
24
21
  useChartTooltip
25
- } from "./chunk-AOGTJ4EN.mjs";
22
+ } from "./chunk-VMBRDEM2.mjs";
23
+ import {
24
+ useChartLegend
25
+ } from "./chunk-TCSYDMC7.mjs";
26
26
  import {
27
27
  ChartLegend
28
- } from "./chunk-DGOXJ373.mjs";
28
+ } from "./chunk-EL2VTGFB.mjs";
29
29
  import {
30
30
  ChartTooltip
31
- } from "./chunk-MT5JI4OR.mjs";
31
+ } from "./chunk-T5DNDBW6.mjs";
32
32
  import {
33
33
  ChartProvider,
34
34
  useChart
35
- } from "./chunk-STBYN5JW.mjs";
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
- var: areaVars,
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-FCMP6QEZ.mjs.map
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-STBYN5JW.mjs";
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
- ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
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-MT5JI4OR.mjs.map
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-F34FV5DY.mjs";
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-5Q6O726L.mjs.map
33
+ //# sourceMappingURL=chunk-TCSYDMC7.mjs.map
@@ -1,23 +1,26 @@
1
1
  "use client"
2
2
  import {
3
3
  useRadarChart
4
- } from "./chunk-MOFNE6PO.mjs";
4
+ } from "./chunk-XRF3TNSQ.mjs";
5
5
  import {
6
- useChartLegend
7
- } from "./chunk-5Q6O726L.mjs";
6
+ usePolarGrid
7
+ } from "./chunk-3HQ2UC3I.mjs";
8
8
  import {
9
9
  useChartTooltip
10
- } from "./chunk-AOGTJ4EN.mjs";
10
+ } from "./chunk-VMBRDEM2.mjs";
11
+ import {
12
+ useChartLegend
13
+ } from "./chunk-TCSYDMC7.mjs";
11
14
  import {
12
15
  ChartLegend
13
- } from "./chunk-DGOXJ373.mjs";
16
+ } from "./chunk-EL2VTGFB.mjs";
14
17
  import {
15
18
  ChartTooltip
16
- } from "./chunk-MT5JI4OR.mjs";
19
+ } from "./chunk-T5DNDBW6.mjs";
17
20
  import {
18
21
  ChartProvider,
19
22
  useChart
20
- } from "./chunk-STBYN5JW.mjs";
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
- var: radarVars,
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-UHQ6WE5D.mjs.map
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-F34FV5DY.mjs";
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-AOGTJ4EN.mjs.map
47
+ //# sourceMappingURL=chunk-VMBRDEM2.mjs.map
@@ -1,23 +1,26 @@
1
1
  "use client"
2
2
  import {
3
- usePieChart
4
- } from "./chunk-BGMNYKQY.mjs";
3
+ useChartLabel
4
+ } from "./chunk-KVE6VXTJ.mjs";
5
5
  import {
6
- useChartLegend
7
- } from "./chunk-5Q6O726L.mjs";
6
+ usePieChart
7
+ } from "./chunk-ZQWVMOT6.mjs";
8
8
  import {
9
9
  useChartTooltip
10
- } from "./chunk-AOGTJ4EN.mjs";
10
+ } from "./chunk-VMBRDEM2.mjs";
11
+ import {
12
+ useChartLegend
13
+ } from "./chunk-TCSYDMC7.mjs";
11
14
  import {
12
15
  ChartLegend
13
- } from "./chunk-DGOXJ373.mjs";
16
+ } from "./chunk-EL2VTGFB.mjs";
14
17
  import {
15
18
  ChartTooltip
16
- } from "./chunk-MT5JI4OR.mjs";
19
+ } from "./chunk-T5DNDBW6.mjs";
17
20
  import {
18
21
  ChartProvider,
19
22
  useChart
20
- } from "./chunk-STBYN5JW.mjs";
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
- var: pieVars,
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__ */ jsx(
135
+ /* @__PURE__ */ jsxs(
131
136
  Pie,
132
137
  {
133
138
  ...getPieProps({
134
139
  className: "ui-donut-chart__donut"
135
140
  }),
136
- children: cells
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-XUAAKVRL.mjs.map
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":[]}