@yamada-ui/charts 1.5.4-next-20241005220055 → 1.5.4-next-20241008193728

Sign up to get free protection for your applications and to get access to all the features.
Files changed (225) hide show
  1. package/dist/area-chart-gradient.d.mts +2 -2
  2. package/dist/area-chart-gradient.d.ts +2 -2
  3. package/dist/area-chart-gradient.js +7 -5
  4. package/dist/area-chart-gradient.js.map +1 -1
  5. package/dist/area-chart-gradient.mjs +1 -1
  6. package/dist/area-chart-split.d.mts +2 -2
  7. package/dist/area-chart-split.d.ts +2 -2
  8. package/dist/area-chart-split.js +4 -2
  9. package/dist/area-chart-split.js.map +1 -1
  10. package/dist/area-chart-split.mjs +1 -1
  11. package/dist/area-chart.d.mts +8 -8
  12. package/dist/area-chart.d.ts +8 -8
  13. package/dist/area-chart.js +190 -175
  14. package/dist/area-chart.js.map +1 -1
  15. package/dist/area-chart.mjs +13 -13
  16. package/dist/bar-chart.d.mts +8 -8
  17. package/dist/bar-chart.d.ts +8 -8
  18. package/dist/bar-chart.js +143 -127
  19. package/dist/bar-chart.js.map +1 -1
  20. package/dist/bar-chart.mjs +11 -11
  21. package/dist/chart-legend.d.mts +1 -1
  22. package/dist/chart-legend.d.ts +1 -1
  23. package/dist/chart-legend.js +4 -2
  24. package/dist/chart-legend.js.map +1 -1
  25. package/dist/chart-legend.mjs +3 -3
  26. package/dist/chart-tooltip.d.mts +4 -4
  27. package/dist/chart-tooltip.d.ts +4 -4
  28. package/dist/chart-tooltip.js +9 -7
  29. package/dist/chart-tooltip.js.map +1 -1
  30. package/dist/chart-tooltip.mjs +3 -3
  31. package/dist/chart-utils.js.map +1 -1
  32. package/dist/chart-utils.mjs +1 -1
  33. package/dist/chart.types.d.mts +14 -14
  34. package/dist/chart.types.d.ts +14 -14
  35. package/dist/chart.types.js.map +1 -1
  36. package/dist/{chunk-UANITMH7.mjs → chunk-5VLSGWQD.mjs} +10 -8
  37. package/dist/chunk-5VLSGWQD.mjs.map +1 -0
  38. package/dist/{chunk-XYUYAHJX.mjs → chunk-6JRMEI6J.mjs} +2 -2
  39. package/dist/chunk-6JRMEI6J.mjs.map +1 -0
  40. package/dist/{chunk-VKBRU4Z4.mjs → chunk-AYVTBRCS.mjs} +29 -28
  41. package/dist/chunk-AYVTBRCS.mjs.map +1 -0
  42. package/dist/{chunk-6O5G3WYP.mjs → chunk-EZG52466.mjs} +29 -21
  43. package/dist/chunk-EZG52466.mjs.map +1 -0
  44. package/dist/{chunk-VEFEKDMH.mjs → chunk-FDALM73K.mjs} +15 -14
  45. package/dist/chunk-FDALM73K.mjs.map +1 -0
  46. package/dist/{chunk-2GQHI23M.mjs → chunk-GU4SGNWX.mjs} +5 -5
  47. package/dist/chunk-GU4SGNWX.mjs.map +1 -0
  48. package/dist/{chunk-MVRWZTQ5.mjs → chunk-NLXYCM5J.mjs} +2 -2
  49. package/dist/chunk-NLXYCM5J.mjs.map +1 -0
  50. package/dist/{chunk-EXBYAVSP.mjs → chunk-NMPNNSBN.mjs} +76 -74
  51. package/dist/chunk-NMPNNSBN.mjs.map +1 -0
  52. package/dist/{chunk-AL4MDJ4U.mjs → chunk-NQPC5LPY.mjs} +84 -82
  53. package/dist/chunk-NQPC5LPY.mjs.map +1 -0
  54. package/dist/{chunk-MN7T76SY.mjs → chunk-OG5CVPPV.mjs} +5 -3
  55. package/dist/chunk-OG5CVPPV.mjs.map +1 -0
  56. package/dist/{chunk-LLOU2WIV.mjs → chunk-OUIKA4AX.mjs} +5 -3
  57. package/dist/chunk-OUIKA4AX.mjs.map +1 -0
  58. package/dist/{chunk-3EHZJFIA.mjs → chunk-PKQB4BFG.mjs} +28 -28
  59. package/dist/chunk-PKQB4BFG.mjs.map +1 -0
  60. package/dist/{chunk-C3ZYUDXE.mjs → chunk-QPMW56KA.mjs} +52 -48
  61. package/dist/chunk-QPMW56KA.mjs.map +1 -0
  62. package/dist/{chunk-IJRYXT4V.mjs → chunk-R2LOTDR3.mjs} +2 -2
  63. package/dist/{chunk-IJRYXT4V.mjs.map → chunk-R2LOTDR3.mjs.map} +1 -1
  64. package/dist/{chunk-LSCPL7PM.mjs → chunk-SCY5V45W.mjs} +58 -56
  65. package/dist/chunk-SCY5V45W.mjs.map +1 -0
  66. package/dist/{chunk-VGNCWS23.mjs → chunk-SYBJTMPL.mjs} +92 -90
  67. package/dist/chunk-SYBJTMPL.mjs.map +1 -0
  68. package/dist/{chunk-ZGXEF3LO.mjs → chunk-TA7YJAW4.mjs} +49 -47
  69. package/dist/chunk-TA7YJAW4.mjs.map +1 -0
  70. package/dist/{chunk-O3LMKYXK.mjs → chunk-TU6MKMMV.mjs} +29 -28
  71. package/dist/chunk-TU6MKMMV.mjs.map +1 -0
  72. package/dist/{chunk-QL3DB7OJ.mjs → chunk-TXNC7GLT.mjs} +1 -1
  73. package/dist/{chunk-QL3DB7OJ.mjs.map → chunk-TXNC7GLT.mjs.map} +1 -1
  74. package/dist/{chunk-NHHJ5XFF.mjs → chunk-U325CYNR.mjs} +8 -6
  75. package/dist/chunk-U325CYNR.mjs.map +1 -0
  76. package/dist/{chunk-OPPMMNGP.mjs → chunk-UER5GW4M.mjs} +33 -24
  77. package/dist/chunk-UER5GW4M.mjs.map +1 -0
  78. package/dist/{chunk-FYAC4RRZ.mjs → chunk-UTD4XZDM.mjs} +11 -10
  79. package/dist/chunk-UTD4XZDM.mjs.map +1 -0
  80. package/dist/{chunk-A3IWA366.mjs → chunk-VK65X6Q2.mjs} +4 -4
  81. package/dist/chunk-VK65X6Q2.mjs.map +1 -0
  82. package/dist/{chunk-OJ2MLZZ7.mjs → chunk-X6PIY2M3.mjs} +7 -7
  83. package/dist/chunk-X6PIY2M3.mjs.map +1 -0
  84. package/dist/{chunk-MSG3WFBO.mjs → chunk-YIAK5DIM.mjs} +7 -6
  85. package/dist/chunk-YIAK5DIM.mjs.map +1 -0
  86. package/dist/{chunk-ZXBE4ERW.mjs → chunk-YTUEG4IY.mjs} +47 -45
  87. package/dist/chunk-YTUEG4IY.mjs.map +1 -0
  88. package/dist/{chunk-VUTCH2CU.mjs → chunk-YX23LEQ7.mjs} +13 -13
  89. package/dist/chunk-YX23LEQ7.mjs.map +1 -0
  90. package/dist/{chunk-BQT5TIKZ.mjs → chunk-ZRV4LO67.mjs} +44 -42
  91. package/dist/chunk-ZRV4LO67.mjs.map +1 -0
  92. package/dist/donut-chart.js +97 -89
  93. package/dist/donut-chart.js.map +1 -1
  94. package/dist/donut-chart.mjs +10 -10
  95. package/dist/index.d.mts +14 -14
  96. package/dist/index.d.ts +14 -14
  97. package/dist/index.js +2084 -2036
  98. package/dist/index.js.map +1 -1
  99. package/dist/index.mjs +28 -28
  100. package/dist/index.mjs.map +1 -1
  101. package/dist/line-chart.d.mts +7 -7
  102. package/dist/line-chart.d.ts +7 -7
  103. package/dist/line-chart.js +146 -138
  104. package/dist/line-chart.js.map +1 -1
  105. package/dist/line-chart.mjs +11 -11
  106. package/dist/pie-chart-label.d.mts +9 -9
  107. package/dist/pie-chart-label.d.ts +9 -9
  108. package/dist/pie-chart-label.js +14 -13
  109. package/dist/pie-chart-label.js.map +1 -1
  110. package/dist/pie-chart-label.mjs +1 -1
  111. package/dist/pie-chart.d.mts +11 -11
  112. package/dist/pie-chart.d.ts +11 -11
  113. package/dist/pie-chart.js +95 -87
  114. package/dist/pie-chart.js.map +1 -1
  115. package/dist/pie-chart.mjs +9 -9
  116. package/dist/radar-chart.d.mts +11 -11
  117. package/dist/radar-chart.d.ts +11 -11
  118. package/dist/radar-chart.js +87 -73
  119. package/dist/radar-chart.js.map +1 -1
  120. package/dist/radar-chart.mjs +9 -9
  121. package/dist/radial-chart.d.mts +10 -10
  122. package/dist/radial-chart.d.ts +10 -10
  123. package/dist/radial-chart.js +69 -62
  124. package/dist/radial-chart.js.map +1 -1
  125. package/dist/radial-chart.mjs +10 -10
  126. package/dist/use-area-chart.d.mts +53 -53
  127. package/dist/use-area-chart.d.ts +53 -53
  128. package/dist/use-area-chart.js +50 -46
  129. package/dist/use-area-chart.js.map +1 -1
  130. package/dist/use-area-chart.mjs +2 -2
  131. package/dist/use-bar-chart.d.mts +32 -32
  132. package/dist/use-bar-chart.d.ts +32 -32
  133. package/dist/use-bar-chart.js +30 -21
  134. package/dist/use-bar-chart.js.map +1 -1
  135. package/dist/use-bar-chart.mjs +2 -2
  136. package/dist/use-chart-axis.d.mts +27 -27
  137. package/dist/use-chart-axis.d.ts +27 -27
  138. package/dist/use-chart-axis.js +26 -26
  139. package/dist/use-chart-axis.js.map +1 -1
  140. package/dist/use-chart-axis.mjs +2 -2
  141. package/dist/use-chart-grid.d.mts +8 -8
  142. package/dist/use-chart-grid.d.ts +8 -8
  143. package/dist/use-chart-grid.js +3 -3
  144. package/dist/use-chart-grid.js.map +1 -1
  145. package/dist/use-chart-grid.mjs +2 -2
  146. package/dist/use-chart-label-list.d.mts +4 -4
  147. package/dist/use-chart-label-list.d.ts +4 -4
  148. package/dist/use-chart-label-list.js +5 -4
  149. package/dist/use-chart-label-list.js.map +1 -1
  150. package/dist/use-chart-label-list.mjs +2 -2
  151. package/dist/use-chart-label.d.mts +1 -1
  152. package/dist/use-chart-label.d.ts +1 -1
  153. package/dist/use-chart-label.js.map +1 -1
  154. package/dist/use-chart-label.mjs +2 -2
  155. package/dist/use-chart-legend.d.mts +1 -1
  156. package/dist/use-chart-legend.d.ts +1 -1
  157. package/dist/use-chart-legend.js +1 -1
  158. package/dist/use-chart-legend.js.map +1 -1
  159. package/dist/use-chart-legend.mjs +1 -1
  160. package/dist/use-chart-reference-line.d.mts +4 -4
  161. package/dist/use-chart-reference-line.d.ts +4 -4
  162. package/dist/use-chart-reference-line.js +8 -7
  163. package/dist/use-chart-reference-line.js.map +1 -1
  164. package/dist/use-chart-reference-line.mjs +2 -2
  165. package/dist/use-chart-tooltip.d.mts +7 -7
  166. package/dist/use-chart-tooltip.d.ts +7 -7
  167. package/dist/use-chart-tooltip.js +4 -4
  168. package/dist/use-chart-tooltip.js.map +1 -1
  169. package/dist/use-chart-tooltip.mjs +2 -2
  170. package/dist/use-chart.d.mts +6 -10
  171. package/dist/use-chart.d.ts +6 -10
  172. package/dist/use-chart.js +2 -2
  173. package/dist/use-chart.js.map +1 -1
  174. package/dist/use-chart.mjs +2 -2
  175. package/dist/use-line-chart.d.mts +43 -43
  176. package/dist/use-line-chart.d.ts +43 -43
  177. package/dist/use-line-chart.js +26 -25
  178. package/dist/use-line-chart.js.map +1 -1
  179. package/dist/use-line-chart.mjs +2 -2
  180. package/dist/use-pie-chart.d.mts +47 -47
  181. package/dist/use-pie-chart.d.ts +47 -47
  182. package/dist/use-pie-chart.js +40 -38
  183. package/dist/use-pie-chart.js.map +1 -1
  184. package/dist/use-pie-chart.mjs +3 -3
  185. package/dist/use-polar-grid.d.mts +5 -5
  186. package/dist/use-polar-grid.d.ts +5 -5
  187. package/dist/use-polar-grid.js.map +1 -1
  188. package/dist/use-polar-grid.mjs +2 -2
  189. package/dist/use-radar-chart.d.mts +41 -41
  190. package/dist/use-radar-chart.d.ts +41 -41
  191. package/dist/use-radar-chart.js +27 -19
  192. package/dist/use-radar-chart.js.map +1 -1
  193. package/dist/use-radar-chart.mjs +2 -2
  194. package/dist/use-radial-chart.d.mts +17 -17
  195. package/dist/use-radial-chart.d.ts +17 -17
  196. package/dist/use-radial-chart.js +11 -11
  197. package/dist/use-radial-chart.js.map +1 -1
  198. package/dist/use-radial-chart.mjs +2 -2
  199. package/package.json +3 -3
  200. package/dist/chunk-2GQHI23M.mjs.map +0 -1
  201. package/dist/chunk-3EHZJFIA.mjs.map +0 -1
  202. package/dist/chunk-6O5G3WYP.mjs.map +0 -1
  203. package/dist/chunk-A3IWA366.mjs.map +0 -1
  204. package/dist/chunk-AL4MDJ4U.mjs.map +0 -1
  205. package/dist/chunk-BQT5TIKZ.mjs.map +0 -1
  206. package/dist/chunk-C3ZYUDXE.mjs.map +0 -1
  207. package/dist/chunk-EXBYAVSP.mjs.map +0 -1
  208. package/dist/chunk-FYAC4RRZ.mjs.map +0 -1
  209. package/dist/chunk-LLOU2WIV.mjs.map +0 -1
  210. package/dist/chunk-LSCPL7PM.mjs.map +0 -1
  211. package/dist/chunk-MN7T76SY.mjs.map +0 -1
  212. package/dist/chunk-MSG3WFBO.mjs.map +0 -1
  213. package/dist/chunk-MVRWZTQ5.mjs.map +0 -1
  214. package/dist/chunk-NHHJ5XFF.mjs.map +0 -1
  215. package/dist/chunk-O3LMKYXK.mjs.map +0 -1
  216. package/dist/chunk-OJ2MLZZ7.mjs.map +0 -1
  217. package/dist/chunk-OPPMMNGP.mjs.map +0 -1
  218. package/dist/chunk-UANITMH7.mjs.map +0 -1
  219. package/dist/chunk-VEFEKDMH.mjs.map +0 -1
  220. package/dist/chunk-VGNCWS23.mjs.map +0 -1
  221. package/dist/chunk-VKBRU4Z4.mjs.map +0 -1
  222. package/dist/chunk-VUTCH2CU.mjs.map +0 -1
  223. package/dist/chunk-XYUYAHJX.mjs.map +0 -1
  224. package/dist/chunk-ZGXEF3LO.mjs.map +0 -1
  225. package/dist/chunk-ZXBE4ERW.mjs.map +0 -1
