@yamada-ui/charts 1.0.0
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/LICENSE +21 -0
- package/README.md +28 -0
- package/dist/area-chart-gradient.d.mts +11 -0
- package/dist/area-chart-gradient.d.ts +11 -0
- package/dist/area-chart-gradient.js +47 -0
- package/dist/area-chart-gradient.js.map +1 -0
- package/dist/area-chart-gradient.mjs +8 -0
- package/dist/area-chart-gradient.mjs.map +1 -0
- package/dist/area-chart-split.d.mts +10 -0
- package/dist/area-chart-split.d.ts +10 -0
- package/dist/area-chart-split.js +52 -0
- package/dist/area-chart-split.js.map +1 -0
- package/dist/area-chart-split.mjs +8 -0
- package/dist/area-chart-split.mjs.map +1 -0
- package/dist/area-chart.d.mts +36 -0
- package/dist/area-chart.d.ts +36 -0
- package/dist/area-chart.js +1249 -0
- package/dist/area-chart.js.map +1 -0
- package/dist/area-chart.mjs +21 -0
- package/dist/area-chart.mjs.map +1 -0
- package/dist/bar-chart.d.mts +33 -0
- package/dist/bar-chart.d.ts +33 -0
- package/dist/bar-chart.js +1053 -0
- package/dist/bar-chart.js.map +1 -0
- package/dist/bar-chart.mjs +19 -0
- package/dist/bar-chart.mjs.map +1 -0
- package/dist/chart-legend.d.mts +12 -0
- package/dist/chart-legend.d.ts +12 -0
- package/dist/chart-legend.js +87 -0
- package/dist/chart-legend.js.map +1 -0
- package/dist/chart-legend.mjs +11 -0
- package/dist/chart-legend.mjs.map +1 -0
- package/dist/chart-tooltip.d.mts +12 -0
- package/dist/chart-tooltip.d.ts +12 -0
- package/dist/chart-tooltip.js +120 -0
- package/dist/chart-tooltip.js.map +1 -0
- package/dist/chart-tooltip.mjs +11 -0
- package/dist/chart-tooltip.mjs.map +1 -0
- package/dist/chart-utils.d.mts +9 -0
- package/dist/chart-utils.d.ts +9 -0
- package/dist/chart-utils.js +45 -0
- package/dist/chart-utils.js.map +1 -0
- package/dist/chart-utils.mjs +10 -0
- package/dist/chart-utils.mjs.map +1 -0
- package/dist/chart.types.d.mts +65 -0
- package/dist/chart.types.d.ts +65 -0
- package/dist/chart.types.js +20 -0
- package/dist/chart.types.js.map +1 -0
- package/dist/chart.types.mjs +2 -0
- package/dist/chart.types.mjs.map +1 -0
- package/dist/chunk-32BO2QEP.mjs +83 -0
- package/dist/chunk-32BO2QEP.mjs.map +1 -0
- package/dist/chunk-3CY3IFRN.mjs +42 -0
- package/dist/chunk-3CY3IFRN.mjs.map +1 -0
- package/dist/chunk-3IBGJT6F.mjs +341 -0
- package/dist/chunk-3IBGJT6F.mjs.map +1 -0
- package/dist/chunk-5QCKM3B3.mjs +438 -0
- package/dist/chunk-5QCKM3B3.mjs.map +1 -0
- package/dist/chunk-AURFFNDQ.mjs +114 -0
- package/dist/chunk-AURFFNDQ.mjs.map +1 -0
- package/dist/chunk-FGDWJUA3.mjs +56 -0
- package/dist/chunk-FGDWJUA3.mjs.map +1 -0
- package/dist/chunk-GZLE5XDS.mjs +227 -0
- package/dist/chunk-GZLE5XDS.mjs.map +1 -0
- package/dist/chunk-HE6SM47L.mjs +234 -0
- package/dist/chunk-HE6SM47L.mjs.map +1 -0
- package/dist/chunk-LXZCGIND.mjs +33 -0
- package/dist/chunk-LXZCGIND.mjs.map +1 -0
- package/dist/chunk-MSIOYYWR.mjs +24 -0
- package/dist/chunk-MSIOYYWR.mjs.map +1 -0
- package/dist/chunk-PNE3JG54.mjs +29 -0
- package/dist/chunk-PNE3JG54.mjs.map +1 -0
- package/dist/chunk-QL3DB7OJ.mjs +21 -0
- package/dist/chunk-QL3DB7OJ.mjs.map +1 -0
- package/dist/chunk-RG5JQJXE.mjs +249 -0
- package/dist/chunk-RG5JQJXE.mjs.map +1 -0
- package/dist/chunk-RTTZPOUT.mjs +50 -0
- package/dist/chunk-RTTZPOUT.mjs.map +1 -0
- package/dist/chunk-RXWD2EJ2.mjs +56 -0
- package/dist/chunk-RXWD2EJ2.mjs.map +1 -0
- package/dist/chunk-TKLHZBVY.mjs +206 -0
- package/dist/chunk-TKLHZBVY.mjs.map +1 -0
- package/dist/chunk-WDSR6B47.mjs +324 -0
- package/dist/chunk-WDSR6B47.mjs.map +1 -0
- package/dist/chunk-WF3BD34Y.mjs +74 -0
- package/dist/chunk-WF3BD34Y.mjs.map +1 -0
- package/dist/chunk-YBAGOHS5.mjs +204 -0
- package/dist/chunk-YBAGOHS5.mjs.map +1 -0
- package/dist/chunk-YRY7MUCR.mjs +258 -0
- package/dist/chunk-YRY7MUCR.mjs.map +1 -0
- package/dist/index.d.mts +23 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.js +2725 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +36 -0
- package/dist/index.mjs.map +1 -0
- package/dist/line-chart.d.mts +33 -0
- package/dist/line-chart.d.ts +33 -0
- package/dist/line-chart.js +1114 -0
- package/dist/line-chart.js.map +1 -0
- package/dist/line-chart.mjs +19 -0
- package/dist/line-chart.mjs.map +1 -0
- package/dist/radar-chart.d.mts +52 -0
- package/dist/radar-chart.d.ts +52 -0
- package/dist/radar-chart.js +940 -0
- package/dist/radar-chart.js.map +1 -0
- package/dist/radar-chart.mjs +16 -0
- package/dist/radar-chart.mjs.map +1 -0
- package/dist/rechart-properties.d.mts +24 -0
- package/dist/rechart-properties.d.ts +24 -0
- package/dist/rechart-properties.js +479 -0
- package/dist/rechart-properties.js.map +1 -0
- package/dist/rechart-properties.mjs +44 -0
- package/dist/rechart-properties.mjs.map +1 -0
- package/dist/use-area-chart.d.mts +118 -0
- package/dist/use-area-chart.d.ts +118 -0
- package/dist/use-area-chart.js +418 -0
- package/dist/use-area-chart.js.map +1 -0
- package/dist/use-area-chart.mjs +10 -0
- package/dist/use-area-chart.mjs.map +1 -0
- package/dist/use-bar-chart.d.mts +68 -0
- package/dist/use-bar-chart.d.ts +68 -0
- package/dist/use-bar-chart.js +288 -0
- package/dist/use-bar-chart.js.map +1 -0
- package/dist/use-bar-chart.mjs +10 -0
- package/dist/use-bar-chart.mjs.map +1 -0
- package/dist/use-chart-axis.d.mts +73 -0
- package/dist/use-chart-axis.d.ts +73 -0
- package/dist/use-chart-axis.js +227 -0
- package/dist/use-chart-axis.js.map +1 -0
- package/dist/use-chart-axis.mjs +10 -0
- package/dist/use-chart-axis.mjs.map +1 -0
- package/dist/use-chart-grid.d.mts +32 -0
- package/dist/use-chart-grid.d.ts +32 -0
- package/dist/use-chart-grid.js +92 -0
- package/dist/use-chart-grid.js.map +1 -0
- package/dist/use-chart-grid.mjs +10 -0
- package/dist/use-chart-grid.mjs.map +1 -0
- package/dist/use-chart-legend.d.mts +18 -0
- package/dist/use-chart-legend.d.ts +18 -0
- package/dist/use-chart-legend.js +81 -0
- package/dist/use-chart-legend.js.map +1 -0
- package/dist/use-chart-legend.mjs +9 -0
- package/dist/use-chart-legend.mjs.map +1 -0
- package/dist/use-chart-reference-line.d.mts +22 -0
- package/dist/use-chart-reference-line.d.ts +22 -0
- package/dist/use-chart-reference-line.js +105 -0
- package/dist/use-chart-reference-line.js.map +1 -0
- package/dist/use-chart-reference-line.mjs +10 -0
- package/dist/use-chart-reference-line.mjs.map +1 -0
- package/dist/use-chart-tooltip.d.mts +35 -0
- package/dist/use-chart-tooltip.d.ts +35 -0
- package/dist/use-chart-tooltip.js +121 -0
- package/dist/use-chart-tooltip.js.map +1 -0
- package/dist/use-chart-tooltip.mjs +9 -0
- package/dist/use-chart-tooltip.mjs.map +1 -0
- package/dist/use-chart.d.mts +33 -0
- package/dist/use-chart.d.ts +33 -0
- package/dist/use-chart.js +104 -0
- package/dist/use-chart.js.map +1 -0
- package/dist/use-chart.mjs +18 -0
- package/dist/use-chart.mjs.map +1 -0
- package/dist/use-line-chart.d.mts +92 -0
- package/dist/use-line-chart.d.ts +92 -0
- package/dist/use-line-chart.js +342 -0
- package/dist/use-line-chart.js.map +1 -0
- package/dist/use-line-chart.mjs +10 -0
- package/dist/use-line-chart.mjs.map +1 -0
- package/dist/use-radar-chart.d.mts +93 -0
- package/dist/use-radar-chart.d.ts +93 -0
- package/dist/use-radar-chart.js +471 -0
- package/dist/use-radar-chart.js.map +1 -0
- package/dist/use-radar-chart.mjs +10 -0
- package/dist/use-radar-chart.mjs.map +1 -0
- package/package.json +84 -0
@@ -0,0 +1,258 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
useAreaChart
|
4
|
+
} from "./chunk-WDSR6B47.mjs";
|
5
|
+
import {
|
6
|
+
AreaGradient
|
7
|
+
} from "./chunk-MSIOYYWR.mjs";
|
8
|
+
import {
|
9
|
+
AreaSplit
|
10
|
+
} from "./chunk-PNE3JG54.mjs";
|
11
|
+
import {
|
12
|
+
useChartReferenceLine
|
13
|
+
} from "./chunk-FGDWJUA3.mjs";
|
14
|
+
import {
|
15
|
+
useChartLegend
|
16
|
+
} from "./chunk-LXZCGIND.mjs";
|
17
|
+
import {
|
18
|
+
useChartTooltip
|
19
|
+
} from "./chunk-WF3BD34Y.mjs";
|
20
|
+
import {
|
21
|
+
useChartAxis
|
22
|
+
} from "./chunk-AURFFNDQ.mjs";
|
23
|
+
import {
|
24
|
+
useChartGrid
|
25
|
+
} from "./chunk-3CY3IFRN.mjs";
|
26
|
+
import {
|
27
|
+
ChartLegend
|
28
|
+
} from "./chunk-RTTZPOUT.mjs";
|
29
|
+
import {
|
30
|
+
ChartTooltip
|
31
|
+
} from "./chunk-32BO2QEP.mjs";
|
32
|
+
import {
|
33
|
+
ChartProvider,
|
34
|
+
useChart
|
35
|
+
} from "./chunk-RXWD2EJ2.mjs";
|
36
|
+
|
37
|
+
// src/area-chart.tsx
|
38
|
+
import {
|
39
|
+
ui,
|
40
|
+
forwardRef,
|
41
|
+
useMultiComponentStyle,
|
42
|
+
omitThemeProps
|
43
|
+
} from "@yamada-ui/core";
|
44
|
+
import { cx } from "@yamada-ui/utils";
|
45
|
+
import { Fragment, useMemo } from "react";
|
46
|
+
import {
|
47
|
+
CartesianGrid,
|
48
|
+
Legend,
|
49
|
+
AreaChart as ReChartsAreaChart,
|
50
|
+
Area,
|
51
|
+
ReferenceLine,
|
52
|
+
ResponsiveContainer,
|
53
|
+
Tooltip,
|
54
|
+
XAxis,
|
55
|
+
YAxis
|
56
|
+
} from "recharts";
|
57
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
58
|
+
var AreaChart = forwardRef((props, ref) => {
|
59
|
+
const [styles, mergedProps] = useMultiComponentStyle("AreaChart", props);
|
60
|
+
const {
|
61
|
+
className,
|
62
|
+
series,
|
63
|
+
dataKey,
|
64
|
+
layoutType,
|
65
|
+
tickLine,
|
66
|
+
gridAxis,
|
67
|
+
withXAxis,
|
68
|
+
withYAxis,
|
69
|
+
xAxisProps,
|
70
|
+
yAxisProps,
|
71
|
+
type = "default",
|
72
|
+
withTooltip = true,
|
73
|
+
withLegend = false,
|
74
|
+
referenceLineProps = [],
|
75
|
+
containerProps,
|
76
|
+
unit,
|
77
|
+
gridProps,
|
78
|
+
strokeDasharray,
|
79
|
+
valueFormatter,
|
80
|
+
tooltipProps,
|
81
|
+
tooltipAnimationDuration,
|
82
|
+
legendProps,
|
83
|
+
data,
|
84
|
+
areaChartProps,
|
85
|
+
areaProps,
|
86
|
+
withGradient,
|
87
|
+
withDots,
|
88
|
+
withActiveDots,
|
89
|
+
curveType,
|
90
|
+
strokeWidth,
|
91
|
+
connectNulls,
|
92
|
+
fillOpacity,
|
93
|
+
splitColors,
|
94
|
+
splitOffset,
|
95
|
+
...rest
|
96
|
+
} = omitThemeProps(mergedProps);
|
97
|
+
const {
|
98
|
+
getAreaChartProps,
|
99
|
+
getAreaSplitProps,
|
100
|
+
getAreaProps,
|
101
|
+
getAreaGradientProps,
|
102
|
+
areaVars,
|
103
|
+
setHighlightedArea
|
104
|
+
} = useAreaChart({
|
105
|
+
layoutType,
|
106
|
+
type,
|
107
|
+
series,
|
108
|
+
referenceLineProps,
|
109
|
+
data,
|
110
|
+
areaChartProps,
|
111
|
+
areaProps,
|
112
|
+
withGradient,
|
113
|
+
withDots,
|
114
|
+
withActiveDots,
|
115
|
+
curveType,
|
116
|
+
strokeWidth,
|
117
|
+
connectNulls,
|
118
|
+
fillOpacity,
|
119
|
+
splitColors,
|
120
|
+
splitOffset,
|
121
|
+
styles
|
122
|
+
});
|
123
|
+
const { getContainerProps } = useChart({ containerProps });
|
124
|
+
const { getXAxisProps, getYAxisProps } = useChartAxis({
|
125
|
+
dataKey,
|
126
|
+
type,
|
127
|
+
layoutType,
|
128
|
+
tickLine,
|
129
|
+
gridAxis,
|
130
|
+
withXAxis,
|
131
|
+
withYAxis,
|
132
|
+
xAxisProps,
|
133
|
+
yAxisProps,
|
134
|
+
unit,
|
135
|
+
valueFormatter,
|
136
|
+
styles
|
137
|
+
});
|
138
|
+
const { getReferenceLineProps } = useChartReferenceLine({
|
139
|
+
referenceLineProps,
|
140
|
+
styles
|
141
|
+
});
|
142
|
+
const { getGridProps } = useChartGrid({
|
143
|
+
gridProps,
|
144
|
+
gridAxis,
|
145
|
+
strokeDasharray,
|
146
|
+
styles
|
147
|
+
});
|
148
|
+
const {
|
149
|
+
tooltipProps: computedTooltipProps,
|
150
|
+
getTooltipProps,
|
151
|
+
tooltipVars
|
152
|
+
} = useChartTooltip({
|
153
|
+
tooltipProps,
|
154
|
+
tooltipAnimationDuration,
|
155
|
+
styles
|
156
|
+
});
|
157
|
+
const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
|
158
|
+
legendProps
|
159
|
+
});
|
160
|
+
const areas = useMemo(
|
161
|
+
() => series.map(({ dataKey: dataKey2 }, index) => {
|
162
|
+
const { id, stroke, ...rest2 } = getAreaProps({
|
163
|
+
index,
|
164
|
+
className: "ui-area-chart__area"
|
165
|
+
});
|
166
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
167
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(AreaGradient, { ...getAreaGradientProps({ id, color: stroke }) }) }),
|
168
|
+
/* @__PURE__ */ jsx(Area, { id, stroke, ...rest2 })
|
169
|
+
] }, `area-${dataKey2}`);
|
170
|
+
}),
|
171
|
+
[getAreaGradientProps, getAreaProps, series]
|
172
|
+
);
|
173
|
+
const referenceLinesItems = useMemo(
|
174
|
+
() => referenceLineProps.map((_, index) => /* @__PURE__ */ jsx(
|
175
|
+
ReferenceLine,
|
176
|
+
{
|
177
|
+
...getReferenceLineProps({
|
178
|
+
index,
|
179
|
+
className: "ui-area-chart__reference-line"
|
180
|
+
})
|
181
|
+
},
|
182
|
+
`referenceLine-${index}`
|
183
|
+
)),
|
184
|
+
[getReferenceLineProps, referenceLineProps]
|
185
|
+
);
|
186
|
+
return /* @__PURE__ */ jsx(ChartProvider, { value: { styles }, children: /* @__PURE__ */ jsx(
|
187
|
+
ui.div,
|
188
|
+
{
|
189
|
+
ref,
|
190
|
+
className: cx("ui-area-chart", className),
|
191
|
+
var: [...areaVars, ...tooltipVars],
|
192
|
+
__css: { maxW: "full", ...styles.container },
|
193
|
+
...rest,
|
194
|
+
children: /* @__PURE__ */ jsx(
|
195
|
+
ResponsiveContainer,
|
196
|
+
{
|
197
|
+
...getContainerProps({ className: "ui-area-chart__container" }),
|
198
|
+
children: /* @__PURE__ */ jsxs(
|
199
|
+
ReChartsAreaChart,
|
200
|
+
{
|
201
|
+
...getAreaChartProps({ className: "ui-area-chart__chart" }),
|
202
|
+
children: [
|
203
|
+
/* @__PURE__ */ jsx(
|
204
|
+
CartesianGrid,
|
205
|
+
{
|
206
|
+
...getGridProps({ className: "ui-area-chart__grid" })
|
207
|
+
}
|
208
|
+
),
|
209
|
+
/* @__PURE__ */ jsx(XAxis, { ...getXAxisProps({ className: "ui-area-chart__x-axis" }) }),
|
210
|
+
/* @__PURE__ */ jsx(YAxis, { ...getYAxisProps({ className: "ui-area-chart__y-axis" }) }),
|
211
|
+
withLegend ? /* @__PURE__ */ jsx(
|
212
|
+
Legend,
|
213
|
+
{
|
214
|
+
content: ({ payload }) => /* @__PURE__ */ jsx(
|
215
|
+
ChartLegend,
|
216
|
+
{
|
217
|
+
className: "ui-area-chart__legend",
|
218
|
+
payload,
|
219
|
+
onHighlight: setHighlightedArea,
|
220
|
+
...computedLegendProps
|
221
|
+
}
|
222
|
+
),
|
223
|
+
...getLegendProps()
|
224
|
+
}
|
225
|
+
) : null,
|
226
|
+
withTooltip ? /* @__PURE__ */ jsx(
|
227
|
+
Tooltip,
|
228
|
+
{
|
229
|
+
content: ({ label, payload }) => /* @__PURE__ */ jsx(
|
230
|
+
ChartTooltip,
|
231
|
+
{
|
232
|
+
className: "ui-area-chart__tooltip",
|
233
|
+
label,
|
234
|
+
payload,
|
235
|
+
valueFormatter,
|
236
|
+
unit,
|
237
|
+
...computedTooltipProps
|
238
|
+
}
|
239
|
+
),
|
240
|
+
...getTooltipProps()
|
241
|
+
}
|
242
|
+
) : null,
|
243
|
+
type === "split" ? /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(AreaSplit, { ...getAreaSplitProps() }) }) : null,
|
244
|
+
areas,
|
245
|
+
referenceLinesItems
|
246
|
+
]
|
247
|
+
}
|
248
|
+
)
|
249
|
+
}
|
250
|
+
)
|
251
|
+
}
|
252
|
+
) });
|
253
|
+
});
|
254
|
+
|
255
|
+
export {
|
256
|
+
AreaChart
|
257
|
+
};
|
258
|
+
//# sourceMappingURL=chunk-YRY7MUCR.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/area-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\nimport {\n CartesianGrid,\n Legend,\n AreaChart as ReChartsAreaChart,\n Area,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\nimport { AreaGradient } from \"./area-chart-gradient\"\nimport { AreaSplit } from \"./area-chart-split\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { UseAreaChartOptions } from \"./use-area-chart\"\nimport { useAreaChart } from \"./use-area-chart\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport type { UseChartAxisOptions } from \"./use-chart-axis\"\nimport { useChartAxis } from \"./use-chart-axis\"\nimport type { UseChartGridOptions } from \"./use-chart-grid\"\nimport { useChartGrid } from \"./use-chart-grid\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport type { UseChartReferenceLineOptions } from \"./use-chart-reference-line\"\nimport { useChartReferenceLine } from \"./use-chart-reference-line\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\n\ntype AreaChartOptions = {\n /**\n * If `true`, tooltip is visible.\n *\n * @default true\n */\n withTooltip?: boolean\n /**\n * If `true`, legend is visible.\n *\n * @default false\n */\n withLegend?: boolean\n}\n\nexport type AreaChartProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"AreaChart\"> &\n AreaChartOptions &\n UseAreaChartOptions &\n UseChartProps &\n UseChartAxisOptions &\n UseChartReferenceLineOptions &\n UseChartGridOptions &\n UseChartTooltipOptions &\n UseChartLegendProps\n\nexport const AreaChart = forwardRef<AreaChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"AreaChart\", props)\n const {\n className,\n series,\n dataKey,\n layoutType,\n tickLine,\n gridAxis,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n type = \"default\",\n withTooltip = true,\n withLegend = false,\n referenceLineProps = [],\n containerProps,\n unit,\n gridProps,\n strokeDasharray,\n valueFormatter,\n tooltipProps,\n tooltipAnimationDuration,\n legendProps,\n data,\n areaChartProps,\n areaProps,\n withGradient,\n withDots,\n withActiveDots,\n curveType,\n strokeWidth,\n connectNulls,\n fillOpacity,\n splitColors,\n splitOffset,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n getAreaChartProps,\n getAreaSplitProps,\n getAreaProps,\n getAreaGradientProps,\n areaVars,\n setHighlightedArea,\n } = useAreaChart({\n layoutType,\n type,\n series,\n referenceLineProps,\n data,\n areaChartProps,\n areaProps,\n withGradient,\n withDots,\n withActiveDots,\n curveType,\n strokeWidth,\n connectNulls,\n fillOpacity,\n splitColors,\n splitOffset,\n styles,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { getXAxisProps, getYAxisProps } = useChartAxis({\n dataKey,\n type,\n layoutType,\n tickLine,\n gridAxis,\n withXAxis,\n withYAxis,\n xAxisProps,\n yAxisProps,\n unit,\n valueFormatter,\n styles,\n })\n const { getReferenceLineProps } = useChartReferenceLine({\n referenceLineProps,\n styles,\n })\n const { getGridProps } = useChartGrid({\n gridProps,\n gridAxis,\n strokeDasharray,\n styles,\n })\n const {\n tooltipProps: computedTooltipProps,\n getTooltipProps,\n tooltipVars,\n } = useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n\n const areas = useMemo(\n () =>\n series.map(({ dataKey }, index) => {\n const { id, stroke, ...rest } = getAreaProps({\n index,\n className: \"ui-area-chart__area\",\n })\n\n return (\n <Fragment key={`area-${dataKey}`}>\n <defs>\n <AreaGradient {...getAreaGradientProps({ id, color: stroke })} />\n </defs>\n\n <Area id={id} stroke={stroke} {...rest} />\n </Fragment>\n )\n }),\n [getAreaGradientProps, getAreaProps, series],\n )\n\n const referenceLinesItems = useMemo(\n () =>\n referenceLineProps.map((_, index) => (\n <ReferenceLine\n key={`referenceLine-${index}`}\n {...getReferenceLineProps({\n index,\n className: \"ui-area-chart__reference-line\",\n })}\n />\n )),\n [getReferenceLineProps, referenceLineProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-area-chart\", className)}\n var={[...areaVars, ...tooltipVars]}\n __css={{ maxW: \"full\", ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-area-chart__container\" })}\n >\n <ReChartsAreaChart\n {...getAreaChartProps({ className: \"ui-area-chart__chart\" })}\n >\n <CartesianGrid\n {...getGridProps({ className: \"ui-area-chart__grid\" })}\n />\n <XAxis {...getXAxisProps({ className: \"ui-area-chart__x-axis\" })} />\n <YAxis {...getYAxisProps({ className: \"ui-area-chart__y-axis\" })} />\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-area-chart__legend\"\n payload={payload}\n onHighlight={setHighlightedArea}\n {...computedLegendProps}\n />\n )}\n {...getLegendProps()}\n />\n ) : null}\n\n {withTooltip ? (\n <Tooltip\n content={({ label, payload }) => (\n <ChartTooltip\n className=\"ui-area-chart__tooltip\"\n label={label}\n payload={payload}\n valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n\n {type === \"split\" ? (\n <defs>\n <AreaSplit {...getAreaSplitProps()} />\n </defs>\n ) : null}\n\n {areas}\n {referenceLinesItems}\n </ReChartsAreaChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":["dataKey","rest"]}
|
package/dist/index.d.mts
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
export { LineChart, LineChartProps } from './line-chart.mjs';
|
2
|
+
export { BarChart, BarChartProps } from './bar-chart.mjs';
|
3
|
+
export { AreaChart, AreaChartProps } from './area-chart.mjs';
|
4
|
+
export { RadarChart, RadarChartProps } from './radar-chart.mjs';
|
5
|
+
export { AreaChartType, AreaProps, BarChartType, BarProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartTooltip, DotProps, LineProps, RadarProps } from './chart.types.mjs';
|
6
|
+
import '@yamada-ui/core';
|
7
|
+
import './use-chart.mjs';
|
8
|
+
import 'react';
|
9
|
+
import 'recharts';
|
10
|
+
import './use-chart-axis.mjs';
|
11
|
+
import '@yamada-ui/utils';
|
12
|
+
import './use-chart-grid.mjs';
|
13
|
+
import './use-chart-legend.mjs';
|
14
|
+
import './use-chart-reference-line.mjs';
|
15
|
+
import './use-chart-tooltip.mjs';
|
16
|
+
import './use-line-chart.mjs';
|
17
|
+
import 'recharts/types/chart/generateCategoricalChart';
|
18
|
+
import './use-bar-chart.mjs';
|
19
|
+
import './use-area-chart.mjs';
|
20
|
+
import './area-chart-gradient.mjs';
|
21
|
+
import 'react/jsx-runtime';
|
22
|
+
import './area-chart-split.mjs';
|
23
|
+
import './use-radar-chart.mjs';
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
export { LineChart, LineChartProps } from './line-chart.js';
|
2
|
+
export { BarChart, BarChartProps } from './bar-chart.js';
|
3
|
+
export { AreaChart, AreaChartProps } from './area-chart.js';
|
4
|
+
export { RadarChart, RadarChartProps } from './radar-chart.js';
|
5
|
+
export { AreaChartType, AreaProps, BarChartType, BarProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartTooltip, DotProps, LineProps, RadarProps } from './chart.types.js';
|
6
|
+
import '@yamada-ui/core';
|
7
|
+
import './use-chart.js';
|
8
|
+
import 'react';
|
9
|
+
import 'recharts';
|
10
|
+
import './use-chart-axis.js';
|
11
|
+
import '@yamada-ui/utils';
|
12
|
+
import './use-chart-grid.js';
|
13
|
+
import './use-chart-legend.js';
|
14
|
+
import './use-chart-reference-line.js';
|
15
|
+
import './use-chart-tooltip.js';
|
16
|
+
import './use-line-chart.js';
|
17
|
+
import 'recharts/types/chart/generateCategoricalChart';
|
18
|
+
import './use-bar-chart.js';
|
19
|
+
import './use-area-chart.js';
|
20
|
+
import './area-chart-gradient.js';
|
21
|
+
import 'react/jsx-runtime';
|
22
|
+
import './area-chart-split.js';
|
23
|
+
import './use-radar-chart.js';
|