@yamada-ui/charts 1.5.0-dev-20240825094045 → 1.5.0-dev-20240825101928

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/dist/area-chart.d.mts +0 -1
  2. package/dist/area-chart.d.ts +0 -1
  3. package/dist/area-chart.js +9 -1
  4. package/dist/area-chart.js.map +1 -1
  5. package/dist/area-chart.mjs +11 -11
  6. package/dist/bar-chart.d.mts +0 -1
  7. package/dist/bar-chart.d.ts +0 -1
  8. package/dist/bar-chart.js +9 -1
  9. package/dist/bar-chart.js.map +1 -1
  10. package/dist/bar-chart.mjs +11 -11
  11. package/dist/chart-legend.mjs +3 -3
  12. package/dist/chart-tooltip.d.mts +3 -1
  13. package/dist/chart-tooltip.d.ts +3 -1
  14. package/dist/chart-tooltip.js +9 -1
  15. package/dist/chart-tooltip.js.map +1 -1
  16. package/dist/chart-tooltip.mjs +3 -3
  17. package/dist/chart.types.d.mts +9 -4
  18. package/dist/chart.types.d.ts +9 -4
  19. package/dist/chart.types.js.map +1 -1
  20. package/dist/{chunk-STBYN5JW.mjs → chunk-3AOICU4Q.mjs} +2 -2
  21. package/dist/chunk-3HQ2UC3I.mjs +45 -0
  22. package/dist/chunk-3HQ2UC3I.mjs.map +1 -0
  23. package/dist/{chunk-BRSSQCO4.mjs → chunk-6IEXTVWL.mjs} +2 -2
  24. package/dist/{chunk-F34FV5DY.mjs → chunk-6YUJLLGN.mjs} +59 -3
  25. package/dist/chunk-6YUJLLGN.mjs.map +1 -0
  26. package/dist/{chunk-WRKSJCFE.mjs → chunk-AJYZ7MDC.mjs} +2 -25
  27. package/dist/chunk-AJYZ7MDC.mjs.map +1 -0
  28. package/dist/chunk-D5IRVU4W.mjs +46 -0
  29. package/dist/chunk-D5IRVU4W.mjs.map +1 -0
  30. package/dist/{chunk-DGOXJ373.mjs → chunk-EL2VTGFB.mjs} +2 -2
  31. package/dist/chunk-EL6SJYI5.mjs +200 -0
  32. package/dist/chunk-EL6SJYI5.mjs.map +1 -0
  33. package/dist/{chunk-UCZQ22IS.mjs → chunk-FQTDUZK2.mjs} +16 -11
  34. package/dist/chunk-FQTDUZK2.mjs.map +1 -0
  35. package/dist/{chunk-LOXFDA6Z.mjs → chunk-JTQ5QCML.mjs} +2 -2
  36. package/dist/{chunk-WDGSALCA.mjs → chunk-KBZKJSZJ.mjs} +10 -10
  37. package/dist/{chunk-5XSML5U3.mjs → chunk-KVE6VXTJ.mjs} +2 -2
  38. package/dist/chunk-NUAKNL26.mjs +155 -0
  39. package/dist/chunk-NUAKNL26.mjs.map +1 -0
  40. package/dist/{chunk-VO2I73WT.mjs → chunk-OOSVO2GS.mjs} +12 -12
  41. package/dist/{chunk-ZHM6LP7J.mjs → chunk-PBPH3WDW.mjs} +12 -12
  42. package/dist/{chunk-D7EZKGCJ.mjs → chunk-PPBHLDVN.mjs} +2 -2
  43. package/dist/{chunk-TZ62XGYL.mjs → chunk-PSPBUPC7.mjs} +2 -2
  44. package/dist/{chunk-RXQNFP7K.mjs → chunk-S6C5VMIZ.mjs} +12 -12
  45. package/dist/{chunk-MT5JI4OR.mjs → chunk-T5DNDBW6.mjs} +11 -3
  46. package/dist/chunk-T5DNDBW6.mjs.map +1 -0
  47. package/dist/{chunk-5Q6O726L.mjs → chunk-TCSYDMC7.mjs} +2 -2
  48. package/dist/{chunk-NHJDUFKO.mjs → chunk-TQRELNDO.mjs} +2 -2
  49. package/dist/{chunk-AOGTJ4EN.mjs → chunk-VMBRDEM2.mjs} +2 -2
  50. package/dist/{chunk-PKRKJQQL.mjs → chunk-VMKJ4Z46.mjs} +9 -9
  51. package/dist/chunk-VMKJ4Z46.mjs.map +1 -0
  52. package/dist/{chunk-WAKQGKGK.mjs → chunk-YASR4L6D.mjs} +2 -2
  53. package/dist/{chunk-VK4VQQYY.mjs → chunk-YNJ423BR.mjs} +2 -2
  54. package/dist/donut-chart.d.mts +0 -1
  55. package/dist/donut-chart.d.ts +0 -1
  56. package/dist/donut-chart.js +9 -1
  57. package/dist/donut-chart.js.map +1 -1
  58. package/dist/donut-chart.mjs +9 -9
  59. package/dist/index.d.mts +4 -1
  60. package/dist/index.d.ts +4 -1
  61. package/dist/index.js +532 -123
  62. package/dist/index.js.map +1 -1
  63. package/dist/index.mjs +29 -22
  64. package/dist/index.mjs.map +1 -1
  65. package/dist/line-chart.d.mts +0 -1
  66. package/dist/line-chart.d.ts +0 -1
  67. package/dist/line-chart.js +9 -1
  68. package/dist/line-chart.js.map +1 -1
  69. package/dist/line-chart.mjs +11 -11
  70. package/dist/pie-chart.d.mts +1 -2
  71. package/dist/pie-chart.d.ts +1 -2
  72. package/dist/pie-chart.js +9 -1
  73. package/dist/pie-chart.js.map +1 -1
  74. package/dist/pie-chart.mjs +8 -8
  75. package/dist/radar-chart.d.mts +2 -2
  76. package/dist/radar-chart.d.ts +2 -2
  77. package/dist/radar-chart.js +87 -65
  78. package/dist/radar-chart.js.map +1 -1
  79. package/dist/radar-chart.mjs +9 -8
  80. package/dist/radial-chart.d.mts +53 -0
  81. package/dist/radial-chart.d.ts +53 -0
  82. package/dist/radial-chart.js +768 -0
  83. package/dist/radial-chart.js.map +1 -0
  84. package/dist/radial-chart.mjs +18 -0
  85. package/dist/radial-chart.mjs.map +1 -0
  86. package/dist/rechart-properties.d.mts +5 -1
  87. package/dist/rechart-properties.d.ts +5 -1
  88. package/dist/rechart-properties.js +60 -1
  89. package/dist/rechart-properties.js.map +1 -1
  90. package/dist/rechart-properties.mjs +7 -1
  91. package/dist/use-area-chart.d.mts +0 -1
  92. package/dist/use-area-chart.d.ts +0 -1
  93. package/dist/use-area-chart.js.map +1 -1
  94. package/dist/use-area-chart.mjs +2 -2
  95. package/dist/use-bar-chart.d.mts +0 -1
  96. package/dist/use-bar-chart.d.ts +0 -1
  97. package/dist/use-bar-chart.js.map +1 -1
  98. package/dist/use-bar-chart.mjs +2 -2
  99. package/dist/use-chart-axis.d.mts +0 -1
  100. package/dist/use-chart-axis.d.ts +0 -1
  101. package/dist/use-chart-axis.js.map +1 -1
  102. package/dist/use-chart-axis.mjs +2 -2
  103. package/dist/use-chart-grid.d.mts +0 -1
  104. package/dist/use-chart-grid.d.ts +0 -1
  105. package/dist/use-chart-grid.js.map +1 -1
  106. package/dist/use-chart-grid.mjs +2 -2
  107. package/dist/use-chart-label-list.d.mts +22 -0
  108. package/dist/use-chart-label-list.d.ts +22 -0
  109. package/dist/use-chart-label-list.js +93 -0
  110. package/dist/use-chart-label-list.js.map +1 -0
  111. package/dist/use-chart-label-list.mjs +10 -0
  112. package/dist/use-chart-label-list.mjs.map +1 -0
  113. package/dist/use-chart-label.d.mts +0 -1
  114. package/dist/use-chart-label.d.ts +0 -1
  115. package/dist/use-chart-label.js.map +1 -1
  116. package/dist/use-chart-label.mjs +2 -2
  117. package/dist/use-chart-legend.d.mts +0 -1
  118. package/dist/use-chart-legend.d.ts +0 -1
  119. package/dist/use-chart-legend.js.map +1 -1
  120. package/dist/use-chart-legend.mjs +2 -2
  121. package/dist/use-chart-reference-line.d.mts +0 -1
  122. package/dist/use-chart-reference-line.d.ts +0 -1
  123. package/dist/use-chart-reference-line.js.map +1 -1
  124. package/dist/use-chart-reference-line.mjs +2 -2
  125. package/dist/use-chart-tooltip.d.mts +0 -1
  126. package/dist/use-chart-tooltip.d.ts +0 -1
  127. package/dist/use-chart-tooltip.js.map +1 -1
  128. package/dist/use-chart-tooltip.mjs +2 -2
  129. package/dist/use-chart.d.mts +0 -1
  130. package/dist/use-chart.d.ts +0 -1
  131. package/dist/use-chart.js.map +1 -1
  132. package/dist/use-chart.mjs +2 -2
  133. package/dist/use-line-chart.d.mts +0 -1
  134. package/dist/use-line-chart.d.ts +0 -1
  135. package/dist/use-line-chart.js.map +1 -1
  136. package/dist/use-line-chart.mjs +2 -2
  137. package/dist/use-pie-chart.d.mts +0 -1
  138. package/dist/use-pie-chart.d.ts +0 -1
  139. package/dist/use-pie-chart.js.map +1 -1
  140. package/dist/use-pie-chart.mjs +2 -2
  141. package/dist/use-polar-grid.d.mts +24 -0
  142. package/dist/use-polar-grid.d.ts +24 -0
  143. package/dist/use-polar-grid.js +90 -0
  144. package/dist/use-polar-grid.js.map +1 -0
  145. package/dist/use-polar-grid.mjs +10 -0
  146. package/dist/use-polar-grid.mjs.map +1 -0
  147. package/dist/use-radar-chart.d.mts +2 -12
  148. package/dist/use-radar-chart.d.ts +2 -12
  149. package/dist/use-radar-chart.js +0 -31
  150. package/dist/use-radar-chart.js.map +1 -1
  151. package/dist/use-radar-chart.mjs +2 -2
  152. package/dist/use-radial-chart.d.mts +80 -0
  153. package/dist/use-radial-chart.d.ts +80 -0
  154. package/dist/use-radial-chart.js +228 -0
  155. package/dist/use-radial-chart.js.map +1 -0
  156. package/dist/use-radial-chart.mjs +10 -0
  157. package/dist/use-radial-chart.mjs.map +1 -0
  158. package/package.json +3 -3
  159. package/dist/chunk-F34FV5DY.mjs.map +0 -1
  160. package/dist/chunk-MT5JI4OR.mjs.map +0 -1
  161. package/dist/chunk-PKRKJQQL.mjs.map +0 -1
  162. package/dist/chunk-UCZQ22IS.mjs.map +0 -1
  163. package/dist/chunk-WRKSJCFE.mjs.map +0 -1
  164. /package/dist/{chunk-STBYN5JW.mjs.map → chunk-3AOICU4Q.mjs.map} +0 -0
  165. /package/dist/{chunk-BRSSQCO4.mjs.map → chunk-6IEXTVWL.mjs.map} +0 -0
  166. /package/dist/{chunk-DGOXJ373.mjs.map → chunk-EL2VTGFB.mjs.map} +0 -0
  167. /package/dist/{chunk-LOXFDA6Z.mjs.map → chunk-JTQ5QCML.mjs.map} +0 -0
  168. /package/dist/{chunk-WDGSALCA.mjs.map → chunk-KBZKJSZJ.mjs.map} +0 -0
  169. /package/dist/{chunk-5XSML5U3.mjs.map → chunk-KVE6VXTJ.mjs.map} +0 -0
  170. /package/dist/{chunk-VO2I73WT.mjs.map → chunk-OOSVO2GS.mjs.map} +0 -0
  171. /package/dist/{chunk-ZHM6LP7J.mjs.map → chunk-PBPH3WDW.mjs.map} +0 -0
  172. /package/dist/{chunk-D7EZKGCJ.mjs.map → chunk-PPBHLDVN.mjs.map} +0 -0
  173. /package/dist/{chunk-TZ62XGYL.mjs.map → chunk-PSPBUPC7.mjs.map} +0 -0
  174. /package/dist/{chunk-RXQNFP7K.mjs.map → chunk-S6C5VMIZ.mjs.map} +0 -0
  175. /package/dist/{chunk-5Q6O726L.mjs.map → chunk-TCSYDMC7.mjs.map} +0 -0
  176. /package/dist/{chunk-NHJDUFKO.mjs.map → chunk-TQRELNDO.mjs.map} +0 -0
  177. /package/dist/{chunk-AOGTJ4EN.mjs.map → chunk-VMBRDEM2.mjs.map} +0 -0
  178. /package/dist/{chunk-WAKQGKGK.mjs.map → chunk-YASR4L6D.mjs.map} +0 -0
  179. /package/dist/{chunk-VK4VQQYY.mjs.map → chunk-YNJ423BR.mjs.map} +0 -0
