@yamada-ui/charts 1.1.2-dev-20240430063353 → 1.1.2-dev-20240501174240
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/package.json +5 -5
- package/dist/area-chart-gradient.d.mts +0 -11
- package/dist/area-chart-gradient.d.ts +0 -11
- package/dist/area-chart-gradient.js +0 -47
- package/dist/area-chart-gradient.js.map +0 -1
- package/dist/area-chart-gradient.mjs +0 -8
- package/dist/area-chart-gradient.mjs.map +0 -1
- package/dist/area-chart-split.d.mts +0 -10
- package/dist/area-chart-split.d.ts +0 -10
- package/dist/area-chart-split.js +0 -52
- package/dist/area-chart-split.js.map +0 -1
- package/dist/area-chart-split.mjs +0 -8
- package/dist/area-chart-split.mjs.map +0 -1
- package/dist/area-chart.d.mts +0 -41
- package/dist/area-chart.d.ts +0 -41
- package/dist/area-chart.js +0 -1223
- package/dist/area-chart.js.map +0 -1
- package/dist/area-chart.mjs +0 -21
- package/dist/area-chart.mjs.map +0 -1
- package/dist/bar-chart.d.mts +0 -38
- package/dist/bar-chart.d.ts +0 -38
- package/dist/bar-chart.js +0 -1027
- package/dist/bar-chart.js.map +0 -1
- package/dist/bar-chart.mjs +0 -19
- package/dist/bar-chart.mjs.map +0 -1
- package/dist/chart-legend.d.mts +0 -12
- package/dist/chart-legend.d.ts +0 -12
- package/dist/chart-legend.js +0 -90
- package/dist/chart-legend.js.map +0 -1
- package/dist/chart-legend.mjs +0 -11
- package/dist/chart-legend.mjs.map +0 -1
- package/dist/chart-tooltip.d.mts +0 -12
- package/dist/chart-tooltip.d.ts +0 -12
- package/dist/chart-tooltip.js +0 -121
- package/dist/chart-tooltip.js.map +0 -1
- package/dist/chart-tooltip.mjs +0 -11
- package/dist/chart-tooltip.mjs.map +0 -1
- package/dist/chart-utils.d.mts +0 -9
- package/dist/chart-utils.d.ts +0 -9
- package/dist/chart-utils.js +0 -45
- package/dist/chart-utils.js.map +0 -1
- package/dist/chart-utils.mjs +0 -10
- package/dist/chart-utils.mjs.map +0 -1
- package/dist/chart.types.d.mts +0 -78
- package/dist/chart.types.d.ts +0 -78
- package/dist/chart.types.js +0 -20
- package/dist/chart.types.js.map +0 -1
- package/dist/chart.types.mjs +0 -2
- package/dist/chart.types.mjs.map +0 -1
- package/dist/chunk-4WX5YS7M.mjs +0 -179
- package/dist/chunk-4WX5YS7M.mjs.map +0 -1
- package/dist/chunk-5TVYPA64.mjs +0 -256
- package/dist/chunk-5TVYPA64.mjs.map +0 -1
- package/dist/chunk-BPR7YL3O.mjs +0 -179
- package/dist/chunk-BPR7YL3O.mjs.map +0 -1
- package/dist/chunk-E2I2XAZ6.mjs +0 -232
- package/dist/chunk-E2I2XAZ6.mjs.map +0 -1
- package/dist/chunk-HDOYOHLA.mjs +0 -326
- package/dist/chunk-HDOYOHLA.mjs.map +0 -1
- package/dist/chunk-KNAADLWO.mjs +0 -225
- package/dist/chunk-KNAADLWO.mjs.map +0 -1
- package/dist/chunk-KT4YOMM4.mjs +0 -344
- package/dist/chunk-KT4YOMM4.mjs.map +0 -1
- package/dist/chunk-LBC2B6UX.mjs +0 -84
- package/dist/chunk-LBC2B6UX.mjs.map +0 -1
- package/dist/chunk-LGMALZCN.mjs +0 -42
- package/dist/chunk-LGMALZCN.mjs.map +0 -1
- package/dist/chunk-LHI57S6P.mjs +0 -215
- package/dist/chunk-LHI57S6P.mjs.map +0 -1
- package/dist/chunk-LM2DQK2P.mjs +0 -33
- package/dist/chunk-LM2DQK2P.mjs.map +0 -1
- package/dist/chunk-MSIOYYWR.mjs +0 -24
- package/dist/chunk-MSIOYYWR.mjs.map +0 -1
- package/dist/chunk-MWPICUEW.mjs +0 -56
- package/dist/chunk-MWPICUEW.mjs.map +0 -1
- package/dist/chunk-NEGDEVRX.mjs +0 -53
- package/dist/chunk-NEGDEVRX.mjs.map +0 -1
- package/dist/chunk-OSNFBRHL.mjs +0 -474
- package/dist/chunk-OSNFBRHL.mjs.map +0 -1
- package/dist/chunk-OW7SOTEF.mjs +0 -206
- package/dist/chunk-OW7SOTEF.mjs.map +0 -1
- package/dist/chunk-P7AFSM5W.mjs +0 -114
- package/dist/chunk-P7AFSM5W.mjs.map +0 -1
- package/dist/chunk-PNE3JG54.mjs +0 -29
- package/dist/chunk-PNE3JG54.mjs.map +0 -1
- package/dist/chunk-QL3DB7OJ.mjs +0 -21
- package/dist/chunk-QL3DB7OJ.mjs.map +0 -1
- package/dist/chunk-QZ5OXZ6Z.mjs +0 -251
- package/dist/chunk-QZ5OXZ6Z.mjs.map +0 -1
- package/dist/chunk-RN6PXJAD.mjs +0 -47
- package/dist/chunk-RN6PXJAD.mjs.map +0 -1
- package/dist/chunk-STBYRLC5.mjs +0 -208
- package/dist/chunk-STBYRLC5.mjs.map +0 -1
- package/dist/chunk-XIFDRM7J.mjs +0 -56
- package/dist/chunk-XIFDRM7J.mjs.map +0 -1
- package/dist/donut-chart.d.mts +0 -31
- package/dist/donut-chart.d.ts +0 -31
- package/dist/donut-chart.js +0 -702
- package/dist/donut-chart.js.map +0 -1
- package/dist/donut-chart.mjs +0 -16
- package/dist/donut-chart.mjs.map +0 -1
- package/dist/index.d.mts +0 -26
- package/dist/index.d.ts +0 -26
- package/dist/index.js +0 -3228
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -45
- package/dist/index.mjs.map +0 -1
- package/dist/line-chart.d.mts +0 -38
- package/dist/line-chart.d.ts +0 -38
- package/dist/line-chart.js +0 -1088
- package/dist/line-chart.js.map +0 -1
- package/dist/line-chart.mjs +0 -19
- package/dist/line-chart.mjs.map +0 -1
- package/dist/pie-chart.d.mts +0 -49
- package/dist/pie-chart.d.ts +0 -49
- package/dist/pie-chart.js +0 -702
- package/dist/pie-chart.js.map +0 -1
- package/dist/pie-chart.mjs +0 -16
- package/dist/pie-chart.mjs.map +0 -1
- package/dist/radar-chart.d.mts +0 -57
- package/dist/radar-chart.d.ts +0 -57
- package/dist/radar-chart.js +0 -918
- package/dist/radar-chart.js.map +0 -1
- package/dist/radar-chart.mjs +0 -16
- package/dist/radar-chart.mjs.map +0 -1
- package/dist/rechart-properties.d.mts +0 -26
- package/dist/rechart-properties.d.ts +0 -26
- package/dist/rechart-properties.js +0 -517
- package/dist/rechart-properties.js.map +0 -1
- package/dist/rechart-properties.mjs +0 -48
- package/dist/rechart-properties.mjs.map +0 -1
- package/dist/use-area-chart.d.mts +0 -123
- package/dist/use-area-chart.d.ts +0 -123
- package/dist/use-area-chart.js +0 -420
- package/dist/use-area-chart.js.map +0 -1
- package/dist/use-area-chart.mjs +0 -10
- package/dist/use-area-chart.mjs.map +0 -1
- package/dist/use-bar-chart.d.mts +0 -73
- package/dist/use-bar-chart.d.ts +0 -73
- package/dist/use-bar-chart.js +0 -290
- package/dist/use-bar-chart.js.map +0 -1
- package/dist/use-bar-chart.mjs +0 -10
- package/dist/use-bar-chart.mjs.map +0 -1
- package/dist/use-chart-axis.d.mts +0 -73
- package/dist/use-chart-axis.d.ts +0 -73
- package/dist/use-chart-axis.js +0 -227
- package/dist/use-chart-axis.js.map +0 -1
- package/dist/use-chart-axis.mjs +0 -10
- package/dist/use-chart-axis.mjs.map +0 -1
- package/dist/use-chart-grid.d.mts +0 -32
- package/dist/use-chart-grid.d.ts +0 -32
- package/dist/use-chart-grid.js +0 -92
- package/dist/use-chart-grid.js.map +0 -1
- package/dist/use-chart-grid.mjs +0 -10
- package/dist/use-chart-grid.mjs.map +0 -1
- package/dist/use-chart-legend.d.mts +0 -18
- package/dist/use-chart-legend.d.ts +0 -18
- package/dist/use-chart-legend.js +0 -81
- package/dist/use-chart-legend.js.map +0 -1
- package/dist/use-chart-legend.mjs +0 -9
- package/dist/use-chart-legend.mjs.map +0 -1
- package/dist/use-chart-reference-line.d.mts +0 -22
- package/dist/use-chart-reference-line.d.ts +0 -22
- package/dist/use-chart-reference-line.js +0 -105
- package/dist/use-chart-reference-line.js.map +0 -1
- package/dist/use-chart-reference-line.mjs +0 -10
- package/dist/use-chart-reference-line.mjs.map +0 -1
- package/dist/use-chart-tooltip.d.mts +0 -27
- package/dist/use-chart-tooltip.d.ts +0 -27
- package/dist/use-chart-tooltip.js +0 -100
- package/dist/use-chart-tooltip.js.map +0 -1
- package/dist/use-chart-tooltip.mjs +0 -10
- package/dist/use-chart-tooltip.mjs.map +0 -1
- package/dist/use-chart.d.mts +0 -33
- package/dist/use-chart.d.ts +0 -33
- package/dist/use-chart.js +0 -104
- package/dist/use-chart.js.map +0 -1
- package/dist/use-chart.mjs +0 -18
- package/dist/use-chart.mjs.map +0 -1
- package/dist/use-line-chart.d.mts +0 -97
- package/dist/use-line-chart.d.ts +0 -97
- package/dist/use-line-chart.js +0 -344
- package/dist/use-line-chart.js.map +0 -1
- package/dist/use-line-chart.mjs +0 -10
- package/dist/use-line-chart.mjs.map +0 -1
- package/dist/use-pie-chart.d.mts +0 -112
- package/dist/use-pie-chart.d.ts +0 -112
- package/dist/use-pie-chart.js +0 -282
- package/dist/use-pie-chart.js.map +0 -1
- package/dist/use-pie-chart.mjs +0 -10
- package/dist/use-pie-chart.mjs.map +0 -1
- package/dist/use-radar-chart.d.mts +0 -105
- package/dist/use-radar-chart.d.ts +0 -105
- package/dist/use-radar-chart.js +0 -473
- package/dist/use-radar-chart.js.map +0 -1
- package/dist/use-radar-chart.mjs +0 -10
- package/dist/use-radar-chart.mjs.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/radar-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 { useMemo } from \"react\"\nimport {\n ResponsiveContainer,\n RadarChart as ReChartsRadarChart,\n PolarGrid,\n PolarAngleAxis,\n PolarRadiusAxis,\n Radar,\n Tooltip,\n Legend,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport type { UseRadarChartOptions } from \"./use-radar-chart\"\nimport { useRadarChart } from \"./use-radar-chart\"\n\ntype RadarChartOptions = {\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 * Determines whether polarGrid should be displayed.\n *\n * @default true\n */\n withPolarGrid?: boolean\n /**\n * Determines whether polarAngleAxis should be displayed.\n *\n * @default true\n */\n withPolarAngleAxis?: boolean\n /**\n * Determines whether polarRadiusAxis should be displayed.\n *\n * @default false\n */\n withPolarRadiusAxis?: boolean\n /**\n * Unit displayed next to each tick in y-axis.\n */\n unit?: string\n}\n\nexport type RadarChartProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"RadarChart\"> &\n RadarChartOptions &\n UseChartProps &\n UseChartTooltipOptions &\n UseChartLegendProps &\n UseRadarChartOptions\n\n/**\n * `RadarChart` is a component for drawing radar charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/radar-chart\n */\nexport const RadarChart = forwardRef<RadarChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"RadarChart\", props)\n const {\n className,\n data,\n series,\n dataKey,\n radarProps,\n chartProps,\n polarGridProps,\n polarAngleAxisProps,\n polarAngleAxisTickProps,\n polarRadiusAxisProps,\n polarRadiusAxisTickProps,\n containerProps,\n tooltipProps,\n legendProps,\n tooltipAnimationDuration,\n unit,\n valueFormatter,\n strokeDasharray,\n withDots,\n withActiveDots,\n strokeWidth,\n fillOpacity,\n withTooltip = true,\n withLegend = false,\n withPolarGrid = true,\n withPolarAngleAxis = true,\n withPolarRadiusAxis = false,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n getRadarProps,\n getRadarChartProps,\n getPolarGridProps,\n getPolarAngleAxisProps,\n getPolarRadiusAxisProps,\n radarVars,\n setHighlightedArea,\n } = useRadarChart({\n data,\n series,\n dataKey,\n radarProps,\n chartProps,\n polarGridProps,\n polarAngleAxisProps,\n polarAngleAxisTickProps,\n polarRadiusAxisProps,\n polarRadiusAxisTickProps,\n withDots,\n withActiveDots,\n strokeWidth,\n fillOpacity,\n valueFormatter,\n strokeDasharray,\n styles,\n })\n const { getContainerProps } = useChart({ containerProps })\n const { tooltipProps: computedTooltipProps, getTooltipProps } =\n useChartTooltip({\n tooltipProps,\n tooltipAnimationDuration,\n styles,\n })\n const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n legendProps,\n })\n\n const radars = useMemo(\n () =>\n series.map(({ dataKey }, index) => (\n <Radar\n key={`radar-${dataKey}`}\n {...getRadarProps({ index, className: \"ui-radar-chart__radar\" })}\n />\n )),\n [getRadarProps, series],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-radar-chart\", className)}\n var={radarVars}\n __css={{ maxW: \"full\", ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-radar-chart__container\" })}\n >\n <ReChartsRadarChart\n {...getRadarChartProps({ className: \"ui-radar-chart__chart\" })}\n >\n {withPolarGrid ? (\n <PolarGrid\n {...getPolarGridProps({\n className: \"ui-radar-chart__polar-grid\",\n })}\n />\n ) : null}\n {withPolarAngleAxis ? (\n <PolarAngleAxis\n {...getPolarAngleAxisProps({\n className: \"ui-radar-chart__polar-angle-axis\",\n })}\n />\n ) : null}\n {withPolarRadiusAxis ? (\n <PolarRadiusAxis\n {...getPolarRadiusAxisProps({\n className: \"ui-radar-chart__polar-radius-axis\",\n })}\n />\n ) : null}\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-line-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 {radars}\n </ReChartsRadarChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":["dataKey"]}
|
package/dist/chunk-P7AFSM5W.mjs
DELETED
@@ -1,114 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
xAxisProperties,
|
4
|
-
yAxisProperties
|
5
|
-
} from "./chunk-OSNFBRHL.mjs";
|
6
|
-
import {
|
7
|
-
getComponentProps
|
8
|
-
} from "./chunk-QL3DB7OJ.mjs";
|
9
|
-
|
10
|
-
// src/use-chart-axis.ts
|
11
|
-
import { useTheme } from "@yamada-ui/core";
|
12
|
-
import { cx } from "@yamada-ui/utils";
|
13
|
-
import { useCallback, useMemo } from "react";
|
14
|
-
var useChartAxis = ({
|
15
|
-
dataKey,
|
16
|
-
type,
|
17
|
-
layoutType = "horizontal",
|
18
|
-
tickLine = "y",
|
19
|
-
gridAxis = "x",
|
20
|
-
withXAxis = true,
|
21
|
-
withYAxis = true,
|
22
|
-
xAxisProps: _xAxisProps = {},
|
23
|
-
yAxisProps: _yAxisProps = {},
|
24
|
-
unit,
|
25
|
-
valueFormatter,
|
26
|
-
styles
|
27
|
-
}) => {
|
28
|
-
const { theme } = useTheme();
|
29
|
-
const xAxisKey = useMemo(
|
30
|
-
() => layoutType === "vertical" ? { type: "number" } : { dataKey },
|
31
|
-
[dataKey, layoutType]
|
32
|
-
);
|
33
|
-
const yAxisKey = useMemo(
|
34
|
-
() => layoutType === "vertical" ? { dataKey, type: "category" } : { type: "number" },
|
35
|
-
[dataKey, layoutType]
|
36
|
-
);
|
37
|
-
const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
|
38
|
-
const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
|
39
|
-
const getTickLine = (withTickLine) => withTickLine ? { stroke: "currentColor" } : false;
|
40
|
-
const xTickLine = getTickLine(withXTickLine);
|
41
|
-
const yTickLine = getTickLine(withYTickLine);
|
42
|
-
const yAxisTickFormatter = type === "percent" && layoutType !== "vertical" ? valueToPercent : valueFormatter;
|
43
|
-
const xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : valueFormatter;
|
44
|
-
const [xAxisReChartsProps, xAxisClassName] = getComponentProps(
|
45
|
-
[_xAxisProps, xAxisProperties],
|
46
|
-
styles.xAxis
|
47
|
-
)(theme);
|
48
|
-
const [yAxisReChartsProps, yAxisClassName] = getComponentProps(
|
49
|
-
[_yAxisProps, yAxisProperties],
|
50
|
-
styles.yAxis
|
51
|
-
)(theme);
|
52
|
-
const getXAxisProps = useCallback(
|
53
|
-
({ className, ...props } = {}) => ({
|
54
|
-
className: cx(className, xAxisClassName),
|
55
|
-
hide: !withXAxis,
|
56
|
-
...xAxisKey,
|
57
|
-
tick: {
|
58
|
-
transform: "translate(0, 10)",
|
59
|
-
fill: "currentColor"
|
60
|
-
},
|
61
|
-
stroke: "",
|
62
|
-
interval: "preserveStartEnd",
|
63
|
-
tickLine: xTickLine,
|
64
|
-
minTickGap: 5,
|
65
|
-
tickFormatter: xAxisTickFormatter,
|
66
|
-
...props,
|
67
|
-
...xAxisReChartsProps
|
68
|
-
}),
|
69
|
-
[
|
70
|
-
xAxisClassName,
|
71
|
-
withXAxis,
|
72
|
-
xAxisKey,
|
73
|
-
xTickLine,
|
74
|
-
xAxisTickFormatter,
|
75
|
-
xAxisReChartsProps
|
76
|
-
]
|
77
|
-
);
|
78
|
-
const getYAxisProps = useCallback(
|
79
|
-
({ className, ...props } = {}) => ({
|
80
|
-
className: cx(className, yAxisClassName),
|
81
|
-
hide: !withYAxis,
|
82
|
-
axisLine: false,
|
83
|
-
...yAxisKey,
|
84
|
-
tickLine: yTickLine,
|
85
|
-
tick: {
|
86
|
-
transform: "translate(-10, 0)",
|
87
|
-
fill: "currentColor"
|
88
|
-
},
|
89
|
-
allowDecimals: true,
|
90
|
-
unit,
|
91
|
-
tickFormatter: yAxisTickFormatter,
|
92
|
-
...props,
|
93
|
-
...yAxisReChartsProps
|
94
|
-
}),
|
95
|
-
[
|
96
|
-
yAxisClassName,
|
97
|
-
withYAxis,
|
98
|
-
yAxisKey,
|
99
|
-
yTickLine,
|
100
|
-
unit,
|
101
|
-
yAxisTickFormatter,
|
102
|
-
yAxisReChartsProps
|
103
|
-
]
|
104
|
-
);
|
105
|
-
return { getXAxisProps, getYAxisProps };
|
106
|
-
};
|
107
|
-
var valueToPercent = (value) => {
|
108
|
-
return `${(value * 100).toFixed(0)}%`;
|
109
|
-
};
|
110
|
-
|
111
|
-
export {
|
112
|
-
useChartAxis
|
113
|
-
};
|
114
|
-
//# sourceMappingURL=chunk-P7AFSM5W.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-chart-axis.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { SVGProps } from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport type {\n ChartAxisType,\n ChartLayoutType,\n XAxisProps,\n YAxisProps,\n ChartPropGetter,\n AreaChartType,\n} from \"./chart.types\"\nimport { xAxisProperties, yAxisProperties } from \"./rechart-properties\"\n\nexport type UseChartAxisOptions = {\n /**\n * The key of a group of data which should be unique in an chart.\n */\n dataKey: string\n /**\n * Controls how chart areas are positioned relative to each other\n *\n * @default `default`\n */\n type?: AreaChartType\n /**\n * Chart orientation.\n *\n * @default 'horizontal'\n */\n layoutType?: ChartLayoutType\n /**\n * The option is the configuration of tick lines.\n *\n * @default 'y'\n */\n tickLine?: ChartAxisType\n /**\n * Specifies which lines should be displayed in the grid.\n *\n * @default 'x'\n */\n gridAxis?: ChartAxisType\n /**\n * If `true`, X axis is visible.\n *\n * @default true\n */\n withXAxis?: boolean\n /**\n * If `true`, Y axis is visible.\n *\n * @default true\n */\n withYAxis?: boolean\n /**\n * Props passed down to recharts 'XAxis' component.\n */\n xAxisProps?: XAxisProps\n /**\n * Props passed down to recharts 'YAxis' component.\n */\n yAxisProps?: YAxisProps\n /**\n * Unit displayed next to each tick in y-axis.\n */\n unit?: string\n /**\n * A function to format values on Y axis and inside the tooltip\n */\n valueFormatter?: (value: number) => string\n}\n\nexport type UseChartAxisProps = UseChartAxisOptions & {\n styles: Dict<CSSUIObject>\n}\n\nexport const useChartAxis = ({\n dataKey,\n type,\n layoutType = \"horizontal\",\n tickLine = \"y\",\n gridAxis = \"x\",\n withXAxis = true,\n withYAxis = true,\n xAxisProps: _xAxisProps = {},\n yAxisProps: _yAxisProps = {},\n unit,\n valueFormatter,\n styles,\n}: UseChartAxisProps) => {\n const { theme } = useTheme()\n const xAxisKey: Recharts.XAxisProps = useMemo(\n () => (layoutType === \"vertical\" ? { type: \"number\" } : { dataKey }),\n [dataKey, layoutType],\n )\n\n const yAxisKey: Recharts.YAxisProps = useMemo(\n () =>\n layoutType === \"vertical\"\n ? { dataKey, type: \"category\" }\n : { type: \"number\" },\n [dataKey, layoutType],\n )\n const withXTickLine =\n gridAxis !== \"none\" && (tickLine === \"x\" || tickLine === \"xy\")\n const withYTickLine =\n gridAxis !== \"none\" && (tickLine === \"y\" || tickLine === \"xy\")\n const getTickLine = (\n withTickLine: boolean,\n ): boolean | SVGProps<SVGTextElement> =>\n withTickLine ? { stroke: \"currentColor\" } : false\n const xTickLine = getTickLine(withXTickLine)\n const yTickLine = getTickLine(withYTickLine)\n const yAxisTickFormatter =\n type === \"percent\" && layoutType !== \"vertical\"\n ? valueToPercent\n : valueFormatter\n const xAxisTickFormatter =\n type === \"percent\" && layoutType === \"vertical\"\n ? valueToPercent\n : valueFormatter\n\n const [xAxisReChartsProps, xAxisClassName] = getComponentProps<Dict, string>(\n [_xAxisProps, xAxisProperties],\n styles.xAxis,\n )(theme)\n\n const [yAxisReChartsProps, yAxisClassName] = getComponentProps<Dict, string>(\n [_yAxisProps, yAxisProperties],\n styles.yAxis,\n )(theme)\n\n const getXAxisProps: ChartPropGetter<\n \"div\",\n Partial<Recharts.XAxisProps>,\n Recharts.XAxisProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, xAxisClassName),\n hide: !withXAxis,\n ...xAxisKey,\n tick: {\n transform: \"translate(0, 10)\",\n fill: \"currentColor\",\n },\n stroke: \"\",\n interval: \"preserveStartEnd\",\n tickLine: xTickLine,\n minTickGap: 5,\n tickFormatter: xAxisTickFormatter,\n ...props,\n ...(xAxisReChartsProps as Recharts.XAxisProps),\n }),\n [\n xAxisClassName,\n withXAxis,\n xAxisKey,\n xTickLine,\n xAxisTickFormatter,\n xAxisReChartsProps,\n ],\n )\n\n const getYAxisProps: ChartPropGetter<\n \"div\",\n Partial<Recharts.YAxisProps>,\n Recharts.YAxisProps\n > = useCallback(\n ({ className, ...props } = {}) => ({\n className: cx(className, yAxisClassName),\n hide: !withYAxis,\n axisLine: false,\n ...yAxisKey,\n tickLine: yTickLine,\n tick: {\n transform: \"translate(-10, 0)\",\n fill: \"currentColor\",\n },\n allowDecimals: true,\n unit: unit,\n tickFormatter: yAxisTickFormatter,\n ...props,\n ...(yAxisReChartsProps as Recharts.YAxisProps),\n }),\n [\n yAxisClassName,\n withYAxis,\n yAxisKey,\n yTickLine,\n unit,\n yAxisTickFormatter,\n yAxisReChartsProps,\n ],\n )\n return { getXAxisProps, getYAxisProps }\n}\n\nconst valueToPercent = (value: number) => {\n return `${(value * 100).toFixed(0)}%`\n}\n"],"mappings":";;;;;;;;;;AACA,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AAEnB,SAAS,aAAa,eAAe;AA4E9B,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY,cAAc,CAAC;AAAA,EAC3B,YAAY,cAAc,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,WAAgC;AAAA,IACpC,MAAO,eAAe,aAAa,EAAE,MAAM,SAAS,IAAI,EAAE,QAAQ;AAAA,IAClE,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,WAAgC;AAAA,IACpC,MACE,eAAe,aACX,EAAE,SAAS,MAAM,WAAW,IAC5B,EAAE,MAAM,SAAS;AAAA,IACvB,CAAC,SAAS,UAAU;AAAA,EACtB;AACA,QAAM,gBACJ,aAAa,WAAW,aAAa,OAAO,aAAa;AAC3D,QAAM,gBACJ,aAAa,WAAW,aAAa,OAAO,aAAa;AAC3D,QAAM,cAAc,CAClB,iBAEA,eAAe,EAAE,QAAQ,eAAe,IAAI;AAC9C,QAAM,YAAY,YAAY,aAAa;AAC3C,QAAM,YAAY,YAAY,aAAa;AAC3C,QAAM,qBACJ,SAAS,aAAa,eAAe,aACjC,iBACA;AACN,QAAM,qBACJ,SAAS,aAAa,eAAe,aACjC,iBACA;AAEN,QAAM,CAAC,oBAAoB,cAAc,IAAI;AAAA,IAC3C,CAAC,aAAa,eAAe;AAAA,IAC7B,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,CAAC,oBAAoB,cAAc,IAAI;AAAA,IAC3C,CAAC,aAAa,eAAe;AAAA,IAC7B,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,gBAIF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO;AAAA,MACjC,WAAW,GAAG,WAAW,cAAc;AAAA,MACvC,MAAM,CAAC;AAAA,MACP,GAAG;AAAA,MACH,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,GAAG;AAAA,MACH,GAAI;AAAA,IACN;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAIF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO;AAAA,MACjC,WAAW,GAAG,WAAW,cAAc;AAAA,MACvC,MAAM,CAAC;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,UAAU;AAAA,MACV,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,MAAM;AAAA,MACR;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA,eAAe;AAAA,MACf,GAAG;AAAA,MACH,GAAI;AAAA,IACN;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO,EAAE,eAAe,cAAc;AACxC;AAEA,IAAM,iBAAiB,CAAC,UAAkB;AACxC,SAAO,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC;AACpC;","names":[]}
|
package/dist/chunk-PNE3JG54.mjs
DELETED
@@ -1,29 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
|
3
|
-
// src/area-chart-split.tsx
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
5
|
-
var AreaSplit = ({ offset, id, fillOpacity }) => {
|
6
|
-
return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
7
|
-
/* @__PURE__ */ jsx(
|
8
|
-
"stop",
|
9
|
-
{
|
10
|
-
offset,
|
11
|
-
stopColor: "var(--ui-area-split-0)",
|
12
|
-
stopOpacity: fillOpacity != null ? fillOpacity : 0.4
|
13
|
-
}
|
14
|
-
),
|
15
|
-
/* @__PURE__ */ jsx(
|
16
|
-
"stop",
|
17
|
-
{
|
18
|
-
offset,
|
19
|
-
stopColor: "var(--ui-area-split-1)",
|
20
|
-
stopOpacity: fillOpacity != null ? fillOpacity : 0.4
|
21
|
-
}
|
22
|
-
)
|
23
|
-
] });
|
24
|
-
};
|
25
|
-
|
26
|
-
export {
|
27
|
-
AreaSplit
|
28
|
-
};
|
29
|
-
//# sourceMappingURL=chunk-PNE3JG54.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/area-chart-split.tsx"],"sourcesContent":["export type AreaSplitProps = {\n offset: number\n id?: string\n fillOpacity: number | string | undefined\n}\n\nexport const AreaSplit = ({ offset, id, fillOpacity }: AreaSplitProps) => {\n return (\n <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset={offset}\n stopColor=\"var(--ui-area-split-0)\"\n stopOpacity={fillOpacity ?? 0.4}\n />\n <stop\n offset={offset}\n stopColor=\"var(--ui-area-split-1)\"\n stopOpacity={fillOpacity ?? 0.4}\n />\n </linearGradient>\n )\n}\n"],"mappings":";;;AAQI,SACE,KADF;AAFG,IAAM,YAAY,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAsB;AACxE,SACE,qBAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ;","names":[]}
|
package/dist/chunk-QL3DB7OJ.mjs
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
|
3
|
-
// src/chart-utils.ts
|
4
|
-
import { getCSS } from "@yamada-ui/core";
|
5
|
-
import { cx, isString, splitObject } from "@yamada-ui/utils";
|
6
|
-
var getClassName = (...styles) => (theme) => cx(
|
7
|
-
...styles.map(
|
8
|
-
(style) => isString(style) ? style : getCSS(style)(theme)
|
9
|
-
)
|
10
|
-
);
|
11
|
-
var getComponentProps = ([obj, keys], ...props) => (theme, isContain) => {
|
12
|
-
const [pickedProps, omittedProps] = splitObject(obj, keys);
|
13
|
-
const className = getClassName(...props, omittedProps)(theme);
|
14
|
-
return !isContain ? [pickedProps, className] : { ...pickedProps, className };
|
15
|
-
};
|
16
|
-
|
17
|
-
export {
|
18
|
-
getClassName,
|
19
|
-
getComponentProps
|
20
|
-
};
|
21
|
-
//# sourceMappingURL=chunk-QL3DB7OJ.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/chart-utils.ts"],"sourcesContent":["import type { StyledTheme } from \"@yamada-ui/core\"\nimport { getCSS } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\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":";;;AACA,SAAS,cAAc;AAEvB,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":[]}
|
package/dist/chunk-QZ5OXZ6Z.mjs
DELETED
@@ -1,251 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
dotProperties,
|
4
|
-
lineChartProperties,
|
5
|
-
lineProperties
|
6
|
-
} from "./chunk-OSNFBRHL.mjs";
|
7
|
-
import {
|
8
|
-
getComponentProps
|
9
|
-
} from "./chunk-QL3DB7OJ.mjs";
|
10
|
-
|
11
|
-
// src/use-line-chart.ts
|
12
|
-
import { useTheme } from "@yamada-ui/core";
|
13
|
-
import { cx } from "@yamada-ui/utils";
|
14
|
-
import { useCallback, useMemo, useState } from "react";
|
15
|
-
var useLineChart = ({
|
16
|
-
data,
|
17
|
-
series,
|
18
|
-
layoutType = "horizontal",
|
19
|
-
withDots = true,
|
20
|
-
withActiveDots = true,
|
21
|
-
curveType = "monotone",
|
22
|
-
strokeWidth = 2,
|
23
|
-
connectNulls = true,
|
24
|
-
referenceLineProps,
|
25
|
-
fillOpacity = 1,
|
26
|
-
syncId,
|
27
|
-
styles,
|
28
|
-
...rest
|
29
|
-
}) => {
|
30
|
-
var _a;
|
31
|
-
const { theme } = useTheme();
|
32
|
-
const [highlightedArea, setHighlightedArea] = useState(null);
|
33
|
-
const shouldHighlight = highlightedArea !== null;
|
34
|
-
const {
|
35
|
-
dot = {},
|
36
|
-
activeDot = {},
|
37
|
-
dimDot,
|
38
|
-
dimLine,
|
39
|
-
...computedLineProps
|
40
|
-
} = (_a = rest.lineProps) != null ? _a : {};
|
41
|
-
const lineColors = useMemo(
|
42
|
-
() => series.map(({ color }, index) => ({
|
43
|
-
__prefix: "ui",
|
44
|
-
name: `line-${index}`,
|
45
|
-
token: "colors",
|
46
|
-
value: color != null ? color : "transparent"
|
47
|
-
})),
|
48
|
-
[series]
|
49
|
-
);
|
50
|
-
const referenceLineColors = useMemo(
|
51
|
-
() => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
|
52
|
-
__prefix: "ui",
|
53
|
-
name: `reference-line-${index}`,
|
54
|
-
token: "colors",
|
55
|
-
value: color != null ? color : "transparent"
|
56
|
-
})) : [],
|
57
|
-
[referenceLineProps]
|
58
|
-
);
|
59
|
-
const lineVars = useMemo(
|
60
|
-
() => [
|
61
|
-
...lineColors,
|
62
|
-
...referenceLineColors,
|
63
|
-
{ __prefix: "ui", name: "fill-opacity", value: fillOpacity }
|
64
|
-
],
|
65
|
-
[fillOpacity, lineColors, referenceLineColors]
|
66
|
-
);
|
67
|
-
const [chartProps, lineChartClassName] = useMemo(
|
68
|
-
() => {
|
69
|
-
var _a2;
|
70
|
-
return getComponentProps(
|
71
|
-
[(_a2 = rest.chartProps) != null ? _a2 : {}, lineChartProperties],
|
72
|
-
styles.chart
|
73
|
-
)(theme);
|
74
|
-
},
|
75
|
-
[rest.chartProps, styles.chart, theme]
|
76
|
-
);
|
77
|
-
const [lineProps, lineClassName] = useMemo(() => {
|
78
|
-
const resolvedLineProps = {
|
79
|
-
fillOpacity: "var(--ui-fill-opacity)",
|
80
|
-
strokeOpacity: "var(--ui-fill-opacity)",
|
81
|
-
...computedLineProps
|
82
|
-
};
|
83
|
-
return getComponentProps(
|
84
|
-
[resolvedLineProps, lineProperties],
|
85
|
-
styles.line
|
86
|
-
)(theme);
|
87
|
-
}, [computedLineProps, styles.line, theme]);
|
88
|
-
const [dimLineProps, dimLineClassName] = useMemo(() => {
|
89
|
-
const resolvedDimLine = { fillOpacity: 0, strokeOpacity: 0.3, ...dimLine };
|
90
|
-
return getComponentProps([resolvedDimLine, lineProperties])(
|
91
|
-
theme
|
92
|
-
);
|
93
|
-
}, [dimLine, theme]);
|
94
|
-
const [dotProps, dotClassName] = useMemo(() => {
|
95
|
-
const resolvedDot = { fillOpacity: 1, strokeOpacity: 1, ...dot };
|
96
|
-
return getComponentProps(
|
97
|
-
[resolvedDot, dotProperties],
|
98
|
-
styles.dot
|
99
|
-
)(theme);
|
100
|
-
}, [dot, styles.dot, theme]);
|
101
|
-
const [activeDotProps, activeDotClassName] = useMemo(
|
102
|
-
() => getComponentProps(
|
103
|
-
[activeDot, dotProperties],
|
104
|
-
styles.activeDot
|
105
|
-
)(theme),
|
106
|
-
[activeDot, styles.activeDot, theme]
|
107
|
-
);
|
108
|
-
const [dimDotProps, dimDotClassName] = useMemo(() => {
|
109
|
-
const resolvedDimDot = {
|
110
|
-
fillOpacity: 0,
|
111
|
-
strokeOpacity: 0,
|
112
|
-
...dimDot
|
113
|
-
};
|
114
|
-
return getComponentProps([resolvedDimDot, dotProperties])(
|
115
|
-
theme
|
116
|
-
);
|
117
|
-
}, [dimDot, theme]);
|
118
|
-
const linePropList = useMemo(
|
119
|
-
() => series.map((props, index) => {
|
120
|
-
const {
|
121
|
-
dataKey,
|
122
|
-
dot: dot2 = {},
|
123
|
-
activeDot: activeDot2 = {},
|
124
|
-
dimDot: dimDot2 = {},
|
125
|
-
dimLine: dimLine2 = {},
|
126
|
-
...computedProps
|
127
|
-
} = props;
|
128
|
-
const color = `var(--ui-line-${index})`;
|
129
|
-
const dimmed = shouldHighlight && highlightedArea !== dataKey;
|
130
|
-
const computedDimLine = { ...dimLineProps, ...dimLine2 };
|
131
|
-
const resolvedProps = {
|
132
|
-
...lineProps,
|
133
|
-
...computedProps,
|
134
|
-
...dimmed ? computedDimLine : {}
|
135
|
-
};
|
136
|
-
const rest2 = getComponentProps(
|
137
|
-
[resolvedProps, lineProperties],
|
138
|
-
lineClassName,
|
139
|
-
dimmed ? dimLineClassName : void 0
|
140
|
-
)(theme, true);
|
141
|
-
let resolvedActiveDot;
|
142
|
-
if (withActiveDots) {
|
143
|
-
const computedActiveDot = { ...activeDotProps, ...activeDot2 };
|
144
|
-
const [rest3, className] = getComponentProps(
|
145
|
-
[computedActiveDot, dotProperties],
|
146
|
-
activeDotClassName
|
147
|
-
)(theme);
|
148
|
-
resolvedActiveDot = {
|
149
|
-
className: cx("ui-line-chart__active-dot", className),
|
150
|
-
fill: color,
|
151
|
-
stroke: color,
|
152
|
-
r: 4,
|
153
|
-
...rest3
|
154
|
-
};
|
155
|
-
} else {
|
156
|
-
resolvedActiveDot = false;
|
157
|
-
}
|
158
|
-
let resolvedDot;
|
159
|
-
if (withDots) {
|
160
|
-
const computedDimDot = { ...dimDotProps, ...dimDot2 };
|
161
|
-
const computedDot = {
|
162
|
-
...dotProps,
|
163
|
-
...dot2,
|
164
|
-
...dimmed ? computedDimDot : {}
|
165
|
-
};
|
166
|
-
const [rest3, className] = getComponentProps(
|
167
|
-
[computedDot, dotProperties],
|
168
|
-
dotClassName,
|
169
|
-
dimmed ? dimDotClassName : void 0
|
170
|
-
)(theme);
|
171
|
-
resolvedDot = {
|
172
|
-
className: cx("ui-line-chart__dot", className),
|
173
|
-
fill: color,
|
174
|
-
...rest3
|
175
|
-
};
|
176
|
-
} else {
|
177
|
-
resolvedDot = false;
|
178
|
-
}
|
179
|
-
return {
|
180
|
-
...rest2,
|
181
|
-
color,
|
182
|
-
dataKey,
|
183
|
-
activeDot: resolvedActiveDot,
|
184
|
-
dot: resolvedDot
|
185
|
-
};
|
186
|
-
}),
|
187
|
-
[
|
188
|
-
series,
|
189
|
-
shouldHighlight,
|
190
|
-
highlightedArea,
|
191
|
-
dimLineProps,
|
192
|
-
lineProps,
|
193
|
-
lineClassName,
|
194
|
-
dimLineClassName,
|
195
|
-
theme,
|
196
|
-
withActiveDots,
|
197
|
-
withDots,
|
198
|
-
activeDotProps,
|
199
|
-
activeDotClassName,
|
200
|
-
dimDotProps,
|
201
|
-
dotProps,
|
202
|
-
dotClassName,
|
203
|
-
dimDotClassName
|
204
|
-
]
|
205
|
-
);
|
206
|
-
const getLineChartProps = useCallback(
|
207
|
-
({ className, ...props } = {}, ref = null) => ({
|
208
|
-
ref,
|
209
|
-
className: cx(className, lineChartClassName),
|
210
|
-
data,
|
211
|
-
layout: layoutType,
|
212
|
-
syncId,
|
213
|
-
...props,
|
214
|
-
...chartProps
|
215
|
-
}),
|
216
|
-
[data, layoutType, syncId, lineChartClassName, chartProps]
|
217
|
-
);
|
218
|
-
const getLineProps = useCallback(
|
219
|
-
({ index, className: classNameProp, ...props }, ref = null) => {
|
220
|
-
const { color, className, dataKey, activeDot: activeDot2, dot: dot2, ...rest2 } = linePropList[index];
|
221
|
-
return {
|
222
|
-
ref,
|
223
|
-
className: cx(classNameProp, className),
|
224
|
-
activeDot: activeDot2,
|
225
|
-
dot: dot2,
|
226
|
-
name: dataKey,
|
227
|
-
type: curveType,
|
228
|
-
dataKey,
|
229
|
-
fill: color,
|
230
|
-
strokeWidth,
|
231
|
-
stroke: color,
|
232
|
-
isAnimationActive: false,
|
233
|
-
connectNulls,
|
234
|
-
...props,
|
235
|
-
...rest2
|
236
|
-
};
|
237
|
-
},
|
238
|
-
[connectNulls, curveType, linePropList, strokeWidth]
|
239
|
-
);
|
240
|
-
return {
|
241
|
-
getLineProps,
|
242
|
-
getLineChartProps,
|
243
|
-
lineVars,
|
244
|
-
setHighlightedArea
|
245
|
-
};
|
246
|
-
};
|
247
|
-
|
248
|
-
export {
|
249
|
-
useLineChart
|
250
|
-
};
|
251
|
-
//# sourceMappingURL=chunk-QZ5OXZ6Z.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-line-chart.ts"],"sourcesContent":["import { useTheme } from \"@yamada-ui/core\"\nimport type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport type {\n ChartLayoutType,\n LineProps,\n LineChartProps,\n ReferenceLineProps,\n ChartPropGetter,\n ChartCurveType,\n RequiredChartPropGetter,\n} from \"./chart.types\"\nimport {\n dotProperties,\n lineChartProperties,\n lineProperties,\n} from \"./rechart-properties\"\n\nexport type UseLineChartOptions = {\n /**\n * Chart data.\n */\n data: Dict[]\n /**\n * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.\n */\n series: LineProps[]\n /**\n * Props for the lines.\n */\n lineProps?: Partial<LineProps>\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 * Props passed down to recharts `LineChart` component.\n */\n chartProps?: LineChartProps\n /**\n * Chart orientation.\n *\n * @default 'horizontal'\n */\n layoutType?: ChartLayoutType\n /**\n * Determines whether dots should be displayed.\n *\n * @default true\n */\n withDots?: boolean\n /**\n * Determines whether activeDots should be displayed.\n *\n * @default true\n */\n withActiveDots?: boolean\n /**\n * Type of the curve.\n *\n * @default `monotone`\n */\n curveType?: ChartCurveType\n /**\n * Stroke width for the chart lines.\n *\n * @default 2\n */\n strokeWidth?: number\n /**\n * Determines whether points with `null` values should be connected.\n *\n * @default true\n */\n connectNulls?: boolean\n /**\n * Reference lines that should be displayed on the chart.\n */\n referenceLineProps?: ReferenceLineProps[]\n /**\n * Controls fill opacity of all lines.\n *\n * @default 1\n */\n fillOpacity?: number | [number, number]\n}\n\ntype UseLineChartProps = UseLineChartOptions & {\n styles: Dict<CSSUIObject>\n}\n\nexport const useLineChart = ({\n data,\n series,\n layoutType = \"horizontal\",\n withDots = true,\n withActiveDots = true,\n curveType = \"monotone\",\n strokeWidth = 2,\n connectNulls = true,\n referenceLineProps,\n fillOpacity = 1,\n syncId,\n styles,\n ...rest\n}: UseLineChartProps) => {\n const { theme } = useTheme()\n const [highlightedArea, setHighlightedArea] = useState<string | null>(null)\n const shouldHighlight = highlightedArea !== null\n const {\n dot = {},\n activeDot = {},\n dimDot,\n dimLine,\n ...computedLineProps\n } = rest.lineProps ?? {}\n\n const lineColors: CSSUIProps[\"var\"] = useMemo(\n () =>\n series.map(({ color }, index) => ({\n __prefix: \"ui\",\n name: `line-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n })),\n [series],\n )\n\n const referenceLineColors: CSSUIProps[\"var\"] = useMemo(\n () =>\n referenceLineProps\n ? referenceLineProps.map(({ color }, index) => ({\n __prefix: \"ui\",\n name: `reference-line-${index}`,\n token: \"colors\",\n value: color ?? \"transparent\",\n }))\n : [],\n [referenceLineProps],\n )\n\n const lineVars: CSSUIProps[\"var\"] = useMemo(\n () => [\n ...lineColors,\n ...referenceLineColors,\n { __prefix: \"ui\", name: \"fill-opacity\", value: fillOpacity },\n ],\n [fillOpacity, lineColors, referenceLineColors],\n )\n\n const [chartProps, lineChartClassName] = useMemo(\n () =>\n getComponentProps<Dict, string>(\n [rest.chartProps ?? {}, lineChartProperties],\n styles.chart,\n )(theme),\n [rest.chartProps, styles.chart, theme],\n )\n\n const [lineProps, lineClassName] = useMemo(() => {\n const resolvedLineProps = {\n fillOpacity: \"var(--ui-fill-opacity)\",\n strokeOpacity: \"var(--ui-fill-opacity)\",\n ...computedLineProps,\n }\n\n return getComponentProps<Dict, string>(\n [resolvedLineProps, lineProperties],\n styles.line,\n )(theme)\n }, [computedLineProps, styles.line, theme])\n\n const [dimLineProps, dimLineClassName] = useMemo(() => {\n const resolvedDimLine = { fillOpacity: 0, strokeOpacity: 0.3, ...dimLine }\n\n return getComponentProps<Dict, string>([resolvedDimLine, lineProperties])(\n theme,\n )\n }, [dimLine, theme])\n\n const [dotProps, dotClassName] = useMemo(() => {\n const resolvedDot = { fillOpacity: 1, strokeOpacity: 1, ...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 = {\n fillOpacity: 0,\n strokeOpacity: 0,\n ...dimDot,\n }\n\n return getComponentProps<Dict, string>([resolvedDimDot, dotProperties])(\n theme,\n )\n }, [dimDot, theme])\n\n const linePropList = useMemo(\n () =>\n series.map((props, index) => {\n const {\n dataKey,\n dot = {},\n activeDot = {},\n dimDot = {},\n dimLine = {},\n ...computedProps\n } = props\n const color = `var(--ui-line-${index})`\n const dimmed = shouldHighlight && highlightedArea !== dataKey\n const computedDimLine = { ...dimLineProps, ...dimLine }\n const resolvedProps = {\n ...lineProps,\n ...computedProps,\n ...(dimmed ? computedDimLine : {}),\n }\n\n const rest = getComponentProps<Dict, string>(\n [resolvedProps, lineProperties],\n lineClassName,\n dimmed ? dimLineClassName : undefined,\n )(theme, true)\n\n let resolvedActiveDot: Recharts.DotProps | boolean\n\n if (withActiveDots) {\n const computedActiveDot = { ...activeDotProps, ...activeDot }\n\n const [rest, className] = getComponentProps(\n [computedActiveDot, dotProperties],\n activeDotClassName,\n )(theme)\n\n resolvedActiveDot = {\n className: cx(\"ui-line-chart__active-dot\", className),\n fill: color,\n stroke: color,\n r: 4,\n ...rest,\n } as Recharts.DotProps\n } else {\n resolvedActiveDot = false\n }\n\n let resolvedDot: Recharts.DotProps | boolean\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-line-chart__dot\", className),\n fill: color,\n ...rest,\n } as Recharts.DotProps\n } else {\n resolvedDot = false\n }\n\n return {\n ...rest,\n color,\n dataKey,\n activeDot: resolvedActiveDot,\n dot: resolvedDot,\n }\n }),\n [\n series,\n shouldHighlight,\n highlightedArea,\n dimLineProps,\n lineProps,\n lineClassName,\n dimLineClassName,\n theme,\n withActiveDots,\n withDots,\n activeDotProps,\n activeDotClassName,\n dimDotProps,\n dotProps,\n dotClassName,\n dimDotClassName,\n ],\n )\n\n const getLineChartProps: ChartPropGetter<\n \"div\",\n ComponentPropsWithoutRef<typeof Recharts.LineChart>,\n ComponentPropsWithoutRef<typeof Recharts.LineChart>\n > = useCallback(\n ({ className, ...props } = {}, ref = null) => ({\n ref,\n className: cx(className, lineChartClassName),\n data,\n layout: layoutType,\n syncId,\n ...props,\n ...chartProps,\n }),\n [data, layoutType, syncId, lineChartClassName, chartProps],\n )\n\n const getLineProps: RequiredChartPropGetter<\n \"div\",\n {\n index: number\n },\n Omit<Recharts.LineProps, \"ref\">\n > = useCallback(\n ({ index, className: classNameProp, ...props }, ref = null) => {\n const { color, className, dataKey, activeDot, dot, ...rest } =\n linePropList[index]\n\n return {\n ref,\n className: cx(classNameProp, className),\n activeDot,\n dot,\n name: dataKey as string,\n type: curveType,\n dataKey,\n fill: color,\n strokeWidth,\n stroke: color,\n isAnimationActive: false,\n connectNulls,\n ...(props as Omit<Recharts.LineProps, \"dataKey\">),\n ...rest,\n }\n },\n [connectNulls, curveType, linePropList, strokeWidth],\n )\n\n return {\n getLineProps,\n getLineChartProps,\n lineVars,\n setHighlightedArea,\n }\n}\n\nexport type UseLineChartReturn = ReturnType<typeof useLineChart>\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AAGnB,SAAS,aAAa,SAAS,gBAAgB;AA4FxC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AA/GzB;AAgHE,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAwB,IAAI;AAC1E,QAAM,kBAAkB,oBAAoB;AAC5C,QAAM;AAAA,IACJ,MAAM,CAAC;AAAA,IACP,YAAY,CAAC;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,KAAI,UAAK,cAAL,YAAkB,CAAC;AAEvB,QAAM,aAAgC;AAAA,IACpC,MACE,OAAO,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW;AAAA,MAChC,UAAU;AAAA,MACV,MAAM,QAAQ,KAAK;AAAA,MACnB,OAAO;AAAA,MACP,OAAO,wBAAS;AAAA,IAClB,EAAE;AAAA,IACJ,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,sBAAyC;AAAA,IAC7C,MACE,qBACI,mBAAmB,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW;AAAA,MAC5C,UAAU;AAAA,MACV,MAAM,kBAAkB,KAAK;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO,wBAAS;AAAA,IAClB,EAAE,IACF,CAAC;AAAA,IACP,CAAC,kBAAkB;AAAA,EACrB;AAEA,QAAM,WAA8B;AAAA,IAClC,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MACH,EAAE,UAAU,MAAM,MAAM,gBAAgB,OAAO,YAAY;AAAA,IAC7D;AAAA,IACA,CAAC,aAAa,YAAY,mBAAmB;AAAA,EAC/C;AAEA,QAAM,CAAC,YAAY,kBAAkB,IAAI;AAAA,IACvC,MAAG;AA7JP,UAAAA;AA8JM;AAAA,QACE,EAACA,MAAA,KAAK,eAAL,OAAAA,MAAmB,CAAC,GAAG,mBAAmB;AAAA,QAC3C,OAAO;AAAA,MACT,EAAE,KAAK;AAAA;AAAA,IACT,CAAC,KAAK,YAAY,OAAO,OAAO,KAAK;AAAA,EACvC;AAEA,QAAM,CAAC,WAAW,aAAa,IAAI,QAAQ,MAAM;AAC/C,UAAM,oBAAoB;AAAA,MACxB,aAAa;AAAA,MACb,eAAe;AAAA,MACf,GAAG;AAAA,IACL;AAEA,WAAO;AAAA,MACL,CAAC,mBAAmB,cAAc;AAAA,MAClC,OAAO;AAAA,IACT,EAAE,KAAK;AAAA,EACT,GAAG,CAAC,mBAAmB,OAAO,MAAM,KAAK,CAAC;AAE1C,QAAM,CAAC,cAAc,gBAAgB,IAAI,QAAQ,MAAM;AACrD,UAAM,kBAAkB,EAAE,aAAa,GAAG,eAAe,KAAK,GAAG,QAAQ;AAEzE,WAAO,kBAAgC,CAAC,iBAAiB,cAAc,CAAC;AAAA,MACtE;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,QAAM,CAAC,UAAU,YAAY,IAAI,QAAQ,MAAM;AAC7C,UAAM,cAAc,EAAE,aAAa,GAAG,eAAe,GAAG,GAAG,IAAI;AAE/D,WAAO;AAAA,MACL,CAAC,aAAa,aAAa;AAAA,MAC3B,OAAO;AAAA,IACT,EAAE,KAAK;AAAA,EACT,GAAG,CAAC,KAAK,OAAO,KAAK,KAAK,CAAC;AAE3B,QAAM,CAAC,gBAAgB,kBAAkB,IAAI;AAAA,IAC3C,MACE;AAAA,MACE,CAAC,WAAW,aAAa;AAAA,MACzB,OAAO;AAAA,IACT,EAAE,KAAK;AAAA,IACT,CAAC,WAAW,OAAO,WAAW,KAAK;AAAA,EACrC;AAEA,QAAM,CAAC,aAAa,eAAe,IAAI,QAAQ,MAAM;AACnD,UAAM,iBAAiB;AAAA,MACrB,aAAa;AAAA,MACb,eAAe;AAAA,MACf,GAAG;AAAA,IACL;AAEA,WAAO,kBAAgC,CAAC,gBAAgB,aAAa,CAAC;AAAA,MACpE;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,QAAM,eAAe;AAAA,IACnB,MACE,OAAO,IAAI,CAAC,OAAO,UAAU;AAC3B,YAAM;AAAA,QACJ;AAAA,QACA,KAAAC,OAAM,CAAC;AAAA,QACP,WAAAC,aAAY,CAAC;AAAA,QACb,QAAAC,UAAS,CAAC;AAAA,QACV,SAAAC,WAAU,CAAC;AAAA,QACX,GAAG;AAAA,MACL,IAAI;AACJ,YAAM,QAAQ,iBAAiB,KAAK;AACpC,YAAM,SAAS,mBAAmB,oBAAoB;AACtD,YAAM,kBAAkB,EAAE,GAAG,cAAc,GAAGA,SAAQ;AACtD,YAAM,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,SAAS,kBAAkB,CAAC;AAAA,MAClC;AAEA,YAAMC,QAAO;AAAA,QACX,CAAC,eAAe,cAAc;AAAA,QAC9B;AAAA,QACA,SAAS,mBAAmB;AAAA,MAC9B,EAAE,OAAO,IAAI;AAEb,UAAI;AAEJ,UAAI,gBAAgB;AAClB,cAAM,oBAAoB,EAAE,GAAG,gBAAgB,GAAGH,WAAU;AAE5D,cAAM,CAACG,OAAM,SAAS,IAAI;AAAA,UACxB,CAAC,mBAAmB,aAAa;AAAA,UACjC;AAAA,QACF,EAAE,KAAK;AAEP,4BAAoB;AAAA,UAClB,WAAW,GAAG,6BAA6B,SAAS;AAAA,UACpD,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,GAAG;AAAA,UACH,GAAGA;AAAA,QACL;AAAA,MACF,OAAO;AACL,4BAAoB;AAAA,MACtB;AAEA,UAAI;AAEJ,UAAI,UAAU;AACZ,cAAM,iBAAiB,EAAE,GAAG,aAAa,GAAGF,QAAO;AACnD,cAAM,cAAc;AAAA,UAClB,GAAG;AAAA,UACH,GAAGF;AAAA,UACH,GAAI,SAAS,iBAAiB,CAAC;AAAA,QACjC;AAEA,cAAM,CAACI,OAAM,SAAS,IAAI;AAAA,UACxB,CAAC,aAAa,aAAa;AAAA,UAC3B;AAAA,UACA,SAAS,kBAAkB;AAAA,QAC7B,EAAE,KAAK;AAEP,sBAAc;AAAA,UACZ,WAAW,GAAG,sBAAsB,SAAS;AAAA,UAC7C,MAAM;AAAA,UACN,GAAGA;AAAA,QACL;AAAA,MACF,OAAO;AACL,sBAAc;AAAA,MAChB;AAEA,aAAO;AAAA,QACL,GAAGA;AAAA,QACH;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,KAAK;AAAA,MACP;AAAA,IACF,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,oBAIF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,UAAU;AAAA,MAC7C;AAAA,MACA,WAAW,GAAG,WAAW,kBAAkB;AAAA,MAC3C;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,MAAM,YAAY,QAAQ,oBAAoB,UAAU;AAAA,EAC3D;AAEA,QAAM,eAMF;AAAA,IACF,CAAC,EAAE,OAAO,WAAW,eAAe,GAAG,MAAM,GAAG,MAAM,SAAS;AAC7D,YAAM,EAAE,OAAO,WAAW,SAAS,WAAAH,YAAW,KAAAD,MAAK,GAAGI,MAAK,IACzD,aAAa,KAAK;AAEpB,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACtC,WAAAH;AAAA,QACA,KAAAD;AAAA,QACA,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,QAAQ;AAAA,QACR,mBAAmB;AAAA,QACnB;AAAA,QACA,GAAI;AAAA,QACJ,GAAGI;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW,cAAc,WAAW;AAAA,EACrD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["_a","dot","activeDot","dimDot","dimLine","rest"]}
|
package/dist/chunk-RN6PXJAD.mjs
DELETED
@@ -1,47 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
tooltipProperties
|
4
|
-
} from "./chunk-OSNFBRHL.mjs";
|
5
|
-
import {
|
6
|
-
getClassName
|
7
|
-
} from "./chunk-QL3DB7OJ.mjs";
|
8
|
-
|
9
|
-
// src/use-chart-tooltip.ts
|
10
|
-
import { useTheme } from "@yamada-ui/core";
|
11
|
-
import { splitObject, cx } from "@yamada-ui/utils";
|
12
|
-
import { useCallback, useMemo } from "react";
|
13
|
-
var useChartTooltip = ({
|
14
|
-
tooltipProps: _tooltipProps = {},
|
15
|
-
tooltipAnimationDuration = 0,
|
16
|
-
styles
|
17
|
-
}) => {
|
18
|
-
const { theme } = useTheme();
|
19
|
-
const { cursor, ...rest } = _tooltipProps;
|
20
|
-
const cursorClassName = useMemo(
|
21
|
-
() => getClassName({ ...styles.cursor, ...cursor })(theme),
|
22
|
-
[cursor, styles.cursor, theme]
|
23
|
-
);
|
24
|
-
const [tooltipProps, tooltipUIProps] = splitObject(
|
25
|
-
rest,
|
26
|
-
tooltipProperties
|
27
|
-
);
|
28
|
-
const getTooltipProps = useCallback(
|
29
|
-
(props, ref = null) => ({
|
30
|
-
ref,
|
31
|
-
animationDuration: tooltipAnimationDuration,
|
32
|
-
isAnimationActive: (tooltipAnimationDuration || 0) > 0,
|
33
|
-
cursor: {
|
34
|
-
className: cx("ui-chart__cursor", cursorClassName)
|
35
|
-
},
|
36
|
-
...props,
|
37
|
-
...tooltipProps
|
38
|
-
}),
|
39
|
-
[cursorClassName, tooltipAnimationDuration, tooltipProps]
|
40
|
-
);
|
41
|
-
return { tooltipProps: tooltipUIProps, getTooltipProps };
|
42
|
-
};
|
43
|
-
|
44
|
-
export {
|
45
|
-
useChartTooltip
|
46
|
-
};
|
47
|
-
//# sourceMappingURL=chunk-RN6PXJAD.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-chart-tooltip.ts"],"sourcesContent":["import { useTheme, type CSSUIObject } from \"@yamada-ui/core\"\nimport { splitObject, type Dict, cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getClassName } from \"./chart-utils\"\nimport type { ChartPropGetter, TooltipProps } from \"./chart.types\"\nimport { tooltipProperties } from \"./rechart-properties\"\n\nexport type UseChartTooltipOptions = {\n /**\n * Props passed down to recharts 'Tooltip' component.\n */\n tooltipProps?: TooltipProps\n /**\n * Specifies the duration of animation, the unit of this option is ms.\n *\n * @default 0\n */\n tooltipAnimationDuration?: number\n}\n\ntype UseChartTooltipProps = UseChartTooltipOptions & {\n styles: Dict<CSSUIObject>\n}\n\nexport const useChartTooltip = ({\n tooltipProps: _tooltipProps = {},\n tooltipAnimationDuration = 0,\n styles,\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: ChartPropGetter<\n \"div\",\n Partial<Recharts.TooltipProps<any, any>>,\n Omit<Recharts.TooltipProps<any, any>, \"ref\">\n > = useCallback(\n (props, ref = null) => ({\n ref,\n animationDuration: tooltipAnimationDuration,\n isAnimationActive: (tooltipAnimationDuration || 0) > 0,\n cursor: {\n className: cx(\"ui-chart__cursor\", cursorClassName),\n },\n ...props,\n ...tooltipProps,\n }),\n [cursorClassName, tooltipAnimationDuration, tooltipProps],\n )\n\n return { tooltipProps: tooltipUIProps, getTooltipProps }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,gBAAkC;AAC3C,SAAS,aAAwB,UAAU;AAC3C,SAAS,aAAa,eAAe;AAuB9B,IAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAc,gBAAgB,CAAC;AAAA,EAC/B,2BAA2B;AAAA,EAC3B;AACF,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,kBAIF;AAAA,IACF,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB;AAAA,MACA,mBAAmB;AAAA,MACnB,oBAAoB,4BAA4B,KAAK;AAAA,MACrD,QAAQ;AAAA,QACN,WAAW,GAAG,oBAAoB,eAAe;AAAA,MACnD;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,iBAAiB,0BAA0B,YAAY;AAAA,EAC1D;AAEA,SAAO,EAAE,cAAc,gBAAgB,gBAAgB;AACzD;","names":[]}
|