@@ -1,165 +1,165 @@
1
1
  "use client"
2
2
  import {
3
3
  useLineChart
4
- } from "./chunk-VKBRU4Z4.mjs";
4
+ } from "./chunk-AYVTBRCS.mjs";
5
5
  import {
6
6
  useChartAxis
7
- } from "./chunk-3EHZJFIA.mjs";
7
+ } from "./chunk-PKQB4BFG.mjs";
8
8
  import {
9
9
  useChartGrid
10
- } from "./chunk-2GQHI23M.mjs";
10
+ } from "./chunk-GU4SGNWX.mjs";
11
11
  import {
12
12
  useChartReferenceLine
13
- } from "./chunk-FYAC4RRZ.mjs";
13
+ } from "./chunk-UTD4XZDM.mjs";
14
14
  import {
15
15
  useChartTooltip
16
- } from "./chunk-OJ2MLZZ7.mjs";
16
+ } from "./chunk-X6PIY2M3.mjs";
17
17
  import {
18
18
  useChartLegend
19
- } from "./chunk-IJRYXT4V.mjs";
19
+ } from "./chunk-R2LOTDR3.mjs";
20
20
  import {
21
21
  ChartLegend
22
- } from "./chunk-LLOU2WIV.mjs";
22
+ } from "./chunk-OUIKA4AX.mjs";
23
23
  import {
24
24
  ChartTooltip
25
- } from "./chunk-UANITMH7.mjs";
25
+ } from "./chunk-5VLSGWQD.mjs";
26
26
  import {
27
27
  ChartProvider,
28
28
  useChart
29
- } from "./chunk-A3IWA366.mjs";
29
+ } from "./chunk-VK65X6Q2.mjs";
30
30
 
