@yamada-ui/charts 1.1.2-next-20240429233030 → 1.1.2

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 (197) hide show
  1. package/package.json +5 -5
  2. package/dist/area-chart-gradient.d.mts +0 -11
  3. package/dist/area-chart-gradient.d.ts +0 -11
  4. package/dist/area-chart-gradient.js +0 -47
  5. package/dist/area-chart-gradient.js.map +0 -1
  6. package/dist/area-chart-gradient.mjs +0 -8
  7. package/dist/area-chart-gradient.mjs.map +0 -1
  8. package/dist/area-chart-split.d.mts +0 -10
  9. package/dist/area-chart-split.d.ts +0 -10
  10. package/dist/area-chart-split.js +0 -52
  11. package/dist/area-chart-split.js.map +0 -1
  12. package/dist/area-chart-split.mjs +0 -8
  13. package/dist/area-chart-split.mjs.map +0 -1
  14. package/dist/area-chart.d.mts +0 -41
  15. package/dist/area-chart.d.ts +0 -41
  16. package/dist/area-chart.js +0 -1223
  17. package/dist/area-chart.js.map +0 -1
  18. package/dist/area-chart.mjs +0 -21
  19. package/dist/area-chart.mjs.map +0 -1
  20. package/dist/bar-chart.d.mts +0 -38
  21. package/dist/bar-chart.d.ts +0 -38
  22. package/dist/bar-chart.js +0 -1027
  23. package/dist/bar-chart.js.map +0 -1
  24. package/dist/bar-chart.mjs +0 -19
  25. package/dist/bar-chart.mjs.map +0 -1
  26. package/dist/chart-legend.d.mts +0 -12
  27. package/dist/chart-legend.d.ts +0 -12
  28. package/dist/chart-legend.js +0 -90
  29. package/dist/chart-legend.js.map +0 -1
  30. package/dist/chart-legend.mjs +0 -11
  31. package/dist/chart-legend.mjs.map +0 -1
  32. package/dist/chart-tooltip.d.mts +0 -12
  33. package/dist/chart-tooltip.d.ts +0 -12
  34. package/dist/chart-tooltip.js +0 -121
  35. package/dist/chart-tooltip.js.map +0 -1
  36. package/dist/chart-tooltip.mjs +0 -11
  37. package/dist/chart-tooltip.mjs.map +0 -1
  38. package/dist/chart-utils.d.mts +0 -9
  39. package/dist/chart-utils.d.ts +0 -9
  40. package/dist/chart-utils.js +0 -45
  41. package/dist/chart-utils.js.map +0 -1
  42. package/dist/chart-utils.mjs +0 -10
  43. package/dist/chart-utils.mjs.map +0 -1
  44. package/dist/chart.types.d.mts +0 -78
  45. package/dist/chart.types.d.ts +0 -78
  46. package/dist/chart.types.js +0 -20
  47. package/dist/chart.types.js.map +0 -1
  48. package/dist/chart.types.mjs +0 -2
  49. package/dist/chart.types.mjs.map +0 -1
  50. package/dist/chunk-4WX5YS7M.mjs +0 -179
  51. package/dist/chunk-4WX5YS7M.mjs.map +0 -1
  52. package/dist/chunk-5TVYPA64.mjs +0 -256
  53. package/dist/chunk-5TVYPA64.mjs.map +0 -1
  54. package/dist/chunk-BPR7YL3O.mjs +0 -179
  55. package/dist/chunk-BPR7YL3O.mjs.map +0 -1
  56. package/dist/chunk-E2I2XAZ6.mjs +0 -232
  57. package/dist/chunk-E2I2XAZ6.mjs.map +0 -1
  58. package/dist/chunk-HDOYOHLA.mjs +0 -326
  59. package/dist/chunk-HDOYOHLA.mjs.map +0 -1
  60. package/dist/chunk-KNAADLWO.mjs +0 -225
  61. package/dist/chunk-KNAADLWO.mjs.map +0 -1
  62. package/dist/chunk-KT4YOMM4.mjs +0 -344
  63. package/dist/chunk-KT4YOMM4.mjs.map +0 -1
  64. package/dist/chunk-LBC2B6UX.mjs +0 -84
  65. package/dist/chunk-LBC2B6UX.mjs.map +0 -1
  66. package/dist/chunk-LGMALZCN.mjs +0 -42
  67. package/dist/chunk-LGMALZCN.mjs.map +0 -1
  68. package/dist/chunk-LHI57S6P.mjs +0 -215
  69. package/dist/chunk-LHI57S6P.mjs.map +0 -1
  70. package/dist/chunk-LM2DQK2P.mjs +0 -33
  71. package/dist/chunk-LM2DQK2P.mjs.map +0 -1
  72. package/dist/chunk-MSIOYYWR.mjs +0 -24
  73. package/dist/chunk-MSIOYYWR.mjs.map +0 -1
  74. package/dist/chunk-MWPICUEW.mjs +0 -56
  75. package/dist/chunk-MWPICUEW.mjs.map +0 -1
  76. package/dist/chunk-NEGDEVRX.mjs +0 -53
  77. package/dist/chunk-NEGDEVRX.mjs.map +0 -1
  78. package/dist/chunk-OSNFBRHL.mjs +0 -474
  79. package/dist/chunk-OSNFBRHL.mjs.map +0 -1
  80. package/dist/chunk-OW7SOTEF.mjs +0 -206
  81. package/dist/chunk-OW7SOTEF.mjs.map +0 -1
  82. package/dist/chunk-P7AFSM5W.mjs +0 -114
  83. package/dist/chunk-P7AFSM5W.mjs.map +0 -1
  84. package/dist/chunk-PNE3JG54.mjs +0 -29
  85. package/dist/chunk-PNE3JG54.mjs.map +0 -1
  86. package/dist/chunk-QL3DB7OJ.mjs +0 -21
  87. package/dist/chunk-QL3DB7OJ.mjs.map +0 -1
  88. package/dist/chunk-QZ5OXZ6Z.mjs +0 -251
  89. package/dist/chunk-QZ5OXZ6Z.mjs.map +0 -1
  90. package/dist/chunk-RN6PXJAD.mjs +0 -47
  91. package/dist/chunk-RN6PXJAD.mjs.map +0 -1
  92. package/dist/chunk-STBYRLC5.mjs +0 -208
  93. package/dist/chunk-STBYRLC5.mjs.map +0 -1
  94. package/dist/chunk-XIFDRM7J.mjs +0 -56
  95. package/dist/chunk-XIFDRM7J.mjs.map +0 -1
  96. package/dist/donut-chart.d.mts +0 -31
  97. package/dist/donut-chart.d.ts +0 -31
  98. package/dist/donut-chart.js +0 -702
  99. package/dist/donut-chart.js.map +0 -1
  100. package/dist/donut-chart.mjs +0 -16
  101. package/dist/donut-chart.mjs.map +0 -1
  102. package/dist/index.d.mts +0 -26
  103. package/dist/index.d.ts +0 -26
  104. package/dist/index.js +0 -3228
  105. package/dist/index.js.map +0 -1
  106. package/dist/index.mjs +0 -45
  107. package/dist/index.mjs.map +0 -1
  108. package/dist/line-chart.d.mts +0 -38
  109. package/dist/line-chart.d.ts +0 -38
  110. package/dist/line-chart.js +0 -1088
  111. package/dist/line-chart.js.map +0 -1
  112. package/dist/line-chart.mjs +0 -19
  113. package/dist/line-chart.mjs.map +0 -1
  114. package/dist/pie-chart.d.mts +0 -49
  115. package/dist/pie-chart.d.ts +0 -49
  116. package/dist/pie-chart.js +0 -702
  117. package/dist/pie-chart.js.map +0 -1
  118. package/dist/pie-chart.mjs +0 -16
  119. package/dist/pie-chart.mjs.map +0 -1
  120. package/dist/radar-chart.d.mts +0 -57
  121. package/dist/radar-chart.d.ts +0 -57
  122. package/dist/radar-chart.js +0 -918
  123. package/dist/radar-chart.js.map +0 -1
  124. package/dist/radar-chart.mjs +0 -16
  125. package/dist/radar-chart.mjs.map +0 -1
  126. package/dist/rechart-properties.d.mts +0 -26
  127. package/dist/rechart-properties.d.ts +0 -26
  128. package/dist/rechart-properties.js +0 -517
  129. package/dist/rechart-properties.js.map +0 -1
  130. package/dist/rechart-properties.mjs +0 -48
  131. package/dist/rechart-properties.mjs.map +0 -1
  132. package/dist/use-area-chart.d.mts +0 -123
  133. package/dist/use-area-chart.d.ts +0 -123
  134. package/dist/use-area-chart.js +0 -420
  135. package/dist/use-area-chart.js.map +0 -1
  136. package/dist/use-area-chart.mjs +0 -10
  137. package/dist/use-area-chart.mjs.map +0 -1
  138. package/dist/use-bar-chart.d.mts +0 -73
  139. package/dist/use-bar-chart.d.ts +0 -73
  140. package/dist/use-bar-chart.js +0 -290
  141. package/dist/use-bar-chart.js.map +0 -1
  142. package/dist/use-bar-chart.mjs +0 -10
  143. package/dist/use-bar-chart.mjs.map +0 -1
  144. package/dist/use-chart-axis.d.mts +0 -73
  145. package/dist/use-chart-axis.d.ts +0 -73
  146. package/dist/use-chart-axis.js +0 -227
  147. package/dist/use-chart-axis.js.map +0 -1
  148. package/dist/use-chart-axis.mjs +0 -10
  149. package/dist/use-chart-axis.mjs.map +0 -1
  150. package/dist/use-chart-grid.d.mts +0 -32
  151. package/dist/use-chart-grid.d.ts +0 -32
  152. package/dist/use-chart-grid.js +0 -92
  153. package/dist/use-chart-grid.js.map +0 -1
  154. package/dist/use-chart-grid.mjs +0 -10
  155. package/dist/use-chart-grid.mjs.map +0 -1
  156. package/dist/use-chart-legend.d.mts +0 -18
  157. package/dist/use-chart-legend.d.ts +0 -18
  158. package/dist/use-chart-legend.js +0 -81
  159. package/dist/use-chart-legend.js.map +0 -1
  160. package/dist/use-chart-legend.mjs +0 -9
  161. package/dist/use-chart-legend.mjs.map +0 -1
  162. package/dist/use-chart-reference-line.d.mts +0 -22
  163. package/dist/use-chart-reference-line.d.ts +0 -22
  164. package/dist/use-chart-reference-line.js +0 -105
  165. package/dist/use-chart-reference-line.js.map +0 -1
  166. package/dist/use-chart-reference-line.mjs +0 -10
  167. package/dist/use-chart-reference-line.mjs.map +0 -1
  168. package/dist/use-chart-tooltip.d.mts +0 -27
  169. package/dist/use-chart-tooltip.d.ts +0 -27
  170. package/dist/use-chart-tooltip.js +0 -100
  171. package/dist/use-chart-tooltip.js.map +0 -1
  172. package/dist/use-chart-tooltip.mjs +0 -10
  173. package/dist/use-chart-tooltip.mjs.map +0 -1
  174. package/dist/use-chart.d.mts +0 -33
  175. package/dist/use-chart.d.ts +0 -33
  176. package/dist/use-chart.js +0 -104
  177. package/dist/use-chart.js.map +0 -1
  178. package/dist/use-chart.mjs +0 -18
  179. package/dist/use-chart.mjs.map +0 -1
  180. package/dist/use-line-chart.d.mts +0 -97
  181. package/dist/use-line-chart.d.ts +0 -97
  182. package/dist/use-line-chart.js +0 -344
  183. package/dist/use-line-chart.js.map +0 -1
  184. package/dist/use-line-chart.mjs +0 -10
  185. package/dist/use-line-chart.mjs.map +0 -1
  186. package/dist/use-pie-chart.d.mts +0 -112
  187. package/dist/use-pie-chart.d.ts +0 -112
  188. package/dist/use-pie-chart.js +0 -282
  189. package/dist/use-pie-chart.js.map +0 -1
  190. package/dist/use-pie-chart.mjs +0 -10
  191. package/dist/use-pie-chart.mjs.map +0 -1
  192. package/dist/use-radar-chart.d.mts +0 -105
  193. package/dist/use-radar-chart.d.ts +0 -105
  194. package/dist/use-radar-chart.js +0 -473
  195. package/dist/use-radar-chart.js.map +0 -1
  196. package/dist/use-radar-chart.mjs +0 -10
  197. package/dist/use-radar-chart.mjs.map +0 -1
