@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.
- package/dist/area-chart-gradient.d.mts +2 -2
- package/dist/area-chart-gradient.d.ts +2 -2
- package/dist/area-chart-gradient.js +7 -5
- package/dist/area-chart-gradient.js.map +1 -1
- package/dist/area-chart-gradient.mjs +1 -1
- package/dist/area-chart-split.d.mts +2 -2
- package/dist/area-chart-split.d.ts +2 -2
- package/dist/area-chart-split.js +4 -2
- package/dist/area-chart-split.js.map +1 -1
- package/dist/area-chart-split.mjs +1 -1
- package/dist/area-chart.d.mts +8 -8
- package/dist/area-chart.d.ts +8 -8
- package/dist/area-chart.js +190 -175
- package/dist/area-chart.js.map +1 -1
- package/dist/area-chart.mjs +13 -13
- package/dist/bar-chart.d.mts +8 -8
- package/dist/bar-chart.d.ts +8 -8
- package/dist/bar-chart.js +143 -127
- package/dist/bar-chart.js.map +1 -1
- package/dist/bar-chart.mjs +11 -11
- package/dist/chart-legend.d.mts +1 -1
- package/dist/chart-legend.d.ts +1 -1
- package/dist/chart-legend.js +4 -2
- package/dist/chart-legend.js.map +1 -1
- package/dist/chart-legend.mjs +3 -3
- package/dist/chart-tooltip.d.mts +4 -4
- package/dist/chart-tooltip.d.ts +4 -4
- package/dist/chart-tooltip.js +9 -7
- package/dist/chart-tooltip.js.map +1 -1
- package/dist/chart-tooltip.mjs +3 -3
- package/dist/chart-utils.js.map +1 -1
- package/dist/chart-utils.mjs +1 -1
- package/dist/chart.types.d.mts +14 -14
- package/dist/chart.types.d.ts +14 -14
- package/dist/chart.types.js.map +1 -1
- package/dist/{chunk-UANITMH7.mjs → chunk-5VLSGWQD.mjs} +10 -8
- package/dist/chunk-5VLSGWQD.mjs.map +1 -0
- package/dist/{chunk-XYUYAHJX.mjs → chunk-6JRMEI6J.mjs} +2 -2
- package/dist/chunk-6JRMEI6J.mjs.map +1 -0
- package/dist/{chunk-VKBRU4Z4.mjs → chunk-AYVTBRCS.mjs} +29 -28
- package/dist/chunk-AYVTBRCS.mjs.map +1 -0
- package/dist/{chunk-6O5G3WYP.mjs → chunk-EZG52466.mjs} +29 -21
- package/dist/chunk-EZG52466.mjs.map +1 -0
- package/dist/{chunk-VEFEKDMH.mjs → chunk-FDALM73K.mjs} +15 -14
- package/dist/chunk-FDALM73K.mjs.map +1 -0
- package/dist/{chunk-2GQHI23M.mjs → chunk-GU4SGNWX.mjs} +5 -5
- package/dist/chunk-GU4SGNWX.mjs.map +1 -0
- package/dist/{chunk-MVRWZTQ5.mjs → chunk-NLXYCM5J.mjs} +2 -2
- package/dist/chunk-NLXYCM5J.mjs.map +1 -0
- package/dist/{chunk-EXBYAVSP.mjs → chunk-NMPNNSBN.mjs} +76 -74
- package/dist/chunk-NMPNNSBN.mjs.map +1 -0
- package/dist/{chunk-AL4MDJ4U.mjs → chunk-NQPC5LPY.mjs} +84 -82
- package/dist/chunk-NQPC5LPY.mjs.map +1 -0
- package/dist/{chunk-MN7T76SY.mjs → chunk-OG5CVPPV.mjs} +5 -3
- package/dist/chunk-OG5CVPPV.mjs.map +1 -0
- package/dist/{chunk-LLOU2WIV.mjs → chunk-OUIKA4AX.mjs} +5 -3
- package/dist/chunk-OUIKA4AX.mjs.map +1 -0
- package/dist/{chunk-3EHZJFIA.mjs → chunk-PKQB4BFG.mjs} +28 -28
- package/dist/chunk-PKQB4BFG.mjs.map +1 -0
- package/dist/{chunk-C3ZYUDXE.mjs → chunk-QPMW56KA.mjs} +52 -48
- package/dist/chunk-QPMW56KA.mjs.map +1 -0
- package/dist/{chunk-IJRYXT4V.mjs → chunk-R2LOTDR3.mjs} +2 -2
- package/dist/{chunk-IJRYXT4V.mjs.map → chunk-R2LOTDR3.mjs.map} +1 -1
- package/dist/{chunk-LSCPL7PM.mjs → chunk-SCY5V45W.mjs} +58 -56
- package/dist/chunk-SCY5V45W.mjs.map +1 -0
- package/dist/{chunk-VGNCWS23.mjs → chunk-SYBJTMPL.mjs} +92 -90
- package/dist/chunk-SYBJTMPL.mjs.map +1 -0
- package/dist/{chunk-ZGXEF3LO.mjs → chunk-TA7YJAW4.mjs} +49 -47
- package/dist/chunk-TA7YJAW4.mjs.map +1 -0
- package/dist/{chunk-O3LMKYXK.mjs → chunk-TU6MKMMV.mjs} +29 -28
- package/dist/chunk-TU6MKMMV.mjs.map +1 -0
- package/dist/{chunk-QL3DB7OJ.mjs → chunk-TXNC7GLT.mjs} +1 -1
- package/dist/{chunk-QL3DB7OJ.mjs.map → chunk-TXNC7GLT.mjs.map} +1 -1
- package/dist/{chunk-NHHJ5XFF.mjs → chunk-U325CYNR.mjs} +8 -6
- package/dist/chunk-U325CYNR.mjs.map +1 -0
- package/dist/{chunk-OPPMMNGP.mjs → chunk-UER5GW4M.mjs} +33 -24
- package/dist/chunk-UER5GW4M.mjs.map +1 -0
- package/dist/{chunk-FYAC4RRZ.mjs → chunk-UTD4XZDM.mjs} +11 -10
- package/dist/chunk-UTD4XZDM.mjs.map +1 -0
- package/dist/{chunk-A3IWA366.mjs → chunk-VK65X6Q2.mjs} +4 -4
- package/dist/chunk-VK65X6Q2.mjs.map +1 -0
- package/dist/{chunk-OJ2MLZZ7.mjs → chunk-X6PIY2M3.mjs} +7 -7
- package/dist/chunk-X6PIY2M3.mjs.map +1 -0
- package/dist/{chunk-MSG3WFBO.mjs → chunk-YIAK5DIM.mjs} +7 -6
- package/dist/chunk-YIAK5DIM.mjs.map +1 -0
- package/dist/{chunk-ZXBE4ERW.mjs → chunk-YTUEG4IY.mjs} +47 -45
- package/dist/chunk-YTUEG4IY.mjs.map +1 -0
- package/dist/{chunk-VUTCH2CU.mjs → chunk-YX23LEQ7.mjs} +13 -13
- package/dist/chunk-YX23LEQ7.mjs.map +1 -0
- package/dist/{chunk-BQT5TIKZ.mjs → chunk-ZRV4LO67.mjs} +44 -42
- package/dist/chunk-ZRV4LO67.mjs.map +1 -0
- package/dist/donut-chart.js +97 -89
- package/dist/donut-chart.js.map +1 -1
- package/dist/donut-chart.mjs +10 -10
- package/dist/index.d.mts +14 -14
- package/dist/index.d.ts +14 -14
- package/dist/index.js +2084 -2036
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -28
- package/dist/index.mjs.map +1 -1
- package/dist/line-chart.d.mts +7 -7
- package/dist/line-chart.d.ts +7 -7
- package/dist/line-chart.js +146 -138
- package/dist/line-chart.js.map +1 -1
- package/dist/line-chart.mjs +11 -11
- package/dist/pie-chart-label.d.mts +9 -9
- package/dist/pie-chart-label.d.ts +9 -9
- package/dist/pie-chart-label.js +14 -13
- package/dist/pie-chart-label.js.map +1 -1
- package/dist/pie-chart-label.mjs +1 -1
- package/dist/pie-chart.d.mts +11 -11
- package/dist/pie-chart.d.ts +11 -11
- package/dist/pie-chart.js +95 -87
- package/dist/pie-chart.js.map +1 -1
- package/dist/pie-chart.mjs +9 -9
- package/dist/radar-chart.d.mts +11 -11
- package/dist/radar-chart.d.ts +11 -11
- package/dist/radar-chart.js +87 -73
- package/dist/radar-chart.js.map +1 -1
- package/dist/radar-chart.mjs +9 -9
- package/dist/radial-chart.d.mts +10 -10
- package/dist/radial-chart.d.ts +10 -10
- package/dist/radial-chart.js +69 -62
- package/dist/radial-chart.js.map +1 -1
- package/dist/radial-chart.mjs +10 -10
- package/dist/use-area-chart.d.mts +53 -53
- package/dist/use-area-chart.d.ts +53 -53
- package/dist/use-area-chart.js +50 -46
- package/dist/use-area-chart.js.map +1 -1
- package/dist/use-area-chart.mjs +2 -2
- package/dist/use-bar-chart.d.mts +32 -32
- package/dist/use-bar-chart.d.ts +32 -32
- package/dist/use-bar-chart.js +30 -21
- package/dist/use-bar-chart.js.map +1 -1
- package/dist/use-bar-chart.mjs +2 -2
- package/dist/use-chart-axis.d.mts +27 -27
- package/dist/use-chart-axis.d.ts +27 -27
- package/dist/use-chart-axis.js +26 -26
- package/dist/use-chart-axis.js.map +1 -1
- package/dist/use-chart-axis.mjs +2 -2
- package/dist/use-chart-grid.d.mts +8 -8
- package/dist/use-chart-grid.d.ts +8 -8
- package/dist/use-chart-grid.js +3 -3
- package/dist/use-chart-grid.js.map +1 -1
- package/dist/use-chart-grid.mjs +2 -2
- package/dist/use-chart-label-list.d.mts +4 -4
- package/dist/use-chart-label-list.d.ts +4 -4
- package/dist/use-chart-label-list.js +5 -4
- package/dist/use-chart-label-list.js.map +1 -1
- package/dist/use-chart-label-list.mjs +2 -2
- package/dist/use-chart-label.d.mts +1 -1
- package/dist/use-chart-label.d.ts +1 -1
- package/dist/use-chart-label.js.map +1 -1
- package/dist/use-chart-label.mjs +2 -2
- package/dist/use-chart-legend.d.mts +1 -1
- package/dist/use-chart-legend.d.ts +1 -1
- package/dist/use-chart-legend.js +1 -1
- package/dist/use-chart-legend.js.map +1 -1
- package/dist/use-chart-legend.mjs +1 -1
- package/dist/use-chart-reference-line.d.mts +4 -4
- package/dist/use-chart-reference-line.d.ts +4 -4
- package/dist/use-chart-reference-line.js +8 -7
- package/dist/use-chart-reference-line.js.map +1 -1
- package/dist/use-chart-reference-line.mjs +2 -2
- package/dist/use-chart-tooltip.d.mts +7 -7
- package/dist/use-chart-tooltip.d.ts +7 -7
- package/dist/use-chart-tooltip.js +4 -4
- package/dist/use-chart-tooltip.js.map +1 -1
- package/dist/use-chart-tooltip.mjs +2 -2
- package/dist/use-chart.d.mts +6 -10
- package/dist/use-chart.d.ts +6 -10
- package/dist/use-chart.js +2 -2
- package/dist/use-chart.js.map +1 -1
- package/dist/use-chart.mjs +2 -2
- package/dist/use-line-chart.d.mts +43 -43
- package/dist/use-line-chart.d.ts +43 -43
- package/dist/use-line-chart.js +26 -25
- package/dist/use-line-chart.js.map +1 -1
- package/dist/use-line-chart.mjs +2 -2
- package/dist/use-pie-chart.d.mts +47 -47
- package/dist/use-pie-chart.d.ts +47 -47
- package/dist/use-pie-chart.js +40 -38
- package/dist/use-pie-chart.js.map +1 -1
- package/dist/use-pie-chart.mjs +3 -3
- package/dist/use-polar-grid.d.mts +5 -5
- package/dist/use-polar-grid.d.ts +5 -5
- package/dist/use-polar-grid.js.map +1 -1
- package/dist/use-polar-grid.mjs +2 -2
- package/dist/use-radar-chart.d.mts +41 -41
- package/dist/use-radar-chart.d.ts +41 -41
- package/dist/use-radar-chart.js +27 -19
- package/dist/use-radar-chart.js.map +1 -1
- package/dist/use-radar-chart.mjs +2 -2
- package/dist/use-radial-chart.d.mts +17 -17
- package/dist/use-radial-chart.d.ts +17 -17
- package/dist/use-radial-chart.js +11 -11
- package/dist/use-radial-chart.js.map +1 -1
- package/dist/use-radial-chart.mjs +2 -2
- package/package.json +3 -3
- package/dist/chunk-2GQHI23M.mjs.map +0 -1
- package/dist/chunk-3EHZJFIA.mjs.map +0 -1
- package/dist/chunk-6O5G3WYP.mjs.map +0 -1
- package/dist/chunk-A3IWA366.mjs.map +0 -1
- package/dist/chunk-AL4MDJ4U.mjs.map +0 -1
- package/dist/chunk-BQT5TIKZ.mjs.map +0 -1
- package/dist/chunk-C3ZYUDXE.mjs.map +0 -1
- package/dist/chunk-EXBYAVSP.mjs.map +0 -1
- package/dist/chunk-FYAC4RRZ.mjs.map +0 -1
- package/dist/chunk-LLOU2WIV.mjs.map +0 -1
- package/dist/chunk-LSCPL7PM.mjs.map +0 -1
- package/dist/chunk-MN7T76SY.mjs.map +0 -1
- package/dist/chunk-MSG3WFBO.mjs.map +0 -1
- package/dist/chunk-MVRWZTQ5.mjs.map +0 -1
- package/dist/chunk-NHHJ5XFF.mjs.map +0 -1
- package/dist/chunk-O3LMKYXK.mjs.map +0 -1
- package/dist/chunk-OJ2MLZZ7.mjs.map +0 -1
- package/dist/chunk-OPPMMNGP.mjs.map +0 -1
- package/dist/chunk-UANITMH7.mjs.map +0 -1
- package/dist/chunk-VEFEKDMH.mjs.map +0 -1
- package/dist/chunk-VGNCWS23.mjs.map +0 -1
- package/dist/chunk-VKBRU4Z4.mjs.map +0 -1
- package/dist/chunk-VUTCH2CU.mjs.map +0 -1
- package/dist/chunk-XYUYAHJX.mjs.map +0 -1
- package/dist/chunk-ZGXEF3LO.mjs.map +0 -1
- package/dist/chunk-ZXBE4ERW.mjs.map +0 -1
@@ -9,7 +9,7 @@ import {
|
|
9
9
|
import {
|
10
10
|
getClassName,
|
11
11
|
getComponentProps
|
12
|
-
} from "./chunk-
|
12
|
+
} from "./chunk-TXNC7GLT.mjs";
|
13
13
|
|
14
14
|
// src/use-radar-chart.ts
|
15
15
|
import { getVar, useTheme } from "@yamada-ui/core";
|
@@ -17,15 +17,15 @@ import { cx } from "@yamada-ui/utils";
|
|
17
17
|
import { useCallback, useMemo, useState } from "react";
|
18
18
|
var useRadarChart = ({
|
19
19
|
data,
|
20
|
-
series,
|
21
20
|
dataKey,
|
22
|
-
withDots = false,
|
23
|
-
withActiveDots = false,
|
24
|
-
strokeWidth = 2,
|
25
21
|
fillOpacity = 0.4,
|
26
22
|
polarAngleAxisTickFormatter,
|
27
23
|
polarRadiusAxisTickFormatter,
|
24
|
+
series,
|
25
|
+
strokeWidth = 2,
|
28
26
|
styles,
|
27
|
+
withActiveDots = false,
|
28
|
+
withDots = false,
|
29
29
|
...rest
|
30
30
|
}) => {
|
31
31
|
var _a;
|
@@ -33,10 +33,10 @@ var useRadarChart = ({
|
|
33
33
|
const [highlightedArea, setHighlightedArea] = useState(null);
|
34
34
|
const shouldHighlight = highlightedArea !== null;
|
35
35
|
const {
|
36
|
-
dot = {},
|
37
36
|
activeDot = {},
|
38
37
|
dimDot,
|
39
38
|
dimRadar,
|
39
|
+
dot = {},
|
40
40
|
...computedRadarProps
|
41
41
|
} = (_a = rest.radarProps) != null ? _a : {};
|
42
42
|
const radarColors = useMemo(
|
@@ -141,11 +141,11 @@ var useRadarChart = ({
|
|
141
141
|
const radarPropList = useMemo(
|
142
142
|
() => series.map((props, index) => {
|
143
143
|
const {
|
144
|
-
dataKey: dataKey2,
|
145
|
-
dot: dot2 = {},
|
146
144
|
activeDot: activeDot2 = {},
|
145
|
+
dataKey: dataKey2,
|
147
146
|
dimDot: dimDot2 = {},
|
148
147
|
dimRadar: dimRadar2 = {},
|
148
|
+
dot: dot2 = {},
|
149
149
|
...computedProps
|
150
150
|
} = props;
|
151
151
|
const color = getVar(`radar-${index}`)(theme);
|
@@ -174,8 +174,8 @@ var useRadarChart = ({
|
|
174
174
|
resolvedActiveDot = {
|
175
175
|
className: cx("ui-radar-chart__active-dot", className),
|
176
176
|
fill: color,
|
177
|
-
stroke: color,
|
178
177
|
r: 4,
|
178
|
+
stroke: color,
|
179
179
|
...rest3
|
180
180
|
};
|
181
181
|
} else {
|
@@ -205,10 +205,10 @@ var useRadarChart = ({
|
|
205
205
|
}
|
206
206
|
return {
|
207
207
|
...rest2,
|
208
|
+
activeDot: resolvedActiveDot,
|
208
209
|
color,
|
209
210
|
dataKey: dataKey2,
|
210
|
-
dot: resolvedDot
|
211
|
-
activeDot: resolvedActiveDot
|
211
|
+
dot: resolvedDot
|
212
212
|
};
|
213
213
|
}),
|
214
214
|
[
|
@@ -241,19 +241,27 @@ var useRadarChart = ({
|
|
241
241
|
[data, radarChartClassName, chartProps]
|
242
242
|
);
|
243
243
|
const getRadarProps = useCallback(
|
244
|
-
({
|
245
|
-
|
244
|
+
({ className: classNameProp, index, ...props }, ref = null) => {
|
245
|
+
var _a2;
|
246
|
+
const {
|
247
|
+
className,
|
248
|
+
activeDot: activeDot2,
|
249
|
+
color,
|
250
|
+
dataKey: dataKey2 = "",
|
251
|
+
dot: dot2,
|
252
|
+
...rest2
|
253
|
+
} = (_a2 = radarPropList[index]) != null ? _a2 : {};
|
246
254
|
return {
|
247
255
|
ref,
|
256
|
+
name: dataKey2,
|
248
257
|
className: cx(classNameProp, className),
|
249
258
|
activeDot: activeDot2,
|
250
|
-
dot: dot2,
|
251
|
-
name: dataKey2,
|
252
259
|
dataKey: dataKey2,
|
260
|
+
dot: dot2,
|
253
261
|
fill: color,
|
254
|
-
strokeWidth,
|
255
|
-
stroke: color,
|
256
262
|
isAnimationActive: false,
|
263
|
+
stroke: color,
|
264
|
+
strokeWidth,
|
257
265
|
...props,
|
258
266
|
...rest2
|
259
267
|
};
|
@@ -307,15 +315,15 @@ var useRadarChart = ({
|
|
307
315
|
);
|
308
316
|
return {
|
309
317
|
radarVars,
|
310
|
-
|
311
|
-
getRadarProps,
|
318
|
+
setHighlightedArea,
|
312
319
|
getPolarAngleAxisProps,
|
313
320
|
getPolarRadiusAxisProps,
|
314
|
-
|
321
|
+
getRadarChartProps,
|
322
|
+
getRadarProps
|
315
323
|
};
|
316
324
|
};
|
317
325
|
|
318
326
|
export {
|
319
327
|
useRadarChart
|
320
328
|
};
|
321
|
-
//# sourceMappingURL=chunk-
|
329
|
+
//# sourceMappingURL=chunk-EZG52466.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-radar-chart.ts"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n PropGetter,\n RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type {\n PolarAngleAxisProps,\n PolarRadiusAxisProps,\n RadarChartProps,\n RadarProps,\n} from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport {\n dotProperties,\n polarAngleAxisProperties,\n polarRadiusAxisProperties,\n radarChartProperties,\n radarProperties,\n} from \"./rechart-properties\"\n\nexport interface UseRadarChartOptions {\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 dataKey: string\n /**\n * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.\n */\n series: RadarProps[]\n /**\n * Controls fill opacity of all radars.\n *\n * @default 1\n */\n fillOpacity?: [number, number] | number\n /**\n * A function to format Y axis tick.\n */\n polarAngleAxisTickFormatter?: (value: number) => string\n /**\n * A function to format X axis tick.\n */\n polarRadiusAxisTickFormatter?: (value: number) => string\n /**\n * Stroke width for the chart radars.\n *\n * @default 2\n */\n strokeWidth?: number\n /**\n * Determines whether activeDots should be displayed.\n *\n * @default true\n */\n withActiveDots?: boolean\n /**\n * Determines whether dots should be displayed.\n *\n * @default false\n */\n withDots?: boolean\n /**\n * Props passed down to recharts `RadarChart` component.\n */\n chartProps?: RadarChartProps\n /**\n * Props passed down to recharts `PolarAngleAxis` component.\n */\n polarAngleAxisProps?: PolarAngleAxisProps\n /**\n * Props passed down to recharts `tick` of `PolarAngleAxis` component.\n */\n polarAngleAxisTickProps?: CSSUIProps\n /**\n * Props passed down to recharts `PolarRadiusAxis` component.\n */\n polarRadiusAxisProps?: PolarRadiusAxisProps\n /**\n * Props passed down to recharts `tick` of `PolarRadiusAxis` component.\n */\n polarRadiusAxisTickProps?: CSSUIProps\n /**\n * Props for the radar.\n */\n radarProps?: Partial<RadarProps>\n}\n\ninterface UseRadarChartProps extends UseRadarChartOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useRadarChart = ({\n data,\n dataKey,\n fillOpacity = 0.4,\n polarAngleAxisTickFormatter,\n polarRadiusAxisTickFormatter,\n series,\n strokeWidth = 2,\n styles,\n withActiveDots = false,\n withDots = false,\n ...rest\n}: UseRadarChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n const shouldHighlight = highlightedArea !== null\n const {\n activeDot = {},\n dimDot,\n dimRadar,\n dot = {},\n ...computedRadarProps\n } = rest.radarProps ?? {}\n\n const radarColors: CSSUIProps[\"vars\"] = useMemo(\n () =>\n series.map(({ color }, index) => ({\n name: `radar-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [series],\n )\n\n const radarVars: CSSUIProps[\"vars\"] = useMemo(\n () =>\n [\n ...radarColors,\n { name: \"fill-opacity\", value: fillOpacity },\n ] as Required<CSSUIProps>[\"vars\"],\n [fillOpacity, radarColors],\n )\n\n const [chartProps, radarChartClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.chartProps ?? {}, radarChartProperties],\n styles.chart,\n )(theme),\n [rest.chartProps, styles.chart, theme],\n )\n\n const [polarAngleAxisProps, polarAngleAxisClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.polarAngleAxisProps ?? {}, polarAngleAxisProperties],\n styles.polarAngleAxis,\n )(theme),\n [rest.polarAngleAxisProps, styles.polarAngleAxis, theme],\n )\n\n const polarAngleAxisTickClassName = useMemo(\n () =>\n getClassName({\n ...styles.polarAngleAxisTick,\n ...rest.polarAngleAxisTickProps,\n })(theme),\n [rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme],\n )\n\n const [polarRadiusAxisProps, polarRadiusAxisClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.polarRadiusAxisProps ?? {}, polarRadiusAxisProperties],\n styles.polarRadiusAxis,\n )(theme),\n [rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme],\n )\n\n const polarRadiusAxisTickClassName = useMemo(\n () =>\n getClassName({\n ...styles.polarRadiusAxisTick,\n ...rest.polarRadiusAxisTickProps,\n })(theme),\n [rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme],\n )\n\n const [radarProps, radarClassName] = useMemo(() => {\n const resolvedRadarProps = {\n fillOpacity: \"$fill-opacity\",\n ...computedRadarProps,\n }\n\n return getComponentProps<Dict, string>(\n [resolvedRadarProps, radarProperties],\n styles.radar,\n )(theme)\n }, [computedRadarProps, styles.radar, theme])\n\n const [dimRadarProps, dimRadarClassName] = useMemo(() => {\n const resolvedDimRadar = {\n fillOpacity: 0.3,\n strokeOpacity: 0.3,\n ...dimRadar,\n }\n\n return getComponentProps<Dict, string>([resolvedDimRadar, radarProperties])(\n theme,\n )\n }, [dimRadar, theme])\n\n const [dotProps, dotClassName] = useMemo(() => {\n const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot }\n\n return getComponentProps<Dict, string>(\n [resolvedDot, dotProperties],\n styles.dot,\n )(theme)\n }, [dot, styles.dot, theme])\n\n const [activeDotProps, activeDotClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [activeDot, dotProperties],\n styles.activeDot,\n )(theme),\n [activeDot, styles.activeDot, theme],\n )\n\n const [dimDotProps, dimDotClassName] = useMemo(() => {\n const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot }\n return getComponentProps<Dict, string>([resolvedDimDot, dotProperties])(\n theme,\n )\n }, [dimDot, theme])\n\n const radarPropList = useMemo(\n () =>\n series.map((props, index) => {\n const {\n activeDot = {},\n dataKey,\n dimDot = {},\n dimRadar = {},\n dot = {},\n ...computedProps\n } = props\n const color = getVar(`radar-${index}`)(theme)\n const dimmed = shouldHighlight && highlightedArea !== dataKey\n const computedDimRadar = { ...dimRadarProps, ...dimRadar }\n\n const resolvedProps = {\n ...radarProps,\n ...computedProps,\n ...(dimmed ? computedDimRadar : {}),\n }\n const rest = getComponentProps<Dict, string>(\n [resolvedProps, radarProperties],\n radarClassName,\n dimmed ? dimRadarClassName : undefined,\n )(theme, true)\n\n let resolvedActiveDot: boolean | Recharts.DotProps\n\n if (withActiveDots) {\n const computedActiveDot = {\n ...activeDotProps,\n ...activeDot,\n }\n\n const [rest, className] = getComponentProps<Dict, string>(\n [computedActiveDot, dotProperties],\n activeDotClassName,\n )(theme)\n\n resolvedActiveDot = {\n className: cx(\"ui-radar-chart__active-dot\", className),\n fill: color,\n r: 4,\n stroke: color,\n ...rest,\n } as Recharts.DotProps\n } else {\n resolvedActiveDot = false\n }\n\n let resolvedDot: boolean | Recharts.DotProps\n\n if (withDots) {\n const computedDimDot = { ...dimDotProps, ...dimDot }\n const computedDot = {\n ...dotProps,\n ...dot,\n ...(dimmed ? computedDimDot : {}),\n }\n\n const [rest, className] = getComponentProps(\n [computedDot, dotProperties],\n dotClassName,\n dimmed ? dimDotClassName : undefined,\n )(theme)\n\n resolvedDot = {\n className: cx(\"ui-radar-chart__dot\", className),\n fill: color,\n r: 4,\n ...rest,\n } as Recharts.DotProps\n } else {\n resolvedDot = false\n }\n\n return {\n ...rest,\n activeDot: resolvedActiveDot,\n color,\n dataKey,\n dot: resolvedDot,\n }\n }),\n [\n activeDotClassName,\n activeDotProps,\n dimDotClassName,\n dimDotProps,\n dimRadarClassName,\n dimRadarProps,\n dotClassName,\n dotProps,\n highlightedArea,\n radarClassName,\n radarProps,\n series,\n shouldHighlight,\n theme,\n withActiveDots,\n withDots,\n ],\n )\n\n const getRadarChartProps: PropGetter<\n ComponentPropsWithoutRef<typeof Recharts.RadarChart>,\n ComponentPropsWithoutRef<typeof Recharts.RadarChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, radarChartClassName),\n data,\n ...props,\n ...chartProps,\n }),\n [data, radarChartClassName, chartProps],\n )\n\n const getRadarProps: RequiredPropGetter<\n { index: number } & Partial<Recharts.RadarProps>,\n Omit<Recharts.RadarProps, \"ref\">\n > = useCallback(\n ({ className: classNameProp, index, ...props }, ref = null) => {\n const {\n className,\n activeDot,\n color,\n dataKey = \"\",\n dot,\n ...rest\n } = radarPropList[index] ?? {}\n\n return {\n ref,\n name: dataKey as string,\n className: cx(classNameProp, className),\n activeDot,\n dataKey,\n dot,\n fill: color,\n isAnimationActive: false,\n stroke: color,\n strokeWidth,\n ...(props as Omit<Recharts.RadarProps, \"dataKey\">),\n ...rest,\n }\n },\n [radarPropList, strokeWidth],\n )\n\n const getPolarAngleAxisProps: PropGetter<\n Recharts.PolarAngleAxisProps,\n Omit<Recharts.PolarAngleAxisProps, \"ref\">\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, polarAngleAxisClassName),\n dataKey,\n tick: {\n className: cx(\n \"ui-radar-chart__polar-angle-axis-tick\",\n polarAngleAxisTickClassName,\n ),\n },\n tickFormatter: polarAngleAxisTickFormatter,\n tickSize: 16,\n ...props,\n ...polarAngleAxisProps,\n }),\n [\n dataKey,\n polarAngleAxisClassName,\n polarAngleAxisProps,\n polarAngleAxisTickClassName,\n polarAngleAxisTickFormatter,\n ],\n )\n\n const getPolarRadiusAxisProps: PropGetter<\n Recharts.PolarRadiusAxisProps,\n Omit<Recharts.PolarRadiusAxisProps, \"ref\">\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, polarRadiusAxisClassName),\n tick: {\n className: cx(\n \"ui-radar-chart__polar-radius-axis-tick\",\n polarRadiusAxisTickClassName,\n ),\n },\n tickFormatter: polarRadiusAxisTickFormatter,\n ...props,\n ...polarRadiusAxisProps,\n }),\n [\n polarRadiusAxisClassName,\n polarRadiusAxisProps,\n polarRadiusAxisTickClassName,\n polarRadiusAxisTickFormatter,\n ],\n )\n\n return {\n radarVars,\n setHighlightedArea,\n getPolarAngleAxisProps,\n getPolarRadiusAxisProps,\n getRadarChartProps,\n getRadarProps,\n }\n}\n\nexport type UseRadarChartReturn = ReturnType<typeof useRadarChart>\n"],"mappings":"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","names":["_a","activeDot","dataKey","dimDot","dimRadar","dot","rest"]}
|
@@ -10,17 +10,17 @@ var pieChartLabel = ({
|
|
10
10
|
className: cellClassName,
|
11
11
|
cx: cxProp = 0,
|
12
12
|
cy: cyProp = 0,
|
13
|
-
midAngle = 0,
|
14
13
|
innerRadius = 0,
|
15
|
-
|
14
|
+
isPercent,
|
15
|
+
labelFormatter,
|
16
|
+
labelOffset: labelOffsetProp,
|
17
|
+
midAngle = 0,
|
16
18
|
middleRadius = 0,
|
19
|
+
outerRadius = 0,
|
17
20
|
percent = 0,
|
21
|
+
styles,
|
18
22
|
value = 0,
|
19
|
-
|
20
|
-
isPercent,
|
21
|
-
labelProps,
|
22
|
-
labelFormatter,
|
23
|
-
styles
|
23
|
+
labelProps
|
24
24
|
}) => {
|
25
25
|
const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
|
26
26
|
const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
|
@@ -39,10 +39,10 @@ var pieChartLabel = ({
|
|
39
39
|
ui.text,
|
40
40
|
{
|
41
41
|
className: cx(cellClassName, "ui-chart__label"),
|
42
|
+
dominantBaseline: "central",
|
43
|
+
textAnchor,
|
42
44
|
x,
|
43
45
|
y,
|
44
|
-
textAnchor,
|
45
|
-
dominantBaseline: "central",
|
46
46
|
__css: styles,
|
47
47
|
...labelProps,
|
48
48
|
children: displayLabel()
|
@@ -54,18 +54,19 @@ var pieChartLabelLine = ({
|
|
54
54
|
cx: cxProp = 0,
|
55
55
|
cy: cyProp = 0,
|
56
56
|
innerRadius = 0,
|
57
|
+
labelOffset: labelOffsetProp,
|
57
58
|
midAngle = 0,
|
58
59
|
middleRadius = 0,
|
59
60
|
outerRadius = 0,
|
60
61
|
points = [{ x: 0, y: 0 }],
|
61
|
-
|
62
|
-
labelLineProps
|
63
|
-
styles
|
62
|
+
styles,
|
63
|
+
labelLineProps
|
64
64
|
}) => {
|
65
|
+
var _a, _b;
|
65
66
|
const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
|
66
67
|
const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
|
67
68
|
const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
|
68
|
-
const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
|
69
|
+
const d = `M ${(_a = points[0]) == null ? void 0 : _a.x} ${(_b = points[0]) == null ? void 0 : _b.y} L ${x} ${y}`;
|
69
70
|
return /* @__PURE__ */ jsx(
|
70
71
|
ui.path,
|
71
72
|
{
|
@@ -81,4 +82,4 @@ export {
|
|
81
82
|
pieChartLabel,
|
82
83
|
pieChartLabelLine
|
83
84
|
};
|
84
|
-
//# sourceMappingURL=chunk-
|
85
|
+
//# sourceMappingURL=chunk-FDALM73K.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/pie-chart-label.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport { cx, isUndefined } from \"@yamada-ui/utils\"\n\nconst RADIAN = Math.PI / 180\nconst DEFAULT_LABEL_OFFSET = 22\n\nexport interface PieChartLabelProps {\n styles: Dict<CSSUIObject | undefined>\n className?: string\n cx?: number\n cy?: number\n innerRadius?: number\n isPercent?: boolean\n labelFormatter?: (value: number) => string\n labelOffset?: number\n midAngle?: number\n middleRadius?: number\n outerRadius?: number\n percent?: number\n value?: number\n labelProps?: HTMLUIProps<\"text\">\n}\n\nexport const pieChartLabel: (props: PieChartLabelProps) => ReactNode = ({\n className: cellClassName,\n cx: cxProp = 0,\n cy: cyProp = 0,\n innerRadius = 0,\n isPercent,\n labelFormatter,\n labelOffset: labelOffsetProp,\n midAngle = 0,\n middleRadius = 0,\n outerRadius = 0,\n percent = 0,\n styles,\n value = 0,\n labelProps,\n}) => {\n const labelOffset =\n labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n const textAnchor = x > cxProp ? \"start\" : x < cxProp ? \"end\" : \"middle\"\n const displayLabel = () => {\n if (isPercent) {\n return (\n parseFloat((percent * 100).toFixed(0)) > 0 &&\n `${(percent * 100).toFixed(0)}%`\n )\n } else if (!isUndefined(labelFormatter)) {\n return labelFormatter(value)\n } else {\n return value\n }\n }\n\n return (\n <ui.text\n className={cx(cellClassName, \"ui-chart__label\")}\n dominantBaseline=\"central\"\n textAnchor={textAnchor}\n x={x}\n y={y}\n __css={styles}\n {...labelProps}\n >\n {displayLabel()}\n </ui.text>\n )\n}\n\ninterface Point {\n x: number\n y: number\n}\n\nexport interface PieChartLabelLineProps {\n styles: Dict<CSSUIObject | undefined>\n className?: string\n cx?: number\n cy?: number\n innerRadius?: number\n labelOffset?: number\n midAngle?: number\n middleRadius?: number\n outerRadius?: number\n points?: Point[]\n labelLineProps?: HTMLUIProps<\"path\">\n}\n\nexport const pieChartLabelLine: (\n props: PieChartLabelLineProps,\n) => React.ReactElement<SVGElement> = ({\n className: cellClassName,\n cx: cxProp = 0,\n cy: cyProp = 0,\n innerRadius = 0,\n labelOffset: labelOffsetProp,\n midAngle = 0,\n middleRadius = 0,\n outerRadius = 0,\n points = [{ x: 0, y: 0 }],\n styles,\n labelLineProps,\n}) => {\n const labelOffset =\n labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n const d = `M ${points[0]?.x} ${points[0]?.y} L ${x} ${y}`\n\n return (\n <ui.path\n className={cx(cellClassName, \"ui-chart__label-line\")}\n d={d}\n __css={styles}\n {...labelLineProps}\n />\n )\n}\n"],"mappings":";;;AAGA,SAAS,UAAU;AACnB,SAAS,IAAI,mBAAmB;AA2D5B;AAzDJ,IAAM,SAAS,KAAK,KAAK;AACzB,IAAM,uBAAuB;AAmBtB,IAAM,gBAA0D,CAAC;AAAA,EACtE,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,aAAa,IAAI,SAAS,UAAU,IAAI,SAAS,QAAQ;AAC/D,QAAM,eAAe,MAAM;AACzB,QAAI,WAAW;AACb,aACE,YAAY,UAAU,KAAK,QAAQ,CAAC,CAAC,IAAI,KACzC,IAAI,UAAU,KAAK,QAAQ,CAAC,CAAC;AAAA,IAEjC,WAAW,CAAC,YAAY,cAAc,GAAG;AACvC,aAAO,eAAe,KAAK;AAAA,IAC7B,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,eAAe,iBAAiB;AAAA,MAC9C,kBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,uBAAa;AAAA;AAAA,EAChB;AAEJ;AAqBO,IAAM,oBAEyB,CAAC;AAAA,EACrC,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAAM;AA9GN;AA+GE,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,IAAI,MAAK,YAAO,CAAC,MAAR,mBAAW,CAAC,KAAI,YAAO,CAAC,MAAR,mBAAW,CAAC,MAAM,CAAC,IAAI,CAAC;AAEvD,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,eAAe,sBAAsB;AAAA,MACnD;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
@@ -4,17 +4,17 @@ import {
|
|
4
4
|
} from "./chunk-6YUJLLGN.mjs";
|
5
5
|
import {
|
6
6
|
getComponentProps
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-TXNC7GLT.mjs";
|
8
8
|
|
9
9
|
// src/use-chart-grid.ts
|
10
10
|
import { useTheme } from "@yamada-ui/core";
|
11
11
|
import { cx } from "@yamada-ui/utils";
|
12
12
|
import { useCallback } from "react";
|
13
13
|
var useChartGrid = ({
|
14
|
-
gridProps = {},
|
15
14
|
gridAxis = "x",
|
16
15
|
strokeDasharray = "5 5",
|
17
|
-
styles
|
16
|
+
styles,
|
17
|
+
gridProps = {}
|
18
18
|
}) => {
|
19
19
|
const { theme } = useTheme();
|
20
20
|
const [reChartsProps, propClassName] = getComponentProps(
|
@@ -25,9 +25,9 @@ var useChartGrid = ({
|
|
25
25
|
({ className, ...props } = {}, ref = null) => ({
|
26
26
|
ref,
|
27
27
|
className: cx("ui-chart__grid", className, propClassName),
|
28
|
+
horizontal: gridAxis === "x" || gridAxis === "xy",
|
28
29
|
strokeDasharray,
|
29
30
|
vertical: gridAxis === "y" || gridAxis === "xy",
|
30
|
-
horizontal: gridAxis === "x" || gridAxis === "xy",
|
31
31
|
...props,
|
32
32
|
...reChartsProps
|
33
33
|
}),
|
@@ -39,4 +39,4 @@ var useChartGrid = ({
|
|
39
39
|
export {
|
40
40
|
useChartGrid
|
41
41
|
};
|
42
|
-
//# sourceMappingURL=chunk-
|
42
|
+
//# sourceMappingURL=chunk-GU4SGNWX.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-chart-grid.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { CartesianGridProps } from \"recharts\"\nimport type { ChartAxisType, GridProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { gridProperties } from \"./rechart-properties\"\n\nexport interface UseChartGridOptions {\n /**\n * Specifies which lines should be displayed in the grid.\n *\n * @default 'x'\n */\n gridAxis?: ChartAxisType\n /**\n * Dash array for the grid lines and cursor. The first number is the length of the solid line section and the second number is the length of the interval.\n *\n * @default '5 5'\n */\n strokeDasharray?: number | string\n /**\n * Props passed down to recharts 'CartesianGrid' component.\n */\n gridProps?: GridProps\n}\n\ninterface UseChartGridProps extends UseChartGridOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartGrid = ({\n gridAxis = \"x\",\n strokeDasharray = \"5 5\",\n styles,\n gridProps = {},\n}: UseChartGridProps) => {\n const { theme } = useTheme()\n const [reChartsProps, propClassName] = getComponentProps(\n [gridProps, gridProperties],\n styles.grid,\n )(theme)\n\n const getGridProps: PropGetter<\n Partial<CartesianGridProps>,\n CartesianGridProps\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(\"ui-chart__grid\", className, propClassName),\n horizontal: gridAxis === \"x\" || gridAxis === \"xy\",\n strokeDasharray: strokeDasharray,\n vertical: gridAxis === \"y\" || gridAxis === \"xy\",\n ...props,\n ...reChartsProps,\n }),\n [propClassName, strokeDasharray, gridAxis, reChartsProps],\n )\n\n return { getGridProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AA2BrB,IAAM,eAAe,CAAC;AAAA,EAC3B,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA,YAAY,CAAC;AACf,MAAyB;AACvB,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,eAAe,aAAa,IAAI;AAAA,IACrC,CAAC,WAAW,cAAc;AAAA,IAC1B,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,eAGF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,UAAU;AAAA,MAC7C;AAAA,MACA,WAAW,GAAG,kBAAkB,WAAW,aAAa;AAAA,MACxD,YAAY,aAAa,OAAO,aAAa;AAAA,MAC7C;AAAA,MACA,UAAU,aAAa,OAAO,aAAa;AAAA,MAC3C,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,iBAAiB,UAAU,aAAa;AAAA,EAC1D;AAEA,SAAO,EAAE,aAAa;AACxB;","names":[]}
|
@@ -4,7 +4,7 @@ import {
|
|
4
4
|
} from "./chunk-6YUJLLGN.mjs";
|
5
5
|
import {
|
6
6
|
getComponentProps
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-TXNC7GLT.mjs";
|
8
8
|
|
9
9
|
// src/use-chart-label.ts
|
10
10
|
import { useTheme } from "@yamada-ui/core";
|
@@ -34,4 +34,4 @@ var useChartLabel = ({ styles, ...rest }) => {
|
|
34
34
|
export {
|
35
35
|
useChartLabel
|
36
36
|
};
|
37
|
-
//# sourceMappingURL=chunk-
|
37
|
+
//# sourceMappingURL=chunk-NLXYCM5J.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-chart-label.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { LabelProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { labelProperties } from \"./rechart-properties\"\n\nexport interface UseChartLabelOptions {\n /**\n * Props passed down to recharts 'Label' component.\n */\n labelProps?: LabelProps\n}\n\nexport interface UseChartLabelProps extends UseChartLabelOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartLabel = ({ styles, ...rest }: UseChartLabelProps) => {\n const { theme } = useTheme()\n\n const [labelProps, labelClassName] = getComponentProps<Dict, string>(\n [rest.labelProps ?? {}, labelProperties],\n styles.label,\n )(theme)\n\n const getLabelProps: PropGetter<\n Omit<Recharts.LabelProps, \"ref\">,\n Omit<Recharts.LabelProps, \"ref\">\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => {\n return {\n ref,\n className: cx(className, labelClassName),\n ...props,\n ...labelProps,\n }\n },\n [labelClassName, labelProps],\n )\n\n return { getLabelProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAerB,IAAM,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,MAA0B;AArB1E;AAsBE,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,QAAM,CAAC,YAAY,cAAc,IAAI;AAAA,IACnC,EAAC,UAAK,eAAL,YAAmB,CAAC,GAAG,eAAe;AAAA,IACvC,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,gBAGF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,SAAS;AAC5C,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,cAAc;AAAA,QACvC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,EAC7B;AAEA,SAAO,EAAE,cAAc;AACzB;","names":[]}
|
@@ -1,150 +1,150 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useBarChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-UER5GW4M.mjs";
|
5
5
|
import {
|
6
6
|
useChartAxis
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-PKQB4BFG.mjs";
|
8
8
|
import {
|
9
9
|
useChartGrid
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-GU4SGNWX.mjs";
|
11
11
|
import {
|
12
12
|
useChartReferenceLine
|
13
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-UTD4XZDM.mjs";
|
14
14
|
import {
|
15
15
|
useChartTooltip
|
16
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-X6PIY2M3.mjs";
|
17
17
|
import {
|
18
18
|
useChartLegend
|
19
|
-
} from "./chunk-
|
19
|
+
} from "./chunk-R2LOTDR3.mjs";
|
20
20
|
import {
|
21
21
|
ChartLegend
|
22
|
-
} from "./chunk-
|
22
|
+
} from "./chunk-OUIKA4AX.mjs";
|
23
23
|
import {
|
24
24
|
ChartTooltip
|
25
|
-
} from "./chunk-
|
25
|
+
} from "./chunk-5VLSGWQD.mjs";
|
26
26
|
import {
|
27
27
|
ChartProvider,
|
28
28
|
useChart
|
29
|
-
} from "./chunk-
|
29
|
+
} from "./chunk-VK65X6Q2.mjs";
|
30
30
|
|
31
31
|
// src/bar-chart.tsx
|
32
32
|
import {
|
33
|
-
ui,
|
34
33
|
forwardRef,
|
35
|
-
|
36
|
-
|
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
|
+
CartesianGrid,
|
42
|
+
Label,
|
41
43
|
Legend,
|
42
44
|
BarChart as ReChartsBarChart,
|
43
|
-
|
45
|
+
ReferenceLine,
|
46
|
+
ResponsiveContainer,
|
44
47
|
Tooltip,
|
45
48
|
XAxis,
|
46
|
-
YAxis
|
47
|
-
ResponsiveContainer,
|
48
|
-
ReferenceLine,
|
49
|
-
Label
|
49
|
+
YAxis
|
50
50
|
} from "recharts";
|
51
51
|
import { jsx, jsxs } from "react/jsx-runtime";
|
52
52
|
var BarChart = forwardRef((props, ref) => {
|
53
53
|
const [styles, mergedProps] = useComponentMultiStyle("BarChart", props);
|
54
54
|
const {
|
55
|
+
type = "default",
|
55
56
|
className,
|
56
|
-
|
57
|
+
cell,
|
58
|
+
data,
|
57
59
|
dataKey,
|
60
|
+
fillOpacity,
|
61
|
+
gridAxis,
|
62
|
+
labelFormatter,
|
58
63
|
layoutType,
|
64
|
+
series,
|
65
|
+
strokeDasharray,
|
66
|
+
syncId,
|
59
67
|
tickLine,
|
60
|
-
|
68
|
+
tooltipAnimationDuration,
|
69
|
+
unit,
|
70
|
+
valueFormatter,
|
71
|
+
withLegend = false,
|
72
|
+
withTooltip = true,
|
61
73
|
withXAxis,
|
62
74
|
withYAxis,
|
63
|
-
barProps,
|
64
|
-
xAxisProps,
|
65
|
-
yAxisProps,
|
66
75
|
xAxisLabel,
|
76
|
+
xAxisTickFormatter,
|
67
77
|
yAxisLabel,
|
68
|
-
xAxisLabelProps,
|
69
|
-
yAxisLabelProps,
|
70
|
-
type = "default",
|
71
|
-
withTooltip = true,
|
72
|
-
withLegend = false,
|
73
|
-
containerProps,
|
74
|
-
unit,
|
75
78
|
yAxisTickFormatter,
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
tooltipAnimationDuration,
|
79
|
+
barProps,
|
80
|
+
chartProps,
|
81
|
+
containerProps,
|
82
|
+
gridProps,
|
81
83
|
legendProps,
|
82
|
-
data,
|
83
84
|
referenceLineProps = [],
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
cell,
|
85
|
+
tooltipProps,
|
86
|
+
xAxisLabelProps,
|
87
|
+
xAxisProps,
|
88
|
+
yAxisLabelProps,
|
89
|
+
yAxisProps,
|
90
90
|
...rest
|
91
91
|
} = omitThemeProps(mergedProps);
|
92
|
-
const { bars, barVars,
|
93
|
-
data,
|
94
|
-
series,
|
95
|
-
cell,
|
92
|
+
const { bars, barVars, setHighlightedArea, getBarChartProps } = useBarChart({
|
96
93
|
type,
|
97
|
-
|
98
|
-
|
99
|
-
barProps,
|
100
|
-
referenceLineProps,
|
94
|
+
cell,
|
95
|
+
data,
|
101
96
|
fillOpacity,
|
97
|
+
layoutType,
|
98
|
+
series,
|
99
|
+
styles,
|
102
100
|
syncId,
|
103
101
|
xAxisLabel,
|
104
102
|
yAxisLabel,
|
105
|
-
|
103
|
+
barProps,
|
104
|
+
chartProps,
|
105
|
+
referenceLineProps
|
106
106
|
});
|
107
107
|
const { getContainerProps } = useChart({ containerProps });
|
108
108
|
const {
|
109
|
-
getXAxisProps,
|
110
|
-
getYAxisProps,
|
111
109
|
getXAxisLabelProps,
|
112
|
-
|
110
|
+
getXAxisProps,
|
111
|
+
getYAxisLabelProps,
|
112
|
+
getYAxisProps
|
113
113
|
} = useChartAxis({
|
114
|
-
dataKey,
|
115
114
|
type,
|
115
|
+
dataKey,
|
116
|
+
gridAxis,
|
116
117
|
layoutType,
|
118
|
+
styles,
|
117
119
|
tickLine,
|
118
|
-
|
120
|
+
unit,
|
119
121
|
withXAxis,
|
120
122
|
withYAxis,
|
121
|
-
xAxisProps,
|
122
|
-
yAxisProps,
|
123
123
|
xAxisLabel,
|
124
|
+
xAxisTickFormatter,
|
124
125
|
yAxisLabel,
|
126
|
+
yAxisTickFormatter,
|
125
127
|
xAxisLabelProps,
|
128
|
+
xAxisProps,
|
126
129
|
yAxisLabelProps,
|
127
|
-
|
128
|
-
yAxisTickFormatter,
|
129
|
-
xAxisTickFormatter,
|
130
|
-
styles
|
130
|
+
yAxisProps
|
131
131
|
});
|
132
132
|
const { getReferenceLineProps } = useChartReferenceLine({
|
133
|
-
|
134
|
-
|
133
|
+
styles,
|
134
|
+
referenceLineProps
|
135
135
|
});
|
136
136
|
const { getGridProps } = useChartGrid({
|
137
|
-
gridProps,
|
138
137
|
gridAxis,
|
139
138
|
strokeDasharray,
|
140
|
-
styles
|
139
|
+
styles,
|
140
|
+
gridProps
|
141
141
|
});
|
142
|
-
const { tooltipProps: computedTooltipProps
|
143
|
-
|
142
|
+
const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
|
143
|
+
styles,
|
144
144
|
tooltipAnimationDuration,
|
145
|
-
|
145
|
+
tooltipProps
|
146
146
|
});
|
147
|
-
const { legendProps: computedLegendProps
|
147
|
+
const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
|
148
148
|
legendProps
|
149
149
|
});
|
150
150
|
const referenceLinesItems = useMemo(
|
@@ -152,8 +152,8 @@ var BarChart = forwardRef((props, ref) => {
|
|
152
152
|
ReferenceLine,
|
153
153
|
{
|
154
154
|
...getReferenceLineProps({
|
155
|
-
|
156
|
-
|
155
|
+
className: "ui-bar-chart__reference-line",
|
156
|
+
index
|
157
157
|
})
|
158
158
|
},
|
159
159
|
`referenceLine-${index}`
|
@@ -221,10 +221,10 @@ var BarChart = forwardRef((props, ref) => {
|
|
221
221
|
{
|
222
222
|
className: "ui-bar-chart__tooltip",
|
223
223
|
label,
|
224
|
-
payload,
|
225
|
-
valueFormatter,
|
226
224
|
labelFormatter,
|
225
|
+
payload,
|
227
226
|
unit,
|
227
|
+
valueFormatter,
|
228
228
|
...computedTooltipProps
|
229
229
|
}
|
230
230
|
),
|
@@ -241,8 +241,10 @@ var BarChart = forwardRef((props, ref) => {
|
|
241
241
|
}
|
242
242
|
) });
|
243
243
|
});
|
244
|
+
BarChart.displayName = "BarChart";
|
245
|
+
BarChart.__ui__ = "BarChart";
|
244
246
|
|
245
247
|
export {
|
246
248
|
BarChart
|
247
249
|
};
|
248
|
-
//# sourceMappingURL=chunk-
|
250
|
+
//# sourceMappingURL=chunk-NMPNNSBN.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/bar-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseBarChartOptions } from \"./use-bar-chart\"\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 {\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 BarChart as ReChartsBarChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { useBarChart } from \"./use-bar-chart\"\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\"\n\ninterface BarChartOptions {\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 type BarChartProps = BarChartOptions &\n HTMLUIProps &\n ThemeProps<\"BarChart\"> &\n UseBarChartOptions &\n UseChartAxisOptions &\n UseChartGridOptions &\n UseChartLegendProps &\n UseChartProps &\n UseChartReferenceLineOptions &\n UseChartTooltipOptions\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/bar-chart\n */\nexport const BarChart = forwardRef<BarChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"BarChart\", props)\n const {\n type = \"default\",\n className,\n cell,\n data,\n dataKey,\n fillOpacity,\n gridAxis,\n labelFormatter,\n layoutType,\n series,\n strokeDasharray,\n syncId,\n tickLine,\n tooltipAnimationDuration,\n unit,\n valueFormatter,\n withLegend = false,\n withTooltip = true,\n withXAxis,\n withYAxis,\n xAxisLabel,\n xAxisTickFormatter,\n yAxisLabel,\n yAxisTickFormatter,\n barProps,\n chartProps,\n containerProps,\n gridProps,\n legendProps,\n referenceLineProps = [],\n tooltipProps,\n xAxisLabelProps,\n xAxisProps,\n yAxisLabelProps,\n yAxisProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { bars, barVars, setHighlightedArea, getBarChartProps } = useBarChart({\n type,\n cell,\n data,\n fillOpacity,\n layoutType,\n series,\n styles,\n syncId,\n xAxisLabel,\n yAxisLabel,\n barProps,\n chartProps,\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 referenceLinesItems = useMemo(\n () =>\n referenceLineProps.map((_, index) => (\n <ReferenceLine\n key={`referenceLine-${index}`}\n {...getReferenceLineProps({\n className: \"ui-bar-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-bar-chart\", className)}\n __css={{ maxW: \"full\", vars: barVars, ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-bar-chart__container\" })}\n >\n <ReChartsBarChart\n {...getBarChartProps({ className: \"ui-bar-chart__chart\" })}\n >\n <CartesianGrid\n {...getGridProps({ className: \"ui-bar-chart__grid\" })}\n />\n\n <XAxis {...getXAxisProps({ className: \"ui-bar-chart__x-axis\" })}>\n <Label\n {...getXAxisLabelProps({\n className: \"ui-bar-chart__x-axis-label\",\n })}\n />\n </XAxis>\n\n <YAxis {...getYAxisProps({ className: \"ui-bar-chart__y-axis\" })}>\n <Label\n {...getYAxisLabelProps({\n className: \"ui-bar-chart__y-axis-label\",\n })}\n />\n </YAxis>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-bar-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-bar-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 {bars}\n {referenceLinesItems}\n </ReChartsBarChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n\nBarChart.displayName = \"BarChart\"\nBarChart.__ui__ = \"BarChart\"\n"],"mappings":"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","names":[]}
|