@@ -0,0 +1,200 @@
1
+ "use client"
2
+ import {
3
+ useRadialChart
4
+ } from "./chunk-NUAKNL26.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
+ var: radialVars,
126
+ __css: { maxW: "full", ...styles.container },
127
+ ...rest,
128
+ children: /* @__PURE__ */ jsx(
129
+ ResponsiveContainer,
130
+ {
131
+ ...getContainerProps({ className: "ui-radial-chart__container" }),
132
+ children: /* @__PURE__ */ jsxs(
133
+ RechartsRadialChart,
134
+ {
135
+ ...getRadialChartProps({
136
+ className: "ui-radial-chart__chart"
137
+ }),
138
+ children: [
139
+ withPolarGrid ? /* @__PURE__ */ jsx(
140
+ PolarGrid,
141
+ {
142
+ ...getPolarGridProps({
143
+ className: "ui-radial-chart__polar-grid"
144
+ })
145
+ }
146
+ ) : null,
147
+ /* @__PURE__ */ jsx(
148
+ RadialBar,
149
+ {
150
+ ...getRadialBarProps({
151
+ className: "ui-radial-chart__radial-bar"
152
+ }),
153
+ children: labelLists
154
+ }
155
+ ),
156
+ withLegend ? /* @__PURE__ */ jsx(
157
+ Legend,
158
+ {
159
+ content: ({ payload }) => /* @__PURE__ */ jsx(
160
+ ChartLegend,
161
+ {
162
+ className: "ui-radial-chart__legend",
163
+ payload,
164
+ onHighlight: setHighlightedArea,
165
+ ...computedLegendProps
166
+ }
167
+ ),
168
+ ...getLegendProps()
169
+ }
170
+ ) : null,
171
+ withTooltip ? /* @__PURE__ */ jsx(
172
+ Tooltip,
173
+ {
174
+ content: ({ payload }) => /* @__PURE__ */ jsx(
175
+ ChartTooltip,
176
+ {
177
+ className: "ui-radial-chart__tooltip",
178
+ isRadialChart: tooltipDataSource === "segment" ? true : false,
179
+ payload: tooltipDataSource === "segment" ? payload : data,
180
+ valueFormatter,
181
+ unit,
182
+ ...computedTooltipProps
183
+ }
184
+ ),
185
+ ...getTooltipProps()
186
+ }
187
+ ) : null
188
+ ]
189
+ }
190
+ )
191
+ }
192
+ )
193
+ }
194
+ ) });
195
+ });
196
+
197
+ export {
198
+ RadialChart
199
+ };
200
+ //# sourceMappingURL=chunk-EL6SJYI5.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/feedback/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 var={radialVars}\n __css={{ maxW: \"full\", ...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,23 +1,26 @@
1
1
  "use client"