31
31
  // src/line-chart.tsx
32
32
  import {
33
- ui,
34
33
  forwardRef,
35
- useComponentMultiStyle,
36
- omitThemeProps
34
+ omitThemeProps,
35
+ ui,
36
+ useComponentMultiStyle
37
37
  } from "@yamada-ui/core";
38
38
  import { cx } from "@yamada-ui/utils";
39
39
  import { useMemo } from "react";
40
40
  import {
41
- LineChart as ReChartsLineChart,
42
- Legend,
43
41
  CartesianGrid,
42
+ Label,
43
+ Legend,
44
+ Line,
45
+ LineChart as ReChartsLineChart,
46
+ ReferenceLine,
44
47
  ResponsiveContainer,
45
48
  Tooltip,
46
49
  XAxis,
47
- YAxis,
48
- ReferenceLine,
49
- Line,
50
- Label
50
+ YAxis
51
51
  } from "recharts";
52
52
  import { jsx, jsxs } from "react/jsx-runtime";
53
53
  var LineChart = forwardRef((props, ref) => {
54
54
  const [styles, mergedProps] = useComponentMultiStyle("LineChart", props);
55
55
  const {
56
+ type,
56
57
  className,
57
- containerProps,
58
- gridProps,
59
- gridAxis,
60
- strokeDasharray,
58
+ connectNulls,
59
+ curveType,
60
+ data,
61
61
  dataKey,
62
- type,
62
+ fillOpacity,
63
+ gridAxis,
64
+ labelFormatter,
63
65
  layoutType,
66
+ series,
67
+ strokeDasharray,
68
+ strokeWidth,
69
+ syncId,
64
70
  tickLine,
71
+ tooltipAnimationDuration,
72
+ unit,
73
+ valueFormatter,
74
+ withActiveDots,
75
+ withDots,
76
+ withLegend = false,
77
+ withTooltip = true,
65
78
  withXAxis,
66
79
  withYAxis,
67
- xAxisProps,
68
- yAxisProps,
69
80
  xAxisLabel,
81
+ xAxisTickFormatter,
70
82
  yAxisLabel,
71
- xAxisLabelProps,
72
- yAxisLabelProps,
73
- unit,
74
83
  yAxisTickFormatter,
75
- xAxisTickFormatter,
76
- valueFormatter,
77
- labelFormatter,
78
- referenceLineProps,
79
- tooltipProps,
80
- tooltipAnimationDuration,
81
- legendProps,
82
- withLegend = false,
83
- withTooltip = true,
84
- series,
85
- data,
86
84
  chartProps,
85
+ containerProps,
86
+ gridProps,
87
+ legendProps,
87
88
  lineProps,
88
- withDots,
89
- withActiveDots,
90
- curveType,
91
- strokeWidth,
92
- connectNulls,
93
- fillOpacity,
94
- syncId,
89
+ referenceLineProps,
90
+ tooltipProps,
91
+ xAxisLabelProps,
92
+ xAxisProps,
93
+ yAxisLabelProps,
94
+ yAxisProps,
95
95
  ...rest
96
96
  } = omitThemeProps(mergedProps);
97
- const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } = useLineChart({
97
+ const { lineVars, setHighlightedArea, getLineChartProps, getLineProps } = useLineChart({
98
+ connectNulls,
99
+ curveType,
100
+ data,
101
+ fillOpacity,
98
102
  layoutType,
99
103
  series,
100
- referenceLineProps,
101
- data,
102
- chartProps,
103
- lineProps,
104
- withDots,
105
- withActiveDots,
106
- curveType,
107
104
  strokeWidth,
108
- connectNulls,
109
- fillOpacity,
105
+ styles,
110
106
  syncId,
107
+ withActiveDots,
108
+ withDots,
111
109
  xAxisLabel,
112
110
  yAxisLabel,
113
- styles
111
+ chartProps,
112
+ lineProps,
113
+ referenceLineProps
114
114
  });
115
115
  const { getContainerProps } = useChart({ containerProps });
116
116
  const {
117
- getXAxisProps,
118
- getYAxisProps,
119
117
  getXAxisLabelProps,
120
- getYAxisLabelProps
118
+ getXAxisProps,
119
+ getYAxisLabelProps,
120
+ getYAxisProps
121
121
  } = useChartAxis({
122
- dataKey,
123
122
  type,
123
+ dataKey,
124
+ gridAxis,
124
125
  layoutType,
126
+ styles,
125
127
  tickLine,
126
- gridAxis,
128
+ unit,
127
129
  withXAxis,
128
130
  withYAxis,
129
- xAxisProps,
130
- yAxisProps,
131
131
  xAxisLabel,
132
+ xAxisTickFormatter,
132
133
  yAxisLabel,
134
+ yAxisTickFormatter,
133
135
  xAxisLabelProps,
136
+ xAxisProps,
134
137
  yAxisLabelProps,
135
- unit,
136
- yAxisTickFormatter,
137
- xAxisTickFormatter,
138
- styles
138
+ yAxisProps
139
139
  });
140
140
  const { getReferenceLineProps } = useChartReferenceLine({
141
- referenceLineProps,
142
- styles
141
+ styles,
142
+ referenceLineProps
143
143
  });
144
144
  const { getGridProps } = useChartGrid({
145
- gridProps,
146
145
  gridAxis,
147
146
  strokeDasharray,
148
- styles
147
+ styles,
148
+ gridProps
149
149
  });
150
- const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
151
- tooltipProps,
150
+ const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
151
+ styles,
152
152
  tooltipAnimationDuration,
153
- styles
153
+ tooltipProps
154
154
  });
155
- const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
155
+ const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
156
156
  legendProps
157
157
  });