@@ -1,918 +0,0 @@
1
- "use client"
2
- "use strict";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
-
21
- // src/radar-chart.tsx
22
- var radar_chart_exports = {};
23
- __export(radar_chart_exports, {
24
- RadarChart: () => RadarChart
25
- });
26
- module.exports = __toCommonJS(radar_chart_exports);
27
- var import_core7 = require("@yamada-ui/core");
28
- var import_utils8 = require("@yamada-ui/utils");
29
- var import_react5 = require("react");
30
- var import_recharts = require("recharts");
31
-
32
- // src/chart-legend.tsx
33
- var import_core3 = require("@yamada-ui/core");
34
- var import_utils3 = require("@yamada-ui/utils");
35
-
36
- // src/use-chart.ts
37
- var import_core2 = require("@yamada-ui/core");
38
- var import_utils2 = require("@yamada-ui/utils");
39
- var import_react = require("react");
40
-
41
- // src/chart-utils.ts
42
- var import_core = require("@yamada-ui/core");
43
- var import_utils = require("@yamada-ui/utils");
44
- var getClassName = (...styles) => (theme) => (0, import_utils.cx)(
45
- ...styles.map(
46
- (style) => (0, import_utils.isString)(style) ? style : (0, import_core.getCSS)(style)(theme)
47
- )
48
- );
49
- var getComponentProps = ([obj, keys], ...props) => (theme, isContain) => {
50
- const [pickedProps, omittedProps] = (0, import_utils.splitObject)(obj, keys);
51
- const className = getClassName(...props, omittedProps)(theme);
52
- return !isContain ? [pickedProps, className] : { ...pickedProps, className };
53
- };
54
-
55
- // src/rechart-properties.ts
56
- var radarChartProperties = [
57
- "width",
58
- "height",
59
- "data",
60
- "cx",
61
- "cy",
62
- "startAngle",
63
- "endAngle",
64
- "innerRadius",
65
- "outerRadius",
66
- "margin",
67
- "onMouseEnter",
68
- "onClick"
69
- ];
70
- var containerProperties = [
71
- "aspect",
72
- "width",
73
- "height",
74
- "minWidth",
75
- "minHeight",
76
- "debounce",
77
- "onResize"
78
- ];
79
- var legendProperties = [
80
- "width",
81
- "height",
82
- "layout",
83
- "align",
84
- "verticalAlign",
85
- "iconSize",
86
- "iconType",
87
- "payload",
88
- "chartWidth",
89
- "chartHeight",
90
- "margin",
91
- "content",
92
- "formatter",
93
- "wrapperStyle",
94
- "onClick",
95
- "onMouseDown",
96
- "onMouseUp",
97
- "onMouseMove",
98
- "onMouseOver",
99
- "onMouseOut",
100
- "onMouseEnter",
101
- "onMouseLeave"
102
- ];
103
- var tooltipProperties = [
104
- "offset",
105
- "filterNull",
106
- "itemStyle",
107
- "wrapperStyle",
108
- "contentStyle",
109
- "labelStyle",
110
- "cursor",
111
- "viewBox",
112
- "allowEscapeViewBox",
113
- "active",
114
- "position",
115
- "coordinate",
116
- "payload",
117
- "label",
118
- "content",
119
- "formatter",
120
- "labelFormatter",
121
- "itemSorter",
122
- "isAnimationActive",
123
- "animationDuration",
124
- "animationEasing"
125
- ];
126
- var radarProperties = [
127
- "dataKey",
128
- "points",
129
- "shape",
130
- "dot",
131
- "activeDot",
132
- "legendType",
133
- "label",
134
- "isAnimationActive",
135
- "animationBegin",
136
- "animationDuration",
137
- "animationEasing",
138
- "onAnimationStart",
139
- "onAnimationEnd"
140
- ];
141
- var dotProperties = [
142
- "cx",
143
- "cy",
144
- "r",
145
- "onClick",
146
- "onMouseDown",
147
- "onMouseUp",
148
- "onMouseMove",
149
- "onMouseOver",
150
- "onMouseOut",
151
- "onMouseEnter",
152
- "onMouseLeave"
153
- ];
154
- var polarGridProperties = [
155
- "cx",
156
- "cy",
157
- "innerRadius",
158
- "outerRadius",
159
- "polarAngles",
160
- "polarRadius",
161
- "gridType"
162
- ];
163
- var polarAngleAxisProperties = [
164
- "dataKey",
165
- "cx",
166
- "cy",
167
- "radius",
168
- "axisLine",
169
- "axisLineType",
170
- "tickLine",
171
- "tickSize",
172
- "tick",
173
- "ticks",
174
- "orient",
175
- "tickFormatter",
176
- "type",
177
- "allowDuplicatedCategory",
178
- "onClick",
179
- "onMouseDown",
180
- "onMouseUp",
181
- "onMouseMove",
182
- "onMouseOver",
183
- "onMouseOut",
184
- "onMouseEnter",
185
- "onMouseLeave"
186
- ];
187
- var polarRadiusAxisProperties = [
188
- "angle",
189
- "type",
190
- "allowDuplicatedCategory",
191
- "cx",
192
- "cy",
193
- "domain",
194
- "reversed",
195
- "label",
196
- "orientation",
197
- "axisLine",
198
- "tick",
199
- "tickSize",
200
- "tickFormatter",
201
- "tickCount",
202
- "scale",
203
- "onClick",
204
- "onMouseDown",
205
- "onMouseUp",
206
- "onMouseMove",
207
- "onMouseOver",
208
- "onMouseOut",
209
- "onMouseEnter",
210
- "onMouseLeave"
211
- ];
212
-
213
- // src/use-chart.ts
214
- var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
215
- name: "ChartContext",
216
- errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in "<LineChart />" or "<BarChart />" etc.`
217
- });
218
- var useChart = ({ containerProps = {} }) => {
219
- const { theme } = (0, import_core2.useTheme)();
220
- const [reChartsProps, propClassName] = getComponentProps([
221
- containerProps,
222
- containerProperties
223
- ])(theme);
224
- const getContainerProps = (0, import_react.useCallback)(
225
- ({ className, ...props } = {}, ref = null) => ({
226
- ref,
227
- className: (0, import_utils2.cx)("ui-chart__container", className, propClassName),
228
- ...props,
229
- ...reChartsProps
230
- }),
231
- [propClassName, reChartsProps]
232
- );
233
- return {
234
- getContainerProps
235
- };
236
- };
237
- var useLegend = ({} = {}) => {
238
- const { styles } = useChartContext();
239
- return {
240
- styles
241
- };
242
- };
243
- var useTooltip = ({} = {}) => {
244
- const { styles } = useChartContext();
245
- return {
246
- styles
247
- };
248
- };
249
-
250
- // src/chart-legend.tsx
251
- var import_jsx_runtime = require("react/jsx-runtime");
252
- var ChartLegend = (0, import_core3.forwardRef)(
253
- ({ className, payload = [], onHighlight, ...rest }, ref) => {
254
- const { styles } = useLegend();
255
- const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
256
- const value = dataKey != null ? dataKey : valueProp;
257
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
258
- import_core3.ui.div,
259
- {
260
- className: "ui-chart__legend-item",
261
- onMouseEnter: () => onHighlight(value),
262
- onMouseLeave: () => onHighlight(null),
263
- __css: styles.legendItem,
264
- children: [
265
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
266
- import_core3.ui.div,
267
- {
268
- className: "ui-chart__legend-swatch",
269
- background: color,
270
- __css: styles.legendSwatch
271
- }
272
- ),
273
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core3.ui.span, { className: "ui-chart__legend-label", children: value })
274
- ]
275
- },
276
- `legend-${index}`
277
- );
278
- });
279
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
280
- import_core3.ui.div,
281
- {
282
- ref,
283
- className: (0, import_utils3.cx)("ui-chart__legend", className),
284
- __css: styles.legend,
285
- ...rest,
286
- children: items
287
- }
288
- );
289
- }
290
- );
291
-
292
- // src/chart-tooltip.tsx
293
- var import_core4 = require("@yamada-ui/core");
294
- var import_utils4 = require("@yamada-ui/utils");
295
- var import_jsx_runtime2 = require("react/jsx-runtime");
296
- var ChartTooltip = (0, import_core4.forwardRef)(
297
- ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {
298
- const { styles } = useTooltip();
299
- const items = payload.map(
300
- ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
301
- var _a;
302
- const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
303
- let value;
304
- if ((0, import_utils4.isArray)(valueProp)) {
305
- value = valueProp.map((value2) => {
306
- var _a2;
307
- return `${(_a2 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a2 : value2}`;
308
- }).join(" - ");
309
- } else {
310
- value = (_a = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a : valueProp;
311
- }
312
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
313
- import_core4.ui.div,
314
- {
315
- className: "ui-chart__tooltip-item",
316
- __css: styles.tooltipItem,
317
- children: [
318
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
319
- import_core4.ui.div,
320
- {
321
- className: "ui-chart__tooltip-swatch",
322
- background: color,
323
- __css: styles.tooltipSwatch
324
- }
325
- ),
326
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
327
- import_core4.ui.span,
328
- {
329
- className: "ui-chart__tooltip-label",
330
- __css: styles.tooltipLabel,
331
- children: name
332
- }
333
- ),
334
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
335
- import_core4.ui.span,
336
- {
337
- className: "ui-chart__tooltip-value",
338
- __css: styles.tooltipValue,
339
- children: [
340
- value,
341
- unit ? unit : ""
342
- ]
343
- }
344
- )
345
- ]
346
- },
347
- `tooltip-payload-${index}`
348
- );
349
- }
350
- );
351
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
352
- import_core4.ui.div,
353
- {
354
- ref,
355
- className: (0, import_utils4.cx)("ui-chart__tooltip", className),
356
- __css: styles.tooltip,
357
- ...rest,
358
- children: [
359
- label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }) : null,
360
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
361
- ]
362
- }
363
- );
364
- }
365
- );
366
-
367
- // src/use-chart-legend.ts
368
- var import_utils5 = require("@yamada-ui/utils");
369
- var import_react2 = require("react");
370
- var useChartLegend = ({
371
- legendProps: _legendProps = {}
372
- }) => {
373
- const [rest, legendProps] = (0, import_utils5.splitObject)(
374
- _legendProps,
375
- legendProperties
376
- );
377
- const getLegendProps = (0, import_react2.useCallback)(
378
- (props, ref = null) => {
379
- return {
380
- ref,
381
- verticalAlign: "top",
382
- ...props,
383
- ...rest
384
- };
385
- },
386
- [rest]
387
- );
388
- return { legendProps, getLegendProps };
389
- };
390
-
391
- // src/use-chart-tooltip.ts
392
- var import_core5 = require("@yamada-ui/core");
393
- var import_utils6 = require("@yamada-ui/utils");
394
- var import_react3 = require("react");
395
- var useChartTooltip = ({
396
- tooltipProps: _tooltipProps = {},
397
- tooltipAnimationDuration = 0,
398
- styles
399
- }) => {
400
- const { theme } = (0, import_core5.useTheme)();
401
- const { cursor, ...rest } = _tooltipProps;
402
- const cursorClassName = (0, import_react3.useMemo)(
403
- () => getClassName({ ...styles.cursor, ...cursor })(theme),
404
- [cursor, styles.cursor, theme]
405
- );
406
- const [tooltipProps, tooltipUIProps] = (0, import_utils6.splitObject)(
407
- rest,
408
- tooltipProperties
409
- );
410
- const getTooltipProps = (0, import_react3.useCallback)(
411
- (props, ref = null) => ({
412
- ref,
413
- animationDuration: tooltipAnimationDuration,
414
- isAnimationActive: (tooltipAnimationDuration || 0) > 0,
415
- cursor: {
416
- className: (0, import_utils6.cx)("ui-chart__cursor", cursorClassName)
417
- },
418
- ...props,
419
- ...tooltipProps
420
- }),
421
- [cursorClassName, tooltipAnimationDuration, tooltipProps]
422
- );
423
- return { tooltipProps: tooltipUIProps, getTooltipProps };
424
- };
425
-
426
- // src/use-radar-chart.ts
427
- var import_core6 = require("@yamada-ui/core");
428
- var import_utils7 = require("@yamada-ui/utils");
429
- var import_react4 = require("react");
430
- var useRadarChart = ({
431
- data,
432
- series,
433
- dataKey,
434
- withDots = false,
435
- withActiveDots = false,
436
- strokeWidth = 2,
437
- fillOpacity = 0.4,
438
- valueFormatter,
439
- strokeDasharray,
440
- styles,
441
- ...rest
442
- }) => {
443
- var _a;
444
- const { theme } = (0, import_core6.useTheme)();
445
- const [highlightedArea, setHighlightedArea] = (0, import_react4.useState)(null);
446
- const shouldHighlight = highlightedArea !== null;
447
- const {
448
- dot = {},
449
- activeDot = {},
450
- dimDot,
451
- dimRadar,
452
- ...computedRadarProps
453
- } = (_a = rest.radarProps) != null ? _a : {};
454
- const radarColors = (0, import_react4.useMemo)(
455
- () => series.map(({ color }, index) => ({
456
- __prefix: "ui",
457
- name: `radar-${index}`,
458
- token: "colors",
459
- value: color != null ? color : "transparent"
460
- })),
461
- [series]
462
- );
463
- const radarVars = (0, import_react4.useMemo)(
464
- () => [
465
- ...radarColors,
466
- { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
467
- ],
468
- [fillOpacity, radarColors]
469
- );
470
- const [chartProps, radarChartClassName] = (0, import_react4.useMemo)(
471
- () => {
472
- var _a2;
473
- return getComponentProps(
474
- [(_a2 = rest.chartProps) != null ? _a2 : {}, radarChartProperties],
475
- styles.chart
476
- )(theme);
477
- },
478
- [rest.chartProps, styles.chart, theme]
479
- );
480
- const [polarGridProps, polarGridClassName] = (0, import_react4.useMemo)(
481
- () => {
482
- var _a2;
483
- return getComponentProps(
484
- [(_a2 = rest.polarGridProps) != null ? _a2 : {}, polarGridProperties],
485
- styles.polarGrid
486
- )(theme);
487
- },
488
- [rest.polarGridProps, styles.polarGrid, theme]
489
- );
490
- const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react4.useMemo)(
491
- () => {
492
- var _a2;
493
- return getComponentProps(
494
- [(_a2 = rest.polarAngleAxisProps) != null ? _a2 : {}, polarAngleAxisProperties],
495
- styles.polarAngleAxis
496
- )(theme);
497
- },
498
- [rest.polarAngleAxisProps, styles.polarAngleAxis, theme]
499
- );
500
- const polarAngleAxisTickClassName = (0, import_react4.useMemo)(
501
- () => getClassName({
502
- ...styles.polarAngleAxisTick,
503
- ...rest.polarAngleAxisTickProps
504
- })(theme),
505
- [rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme]
506
- );
507
- const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react4.useMemo)(
508
- () => {
509
- var _a2;
510
- return getComponentProps(
511
- [(_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {}, polarRadiusAxisProperties],
512
- styles.polarRadiusAxis
513
- )(theme);
514
- },
515
- [rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme]
516
- );
517
- const polarRadiusAxisTickClassName = (0, import_react4.useMemo)(
518
- () => getClassName({
519
- ...styles.polarRadiusAxisTick,
520
- ...rest.polarRadiusAxisTickProps
521
- })(theme),
522
- [rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme]
523
- );
524
- const [radarProps, radarClassName] = (0, import_react4.useMemo)(() => {
525
- const resolvedRadarProps = {
526
- fillOpacity: "var(--ui-fill-opacity)",
527
- ...computedRadarProps
528
- };
529
- return getComponentProps(
530
- [resolvedRadarProps, radarProperties],
531
- styles.radar
532
- )(theme);
533
- }, [computedRadarProps, styles.radar, theme]);
534
- const [dimRadarProps, dimRadarClassName] = (0, import_react4.useMemo)(() => {
535
- const resolvedDimRadar = {
536
- fillOpacity: 0.3,
537
- strokeOpacity: 0.3,
538
- ...dimRadar
539
- };
540
- return getComponentProps([resolvedDimRadar, radarProperties])(
541
- theme
542
- );
543
- }, [dimRadar, theme]);
544
- const [dotProps, dotClassName] = (0, import_react4.useMemo)(() => {
545
- const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
546
- return getComponentProps(
547
- [resolvedDot, dotProperties],
548
- styles.dot
549
- )(theme);
550
- }, [dot, styles.dot, theme]);
551
- const [activeDotProps, activeDotClassName] = (0, import_react4.useMemo)(
552
- () => getComponentProps(
553
- [activeDot, dotProperties],
554
- styles.activeDot
555
- )(theme),
556
- [activeDot, styles.activeDot, theme]
557
- );
558
- const [dimDotProps, dimDotClassName] = (0, import_react4.useMemo)(() => {
559
- const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
560
- return getComponentProps([resolvedDimDot, dotProperties])(
561
- theme
562
- );
563
- }, [dimDot, theme]);
564
- const radarPropList = (0, import_react4.useMemo)(
565
- () => series.map((props, index) => {
566
- const {
567
- dataKey: dataKey2,
568
- dot: dot2 = {},
569
- activeDot: activeDot2 = {},
570
- dimDot: dimDot2 = {},
571
- dimRadar: dimRadar2 = {},
572
- ...computedProps
573
- } = props;
574
- const color = `var(--ui-radar-${index})`;
575
- const dimmed = shouldHighlight && highlightedArea !== dataKey2;
576
- const computedDimRadar = { ...dimRadarProps, ...dimRadar2 };
577
- const resolvedProps = {
578
- ...radarProps,
579
- ...computedProps,
580
- ...dimmed ? computedDimRadar : {}
581
- };
582
- const rest2 = getComponentProps(
583
- [resolvedProps, radarProperties],
584
- radarClassName,
585
- dimmed ? dimRadarClassName : void 0
586
- )(theme, true);
587
- let resolvedActiveDot;
588
- if (withActiveDots) {
589
- const computedActiveDot = {
590
- ...activeDotProps,
591
- ...activeDot2
592
- };
593
- const [rest3, className] = getComponentProps(
594
- [computedActiveDot, dotProperties],
595
- activeDotClassName
596
- )(theme);
597
- resolvedActiveDot = {
598
- className: (0, import_utils7.cx)("ui-radar-chart__active-dot", className),
599
- fill: color,
600
- stroke: color,
601
- r: 4,
602
- ...rest3
603
- };
604
- } else {
605
- resolvedActiveDot = false;
606
- }
607
- let resolvedDot;
608
- if (withDots) {
609
- const computedDimDot = { ...dimDotProps, ...dimDot2 };
610
- const computedDot = {
611
- ...dotProps,
612
- ...dot2,
613
- ...dimmed ? computedDimDot : {}
614
- };
615
- const [rest3, className] = getComponentProps(
616
- [computedDot, dotProperties],
617
- dotClassName,
618
- dimmed ? dimDotClassName : void 0
619
- )(theme);
620
- resolvedDot = {
621
- className: (0, import_utils7.cx)("ui-radar-chart__dot", className),
622
- fill: color,
623
- r: 4,
624
- ...rest3
625
- };
626
- } else {
627
- resolvedDot = false;
628
- }
629
- return {
630
- ...rest2,
631
- color,
632
- dataKey: dataKey2,
633
- dot: resolvedDot,
634
- activeDot: resolvedActiveDot
635
- };
636
- }),
637
- [
638
- activeDotClassName,
639
- activeDotProps,
640
- dimDotClassName,
641
- dimDotProps,
642
- dimRadarClassName,
643
- dimRadarProps,
644
- dotClassName,
645
- dotProps,
646
- highlightedArea,
647
- radarClassName,
648
- radarProps,
649
- series,
650
- shouldHighlight,
651
- theme,
652
- withActiveDots,
653
- withDots
654
- ]
655
- );
656
- const getRadarChartProps = (0, import_react4.useCallback)(
657
- ({ className, ...props } = {}, ref = null) => ({
658
- ref,
659
- className: (0, import_utils7.cx)(className, radarChartClassName),
660
- data,
661
- ...props,
662
- ...chartProps
663
- }),
664
- [data, radarChartClassName, chartProps]
665
- );
666
- const getRadarProps = (0, import_react4.useCallback)(
667
- ({ index, className: classNameProp, ...props }, ref = null) => {
668
- const { color, className, dataKey: dataKey2, activeDot: activeDot2, dot: dot2, ...rest2 } = radarPropList[index];
669
- return {
670
- ref,
671
- className: (0, import_utils7.cx)(classNameProp, className),
672
- activeDot: activeDot2,
673
- dot: dot2,
674
- name: dataKey2,
675
- dataKey: dataKey2,
676
- fill: color,
677
- strokeWidth,
678
- stroke: color,
679
- isAnimationActive: false,
680
- ...props,
681
- ...rest2
682
- };
683
- },
684
- [radarPropList, strokeWidth]
685
- );
686
- const getPolarGridProps = (0, import_react4.useCallback)(
687
- ({ className, ...props } = {}, ref = null) => ({
688
- ref,
689
- className: (0, import_utils7.cx)(className, polarGridClassName),
690
- strokeDasharray,
691
- ...props,
692
- ...polarGridProps
693
- }),
694
- [polarGridClassName, polarGridProps, strokeDasharray]
695
- );
696
- const getPolarAngleAxisProps = (0, import_react4.useCallback)(
697
- ({ className, ...props } = {}, ref = null) => ({
698
- ref,
699
- className: (0, import_utils7.cx)(className, polarAngleAxisClassName),
700
- dataKey,
701
- tick: {
702
- className: (0, import_utils7.cx)(
703
- "ui-radar-chart__polar-angle-axis-tick",
704
- polarAngleAxisTickClassName
705
- )
706
- },
707
- tickFormatter: valueFormatter,
708
- tickSize: 16,
709
- ...props,
710
- ...polarAngleAxisProps
711
- }),
712
- [
713
- dataKey,
714
- polarAngleAxisClassName,
715
- polarAngleAxisProps,
716
- polarAngleAxisTickClassName,
717
- valueFormatter
718
- ]
719
- );
720
- const getPolarRadiusAxisProps = (0, import_react4.useCallback)(
721
- ({ className, ...props } = {}, ref = null) => ({
722
- ref,
723
- className: (0, import_utils7.cx)(className, polarRadiusAxisClassName),
724
- tick: {
725
- className: (0, import_utils7.cx)(
726
- "ui-radar-chart__polar-radius-axis-tick",
727
- polarRadiusAxisTickClassName
728
- )
729
- },
730
- tickFormatter: valueFormatter,
731
- ...props,
732
- ...polarRadiusAxisProps
733
- }),
734
- [
735
- polarRadiusAxisClassName,
736
- polarRadiusAxisProps,
737
- polarRadiusAxisTickClassName,
738
- valueFormatter
739
- ]
740
- );
741
- return {
742
- radarVars,
743
- getRadarChartProps,
744
- getRadarProps,
745
- getPolarGridProps,
746
- getPolarAngleAxisProps,
747
- getPolarRadiusAxisProps,
748
- setHighlightedArea
749
- };
750
- };
751
-
752
- // src/radar-chart.tsx
753
- var import_jsx_runtime3 = require("react/jsx-runtime");
754
- var RadarChart = (0, import_core7.forwardRef)((props, ref) => {
755
- const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("RadarChart", props);
756
- const {
757
- className,
758
- data,
759
- series,
760
- dataKey,
761
- radarProps,
762
- chartProps,
763
- polarGridProps,
764
- polarAngleAxisProps,
765
- polarAngleAxisTickProps,
766
- polarRadiusAxisProps,
767
- polarRadiusAxisTickProps,
768
- containerProps,
769
- tooltipProps,
770
- legendProps,
771
- tooltipAnimationDuration,
772
- unit,
773
- valueFormatter,
774
- strokeDasharray,
775
- withDots,
776
- withActiveDots,
777
- strokeWidth,
778
- fillOpacity,
779
- withTooltip = true,
780
- withLegend = false,
781
- withPolarGrid = true,
782
- withPolarAngleAxis = true,
783
- withPolarRadiusAxis = false,
784
- ...rest
785
- } = (0, import_core7.omitThemeProps)(mergedProps);
786
- const {
787
- getRadarProps,
788
- getRadarChartProps,
789
- getPolarGridProps,
790
- getPolarAngleAxisProps,
791
- getPolarRadiusAxisProps,
792
- radarVars,
793
- setHighlightedArea
794
- } = useRadarChart({
795
- data,
796
- series,
797
- dataKey,
798
- radarProps,
799
- chartProps,
800
- polarGridProps,
801
- polarAngleAxisProps,
802
- polarAngleAxisTickProps,
803
- polarRadiusAxisProps,
804
- polarRadiusAxisTickProps,
805
- withDots,
806
- withActiveDots,
807
- strokeWidth,
808
- fillOpacity,
809
- valueFormatter,
810
- strokeDasharray,
811
- styles
812
- });
813
- const { getContainerProps } = useChart({ containerProps });
814
- const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
815
- tooltipProps,
816
- tooltipAnimationDuration,
817
- styles
818
- });
819
- const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
820
- legendProps
821
- });
822
- const radars = (0, import_react5.useMemo)(
823
- () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
824
- import_recharts.Radar,
825
- {
826
- ...getRadarProps({ index, className: "ui-radar-chart__radar" })
827
- },
828
- `radar-${dataKey2}`
829
- )),
830
- [getRadarProps, series]
831
- );
832
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
833
- import_core7.ui.div,
834
- {
835
- ref,
836
- className: (0, import_utils8.cx)("ui-radar-chart", className),
837
- var: radarVars,
838
- __css: { maxW: "full", ...styles.container },
839
- ...rest,
840
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
841
- import_recharts.ResponsiveContainer,
842
- {
843
- ...getContainerProps({ className: "ui-radar-chart__container" }),
844
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
845
- import_recharts.RadarChart,
846
- {
847
- ...getRadarChartProps({ className: "ui-radar-chart__chart" }),
848
- children: [
849
- withPolarGrid ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
850
- import_recharts.PolarGrid,
851
- {
852
- ...getPolarGridProps({
853
- className: "ui-radar-chart__polar-grid"
854
- })
855
- }
856
- ) : null,
857
- withPolarAngleAxis ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
858
- import_recharts.PolarAngleAxis,
859
- {
860
- ...getPolarAngleAxisProps({
861
- className: "ui-radar-chart__polar-angle-axis"
862
- })
863
- }
864
- ) : null,
865
- withPolarRadiusAxis ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
866
- import_recharts.PolarRadiusAxis,
867
- {
868
- ...getPolarRadiusAxisProps({
869
- className: "ui-radar-chart__polar-radius-axis"
870
- })
871
- }
872
- ) : null,
873
- withLegend ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
874
- import_recharts.Legend,
875
- {
876
- content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
877
- ChartLegend,
878
- {
879
- className: "ui-area-chart__legend",
880
- payload,
881
- onHighlight: setHighlightedArea,
882
- ...computedLegendProps
883
- }
884
- ),
885
- ...getLegendProps()
886
- }
887
- ) : null,
888
- withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
889
- import_recharts.Tooltip,
890
- {
891
- content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
892
- ChartTooltip,
893
- {
894
- className: "ui-line-chart__tooltip",
895
- label,
896
- payload,
897
- valueFormatter,
898
- unit,
899
- ...computedTooltipProps
900
- }
901
- ),
902
- ...getTooltipProps()
903
- }
904
- ) : null,
905
- radars
906
- ]
907
- }
908
- )
909
- }
910
- )
911
- }
912
- ) });
913
- });
914
- // Annotate the CommonJS export names for ESM import in node:
915
- 0 && (module.exports = {
916
- RadarChart
917
- });
918
- //# sourceMappingURL=radar-chart.js.map