2
2
  import {
3
3
  useRadarChart
4
- } from "./chunk-WRKSJCFE.mjs";
4
+ } from "./chunk-AJYZ7MDC.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,
@@ -206,4 +211,4 @@ var RadarChart = forwardRef((props, ref) => {
206
211
  export {
207
212
  RadarChart
208
213
  };
209
- //# sourceMappingURL=chunk-UCZQ22IS.mjs.map
214
+ //# sourceMappingURL=chunk-FQTDUZK2.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/feedback/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 var={radarVars}\n __css={{ maxW: \"full\", ...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
  referenceLineProperties
4
- } from "./chunk-F34FV5DY.mjs";
4
+ } from "./chunk-6YUJLLGN.mjs";
5
5
  import {
6
6
  getComponentProps
7
7
  } from "./chunk-QL3DB7OJ.mjs";
@@ -53,4 +53,4 @@ var useChartReferenceLine = ({
53
53
  export {
54
54
  useChartReferenceLine
55
55
  };
56
- //# sourceMappingURL=chunk-LOXFDA6Z.mjs.map
56
+ //# sourceMappingURL=chunk-JTQ5QCML.mjs.map
@@ -1,26 +1,26 @@
1
1
  "use client"
2
2
  import {
3
3
  useChartLabel
4
- } from "./chunk-5XSML5U3.mjs";
4
+ } from "./chunk-KVE6VXTJ.mjs";
5
5
  import {
6
6
  usePieChart
7
- } from "./chunk-TZ62XGYL.mjs";
8
- import {
9
- useChartLegend
10
- } from "./chunk-5Q6O726L.mjs";
7
+ } from "./chunk-PSPBUPC7.mjs";
11
8
  import {
12
9
  useChartTooltip
13
- } from "./chunk-AOGTJ4EN.mjs";
10
+ } from "./chunk-VMBRDEM2.mjs";
11
+ import {
12
+ useChartLegend
13
+ } from "./chunk-TCSYDMC7.mjs";
14
14
  import {
15
15
  ChartLegend
16
- } from "./chunk-DGOXJ373.mjs";
16
+ } from "./chunk-EL2VTGFB.mjs";
17
17
  import {
18
18
  ChartTooltip
19
- } from "./chunk-MT5JI4OR.mjs";
19
+ } from "./chunk-T5DNDBW6.mjs";
20
20
  import {
21
21
  ChartProvider,
22
22
  useChart
23
- } from "./chunk-STBYN5JW.mjs";
23
+ } from "./chunk-3AOICU4Q.mjs";
24
24
 