158
158
  const lines = useMemo(
159
159
  () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ jsx(
160
160
  Line,
161
161
  {
162
- ...getLineProps({ index, className: "ui-line-chart__line" })
162
+ ...getLineProps({ className: "ui-line-chart__line", index })
163
163
  },
164
164
  `line-${dataKey2}`
165
165
  )),
@@ -170,8 +170,8 @@ var LineChart = forwardRef((props, ref) => {
170
170
  ReferenceLine,
171
171
  {
172
172
  ...getReferenceLineProps({
173
- index,
174
- className: "ui-line-chart__reference-line"
173
+ className: "ui-line-chart__reference-line",
174
+ index
175
175
  })
176
176
  },
177
177
  `referenceLine-${index}`
@@ -239,10 +239,10 @@ var LineChart = forwardRef((props, ref) => {
239
239
  {
240
240
  className: "ui-line-chart__tooltip",
241
241
  label,
242
- payload,
243
- valueFormatter,
244
242
  labelFormatter,
243
+ payload,
245
244
  unit,
245
+ valueFormatter,
246
246
  ...computedTooltipProps
247
247
  }
248
248
  ),
@@ -259,8 +259,10 @@ var LineChart = forwardRef((props, ref) => {
259
259
  }
260
260
  ) });
261
261
  });
