@yamada-ui/charts 1.5.4-dev-20241005224505 → 1.5.4-dev-20241006032009
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.
- package/dist/area-chart-gradient.d.mts +1 -1
- package/dist/area-chart-gradient.d.ts +1 -1
- package/dist/area-chart-gradient.js +5 -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 +1 -1
- package/dist/area-chart-split.d.ts +1 -1
- package/dist/area-chart-split.js +2 -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 +180 -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 +137 -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 +2 -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 +7 -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-YSPGYMRF.mjs → chunk-5VLSGWQD.mjs} +8 -8
- package/dist/{chunk-YSPGYMRF.mjs.map → chunk-5VLSGWQD.mjs.map} +1 -1
- 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-54WAXZP7.mjs → chunk-NMPNNSBN.mjs} +74 -74
- package/dist/chunk-NMPNNSBN.mjs.map +1 -0
- package/dist/{chunk-OEM3VCHN.mjs → chunk-NQPC5LPY.mjs} +82 -82
- package/dist/chunk-NQPC5LPY.mjs.map +1 -0
- package/dist/{chunk-AYVZF37W.mjs → chunk-OG5CVPPV.mjs} +3 -3
- package/dist/chunk-OG5CVPPV.mjs.map +1 -0
- package/dist/{chunk-X6CD7LHX.mjs → chunk-OUIKA4AX.mjs} +3 -3
- package/dist/{chunk-X6CD7LHX.mjs.map → chunk-OUIKA4AX.mjs.map} +1 -1
- 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-6OYWQ3NO.mjs → chunk-SCY5V45W.mjs} +56 -56
- package/dist/chunk-SCY5V45W.mjs.map +1 -0
- package/dist/{chunk-CQTRL3BW.mjs → chunk-SYBJTMPL.mjs} +90 -90
- package/dist/chunk-SYBJTMPL.mjs.map +1 -0
- package/dist/{chunk-XKVM7WUW.mjs → chunk-TA7YJAW4.mjs} +47 -47
- package/dist/{chunk-XKVM7WUW.mjs.map → chunk-TA7YJAW4.mjs.map} +1 -1
- 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-EE6KEX6V.mjs → chunk-U325CYNR.mjs} +6 -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-NETTMC2D.mjs → chunk-YTUEG4IY.mjs} +45 -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-DZL5KQOJ.mjs → chunk-ZRV4LO67.mjs} +42 -42
- package/dist/chunk-ZRV4LO67.mjs.map +1 -0
- package/dist/donut-chart.js +91 -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 +2069 -2043
- 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 +140 -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 +89 -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 +81 -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 +63 -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-54WAXZP7.mjs.map +0 -1
- package/dist/chunk-6O5G3WYP.mjs.map +0 -1
- package/dist/chunk-6OYWQ3NO.mjs.map +0 -1
- package/dist/chunk-A3IWA366.mjs.map +0 -1
- package/dist/chunk-AYVZF37W.mjs.map +0 -1
- package/dist/chunk-C3ZYUDXE.mjs.map +0 -1
- package/dist/chunk-CQTRL3BW.mjs.map +0 -1
- package/dist/chunk-DZL5KQOJ.mjs.map +0 -1
- package/dist/chunk-EE6KEX6V.mjs.map +0 -1
- package/dist/chunk-FYAC4RRZ.mjs.map +0 -1
- package/dist/chunk-MSG3WFBO.mjs.map +0 -1
- package/dist/chunk-MVRWZTQ5.mjs.map +0 -1
- package/dist/chunk-NETTMC2D.mjs.map +0 -1
- package/dist/chunk-O3LMKYXK.mjs.map +0 -1
- package/dist/chunk-OEM3VCHN.mjs.map +0 -1
- package/dist/chunk-OJ2MLZZ7.mjs.map +0 -1
- package/dist/chunk-OPPMMNGP.mjs.map +0 -1
- package/dist/chunk-VEFEKDMH.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
@@ -2,7 +2,7 @@
|
|
2
2
|
import {
|
3
3
|
pieChartLabel,
|
4
4
|
pieChartLabelLine
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-FDALM73K.mjs";
|
6
6
|
import {
|
7
7
|
pieChartProperties,
|
8
8
|
pieProperties
|
@@ -10,7 +10,7 @@ import {
|
|
10
10
|
import {
|
11
11
|
getClassName,
|
12
12
|
getComponentProps
|
13
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-TXNC7GLT.mjs";
|
14
14
|
|
15
15
|
// src/use-pie-chart.ts
|
16
16
|
import { getVar, useTheme } from "@yamada-ui/core";
|
@@ -18,19 +18,19 @@ import { cx } from "@yamada-ui/utils";
|
|
18
18
|
import { useCallback, useMemo, useState } from "react";
|
19
19
|
var usePieChart = ({
|
20
20
|
data,
|
21
|
-
|
22
|
-
withLabelLines = false,
|
23
|
-
labelOffset,
|
24
|
-
isPercent = false,
|
25
|
-
strokeWidth = 1,
|
21
|
+
endAngle = -270,
|
26
22
|
fillOpacity = 1,
|
27
23
|
innerRadius = "0%",
|
24
|
+
isPercent = false,
|
25
|
+
labelFormatter,
|
26
|
+
labelOffset,
|
27
|
+
withLabels = false,
|
28
28
|
outerRadius = withLabels ? "80%" : "100%",
|
29
29
|
paddingAngle = 0,
|
30
30
|
startAngle = 90,
|
31
|
-
|
32
|
-
labelFormatter,
|
31
|
+
strokeWidth = 1,
|
33
32
|
styles,
|
33
|
+
withLabelLines = false,
|
34
34
|
...rest
|
35
35
|
}) => {
|
36
36
|
var _a, _b;
|
@@ -105,11 +105,11 @@ var usePieChart = ({
|
|
105
105
|
);
|
106
106
|
const label = useCallback(
|
107
107
|
(props) => pieChartLabel({
|
108
|
-
labelOffset,
|
109
108
|
isPercent,
|
110
|
-
labelProps,
|
111
109
|
labelFormatter,
|
110
|
+
labelOffset,
|
112
111
|
styles: styles.label,
|
112
|
+
labelProps,
|
113
113
|
...props
|
114
114
|
}),
|
115
115
|
[isPercent, labelOffset, labelProps, styles.label, labelFormatter]
|
@@ -118,8 +118,8 @@ var usePieChart = ({
|
|
118
118
|
(props) => {
|
119
119
|
return pieChartLabelLine({
|
120
120
|
labelOffset,
|
121
|
-
labelLineProps,
|
122
121
|
styles: styles.labelLine,
|
122
|
+
labelLineProps,
|
123
123
|
...props
|
124
124
|
});
|
125
125
|
},
|
@@ -142,8 +142,8 @@ var usePieChart = ({
|
|
142
142
|
dimmed ? dimCellClassName : void 0
|
143
143
|
)(theme);
|
144
144
|
return {
|
145
|
-
|
146
|
-
|
145
|
+
className,
|
146
|
+
color
|
147
147
|
};
|
148
148
|
}),
|
149
149
|
[
|
@@ -168,19 +168,19 @@ var usePieChart = ({
|
|
168
168
|
({ className, ...props }, ref = null) => ({
|
169
169
|
ref,
|
170
170
|
className: cx(className, pieClassName),
|
171
|
-
|
171
|
+
activeShape: activeShapeProps,
|
172
172
|
data,
|
173
|
-
|
174
|
-
outerRadius,
|
175
|
-
innerRadius,
|
176
|
-
paddingAngle,
|
177
|
-
startAngle,
|
173
|
+
dataKey: "value",
|
178
174
|
endAngle,
|
175
|
+
inactiveShape: inactiveShapeProps,
|
176
|
+
innerRadius,
|
179
177
|
isAnimationActive: false,
|
180
178
|
label: withLabels ? label : false,
|
181
179
|
labelLine: withLabelLines ? labelLine : false,
|
182
|
-
|
183
|
-
|
180
|
+
outerRadius,
|
181
|
+
paddingAngle,
|
182
|
+
rootTabIndex: -1,
|
183
|
+
startAngle,
|
184
184
|
...props,
|
185
185
|
...pieProps
|
186
186
|
}),
|
@@ -202,8 +202,9 @@ var usePieChart = ({
|
|
202
202
|
]
|
203
203
|
);
|
204
204
|
const getCellProps = useCallback(
|
205
|
-
({
|
206
|
-
|
205
|
+
({ className: classNameProp, index, ...props }, ref = null) => {
|
206
|
+
var _a2;
|
207
|
+
const { className, color } = (_a2 = cellPropList[index]) != null ? _a2 : {};
|
207
208
|
return {
|
208
209
|
ref,
|
209
210
|
className: cx(classNameProp, className),
|
@@ -217,14 +218,14 @@ var usePieChart = ({
|
|
217
218
|
);
|
218
219
|
return {
|
219
220
|
pieVars,
|
220
|
-
|
221
|
-
getPieChartProps,
|
221
|
+
setHighlightedArea,
|
222
222
|
getCellProps,
|
223
|
-
|
223
|
+
getPieChartProps,
|
224
|
+
getPieProps
|
224
225
|
};
|
225
226
|
};
|
226
227
|
|
227
228
|
export {
|
228
229
|
usePieChart
|
229
230
|
};
|
230
|
-
//# sourceMappingURL=chunk-
|
231
|
+
//# sourceMappingURL=chunk-TU6MKMMV.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-pie-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 { CellProps, PieChartProps, PieProps } 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 { pieChartLabel, pieChartLabelLine } from \"./pie-chart-label\"\nimport { pieChartProperties, pieProperties } from \"./rechart-properties\"\n\nexport interface UsePieChartOptions {\n /**\n * Chart data.\n */\n data: CellProps[]\n /**\n * Controls angle at which chart ends.\n *\n * @default -270\n */\n endAngle?: number\n /**\n * Controls fill opacity of all pies.\n *\n * @default 1\n */\n fillOpacity?: [number, number] | number\n /**\n * Controls innerRadius of the chart segments.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '0%'\n */\n innerRadius?: number | string\n /**\n * Determines whether labels should be displayed as percentages.\n *\n * @default false\n */\n isPercent?: boolean\n /**\n * A function to format labels.\n */\n labelFormatter?: (value: number) => string\n /**\n * Distance between chart and label.\n */\n labelOffset?: number\n /**\n * Controls thickness of the chart segments. If it is a number, it is calculated as px.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '80%'\n */\n outerRadius?: number | string\n /**\n * Controls padding between segments.\n *\n * @default 0\n */\n paddingAngle?: number\n /**\n * Controls angle at which chart starts.\n *\n * @default 90\n */\n startAngle?: number\n /**\n * Stroke width for the chart pies.\n *\n * @default 1\n */\n strokeWidth?: number\n /**\n * Determines whether segments labels should have lines that connect the segment with the label.\n *\n * @default false\n */\n withLabelLines?: boolean\n /**\n * Determines whether each segment should have associated label.\n *\n * @default false\n */\n withLabels?: boolean\n /**\n * Props for the cell.\n */\n cellProps?: Partial<CellProps>\n /**\n * Props passed down to recharts `PieChart` component.\n */\n chartProps?: PieChartProps\n /**\n * Props for the pie.\n */\n pieProps?: Partial<PieProps>\n}\n\ninterface UsePieChartProps extends UsePieChartOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const usePieChart = ({\n data,\n endAngle = -270,\n fillOpacity = 1,\n innerRadius = \"0%\",\n isPercent = false,\n labelFormatter,\n labelOffset,\n withLabels = false,\n outerRadius = withLabels ? \"80%\" : \"100%\",\n paddingAngle = 0,\n startAngle = 90,\n strokeWidth = 1,\n styles,\n withLabelLines = false,\n ...rest\n}: UsePieChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n const shouldHighlight = highlightedArea !== null\n const { dimCell, ...computedCellProps } = rest.cellProps ?? {}\n const {\n activeShape = {},\n inactiveShape = {},\n label: labelProps,\n labelLine: labelLineProps,\n ...computedPieProps\n } = rest.pieProps ?? {}\n\n const cellColors: CSSUIProps[\"vars\"] = useMemo(\n () =>\n data.map(({ color }, index) => ({\n name: `cell-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [data],\n )\n\n const pieVars: CSSUIProps[\"vars\"] = useMemo(\n () =>\n [\n ...cellColors,\n { name: \"fill-opacity\", value: fillOpacity },\n ] as Required<CSSUIProps>[\"vars\"],\n [fillOpacity, cellColors],\n )\n\n const [chartProps, chartClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.chartProps ?? {}, pieChartProperties],\n styles.chart,\n )(theme),\n [rest.chartProps, styles.chart, theme],\n )\n\n const [pieProps, pieClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [computedPieProps, pieProperties],\n styles.pie,\n )(theme),\n [computedPieProps, styles.pie, theme],\n )\n\n const cellClassName = useMemo(() => {\n const resolvedCellProps = {\n fillOpacity: \"$fill-opacity\",\n ...styles.cell,\n ...computedCellProps,\n }\n\n return getClassName(resolvedCellProps)(theme)\n }, [computedCellProps, styles.cell, theme])\n\n const dimCellClassName = useMemo(() => {\n const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell }\n\n return getClassName(resolvedDimCell)(theme)\n }, [dimCell, theme])\n\n const activeShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [{ _focus: { outline: \"none\" }, ...activeShape }, pieProperties],\n styles.activeShape,\n )(theme, true),\n [activeShape, styles.activeShape, theme],\n )\n\n const inactiveShapeProps = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [inactiveShape, pieProperties],\n styles.inactiveShape,\n )(theme, true),\n [inactiveShape, styles.inactiveShape, theme],\n )\n\n const label: Recharts.PieLabel = useCallback(\n (props: any) =>\n pieChartLabel({\n isPercent,\n labelFormatter,\n labelOffset,\n styles: styles.label,\n labelProps,\n ...props,\n }),\n [isPercent, labelOffset, labelProps, styles.label, labelFormatter],\n )\n\n const labelLine = useCallback(\n (props: any) => {\n return pieChartLabelLine({\n labelOffset,\n styles: styles.labelLine,\n labelLineProps,\n ...props,\n })\n },\n [labelLineProps, labelOffset, styles.labelLine],\n )\n\n const cellPropList = useMemo(\n () =>\n data.map((props, index) => {\n const { name, dimCell = {}, ...computedProps } = props\n const color = getVar(`cell-${index}`)(theme)\n const dimmed = shouldHighlight && highlightedArea !== name\n const resolvedProps = {\n ...computedProps,\n ...(dimmed ? dimCell : {}),\n }\n\n const className = getClassName(\n {\n cellClassName,\n ...resolvedProps,\n },\n dimmed ? dimCellClassName : undefined,\n )(theme)\n\n return {\n className,\n color,\n }\n }),\n [\n cellClassName,\n data,\n dimCellClassName,\n highlightedArea,\n shouldHighlight,\n theme,\n ],\n )\n\n const getPieChartProps: PropGetter<\n ComponentPropsWithoutRef<typeof Recharts.PieChart>,\n ComponentPropsWithoutRef<typeof Recharts.PieChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, chartClassName),\n ...props,\n ...chartProps,\n }),\n [chartProps, chartClassName],\n )\n\n const getPieProps: RequiredPropGetter<\n Partial<Recharts.PieProps>,\n Omit<Recharts.PieProps, \"ref\">\n > = useCallback(\n ({ className, ...props }, ref = null) => ({\n ref,\n className: cx(className, pieClassName),\n activeShape: activeShapeProps,\n data,\n dataKey: \"value\",\n endAngle,\n inactiveShape: inactiveShapeProps,\n innerRadius,\n isAnimationActive: false,\n label: withLabels ? label : false,\n labelLine: withLabelLines ? labelLine : false,\n outerRadius,\n paddingAngle,\n rootTabIndex: -1,\n startAngle,\n ...(props as Omit<Recharts.PieProps, \"dataKey\">),\n ...pieProps,\n }),\n [\n pieClassName,\n data,\n outerRadius,\n innerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n label,\n withLabelLines,\n labelLine,\n activeShapeProps,\n inactiveShapeProps,\n pieProps,\n ],\n )\n\n const getCellProps: RequiredPropGetter<\n { index: number } & Omit<Recharts.CellProps, \"ref\">,\n Recharts.CellProps\n > = useCallback(\n ({ className: classNameProp, index, ...props }, ref = null) => {\n const { className, color } = cellPropList[index] ?? {}\n\n return {\n ref,\n className: cx(classNameProp, className),\n fill: color,\n stroke: color,\n strokeWidth,\n ...(props as Recharts.CellProps),\n }\n },\n [cellPropList, strokeWidth],\n )\n\n return {\n pieVars,\n setHighlightedArea,\n getCellProps,\n getPieChartProps,\n getPieProps,\n }\n}\n\nexport type UsePieChartReturn = ReturnType<typeof usePieChart>\n"],"mappings":"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","names":["_a","dimCell"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/chart-utils.ts"],"sourcesContent":["import type { StyledTheme } from \"@yamada-ui/core\"\nimport {
|
1
|
+
{"version":3,"sources":["../src/chart-utils.ts"],"sourcesContent":["import type { StyledTheme } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { getCSS } from \"@yamada-ui/core\"\nimport { cx, isString, splitObject } from \"@yamada-ui/utils\"\n\nexport const getClassName =\n (...styles: (Dict | string | undefined)[]) =>\n (theme: StyledTheme) =>\n cx(\n ...styles.map((style) =>\n isString(style) ? style : getCSS(style)(theme),\n ),\n )\n\nexport const getComponentProps =\n <T extends Dict, K extends keyof T>(\n [obj, keys]: [T, K[]],\n ...props: (Dict | string | undefined)[]\n ) =>\n <P extends boolean = false>(theme: StyledTheme, isContain?: P) => {\n const [pickedProps, omittedProps] = splitObject<T, K>(obj, keys)\n const className = getClassName(...props, omittedProps)(theme)\n\n return (\n !isContain ? [pickedProps, className] : { ...pickedProps, className }\n ) as P extends false\n ? [{ [P in K]: T[P] }, string]\n : { [P in K]: T[P] } & { className: string }\n }\n"],"mappings":";;;AAEA,SAAS,cAAc;AACvB,SAAS,IAAI,UAAU,mBAAmB;AAEnC,IAAM,eACX,IAAI,WACJ,CAAC,UACC;AAAA,EACE,GAAG,OAAO;AAAA,IAAI,CAAC,UACb,SAAS,KAAK,IAAI,QAAQ,OAAO,KAAK,EAAE,KAAK;AAAA,EAC/C;AACF;AAEG,IAAM,oBACX,CACE,CAAC,KAAK,IAAI,MACP,UAEL,CAA4B,OAAoB,cAAkB;AAChE,QAAM,CAAC,aAAa,YAAY,IAAI,YAAkB,KAAK,IAAI;AAC/D,QAAM,YAAY,aAAa,GAAG,OAAO,YAAY,EAAE,KAAK;AAE5D,SACE,CAAC,YAAY,CAAC,aAAa,SAAS,IAAI,EAAE,GAAG,aAAa,UAAU;AAIxE;","names":[]}
|
@@ -3,18 +3,18 @@
|
|
3
3
|
// src/area-chart-gradient.tsx
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
5
5
|
var AreaGradient = ({
|
6
|
-
color,
|
7
6
|
id,
|
8
|
-
|
9
|
-
fillOpacity
|
7
|
+
color,
|
8
|
+
fillOpacity,
|
9
|
+
withGradient
|
10
10
|
}) => {
|
11
11
|
if (withGradient) {
|
12
|
-
return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0",
|
12
|
+
return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: [
|
13
13
|
/* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: fillOpacity }),
|
14
14
|
/* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.01 })
|
15
15
|
] });
|
16
16
|
} else {
|
17
|
-
return /* @__PURE__ */ jsx("linearGradient", { id, x1: "0",
|
17
|
+
return /* @__PURE__ */ jsx("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: /* @__PURE__ */ jsx("stop", { stopColor: color, stopOpacity: fillOpacity }) });
|
18
18
|
}
|
19
19
|
};
|
20
20
|
AreaGradient.displayName = "AreaGradient";
|
@@ -23,4 +23,4 @@ AreaGradient.__ui__ = "AreaGradient";
|
|
23
23
|
export {
|
24
24
|
AreaGradient
|
25
25
|
};
|
26
|
-
//# sourceMappingURL=chunk-
|
26
|
+
//# sourceMappingURL=chunk-U325CYNR.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/area-chart-gradient.tsx"],"sourcesContent":["import type { FC } from \"@yamada-ui/core\"\n\nexport interface AreaGradientProps {\n fillOpacity: number | string\n id?: string\n color?: string\n withGradient?: boolean\n}\n\nexport const AreaGradient: FC<AreaGradientProps> = ({\n id,\n color,\n fillOpacity,\n withGradient,\n}) => {\n if (withGradient) {\n return (\n <linearGradient id={id} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={color} stopOpacity={fillOpacity} />\n <stop offset=\"100%\" stopColor={color} stopOpacity={0.01} />\n </linearGradient>\n )\n } else {\n return (\n <linearGradient id={id} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop stopColor={color} stopOpacity={fillOpacity} />\n </linearGradient>\n )\n }\n}\n\nAreaGradient.displayName = \"AreaGradient\"\nAreaGradient.__ui__ = \"AreaGradient\"\n"],"mappings":";;;AAiBM,SACE,KADF;AARC,IAAM,eAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,cAAc;AAChB,WACE,qBAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA,0BAAC,UAAK,QAAO,MAAK,WAAW,OAAO,aAAa,aAAa;AAAA,MAC9D,oBAAC,UAAK,QAAO,QAAO,WAAW,OAAO,aAAa,MAAM;AAAA,OAC3D;AAAA,EAEJ,OAAO;AACL,WACE,oBAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C,8BAAC,UAAK,WAAW,OAAO,aAAa,aAAa,GACpD;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}
|
@@ -5,26 +5,26 @@ import {
|
|
5
5
|
} from "./chunk-6YUJLLGN.mjs";
|
6
6
|
import {
|
7
7
|
getComponentProps
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-TXNC7GLT.mjs";
|
9
9
|
|
10
10
|
// src/use-bar-chart.tsx
|
11
11
|
import { getVar, useTheme } from "@yamada-ui/core";
|
12
12
|
import { cx, runIfFunc } from "@yamada-ui/utils";
|
13
|
-
import { useCallback,
|
13
|
+
import { useCallback, useId, useMemo, useState } from "react";
|
14
14
|
import { Bar, Cell } from "recharts";
|
15
15
|
import { jsx } from "react/jsx-runtime";
|
16
16
|
var useBarChart = ({
|
17
|
-
data,
|
18
|
-
series,
|
19
17
|
type = "default",
|
20
|
-
|
21
|
-
|
18
|
+
cell = defaultBarCell,
|
19
|
+
data,
|
22
20
|
fillOpacity = 1,
|
21
|
+
layoutType = "horizontal",
|
22
|
+
series,
|
23
|
+
styles,
|
23
24
|
syncId,
|
24
25
|
xAxisLabel,
|
25
26
|
yAxisLabel,
|
26
|
-
|
27
|
-
cell = defaultBarCell,
|
27
|
+
referenceLineProps = [],
|
28
28
|
...rest
|
29
29
|
}) => {
|
30
30
|
var _a;
|
@@ -103,9 +103,9 @@ var useBarChart = ({
|
|
103
103
|
const barPropsList = useMemo(
|
104
104
|
() => series.map((props, index) => {
|
105
105
|
const {
|
106
|
-
dataKey,
|
107
106
|
activeBar: activeBar2 = {},
|
108
107
|
background: background2 = {},
|
108
|
+
dataKey,
|
109
109
|
dimBar: dimBar2 = {},
|
110
110
|
...computedProps
|
111
111
|
} = props;
|
@@ -159,20 +159,29 @@ var useBarChart = ({
|
|
159
159
|
]
|
160
160
|
);
|
161
161
|
const getBarProps = useCallback(
|
162
|
-
({
|
163
|
-
|
162
|
+
({ className: classNameProp, index, ...props }, ref = null) => {
|
163
|
+
var _a2;
|
164
|
+
const {
|
165
|
+
id,
|
166
|
+
className,
|
167
|
+
activeBar: activeBar2,
|
168
|
+
background: background2,
|
169
|
+
color,
|
170
|
+
dataKey = "",
|
171
|
+
...rest2
|
172
|
+
} = (_a2 = barPropsList[index]) != null ? _a2 : {};
|
164
173
|
return {
|
174
|
+
id,
|
165
175
|
ref,
|
176
|
+
name: dataKey,
|
166
177
|
className: cx(classNameProp, className),
|
167
178
|
activeBar: activeBar2,
|
168
179
|
background: background2,
|
169
|
-
id,
|
170
|
-
name: dataKey,
|
171
180
|
dataKey,
|
172
181
|
fill: color,
|
173
|
-
stroke: color,
|
174
182
|
isAnimationActive: false,
|
175
183
|
stackId: stacked ? "stack" : void 0,
|
184
|
+
stroke: color,
|
176
185
|
...props,
|
177
186
|
...rest2
|
178
187
|
};
|
@@ -186,9 +195,9 @@ var useBarChart = ({
|
|
186
195
|
return /* @__PURE__ */ jsx(
|
187
196
|
Bar,
|
188
197
|
{
|
189
|
-
...getBarProps({
|
198
|
+
...getBarProps({ className: "ui-bar-chart__bar", index }),
|
190
199
|
children: data.map(
|
191
|
-
(data2, index2) => runIfFunc(cell, {
|
200
|
+
(data2, index2) => runIfFunc(cell, { data: data2, hasStack, index: index2, series: series2 })
|
192
201
|
)
|
193
202
|
},
|
194
203
|
`bar-${dataKey}`
|
@@ -200,14 +209,14 @@ var useBarChart = ({
|
|
200
209
|
ref,
|
201
210
|
className: cx(className, barChartClassName),
|
202
211
|
data,
|
203
|
-
stackOffset: type === "percent" ? "expand" : void 0,
|
204
212
|
layout: layoutType,
|
205
|
-
syncId,
|
206
213
|
margin: {
|
207
214
|
bottom: xAxisLabel ? 30 : void 0,
|
208
215
|
left: yAxisLabel ? 10 : void 0,
|
209
216
|
right: yAxisLabel ? 5 : void 0
|
210
217
|
},
|
218
|
+
stackOffset: type === "percent" ? "expand" : void 0,
|
219
|
+
syncId,
|
211
220
|
...props,
|
212
221
|
...chartProps
|
213
222
|
}),
|
@@ -225,16 +234,16 @@ var useBarChart = ({
|
|
225
234
|
return {
|
226
235
|
bars,
|
227
236
|
barVars,
|
228
|
-
|
237
|
+
setHighlightedArea,
|
229
238
|
getBarChartProps,
|
230
|
-
|
239
|
+
getBarProps
|
231
240
|
};
|
232
241
|
};
|
233
242
|
var defaultBarCell = ({
|
234
|
-
hasStack,
|
235
|
-
series,
|
236
243
|
data,
|
237
|
-
|
244
|
+
hasStack,
|
245
|
+
index,
|
246
|
+
series
|
238
247
|
}) => {
|
239
248
|
const { dataKey } = series;
|
240
249
|
const key = `cell-${dataKey}-${index}`;
|
@@ -250,4 +259,4 @@ var defaultBarCell = ({
|
|
250
259
|
export {
|
251
260
|
useBarChart
|
252
261
|
};
|
253
|
-
//# sourceMappingURL=chunk-
|
262
|
+
//# sourceMappingURL=chunk-UER5GW4M.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-bar-chart.tsx"],"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, FC, ReactNode } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type {\n BarChartProps,\n BarChartType,\n BarProps,\n ChartLayoutType,\n ReferenceLineProps,\n} from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport { useCallback, useId, useMemo, useState } from \"react\"\nimport { Bar, Cell } from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { barChartProperties, barProperties } from \"./rechart-properties\"\n\nexport interface UseBarChartOptions {\n /**\n * Chart data.\n */\n data: Dict[]\n /**\n * An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.\n */\n series: BarProps[]\n /**\n * Controls how chart bars are positioned relative to each other.\n *\n * @default `default`\n */\n type?: BarChartType\n /**\n * A function that returns a component that renders the bar cells.\n */\n cell?: FC<BarCellProps> | ReactNode\n /**\n * Controls fill opacity of all bars.\n *\n * @default 1\n */\n fillOpacity?: [number, number] | number\n /**\n * Chart orientation.\n *\n * @default 'horizontal'\n */\n layoutType?: ChartLayoutType\n /**\n * If any two categorical charts have the same syncId,\n * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.\n */\n syncId?: number | string\n /**\n * A label to display below the X axis.\n */\n xAxisLabel?: string\n /**\n * A label to display below the Y axis.\n */\n yAxisLabel?: string\n /**\n * Props for the bars.\n */\n barProps?: Partial<BarProps>\n /**\n * Props passed down to recharts `BarChart` component.\n */\n chartProps?: BarChartProps\n /**\n * Reference lines that should be displayed on the chart.\n */\n referenceLineProps?: ReferenceLineProps[]\n}\n\nexport interface UseBarChartProps extends UseBarChartOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useBarChart = ({\n type = \"default\",\n cell = defaultBarCell,\n data,\n fillOpacity = 1,\n layoutType = \"horizontal\",\n series,\n styles,\n syncId,\n xAxisLabel,\n yAxisLabel,\n referenceLineProps = [],\n ...rest\n}: UseBarChartProps) => {\n const uuid = useId()\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n const stacked = type === \"stacked\" || type === \"percent\"\n const shouldHighlight = highlightedArea !== null\n const {\n activeBar = {},\n background = {},\n dimBar,\n ...computedBarProps\n } = rest.barProps ?? {}\n\n const barColors: CSSUIProps[\"vars\"] = useMemo(\n () =>\n series.map(({ color }, index) => ({\n name: `bar-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [series],\n )\n\n const referenceLineColors: CSSUIProps[\"vars\"] = useMemo(\n () =>\n referenceLineProps.map(({ color }, index) => ({\n name: `reference-line-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [referenceLineProps],\n )\n\n const barVars: CSSUIProps[\"vars\"] = useMemo(() => {\n return [\n ...barColors,\n ...referenceLineColors,\n { name: \"fill-opacity\", value: fillOpacity },\n ]\n }, [barColors, fillOpacity, referenceLineColors])\n\n const [chartProps, barChartClassName] = useMemo(() => {\n const resolvedBarChartProps = { barGap: 8, ...rest.chartProps }\n\n return getComponentProps<Dict, string>(\n [resolvedBarChartProps, barChartProperties],\n styles.chart,\n )(theme)\n }, [rest.chartProps, styles.chart, theme])\n\n const [barProps, barClassName] = useMemo(() => {\n const resolvedBarProps = {\n fillOpacity: \"$fill-opacity\",\n strokeOpacity: 1,\n ...computedBarProps,\n }\n\n return getComponentProps<Dict, string>(\n [resolvedBarProps, barProperties],\n styles.bar,\n )(theme)\n }, [computedBarProps, styles.bar, theme])\n\n const [dimBarProps, dimBarClassName] = useMemo(() => {\n const resolvedDimBar = { fillOpacity: 0.3, strokeOpacity: 0, ...dimBar }\n\n return getComponentProps<Dict, string>([resolvedDimBar, barProperties])(\n theme,\n )\n }, [dimBar, theme])\n\n const [activeBarProps, activeBarClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [activeBar, barProperties],\n styles.activeBar,\n )(theme),\n [activeBar, styles.activeBar, theme],\n )\n\n const [backgroundProps, backgroundClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [background, barProperties],\n styles.background,\n )(theme),\n [background, styles.background, theme],\n )\n\n const barPropsList = useMemo(\n () =>\n series.map((props, index) => {\n const {\n activeBar = {},\n background = {},\n dataKey,\n dimBar = {},\n ...computedProps\n } = props\n const id = `${uuid}-${dataKey}`\n const color = getVar(`bar-${index}`)(theme)\n const dimmed = shouldHighlight && highlightedArea !== dataKey\n const computedDimBar = { ...dimBarProps, ...dimBar }\n const resolvedProps = {\n ...barProps,\n ...computedProps,\n ...(dimmed ? computedDimBar : {}),\n }\n\n const rest = getComponentProps<Dict, string>(\n [resolvedProps, barProperties],\n barClassName,\n dimmed ? dimBarClassName : undefined,\n )(theme, true)\n\n const computedActiveBar = { ...activeBarProps, ...activeBar }\n\n const resolvedActiveBar = getComponentProps<Dict, string>(\n [computedActiveBar, barProperties],\n activeBarClassName,\n )(theme, true)\n\n const computedBackground = { ...backgroundProps, ...background }\n\n const resolvedBackground = getComponentProps<Dict, string>(\n [computedBackground, barProperties],\n backgroundClassName,\n )(theme, true)\n\n return {\n ...rest,\n id,\n activeBar: resolvedActiveBar,\n background: resolvedBackground,\n color,\n dataKey,\n }\n }),\n [\n activeBarClassName,\n activeBarProps,\n backgroundClassName,\n backgroundProps,\n barClassName,\n barProps,\n dimBarClassName,\n dimBarProps,\n highlightedArea,\n series,\n shouldHighlight,\n theme,\n uuid,\n ],\n )\n\n const getBarProps: RequiredPropGetter<\n { index: number } & Partial<Recharts.BarProps>,\n Omit<Recharts.BarProps, \"ref\">\n > = useCallback(\n ({ className: classNameProp, index, ...props }, ref = null) => {\n const {\n id,\n className,\n activeBar,\n background,\n color,\n dataKey = \"\",\n ...rest\n } = barPropsList[index] ?? {}\n\n return {\n id,\n ref,\n name: dataKey,\n className: cx(classNameProp, className),\n activeBar,\n background,\n dataKey,\n fill: color,\n isAnimationActive: false,\n stackId: stacked ? \"stack\" : undefined,\n stroke: color,\n ...(props as Omit<Recharts.BarProps, \"dataKey\">),\n ...rest,\n } as Recharts.BarProps\n },\n [barPropsList, stacked],\n )\n\n const bars = useMemo(() => {\n const hasStack = series.some((entry) => entry.stackId)\n\n return series.map((series, index) => {\n const { dataKey } = series\n\n return (\n <Bar\n key={`bar-${dataKey}`}\n {...getBarProps({ className: \"ui-bar-chart__bar\", index })}\n >\n {data.map((data, index) =>\n runIfFunc(cell, { data, hasStack, index, series }),\n )}\n </Bar>\n )\n })\n }, [series, getBarProps, cell, data])\n\n const getBarChartProps: PropGetter<\n ComponentPropsWithoutRef<typeof Recharts.BarChart>,\n ComponentPropsWithoutRef<typeof Recharts.BarChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, barChartClassName),\n data,\n layout: layoutType,\n margin: {\n bottom: xAxisLabel ? 30 : undefined,\n left: yAxisLabel ? 10 : undefined,\n right: yAxisLabel ? 5 : undefined,\n },\n stackOffset: type === \"percent\" ? \"expand\" : undefined,\n syncId,\n ...props,\n ...chartProps,\n }),\n [\n barChartClassName,\n data,\n type,\n layoutType,\n syncId,\n xAxisLabel,\n yAxisLabel,\n chartProps,\n ],\n )\n\n return {\n bars,\n barVars,\n setHighlightedArea,\n getBarChartProps,\n getBarProps,\n }\n}\n\nexport type UseBarChartReturn = ReturnType<typeof useBarChart>\n\nexport interface BarCellProps {\n data: Dict\n hasStack: boolean\n index: number\n series: BarProps\n}\n\nconst defaultBarCell: FC<BarCellProps> = ({\n data,\n hasStack,\n index,\n series,\n}) => {\n const { dataKey } = series\n const key = `cell-${dataKey}-${index}`\n\n if (!hasStack) return <Cell key={key} />\n\n const keys = Object.keys(data)\n const values = Object.values(data)\n\n const currentIndex = keys.findIndex((key) => key === dataKey)\n const lastIndex = values.findLastIndex((value) => value !== 0)\n\n if (currentIndex === lastIndex) return <Cell key={key} />\n\n return <Cell key={key} radius={0} />\n}\n"],"mappings":"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","names":["activeBar","background","dimBar","rest","_a","series","data","index","key"]}
|
@@ -4,15 +4,15 @@ 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-reference-line.ts
|
10
10
|
import { getCSS, getVar, useTheme } from "@yamada-ui/core";
|
11
|
-
import {
|
11
|
+
import { cx, isObject } from "@yamada-ui/utils";
|
12
12
|
import { useCallback, useMemo } from "react";
|
13
13
|
var useChartReferenceLine = ({
|
14
|
-
|
15
|
-
|
14
|
+
styles,
|
15
|
+
referenceLineProps = []
|
16
16
|
}) => {
|
17
17
|
const { theme } = useTheme();
|
18
18
|
const styleClassName = getCSS(styles.referenceLine)(theme);
|
@@ -24,23 +24,24 @@ var useChartReferenceLine = ({
|
|
24
24
|
)(theme);
|
25
25
|
const color = getVar(`reference-line-${index}`)(theme);
|
26
26
|
const label = {
|
27
|
-
value: labelProp,
|
28
27
|
fill: color,
|
29
28
|
position: "insideBottomLeft",
|
29
|
+
value: labelProp,
|
30
30
|
...isObject(labelProp) ? labelProp : {}
|
31
31
|
};
|
32
|
-
return {
|
32
|
+
return { color, label, propClassName, ...rest };
|
33
33
|
}),
|
34
34
|
[referenceLineProps, styleClassName, theme]
|
35
35
|
);
|
36
36
|
const getReferenceLineProps = useCallback(
|
37
|
-
({
|
38
|
-
|
37
|
+
({ className, index, ...props }, ref = null) => {
|
38
|
+
var _a;
|
39
|
+
const { color, label, propClassName, ...rest } = (_a = propList[index]) != null ? _a : {};
|
39
40
|
return {
|
40
41
|
ref,
|
41
42
|
className: cx(className, propClassName),
|
42
|
-
stroke: color,
|
43
43
|
label,
|
44
|
+
stroke: color,
|
44
45
|
...props,
|
45
46
|
...rest
|
46
47
|
};
|
@@ -53,4 +54,4 @@ var useChartReferenceLine = ({
|
|
53
54
|
export {
|
54
55
|
useChartReferenceLine
|
55
56
|
};
|
56
|
-
//# sourceMappingURL=chunk-
|
57
|
+
//# sourceMappingURL=chunk-UTD4XZDM.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-chart-reference-line.ts"],"sourcesContent":["import type { CSSUIObject, RequiredPropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { ReferenceLineProps } from \"./chart.types\"\nimport { getCSS, getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx, isObject } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { referenceLineProperties } from \"./rechart-properties\"\n\nexport interface UseChartReferenceLineOptions {\n /**\n * Reference lines that should be displayed on the chart.\n */\n referenceLineProps?: ReferenceLineProps[]\n}\n\ninterface UseChartReferenceLineProps extends UseChartReferenceLineOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartReferenceLine = ({\n styles,\n referenceLineProps = [],\n}: UseChartReferenceLineProps) => {\n const { theme } = useTheme()\n const styleClassName = getCSS(styles.referenceLine)(theme)\n const propList = useMemo(\n () =>\n referenceLineProps.map((props, index) => {\n const [{ label: labelProp, ...rest }, propClassName] =\n getComponentProps(\n [props, referenceLineProperties],\n styleClassName,\n )(theme)\n\n const color = getVar(`reference-line-${index}`)(theme)\n const label: Recharts.ReferenceLineProps[\"label\"] = {\n fill: color,\n position: \"insideBottomLeft\",\n value: labelProp as string,\n ...(isObject(labelProp) ? labelProp : {}),\n }\n\n return { color, label, propClassName, ...rest }\n }),\n [referenceLineProps, styleClassName, theme],\n )\n\n const getReferenceLineProps: RequiredPropGetter<\n { index: number } & Partial<Recharts.ReferenceLineProps>,\n Omit<Recharts.ReferenceLineProps, \"ref\">\n > = useCallback(\n ({ className, index, ...props }, ref = null) => {\n const { color, label, propClassName, ...rest } = propList[index] ?? {}\n\n return {\n ref,\n className: cx(className, propClassName),\n label,\n stroke: color,\n ...(props as Recharts.ReferenceLineProps),\n ...rest,\n }\n },\n [propList],\n )\n\n return { getReferenceLineProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,QAAQ,QAAQ,gBAAgB;AACzC,SAAS,IAAI,gBAAgB;AAC7B,SAAS,aAAa,eAAe;AAe9B,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA,qBAAqB,CAAC;AACxB,MAAkC;AAChC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,iBAAiB,OAAO,OAAO,aAAa,EAAE,KAAK;AACzD,QAAM,WAAW;AAAA,IACf,MACE,mBAAmB,IAAI,CAAC,OAAO,UAAU;AACvC,YAAM,CAAC,EAAE,OAAO,WAAW,GAAG,KAAK,GAAG,aAAa,IACjD;AAAA,QACE,CAAC,OAAO,uBAAuB;AAAA,QAC/B;AAAA,MACF,EAAE,KAAK;AAET,YAAM,QAAQ,OAAO,kBAAkB,KAAK,EAAE,EAAE,KAAK;AACrD,YAAM,QAA8C;AAAA,QAClD,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,GAAI,SAAS,SAAS,IAAI,YAAY,CAAC;AAAA,MACzC;AAEA,aAAO,EAAE,OAAO,OAAO,eAAe,GAAG,KAAK;AAAA,IAChD,CAAC;AAAA,IACH,CAAC,oBAAoB,gBAAgB,KAAK;AAAA,EAC5C;AAEA,QAAM,wBAGF;AAAA,IACF,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,MAAM,SAAS;AArDpD;AAsDM,YAAM,EAAE,OAAO,OAAO,eAAe,GAAG,KAAK,KAAI,cAAS,KAAK,MAAd,YAAmB,CAAC;AAErE,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,aAAa;AAAA,QACtC;AAAA,QACA,QAAQ;AAAA,QACR,GAAI;AAAA,QACJ,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,sBAAsB;AACjC;","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.ts
|
10
10
|
import { useTheme } from "@yamada-ui/core";
|
@@ -33,13 +33,13 @@ var useChart = ({ containerProps = {} }) => {
|
|
33
33
|
getContainerProps
|
34
34
|
};
|
35
35
|
};
|
36
|
-
var useLegend = (
|
36
|
+
var useLegend = () => {
|
37
37
|
const { styles } = useChartContext();
|
38
38
|
return {
|
39
39
|
styles
|
40
40
|
};
|
41
41
|
};
|
42
|
-
var useTooltip = (
|
42
|
+
var useTooltip = () => {
|
43
43
|
const { styles } = useChartContext();
|
44
44
|
return {
|
45
45
|
styles
|
@@ -53,4 +53,4 @@ export {
|
|
53
53
|
useLegend,
|
54
54
|
useTooltip
|
55
55
|
};
|
56
|
-
//# sourceMappingURL=chunk-
|
56
|
+
//# sourceMappingURL=chunk-VK65X6Q2.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-chart.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 { ResponsiveContainerProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { containerProperties } from \"./rechart-properties\"\n\ninterface ChartContext {\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ChartProvider, useChartContext] = createContext<ChartContext>({\n name: \"ChartContext\",\n errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in \"<LineChart />\" or \"<BarChart />\" etc.`,\n})\n\nexport interface UseChartProps {\n /**\n * Props passed down to recharts `ResponsiveContainer` component.\n */\n containerProps?: ResponsiveContainerProps\n}\n\nexport const useChart = ({ containerProps = {} }: UseChartProps) => {\n const { theme } = useTheme()\n const [reChartsProps, propClassName] = getComponentProps<Dict, string>([\n containerProps,\n containerProperties,\n ])(theme)\n\n const getContainerProps: PropGetter<\n Partial<Omit<Recharts.ResponsiveContainerProps, \"children\">>,\n Omit<Recharts.ResponsiveContainerProps, \"children\">\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(\"ui-chart__container\", className as string, propClassName),\n ...props,\n ...reChartsProps,\n }),\n [propClassName, reChartsProps],\n )\n\n return {\n getContainerProps,\n }\n}\n\nexport type UseChartReturn = ReturnType<typeof useChart>\n\nexport const useLegend = () => {\n const { styles } = useChartContext()\n\n return {\n styles,\n }\n}\n\nexport type UseLegendReturn = ReturnType<typeof useLegend>\n\nexport const useTooltip = () => {\n const { styles } = useChartContext()\n\n return {\n styles,\n }\n}\n\nexport type UseTooltipReturn = ReturnType<typeof useTooltip>\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,eAAe,UAAU;AAClC,SAAS,mBAAmB;AAQrB,IAAM,CAAC,eAAe,eAAe,IAAI,cAA4B;AAAA,EAC1E,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AASM,IAAM,WAAW,CAAC,EAAE,iBAAiB,CAAC,EAAE,MAAqB;AAClE,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,eAAe,aAAa,IAAI,kBAAgC;AAAA,IACrE;AAAA,IACA;AAAA,EACF,CAAC,EAAE,KAAK;AAER,QAAM,oBAGF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,UAAU;AAAA,MAC7C;AAAA,MACA,WAAW,GAAG,uBAAuB,WAAqB,aAAa;AAAA,MACvE,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;AAIO,IAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,IAAI,gBAAgB;AAEnC,SAAO;AAAA,IACL;AAAA,EACF;AACF;AAIO,IAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,IAAI,gBAAgB;AAEnC,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":[]}
|
@@ -4,16 +4,16 @@ import {
|
|
4
4
|
} from "./chunk-6YUJLLGN.mjs";
|
5
5
|
import {
|
6
6
|
getClassName
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-TXNC7GLT.mjs";
|
8
8
|
|
9
9
|
// src/use-chart-tooltip.ts
|
10
10
|
import { useTheme } from "@yamada-ui/core";
|
11
|
-
import {
|
11
|
+
import { cx, splitObject } from "@yamada-ui/utils";
|
12
12
|
import { useCallback, useMemo } from "react";
|
13
13
|
var useChartTooltip = ({
|
14
|
-
|
14
|
+
styles,
|
15
15
|
tooltipAnimationDuration = 0,
|
16
|
-
|
16
|
+
tooltipProps: _tooltipProps = {}
|
17
17
|
}) => {
|
18
18
|
const { theme } = useTheme();
|
19
19
|
const { cursor, ...rest } = _tooltipProps;
|
@@ -29,19 +29,19 @@ var useChartTooltip = ({
|
|
29
29
|
(props, ref = null) => ({
|
30
30
|
ref,
|
31
31
|
animationDuration: tooltipAnimationDuration,
|
32
|
-
isAnimationActive: (tooltipAnimationDuration || 0) > 0,
|
33
32
|
cursor: {
|
34
33
|
className: cx("ui-chart__cursor", cursorClassName)
|
35
34
|
},
|
35
|
+
isAnimationActive: (tooltipAnimationDuration || 0) > 0,
|
36
36
|
...props,
|
37
37
|
...tooltipProps
|
38
38
|
}),
|
39
39
|
[cursorClassName, tooltipAnimationDuration, tooltipProps]
|
40
40
|
);
|
41
|
-
return { tooltipProps: tooltipUIProps
|
41
|
+
return { getTooltipProps, tooltipProps: tooltipUIProps };
|
42
42
|
};
|
43
43
|
|
44
44
|
export {
|
45
45
|
useChartTooltip
|
46
46
|
};
|
47
|
-
//# sourceMappingURL=chunk-
|
47
|
+
//# sourceMappingURL=chunk-X6PIY2M3.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-chart-tooltip.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 { TooltipProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx, splitObject } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getClassName } from \"./chart-utils\"\nimport { tooltipProperties } from \"./rechart-properties\"\n\nexport interface UseChartTooltipOptions {\n /**\n * A function to format labels on inside the tooltip.\n */\n labelFormatter?: (label: string) => string\n /**\n * Specifies the duration of animation, the unit of this option is ms.\n *\n * @default 0\n */\n tooltipAnimationDuration?: number\n /**\n * A function to format values on inside the tooltip.\n */\n valueFormatter?: (value: any) => string\n /**\n * Props passed down to recharts 'Tooltip' component.\n */\n tooltipProps?: TooltipProps\n}\n\ninterface UseChartTooltipProps extends UseChartTooltipOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartTooltip = ({\n styles,\n tooltipAnimationDuration = 0,\n tooltipProps: _tooltipProps = {},\n}: UseChartTooltipProps) => {\n const { theme } = useTheme()\n const { cursor, ...rest } = _tooltipProps\n const cursorClassName = useMemo(\n () => getClassName({ ...styles.cursor, ...cursor })(theme),\n [cursor, styles.cursor, theme],\n )\n\n const [tooltipProps, tooltipUIProps] = splitObject<Dict, string>(\n rest,\n tooltipProperties,\n )\n\n const getTooltipProps: PropGetter<\n Partial<Recharts.TooltipProps<any, any>>,\n Recharts.TooltipProps<any, any>\n > = useCallback(\n (props, ref = null) => ({\n ref,\n animationDuration: tooltipAnimationDuration,\n cursor: {\n className: cx(\"ui-chart__cursor\", cursorClassName),\n },\n isAnimationActive: (tooltipAnimationDuration || 0) > 0,\n ...props,\n ...tooltipProps,\n }),\n [cursorClassName, tooltipAnimationDuration, tooltipProps],\n )\n\n return { getTooltipProps, tooltipProps: tooltipUIProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,IAAI,mBAAmB;AAChC,SAAS,aAAa,eAAe;AA6B9B,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,2BAA2B;AAAA,EAC3B,cAAc,gBAAgB,CAAC;AACjC,MAA4B;AAC1B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAC5B,QAAM,kBAAkB;AAAA,IACtB,MAAM,aAAa,EAAE,GAAG,OAAO,QAAQ,GAAG,OAAO,CAAC,EAAE,KAAK;AAAA,IACzD,CAAC,QAAQ,OAAO,QAAQ,KAAK;AAAA,EAC/B;AAEA,QAAM,CAAC,cAAc,cAAc,IAAI;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAGF;AAAA,IACF,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB;AAAA,MACA,mBAAmB;AAAA,MACnB,QAAQ;AAAA,QACN,WAAW,GAAG,oBAAoB,eAAe;AAAA,MACnD;AAAA,MACA,oBAAoB,4BAA4B,KAAK;AAAA,MACrD,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,iBAAiB,0BAA0B,YAAY;AAAA,EAC1D;AAEA,SAAO,EAAE,iBAAiB,cAAc,eAAe;AACzD;","names":[]}
|
@@ -4,15 +4,15 @@ 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-list.ts
|
10
10
|
import { getCSS, useTheme } from "@yamada-ui/core";
|
11
11
|
import { cx } from "@yamada-ui/utils";
|
12
12
|
import { useCallback, useMemo } from "react";
|
13
13
|
var useChartLabelList = ({
|
14
|
-
|
15
|
-
|
14
|
+
styles,
|
15
|
+
labelListProps = []
|
16
16
|
}) => {
|
17
17
|
const { theme } = useTheme();
|
18
18
|
const styleClassName = getCSS(styles.labelList)(theme);
|
@@ -26,8 +26,9 @@ var useChartLabelList = ({
|
|
26
26
|
[labelListProps, styleClassName, theme]
|
27
27
|
);
|
28
28
|
const getLabelLineProps = useCallback(
|
29
|
-
({
|
30
|
-
|
29
|
+
({ className, index, ...props }, ref = null) => {
|
30
|
+
var _a;
|
31
|
+
const { className: propClassName, ...rest } = (_a = propList[index]) != null ? _a : {};
|
31
32
|
return {
|
32
33
|
ref,
|
33
34
|
className: cx(className, propClassName),
|
@@ -43,4 +44,4 @@ var useChartLabelList = ({
|
|
43
44
|
export {
|
44
45
|
useChartLabelList
|
45
46
|
};
|
46
|
-
//# sourceMappingURL=chunk-
|
47
|
+
//# sourceMappingURL=chunk-YIAK5DIM.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-chart-label-list.ts"],"sourcesContent":["import type { CSSUIObject, RequiredPropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { LabelListProps } from \"./chart.types\"\nimport { getCSS, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { labelListProperties } from \"./rechart-properties\"\n\nexport interface UseChartLabelListOptions {\n /**\n * Props passed down to recharts `LabelList` components.\n */\n labelListProps?: LabelListProps[]\n}\n\ninterface UseChartLabelListProps extends UseChartLabelListOptions {\n styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartLabelList = ({\n styles,\n labelListProps = [],\n}: UseChartLabelListProps) => {\n const { theme } = useTheme()\n const styleClassName = getCSS(styles.labelList)(theme)\n\n const propList = useMemo(\n () =>\n labelListProps.map((props) =>\n getComponentProps<Dict, string>(\n [props, labelListProperties],\n styleClassName,\n )(theme, true),\n ),\n [labelListProps, styleClassName, theme],\n )\n\n const getLabelLineProps: RequiredPropGetter<\n { index: number } & Partial<Recharts.LabelListProps<Dict>>,\n Omit<Recharts.LabelListProps<Dict>, \"ref\">\n > = useCallback(\n ({ className, index, ...props }, ref = null) => {\n const { className: propClassName, ...rest } = propList[index] ?? {}\n\n return {\n ref,\n className: cx(className, propClassName),\n ...(props as Recharts.LabelListProps<Dict>),\n ...rest,\n }\n },\n [propList],\n )\n\n return { getLabelLineProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,UAAU;AACnB,SAAS,aAAa,eAAe;AAe9B,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,iBAAiB,CAAC;AACpB,MAA8B;AAC5B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,iBAAiB,OAAO,OAAO,SAAS,EAAE,KAAK;AAErD,QAAM,WAAW;AAAA,IACf,MACE,eAAe;AAAA,MAAI,CAAC,UAClB;AAAA,QACE,CAAC,OAAO,mBAAmB;AAAA,QAC3B;AAAA,MACF,EAAE,OAAO,IAAI;AAAA,IACf;AAAA,IACF,CAAC,gBAAgB,gBAAgB,KAAK;AAAA,EACxC;AAEA,QAAM,oBAGF;AAAA,IACF,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,MAAM,SAAS;AA3CpD;AA4CM,YAAM,EAAE,WAAW,eAAe,GAAG,KAAK,KAAI,cAAS,KAAK,MAAd,YAAmB,CAAC;AAElE,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,aAAa;AAAA,QACtC,GAAI;AAAA,QACJ,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,kBAAkB;AAC7B;","names":[]}
|