25
25
  // src/donut-chart.tsx
26
26
  import {
@@ -194,4 +194,4 @@ var DonutChart = forwardRef((props, ref) => {
194
194
  export {
195
195
  DonutChart
196
196
  };
197
- //# sourceMappingURL=chunk-WDGSALCA.mjs.map
197
+ //# sourceMappingURL=chunk-KBZKJSZJ.mjs.map
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  labelProperties
4
- } from "./chunk-F34FV5DY.mjs";
4
+ } from "./chunk-6YUJLLGN.mjs";
5
5
  import {
6
6
  getComponentProps
7
7
  } from "./chunk-QL3DB7OJ.mjs";
@@ -34,4 +34,4 @@ var useChartLabel = ({ styles, ...rest }) => {
34
34
  export {
35
35
  useChartLabel
36
36
  };
37
- //# sourceMappingURL=chunk-5XSML5U3.mjs.map
37
+ //# sourceMappingURL=chunk-KVE6VXTJ.mjs.map
@@ -0,0 +1,155 @@
1
+ "use client"
2
+ import {
3
+ radialBarProperties,
4
+ radialChartProperties
5
+ } from "./chunk-6YUJLLGN.mjs";
6
+ import {
7
+ getClassName,
8
+ getComponentProps
9
+ } from "./chunk-QL3DB7OJ.mjs";
10
+
11
+ // src/use-radial-chart.ts
12
+ import { getVar, useTheme } from "@yamada-ui/core";
13
+ import { cx } from "@yamada-ui/utils";
14
+ import { useCallback, useMemo, useState } from "react";
15
+ var useRadialChart = ({
16
+ data: dataProp,
17
+ dataKey = "value",
18
+ innerRadius = "10%",
19
+ outerRadius = "80%",
20
+ startAngle = 180,
21
+ endAngle = 0,
22
+ fillOpacity = 1,
23
+ styles,
24
+ ...rest
25
+ }) => {
26
+ var _a;
27
+ const { theme } = useTheme();
28
+ const [highlightedArea, setHighlightedArea] = useState(null);
29
+ const shouldHighlight = highlightedArea !== null;
30
+ const {
31
+ background: backgroundProps = {},
32
+ dimRadialBar: dimRadialBarProps = {},
33
+ ...computedRadialBarProps
34
+ } = (_a = rest.radialBarProps) != null ? _a : {};
35
+ const radialVars = useMemo(
36
+ () => dataProp.map(({ color }, index) => ({
37
+ name: `radial-bar-${index}`,
38
+ token: "colors",
39
+ value: color != null ? color : "transparent"
40
+ })),
41
+ [dataProp]
42
+ );
43
+ const dimRadialBarClassName = useMemo(() => {
44
+ const resolvedDimRadialBar = {
45
+ fillOpacity: 0.3,
46
+ strokeOpacity: 0,
47
+ ...dimRadialBarProps
48
+ };
49
+ return getClassName(resolvedDimRadialBar)(theme);
50
+ }, [dimRadialBarProps, theme]);
51
+ const [chartProps, chartClassName] = useMemo(
52
+ () => {
53
+ var _a2;
54
+ return getComponentProps(
55
+ [(_a2 = rest.chartProps) != null ? _a2 : {}, radialChartProperties],
56
+ styles.chart
57
+ )(theme);
58
+ },
59
+ [rest.chartProps, styles.chart, theme]
60
+ );
61
+ const background = useMemo(
62
+ () => getComponentProps(
63
+ [backgroundProps, radialBarProperties],
64
+ styles.background
65
+ )(theme, true),
66
+ [backgroundProps, styles.background, theme]
67
+ );
68
+ const [radialBarProps, radialBarClassName] = useMemo(
69
+ () => getComponentProps(
70
+ [computedRadialBarProps != null ? computedRadialBarProps : {}, radialBarProperties],
71
+ styles.radialBar
72
+ )(theme),
73
+ [computedRadialBarProps, styles.radialBar, theme]
74
+ );
75
+ const data = useMemo(
76
+ () => dataProp.map((props, index) => {
77
+ const {
78
+ name,
79
+ value,
80
+ color,
81
+ dimRadialBar = {},
82
+ ...computedProps
83
+ } = props;
84
+ const dimmed = shouldHighlight && highlightedArea !== name;
85
+ const resolvedProps = {
86
+ ...computedProps,
87
+ ...dimmed ? dimRadialBar : { fillOpacity }
88
+ };
89
+ const className = getClassName(
90
+ resolvedProps,
91
+ dimmed ? dimRadialBarClassName : void 0
92
+ )(theme);
93
+ return {
94
+ className,
95
+ fill: getVar(`radial-bar-${index}`)(theme),
96
+ name,
97
+ value,
98
+ color
99
+ };
100
+ }),
101
+ [
102
+ dataProp,
103
+ dimRadialBarClassName,
104
+ fillOpacity,
105
+ highlightedArea,
106
+ shouldHighlight,
107
+ theme
108
+ ]
109
+ );
110
+ const getRadialChartProps = useCallback(
111
+ ({ className, ...props } = {}, ref = null) => ({
112
+ ref,
113
+ className: cx(className, chartClassName),
114
+ data,
115
+ innerRadius,
116
+ outerRadius,
117
+ startAngle,
118
+ endAngle,
119
+ ...props,
120
+ ...chartProps
121
+ }),
122
+ [
123
+ chartClassName,
124
+ chartProps,
125
+ data,
126
+ endAngle,
127
+ innerRadius,
128
+ outerRadius,
129
+ startAngle
130
+ ]
131
+ );
132
+ const getRadialBarProps = useCallback(
133
+ ({ className, ...props }, ref = null) => ({
134
+ ref,
135
+ className: cx(className, radialBarClassName),
136
+ dataKey,
137
+ isAnimationActive: false,
138
+ background,
139
+ ...props,
140
+ ...radialBarProps
141
+ }),
142
+ [background, dataKey, radialBarClassName, radialBarProps]
143
+ );
144
+ return {
145
+ radialVars,
146
+ setHighlightedArea,
147
+ getRadialChartProps,
148
+ getRadialBarProps
149
+ };
150
+ };
151
+
152
+ export {
153
+ useRadialChart
154
+ };
155
+ //# sourceMappingURL=chunk-NUAKNL26.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/use-radial-chart.ts"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport type {\n ChartPropGetter,\n RadialBarProps,\n RadialChartProps,\n RequiredChartPropGetter,\n} from \"./chart.types\"\nimport {\n radialBarProperties,\n radialChartProperties,\n} from \"./rechart-properties\"\n\nexport type UseRadialChartOptions = {\n /**\n * Chart data.\n */\n data: Dict[]\n /**\n * The key of a group of data which should be unique in an chart.\n *\n * @default 'value'\n */\n dataKey?: string\n /**\n * Props passed down to recharts `RadialBarChart` component.\n */\n chartProps?: RadialChartProps\n /**\n * Props for the radialBar.\n */\n radialBarProps?: Partial<RadialBarProps>\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 '10%'\n */\n innerRadius?: number | string\n /**\n * Controls thickness of the chart segments. If it is a number, it is calculated as px.\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 '80%'\n */\n outerRadius?: number | string\n /**\n * Controls angle at which chart starts.\n *\n * @default 180\n */\n startAngle?: number\n /**\n * Controls angle at which chart ends.\n *\n * @default 0\n */\n endAngle?: number\n /**\n * Controls fill opacity of all pies.\n *\n * @default 1\n */\n fillOpacity?: number | [number, number]\n}\n\ntype UseRadialChartProps = UseRadialChartOptions & {\n styles: Dict<CSSUIObject>\n}\n\nexport const useRadialChart = ({\n data: dataProp,\n dataKey = \"value\",\n innerRadius = \"10%\",\n outerRadius = \"80%\",\n startAngle = 180,\n endAngle = 0,\n fillOpacity = 1,\n styles,\n ...rest\n}: UseRadialChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null)\n const shouldHighlight = highlightedArea !== null\n const {\n background: backgroundProps = {},\n dimRadialBar: dimRadialBarProps = {},\n ...computedRadialBarProps\n } = rest.radialBarProps ?? {}\n\n const radialVars: CSSUIProps[\"var\"] = useMemo(\n () =>\n dataProp.map(({ color }, index) => ({\n name: `radial-bar-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [dataProp],\n )\n\n const dimRadialBarClassName = useMemo(() => {\n const resolvedDimRadialBar = {\n fillOpacity: 0.3,\n strokeOpacity: 0,\n ...dimRadialBarProps,\n }\n\n return getClassName(resolvedDimRadialBar)(theme)\n }, [dimRadialBarProps, theme])\n\n const [chartProps, chartClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.chartProps ?? {}, radialChartProperties],\n styles.chart,\n )(theme),\n [rest.chartProps, styles.chart, theme],\n )\n\n const background = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [backgroundProps, radialBarProperties],\n styles.background,\n )(theme, true),\n [backgroundProps, styles.background, theme],\n )\n\n const [radialBarProps, radialBarClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [computedRadialBarProps ?? {}, radialBarProperties],\n styles.radialBar,\n )(theme),\n [computedRadialBarProps, styles.radialBar, theme],\n )\n\n const data = useMemo(\n () =>\n dataProp.map((props, index) => {\n const {\n name,\n value,\n color,\n dimRadialBar = {},\n ...computedProps\n } = props\n const dimmed = shouldHighlight && highlightedArea !== name\n const resolvedProps = {\n ...computedProps,\n ...(dimmed ? dimRadialBar : { fillOpacity }),\n }\n\n const className = getClassName(\n resolvedProps,\n dimmed ? dimRadialBarClassName : undefined,\n )(theme)\n\n return {\n className,\n fill: getVar(`radial-bar-${index}`)(theme),\n name,\n value,\n color,\n }\n }),\n [\n dataProp,\n dimRadialBarClassName,\n fillOpacity,\n highlightedArea,\n shouldHighlight,\n theme,\n ],\n )\n\n const getRadialChartProps: ChartPropGetter<\n \"div\",\n ComponentPropsWithoutRef<typeof Recharts.RadialBarChart>,\n ComponentPropsWithoutRef<typeof Recharts.RadialBarChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, chartClassName),\n data,\n innerRadius,\n outerRadius,\n startAngle,\n endAngle,\n ...props,\n ...chartProps,\n }),\n [\n chartClassName,\n chartProps,\n data,\n endAngle,\n innerRadius,\n outerRadius,\n startAngle,\n ],\n )\n\n const getRadialBarProps: RequiredChartPropGetter<\n \"div\",\n Partial<Recharts.RadialBarProps>,\n Omit<Recharts.RadialBarProps, \"ref\">\n > = useCallback(\n ({ className, ...props }, ref = null) => ({\n ref,\n className: cx(className, radialBarClassName),\n dataKey,\n isAnimationActive: false,\n background,\n ...props,\n ...radialBarProps,\n }),\n [background, dataKey, radialBarClassName, radialBarProps],\n )\n\n return {\n radialVars,\n setHighlightedArea,\n getRadialChartProps,\n getRadialBarProps,\n }\n}\n\nexport type UseRadialChartReturn = ReturnType<typeof useRadialChart>\n"],"mappings":"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","names":["_a"]}
@@ -1,32 +1,32 @@
1
1
  "use client"
2
2
  import {
3
3
  useBarChart
4
- } from "./chunk-NHJDUFKO.mjs";
4
+ } from "./chunk-TQRELNDO.mjs";
5
5
  import {
6
6
  useChartAxis
7
- } from "./chunk-VK4VQQYY.mjs";
7
+ } from "./chunk-YNJ423BR.mjs";
8
8
  import {
9
9
  useChartGrid
10
- } from "./chunk-D7EZKGCJ.mjs";
10
+ } from "./chunk-PPBHLDVN.mjs";
11
11
  import {
12
12
  useChartReferenceLine
13
- } from "./chunk-LOXFDA6Z.mjs";
14
- import {
15
- useChartLegend
16
- } from "./chunk-5Q6O726L.mjs";
13
+ } from "./chunk-JTQ5QCML.mjs";
17
14
  import {
18
15
  useChartTooltip
19
- } from "./chunk-AOGTJ4EN.mjs";
16
+ } from "./chunk-VMBRDEM2.mjs";
17
+ import {
18
+ useChartLegend
19
+ } from "./chunk-TCSYDMC7.mjs";
20
20
  import {
21
21
  ChartLegend
22
- } from "./chunk-DGOXJ373.mjs";
22
+ } from "./chunk-EL2VTGFB.mjs";
23
23
  import {
24
24
  ChartTooltip
25
- } from "./chunk-MT5JI4OR.mjs";
25
+ } from "./chunk-T5DNDBW6.mjs";
26
26
  import {
27
27
  ChartProvider,
28
28
  useChart
29
- } from "./chunk-STBYN5JW.mjs";
29
+ } from "./chunk-3AOICU4Q.mjs";
30
30
 