262
+ LineChart.displayName = "LineChart";
263
+ LineChart.__ui__ = "LineChart";
262
264
 
263
265
  export {
264
266
  LineChart
265
267
  };
266
- //# sourceMappingURL=chunk-AL4MDJ4U.mjs.map
268
+ //# sourceMappingURL=chunk-NQPC5LPY.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/line-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartAxisOptions } from \"./use-chart-axis\"\nimport type { UseChartGridOptions } from \"./use-chart-grid\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartReferenceLineOptions } from \"./use-chart-reference-line\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport type { UseLineChartOptions } from \"./use-line-chart\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n CartesianGrid,\n Label,\n Legend,\n Line,\n LineChart as ReChartsLineChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartAxis } from \"./use-chart-axis\"\nimport { useChartGrid } from \"./use-chart-grid\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartReferenceLine } from \"./use-chart-reference-line\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { useLineChart } from \"./use-line-chart\"\n\ninterface LineChartOptions {\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n}\n\nexport interface LineChartProps\n extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeDasharray\" | \"strokeWidth\">,\n ThemeProps<\"LineChart\">,\n LineChartOptions,\n UseChartProps,\n UseChartAxisOptions,\n UseChartReferenceLineOptions,\n UseChartGridOptions,\n UseChartTooltipOptions,\n UseChartLegendProps,\n UseLineChartOptions {}\n\n/**\n * `LineChart` is a component for drawing line charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/line-chart\n */\nexport const LineChart = forwardRef<LineChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"LineChart\", props)\n const {\n type,\n className,\n connectNulls,\n curveType,\n data,\n dataKey,\n fillOpacity,\n gridAxis,\n labelFormatter,\n layoutType,\n series,\n strokeDasharray,\n strokeWidth,\n syncId,\n tickLine,\n tooltipAnimationDuration,\n unit,\n valueFormatter,\n withActiveDots,\n withDots,\n withLegend = false,\n withTooltip = true,\n withXAxis,\n withYAxis,\n xAxisLabel,\n xAxisTickFormatter,\n yAxisLabel,\n yAxisTickFormatter,\n chartProps,\n containerProps,\n gridProps,\n legendProps,\n lineProps,\n referenceLineProps,\n tooltipProps,\n xAxisLabelProps,\n xAxisProps,\n yAxisLabelProps,\n yAxisProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { lineVars, setHighlightedArea, getLineChartProps, getLineProps } =\n useLineChart({\n connectNulls,\n curveType,\n data,\n fillOpacity,\n layoutType,\n series,\n strokeWidth,\n styles,\n syncId,\n withActiveDots,\n withDots,\n xAxisLabel,\n yAxisLabel,\n chartProps,\n lineProps,\n referenceLineProps,\n })\n const { getContainerProps } = useChart({ containerProps })\n const {\n getXAxisLabelProps,\n getXAxisProps,\n getYAxisLabelProps,\n getYAxisProps,\n } = useChartAxis({\n type,\n dataKey,\n gridAxis,\n layoutType,\n styles,\n tickLine,\n unit,\n withXAxis,\n withYAxis,\n xAxisLabel,\n xAxisTickFormatter,\n yAxisLabel,\n yAxisTickFormatter,\n xAxisLabelProps,\n xAxisProps,\n yAxisLabelProps,\n yAxisProps,\n })\n const { getReferenceLineProps } = useChartReferenceLine({\n styles,\n referenceLineProps,\n })\n const { getGridProps } = useChartGrid({\n gridAxis,\n strokeDasharray,\n styles,\n gridProps,\n })\n const { getTooltipProps, tooltipProps: computedTooltipProps } =\n useChartTooltip({\n styles,\n tooltipAnimationDuration,\n tooltipProps,\n })\n const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n legendProps,\n })\n\n const lines = useMemo(\n () =>\n series.map(({ dataKey }, index) => (\n <Line\n key={`line-${dataKey}`}\n {...getLineProps({ className: \"ui-line-chart__line\", index })}\n />\n )),\n [getLineProps, series],\n )\n\n const referenceLinesItems = useMemo(\n () =>\n referenceLineProps?.map((_, index) => (\n <ReferenceLine\n key={`referenceLine-${index}`}\n {...getReferenceLineProps({\n className: \"ui-line-chart__reference-line\",\n index,\n })}\n />\n )),\n [getReferenceLineProps, referenceLineProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-line-chart\", className)}\n __css={{ maxW: \"full\", vars: lineVars, ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-line-chart__container\" })}\n >\n <ReChartsLineChart\n {...getLineChartProps({ className: \"ui-line-chart__chart\" })}\n >\n <CartesianGrid\n {...getGridProps({ className: \"ui-line-chart__grid\" })}\n />\n\n <XAxis {...getXAxisProps({ className: \"ui-line-chart__x-axis\" })}>\n <Label\n {...getXAxisLabelProps({\n className: \"ui-line-chart__x-axis-label\",\n })}\n />\n </XAxis>\n\n <YAxis {...getYAxisProps({ className: \"ui-line-chart__y-axis\" })}>\n <Label\n {...getYAxisLabelProps({\n className: \"ui-line-chart__y-axis-label\",\n })}\n />\n </YAxis>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-line-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 labelFormatter={labelFormatter}\n payload={payload}\n unit={unit}\n valueFormatter={valueFormatter}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n\n {lines}\n {referenceLinesItems}\n </ReChartsLineChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n\nLineChart.displayName = \"LineChart\"\nLineChart.__ui__ = \"LineChart\"\n"],"mappings":"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","names":["dataKey"]}
@@ -3,9 +3,9 @@
3
3
  // src/area-chart-split.tsx