31
31
  // src/bar-chart.tsx
32
32
  import {
@@ -246,4 +246,4 @@ var BarChart = forwardRef((props, ref) => {
246
246
  export {
247
247
  BarChart
248
248
  };
249
- //# sourceMappingURL=chunk-VO2I73WT.mjs.map
249
+ //# sourceMappingURL=chunk-OOSVO2GS.mjs.map
@@ -1,32 +1,32 @@
1
1
  "use client"
2
2
  import {
3
3
  useLineChart
4
- } from "./chunk-BRSSQCO4.mjs";
4
+ } from "./chunk-6IEXTVWL.mjs";
5
5
  import {
6
6
  useChartAxis
7
- } from "./chunk-VK4VQQYY.mjs";
7
+ } from "./chunk-YNJ423BR.mjs";
8
8
  import {
9
9
  useChartGrid
10
- } from "./chunk-D7EZKGCJ.mjs";
10
+ } from "./chunk-PPBHLDVN.mjs";
11
11
  import {
12
12
  useChartReferenceLine
13
- } from "./chunk-LOXFDA6Z.mjs";
14
- import {
15
- useChartLegend
16
- } from "./chunk-5Q6O726L.mjs";
13
+ } from "./chunk-JTQ5QCML.mjs";
17
14
  import {
18
15
  useChartTooltip
19
- } from "./chunk-AOGTJ4EN.mjs";
16
+ } from "./chunk-VMBRDEM2.mjs";
17
+ import {
18
+ useChartLegend
19
+ } from "./chunk-TCSYDMC7.mjs";
20
20
  import {
21
21
  ChartLegend
22
- } from "./chunk-DGOXJ373.mjs";
22
+ } from "./chunk-EL2VTGFB.mjs";
23
23
  import {
24
24
  ChartTooltip
25
- } from "./chunk-MT5JI4OR.mjs";
25
+ } from "./chunk-T5DNDBW6.mjs";
26
26
  import {
27
27
  ChartProvider,
28
28
  useChart
29
- } from "./chunk-STBYN5JW.mjs";
29
+ } from "./chunk-3AOICU4Q.mjs";
30
30
 
31
31
  // src/line-chart.tsx
32
32
  import {
@@ -264,4 +264,4 @@ var LineChart = forwardRef((props, ref) => {
264
264
  export {
265
265
  LineChart
266
266
  };
267
- //# sourceMappingURL=chunk-ZHM6LP7J.mjs.map
267
+ //# sourceMappingURL=chunk-PBPH3WDW.mjs.map
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  gridProperties
4
- } from "./chunk-F34FV5DY.mjs";
4
+ } from "./chunk-6YUJLLGN.mjs";
5
5
  import {
6
6
  getComponentProps
7
7
  } from "./chunk-QL3DB7OJ.mjs";
@@ -39,4 +39,4 @@ var useChartGrid = ({
39
39
  export {
40
40
  useChartGrid
41
41
  };
42
- //# sourceMappingURL=chunk-D7EZKGCJ.mjs.map
42
+ //# sourceMappingURL=chunk-PPBHLDVN.mjs.map