4
4
  import { getVar, useTheme } from "@yamada-ui/core";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
- var AreaSplit = ({ offset, id, fillOpacity }) => {
6
+ var AreaSplit = ({ id, fillOpacity, offset }) => {
7
7
  const { theme } = useTheme();
8
- return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
8
+ return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: [
9
9
  /* @__PURE__ */ jsx(
10
10
  "stop",
11
11
  {
@@ -24,8 +24,10 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
24
24
  )
25
25
  ] });
26
26
  };
27
+ AreaSplit.displayName = "AreaSplit";
28
+ AreaSplit.__ui__ = "AreaSplit";
27
29
 
28
30
  export {
29
31
  AreaSplit
30
32
  };
31
- //# sourceMappingURL=chunk-MN7T76SY.mjs.map
33
+ //# sourceMappingURL=chunk-OG5CVPPV.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/area-chart-split.tsx"],"sourcesContent":["import type { FC } from \"@yamada-ui/core\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\n\nexport interface AreaSplitProps {\n fillOpacity: number | string | undefined\n offset: number\n id?: string\n}\n\nexport const AreaSplit: FC<AreaSplitProps> = ({ id, fillOpacity, offset }) => {\n const { theme } = useTheme()\n\n return (\n <linearGradient id={id} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop\n offset={offset}\n stopColor={getVar(`area-split-0`)(theme)}\n stopOpacity={fillOpacity ?? 0.4}\n />\n <stop\n offset={offset}\n stopColor={getVar(`area-split-1`)(theme)}\n stopOpacity={fillOpacity ?? 0.4}\n />\n </linearGradient>\n )\n}\n\nAreaSplit.displayName = \"AreaSplit\"\nAreaSplit.__ui__ = \"AreaSplit\"\n"],"mappings":";;;AACA,SAAS,QAAQ,gBAAgB;AAY7B,SACE,KADF;AAJG,IAAM,YAAgC,CAAC,EAAE,IAAI,aAAa,OAAO,MAAM;AAC5E,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,SACE,qBAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,OAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,OAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  useLegend
4
- } from "./chunk-A3IWA366.mjs";
4
+ } from "./chunk-VK65X6Q2.mjs";
5
5
 
6
6
  // src/chart-legend.tsx
7
7
  import { forwardRef, ui } from "@yamada-ui/core";
@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
10
10
  var ChartLegend = forwardRef(
11
11
  ({ className, payload = [], onHighlight, ...rest }, ref) => {
12
12
  const { styles } = useLegend();
13
- const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
13
+ const items = payload.map(({ color, dataKey, value: valueProp }, index) => {
14
14
  const value = dataKey != null ? dataKey : valueProp;
15
15
  return /* @__PURE__ */ jsxs(
16
16
  ui.div,
@@ -46,8 +46,10 @@ var ChartLegend = forwardRef(
46
46
  );
47
47
  }
48
48
  );
49
+ ChartLegend.displayName = "ChartLegend";
50
+ ChartLegend.__ui__ = "ChartLegend";
49
51
 
50
52
  export {
51
53
  ChartLegend
52
54
  };
53
- //# sourceMappingURL=chunk-LLOU2WIV.mjs.map
55
+ //# sourceMappingURL=chunk-OUIKA4AX.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/chart-legend.tsx"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useLegend } from \"./use-chart\"\n\ninterface ChartLegendOptions {\n onHighlight: (area: null | string) => void\n payload?: Dict[]\n}\n\nexport interface ChartLegendProps extends HTMLUIProps, ChartLegendOptions {}\n\nexport const ChartLegend = forwardRef<ChartLegendProps, \"div\">(\n ({ className, payload = [], onHighlight, ...rest }, ref) => {\n const { styles } = useLegend()\n\n const items = payload.map(({ color, dataKey, value: valueProp }, index) => {\n const value = dataKey ?? valueProp\n\n return (\n <ui.div\n key={`legend-${index}`}\n className=\"ui-chart__legend-item\"\n onMouseEnter={() => onHighlight(value)}\n onMouseLeave={() => onHighlight(null)}\n __css={styles.legendItem}\n >\n <ui.div\n className=\"ui-chart__legend-swatch\"\n background={color}\n __css={styles.legendSwatch}\n />\n\n <ui.span className=\"ui-chart__legend-label\">{value}</ui.span>\n </ui.div>\n )\n })\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-chart__legend\", className)}\n __css={styles.legend}\n {...rest}\n >\n {items}\n </ui.div>\n )\n },\n)\n\nChartLegend.displayName = \"ChartLegend\"\nChartLegend.__ui__ = \"ChartLegend\"\n"],"mappings":";;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,UAAU;AAkBX,SAOE,KAPF;AARD,IAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,UAAU,CAAC,GAAG,aAAa,GAAG,KAAK,GAAG,QAAQ;AAC1D,UAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,UAAM,QAAQ,QAAQ,IAAI,CAAC,EAAE,OAAO,SAAS,OAAO,UAAU,GAAG,UAAU;AACzE,YAAM,QAAQ,4BAAW;AAEzB,aACE;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UAEC,WAAU;AAAA,UACV,cAAc,MAAM,YAAY,KAAK;AAAA,UACrC,cAAc,MAAM,YAAY,IAAI;AAAA,UACpC,OAAO,OAAO;AAAA,UAEd;AAAA;AAAA,cAAC,GAAG;AAAA,cAAH;AAAA,gBACC,WAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO,OAAO;AAAA;AAAA,YAChB;AAAA,YAEA,oBAAC,GAAG,MAAH,EAAQ,WAAU,0BAA0B,iBAAM;AAAA;AAAA;AAAA,QAZ9C,UAAU,KAAK;AAAA,MAatB;AAAA,IAEJ,CAAC;AAED,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}
@@ -6,26 +6,26 @@ import {
6
6
  } from "./chunk-6YUJLLGN.mjs";
7
7
  import {
8
8
  getComponentProps
9
- } from "./chunk-QL3DB7OJ.mjs";
9
+ } from "./chunk-TXNC7GLT.mjs";
10
10
 
11
11
  // src/use-chart-axis.ts
12
12
  import { useTheme } from "@yamada-ui/core";
13
13
  import { cx } from "@yamada-ui/utils";
14
14
  import { useCallback, useMemo } from "react";
15
15
  var useChartAxis = ({
16
- dataKey,
17
16
  type,
17
+ dataKey,
18
+ gridAxis = "x",
18
19
  layoutType = "horizontal",
20
+ styles,
19
21
  tickLine = "y",
20
- gridAxis = "x",
22
+ unit,
21
23
  withXAxis = true,
22
24
  withYAxis = true,
23
25
  xAxisLabel: xAxisLabelProp,
26
+ xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
24
27
  yAxisLabel: yAxisLabelProp,
25
- unit,
26
28
  yAxisTickFormatter = type === "percent" && layoutType === "horizontal" ? valueToPercent : void 0,
27
- xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
28
- styles,
29
29
  ...rest
30
30
  }) => {
31
31
  var _a, _b, _c, _d;
@@ -35,7 +35,7 @@ var useChartAxis = ({
35
35
  [dataKey, layoutType]
36
36
  );
37
37
  const yAxisKey = useMemo(
38
- () => layoutType === "vertical" ? { dataKey, type: "category" } : { type: "number" },
38
+ () => layoutType === "vertical" ? { type: "category", dataKey } : { type: "number" },
39
39
  [dataKey, layoutType]
40
40
  );
41
41
  const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
@@ -66,15 +66,15 @@ var useChartAxis = ({
66
66
  className: cx(className, xAxisClassName),
67
67
  hide: !withXAxis,
68
68
  ...xAxisKey,
69
- tick: {
70
- transform: "translate(0, 10)",
71
- fill: "currentColor"
72
- },
73
- stroke: "",
74
69
  interval: "preserveStartEnd",
75
- tickLine: xTickLine,
76
70
  minTickGap: 5,
71
+ stroke: "",
72
+ tick: {
73
+ fill: "currentColor",
74
+ transform: "translate(0, 10)"
75
+ },
77
76
  tickFormatter: xAxisTickFormatter,
77
+ tickLine: xTickLine,
78
78
  ...props,
79
79
  ...xAxisProps
80
80
  }),
@@ -90,17 +90,17 @@ var useChartAxis = ({
90
90
  const getYAxisProps = useCallback(
91
91
  ({ className, ...props } = {}) => ({
92
92
  className: cx(className, yAxisClassName),
93
- hide: !withYAxis,
94
93
  axisLine: false,
94
+ hide: !withYAxis,
95
95
  ...yAxisKey,
96
- tickLine: yTickLine,
96
+ allowDecimals: true,
97
97
  tick: {
98
- transform: "translate(-10, 0)",
99
- fill: "currentColor"
98
+ fill: "currentColor",
99
+ transform: "translate(-10, 0)"
100
100
  },
101
- allowDecimals: true,
102
- unit,
103
101
  tickFormatter: yAxisTickFormatter,
102
+ tickLine: yTickLine,
103
+ unit,
104
104
  ...props,
105
105
  ...yAxisProps
106
106
  }),
@@ -117,9 +117,9 @@ var useChartAxis = ({
117
117
  const getXAxisLabelProps = useCallback(
118
118
  ({ className, ...props } = {}) => ({
119
119
  className: cx(className, xAxisLabelClassName),
120
- value: xAxisLabel,
121
- position: "insideBottom",
122
120
  offset: -20,
121
+ position: "insideBottom",
122
+ value: xAxisLabel,
123
123
  ...props,
124
124
  ...xAxisLabelProps
125
125
  }),
@@ -128,21 +128,21 @@ var useChartAxis = ({
128
128
  const getYAxisLabelProps = useCallback(
129
129
  ({ className, ...props } = {}) => ({
130
130
  className: cx(className, yAxisLabelClassName),
131
- value: yAxisLabel,
132
- position: "insideLeft",
133
131
  angle: -90,
134
- textAnchor: "middle",
135
132
  offset: -5,
133
+ position: "insideLeft",
134
+ textAnchor: "middle",
135
+ value: yAxisLabel,
136
136
  ...props,
137
137
  ...yAxisLabelProps
138
138
  }),
139
139
  [yAxisLabel, yAxisLabelClassName, yAxisLabelProps]
140
140
  );
141
141
  return {
142
- getXAxisProps,
143
- getYAxisProps,
144
142
  getXAxisLabelProps,
145
- getYAxisLabelProps
143
+ getXAxisProps,
144
+ getYAxisLabelProps,
145
+ getYAxisProps
146
146
  };
147
147
  };
148
148
  var valueToPercent = (value) => {
@@ -152,4 +152,4 @@ var valueToPercent = (value) => {
152
152
  export {
153
153
  useChartAxis
154
154
  };
155
- //# sourceMappingURL=chunk-3EHZJFIA.mjs.map
155
+ //# sourceMappingURL=chunk-PKQB4BFG.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/use-chart-axis.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { SVGProps } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type {\n AreaChartType,\n ChartAxisType,\n ChartLayoutType,\n LabelProps,\n XAxisProps,\n YAxisProps,\n} from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport {\n labelProperties,\n xAxisProperties,\n yAxisProperties,\n} from \"./rechart-properties\"\n\nexport interface UseChartAxisOptions {\n /**\n * The key of a group of data which should be unique in an chart.\n */\n dataKey: string\n /**\n * Controls how chart areas are positioned relative to each other\n *\n * @default `default`\n */\n type?: AreaChartType\n /**\n * Specifies which lines should be displayed in the grid.\n *\n * @default 'x'\n */\n gridAxis?: ChartAxisType\n /**\n * Chart orientation.\n *\n * @default 'horizontal'\n */\n layoutType?: ChartLayoutType\n /**\n * The option is the configuration of tick lines.\n *\n * @default 'y'\n */\n tickLine?: ChartAxisType\n /**\n * Unit displayed next to each tick in y-axis.\n */\n unit?: string\n /**\n * If `true`, X axis is visible.\n *\n * @default true\n */\n withXAxis?: boolean\n /**\n * If `true`, Y axis is visible.\n *\n * @default true\n */\n withYAxis?: boolean\n /**\n * A label to display below the X axis.\n */\n xAxisLabel?: string\n /**\n * A function to format X axis tick.\n */\n xAxisTickFormatter?: (value: any) => string\n /**\n * A label to display below the Y axis.\n */\n yAxisLabel?: string\n /**\n * A function to format Y axis tick.\n */\n yAxisTickFormatter?: (value: any) => string\n /**\n * Props passed down to recharts 'XAxisLabel' component.\n */\n xAxisLabelProps?: LabelProps\n /**\n * Props passed down to recharts 'XAxis' component.\n */\n xAxisProps?: XAxisProps\n /**\n * Props passed down to recharts 'YAxisLabel' component.\n */\n yAxisLabelProps?: LabelProps\n /**\n * Props passed down to recharts 'YAxis' component.\n */\n yAxisProps?: YAxisProps\n}\n\nexport interface UseChartAxisProps extends UseChartAxisOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartAxis = ({\n type,\n dataKey,\n gridAxis = \"x\",\n layoutType = \"horizontal\",\n styles,\n tickLine = \"y\",\n unit,\n withXAxis = true,\n withYAxis = true,\n xAxisLabel: xAxisLabelProp,\n xAxisTickFormatter = type === \"percent\" && layoutType === \"vertical\"\n ? valueToPercent\n : undefined,\n yAxisLabel: yAxisLabelProp,\n yAxisTickFormatter = type === \"percent\" && layoutType === \"horizontal\"\n ? valueToPercent\n : undefined,\n ...rest\n}: UseChartAxisProps) => {\n const { theme } = useTheme()\n const xAxisKey: Recharts.XAxisProps = useMemo(\n () => (layoutType === \"vertical\" ? { type: \"number\" } : { dataKey }),\n [dataKey, layoutType],\n )\n\n const yAxisKey: Recharts.YAxisProps = useMemo(\n () =>\n layoutType === \"vertical\"\n ? { type: \"category\", dataKey }\n : { type: \"number\" },\n [dataKey, layoutType],\n )\n const withXTickLine =\n gridAxis !== \"none\" && (tickLine === \"x\" || tickLine === \"xy\")\n const withYTickLine =\n gridAxis !== \"none\" && (tickLine === \"y\" || tickLine === \"xy\")\n const getTickLine = (\n withTickLine: boolean,\n ): boolean | SVGProps<SVGTextElement> =>\n withTickLine ? { stroke: \"currentColor\" } : false\n const xTickLine = getTickLine(withXTickLine)\n const yTickLine = getTickLine(withYTickLine)\n\n const xAxisLabel = layoutType === \"vertical\" ? yAxisLabelProp : xAxisLabelProp\n const yAxisLabel = layoutType === \"vertical\" ? xAxisLabelProp : yAxisLabelProp\n\n const [xAxisProps, xAxisClassName] = getComponentProps<Dict, string>(\n [rest.xAxisProps ?? {}, xAxisProperties],\n styles.xAxis,\n )(theme)\n\n const [yAxisProps, yAxisClassName] = getComponentProps<Dict, string>(\n [rest.yAxisProps ?? {}, yAxisProperties],\n styles.yAxis,\n )(theme)\n\n const [xAxisLabelProps, xAxisLabelClassName] = getComponentProps<\n Dict,\n string\n >(\n [rest.xAxisLabelProps ?? {}, labelProperties],\n styles.xAxisLabel,\n )(theme)\n\n const [yAxisLabelProps, yAxisLabelClassName] = getComponentProps<\n Dict,\n string\n >(\n [rest.yAxisLabelProps ?? {}, labelProperties],\n styles.yAxisLabel,\n )(theme)\n\n const getXAxisProps: PropGetter<\n Partial<Recharts.XAxisProps>,\n Recharts.XAxisProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, xAxisClassName),\n hide: !withXAxis,\n ...xAxisKey,\n interval: \"preserveStartEnd\",\n minTickGap: 5,\n stroke: \"\",\n tick: {\n fill: \"currentColor\",\n transform: \"translate(0, 10)\",\n },\n tickFormatter: xAxisTickFormatter,\n tickLine: xTickLine,\n ...props,\n ...(xAxisProps as Recharts.XAxisProps),\n }),\n [\n xAxisClassName,\n withXAxis,\n xAxisKey,\n xTickLine,\n xAxisTickFormatter,\n xAxisProps,\n ],\n )\n\n const getYAxisProps: PropGetter<\n Partial<Recharts.YAxisProps>,\n Recharts.YAxisProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, yAxisClassName),\n axisLine: false,\n hide: !withYAxis,\n ...yAxisKey,\n allowDecimals: true,\n tick: {\n fill: \"currentColor\",\n transform: \"translate(-10, 0)\",\n },\n tickFormatter: yAxisTickFormatter,\n tickLine: yTickLine,\n unit: unit,\n ...props,\n ...(yAxisProps as Recharts.YAxisProps),\n }),\n [\n yAxisClassName,\n withYAxis,\n yAxisKey,\n yTickLine,\n unit,\n yAxisTickFormatter,\n yAxisProps,\n ],\n )\n\n const getXAxisLabelProps: PropGetter<\n Partial<Recharts.LabelProps>,\n Recharts.LabelProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, xAxisLabelClassName),\n offset: -20,\n position: \"insideBottom\",\n value: xAxisLabel,\n ...props,\n ...xAxisLabelProps,\n }),\n [xAxisLabel, xAxisLabelClassName, xAxisLabelProps],\n )\n\n const getYAxisLabelProps: PropGetter<\n Partial<Recharts.LabelProps>,\n Recharts.LabelProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, yAxisLabelClassName),\n angle: -90,\n offset: -5,\n position: \"insideLeft\",\n textAnchor: \"middle\",\n value: yAxisLabel,\n ...props,\n ...yAxisLabelProps,\n }),\n [yAxisLabel, yAxisLabelClassName, yAxisLabelProps],\n )\n\n return {\n getXAxisLabelProps,\n getXAxisProps,\n getYAxisLabelProps,\n getYAxisProps,\n }\n}\n\nconst valueToPercent = (value: any) => {\n return `${(value * 100).toFixed(0)}%`\n}\n"],"mappings":"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","names":[]}