@yamada-ui/charts 1.0.2 → 1.0.3-dev-20240404224651
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.js +15 -49
- package/dist/area-chart.js.map +1 -1
- package/dist/area-chart.mjs +2 -2
- package/dist/bar-chart.js +15 -49
- package/dist/bar-chart.js.map +1 -1
- package/dist/bar-chart.mjs +2 -2
- package/dist/chunk-BPTDTAE2.mjs +47 -0
- package/dist/chunk-BPTDTAE2.mjs.map +1 -0
- package/dist/{chunk-PZVPN27X.mjs → chunk-EPHYS7B2.mjs} +4 -8
- package/dist/chunk-EPHYS7B2.mjs.map +1 -0
- package/dist/{chunk-ZYBONO6H.mjs → chunk-OTUDFLXM.mjs} +12 -10
- package/dist/chunk-OTUDFLXM.mjs.map +1 -0
- package/dist/{chunk-R6I3PAL2.mjs → chunk-SFU65XA7.mjs} +4 -8
- package/dist/chunk-SFU65XA7.mjs.map +1 -0
- package/dist/{chunk-TCR5VIHU.mjs → chunk-YTC66YJR.mjs} +4 -8
- package/dist/chunk-YTC66YJR.mjs.map +1 -0
- package/dist/{chunk-ILL6HXIY.mjs → chunk-Z74O4FHB.mjs} +64 -61
- package/dist/chunk-Z74O4FHB.mjs.map +1 -0
- package/dist/index.js +112 -150
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -6
- package/dist/line-chart.js +17 -51
- package/dist/line-chart.js.map +1 -1
- package/dist/line-chart.mjs +2 -2
- package/dist/radar-chart.js +85 -111
- package/dist/radar-chart.js.map +1 -1
- package/dist/radar-chart.mjs +3 -3
- package/dist/use-area-chart.d.mts +1 -1
- package/dist/use-area-chart.d.ts +1 -1
- package/dist/use-bar-chart.d.mts +1 -1
- package/dist/use-bar-chart.d.ts +1 -1
- package/dist/use-chart-tooltip.d.mts +0 -8
- package/dist/use-chart-tooltip.d.ts +0 -8
- package/dist/use-chart-tooltip.js +19 -40
- package/dist/use-chart-tooltip.js.map +1 -1
- package/dist/use-chart-tooltip.mjs +2 -1
- package/dist/use-line-chart.d.mts +1 -1
- package/dist/use-line-chart.d.ts +1 -1
- package/dist/use-radar-chart.d.mts +15 -3
- package/dist/use-radar-chart.d.ts +15 -3
- package/dist/use-radar-chart.js +61 -59
- package/dist/use-radar-chart.js.map +1 -1
- package/dist/use-radar-chart.mjs +1 -1
- package/package.json +4 -4
- package/dist/chunk-ILL6HXIY.mjs.map +0 -1
- package/dist/chunk-PZVPN27X.mjs.map +0 -1
- package/dist/chunk-R6I3PAL2.mjs.map +0 -1
- package/dist/chunk-TCR5VIHU.mjs.map +0 -1
- package/dist/chunk-WF3BD34Y.mjs +0 -74
- package/dist/chunk-WF3BD34Y.mjs.map +0 -1
- package/dist/chunk-ZYBONO6H.mjs.map +0 -1
package/dist/radar-chart.mjs
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
RadarChart
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
4
|
+
} from "./chunk-OTUDFLXM.mjs";
|
5
|
+
import "./chunk-Z74O4FHB.mjs";
|
6
6
|
import "./chunk-LXZCGIND.mjs";
|
7
|
-
import "./chunk-
|
7
|
+
import "./chunk-BPTDTAE2.mjs";
|
8
8
|
import "./chunk-RTTZPOUT.mjs";
|
9
9
|
import "./chunk-32BO2QEP.mjs";
|
10
10
|
import "./chunk-RXWD2EJ2.mjs";
|
@@ -113,7 +113,7 @@ declare const useAreaChart: ({ data, series, type, layoutType, withGradient: wit
|
|
113
113
|
areaVars: {
|
114
114
|
__prefix?: string | undefined;
|
115
115
|
name: string;
|
116
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
116
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
117
117
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
118
118
|
}[];
|
119
119
|
setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
|
package/dist/use-area-chart.d.ts
CHANGED
@@ -113,7 +113,7 @@ declare const useAreaChart: ({ data, series, type, layoutType, withGradient: wit
|
|
113
113
|
areaVars: {
|
114
114
|
__prefix?: string | undefined;
|
115
115
|
name: string;
|
116
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
116
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
117
117
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
118
118
|
}[];
|
119
119
|
setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
|
package/dist/use-bar-chart.d.mts
CHANGED
@@ -59,7 +59,7 @@ declare const useBarChart: ({ data, series, type, layoutType, referenceLineProps
|
|
59
59
|
barVars: {
|
60
60
|
__prefix?: string | undefined;
|
61
61
|
name: string;
|
62
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
62
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
63
63
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
64
64
|
}[];
|
65
65
|
getBarProps: RequiredChartPropGetter<"div", {
|
package/dist/use-bar-chart.d.ts
CHANGED
@@ -59,7 +59,7 @@ declare const useBarChart: ({ data, series, type, layoutType, referenceLineProps
|
|
59
59
|
barVars: {
|
60
60
|
__prefix?: string | undefined;
|
61
61
|
name: string;
|
62
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
62
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
63
63
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
64
64
|
}[];
|
65
65
|
getBarProps: RequiredChartPropGetter<"div", {
|
@@ -1,6 +1,4 @@
|
|
1
|
-
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
1
|
import { CSSUIObject } from '@yamada-ui/core';
|
3
|
-
import * as _yamada_ui_utils from '@yamada-ui/utils';
|
4
2
|
import { Dict } from '@yamada-ui/utils';
|
5
3
|
import * as Recharts from 'recharts';
|
6
4
|
import { TooltipProps, ChartPropGetter } from './chart.types.mjs';
|
@@ -24,12 +22,6 @@ type UseChartTooltipProps = UseChartTooltipOptions & {
|
|
24
22
|
declare const useChartTooltip: ({ tooltipProps: _tooltipProps, tooltipAnimationDuration, styles, }: UseChartTooltipProps) => {
|
25
23
|
tooltipProps: Omit<Dict, string>;
|
26
24
|
getTooltipProps: ChartPropGetter<"div", Partial<Recharts.TooltipProps<any, any>>, Omit<Recharts.TooltipProps<any, any>, "ref">>;
|
27
|
-
tooltipVars: {
|
28
|
-
__prefix?: string | undefined;
|
29
|
-
name: string;
|
30
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
31
|
-
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
32
|
-
}[];
|
33
25
|
};
|
34
26
|
|
35
27
|
export { type UseChartTooltipOptions, useChartTooltip };
|
@@ -1,6 +1,4 @@
|
|
1
|
-
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
1
|
import { CSSUIObject } from '@yamada-ui/core';
|
3
|
-
import * as _yamada_ui_utils from '@yamada-ui/utils';
|
4
2
|
import { Dict } from '@yamada-ui/utils';
|
5
3
|
import * as Recharts from 'recharts';
|
6
4
|
import { TooltipProps, ChartPropGetter } from './chart.types.js';
|
@@ -24,12 +22,6 @@ type UseChartTooltipProps = UseChartTooltipOptions & {
|
|
24
22
|
declare const useChartTooltip: ({ tooltipProps: _tooltipProps, tooltipAnimationDuration, styles, }: UseChartTooltipProps) => {
|
25
23
|
tooltipProps: Omit<Dict, string>;
|
26
24
|
getTooltipProps: ChartPropGetter<"div", Partial<Recharts.TooltipProps<any, any>>, Omit<Recharts.TooltipProps<any, any>, "ref">>;
|
27
|
-
tooltipVars: {
|
28
|
-
__prefix?: string | undefined;
|
29
|
-
name: string;
|
30
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
31
|
-
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
32
|
-
}[];
|
33
25
|
};
|
34
26
|
|
35
27
|
export { type UseChartTooltipOptions, useChartTooltip };
|
@@ -24,9 +24,19 @@ __export(use_chart_tooltip_exports, {
|
|
24
24
|
useChartTooltip: () => useChartTooltip
|
25
25
|
});
|
26
26
|
module.exports = __toCommonJS(use_chart_tooltip_exports);
|
27
|
-
var
|
27
|
+
var import_core2 = require("@yamada-ui/core");
|
28
|
+
var import_utils2 = require("@yamada-ui/utils");
|
28
29
|
var import_react = require("react");
|
29
30
|
|
31
|
+
// src/chart-utils.ts
|
32
|
+
var import_core = require("@yamada-ui/core");
|
33
|
+
var import_utils = require("@yamada-ui/utils");
|
34
|
+
var getClassName = (...styles) => (theme) => (0, import_utils.cx)(
|
35
|
+
...styles.map(
|
36
|
+
(style) => (0, import_utils.isString)(style) ? style : (0, import_core.getCSS)(style)(theme)
|
37
|
+
)
|
38
|
+
);
|
39
|
+
|
30
40
|
// src/rechart-properties.ts
|
31
41
|
var tooltipProperties = [
|
32
42
|
"offset",
|
@@ -58,41 +68,13 @@ var useChartTooltip = ({
|
|
58
68
|
tooltipAnimationDuration = 0,
|
59
69
|
styles
|
60
70
|
}) => {
|
71
|
+
const { theme } = (0, import_core2.useTheme)();
|
61
72
|
const { cursor, ...rest } = _tooltipProps;
|
62
|
-
const
|
63
|
-
() => ({ ...styles.cursor, ...cursor }),
|
64
|
-
[cursor, styles]
|
65
|
-
);
|
66
|
-
const tooltipVars = (0, import_react.useMemo)(
|
67
|
-
() => [
|
68
|
-
{
|
69
|
-
__prefix: "ui",
|
70
|
-
name: "cursor-fill",
|
71
|
-
token: "colors",
|
72
|
-
value: resolvedCursor.fill
|
73
|
-
},
|
74
|
-
{
|
75
|
-
__prefix: "ui",
|
76
|
-
name: "cursor-stroke",
|
77
|
-
token: "colors",
|
78
|
-
value: resolvedCursor.stroke
|
79
|
-
},
|
80
|
-
{
|
81
|
-
__prefix: "ui",
|
82
|
-
name: "cursor-stroke-width",
|
83
|
-
token: "colors",
|
84
|
-
value: resolvedCursor.strokeWidth
|
85
|
-
},
|
86
|
-
{
|
87
|
-
__prefix: "ui",
|
88
|
-
name: "cursor-stroke-dasharray",
|
89
|
-
token: "colors",
|
90
|
-
value: resolvedCursor.strokeDasharray
|
91
|
-
}
|
92
|
-
],
|
93
|
-
[resolvedCursor]
|
73
|
+
const cursorClassName = (0, import_react.useMemo)(
|
74
|
+
() => getClassName({ ...styles.cursor, ...cursor })(theme),
|
75
|
+
[cursor, styles.cursor, theme]
|
94
76
|
);
|
95
|
-
const [tooltipProps, tooltipUIProps] = (0,
|
77
|
+
const [tooltipProps, tooltipUIProps] = (0, import_utils2.splitObject)(
|
96
78
|
rest,
|
97
79
|
tooltipProperties
|
98
80
|
);
|
@@ -102,17 +84,14 @@ var useChartTooltip = ({
|
|
102
84
|
animationDuration: tooltipAnimationDuration,
|
103
85
|
isAnimationActive: (tooltipAnimationDuration || 0) > 0,
|
104
86
|
cursor: {
|
105
|
-
|
106
|
-
stroke: "var(--ui-cursor-stroke)",
|
107
|
-
strokeWidth: "var(--ui-cursor-stroke-width)",
|
108
|
-
strokeDasharray: "var(--ui-cursor-stroke-dasharray)"
|
87
|
+
className: cursorClassName
|
109
88
|
},
|
110
89
|
...props,
|
111
90
|
...tooltipProps
|
112
91
|
}),
|
113
|
-
[tooltipAnimationDuration, tooltipProps]
|
92
|
+
[cursorClassName, tooltipAnimationDuration, tooltipProps]
|
114
93
|
);
|
115
|
-
return { tooltipProps: tooltipUIProps, getTooltipProps
|
94
|
+
return { tooltipProps: tooltipUIProps, getTooltipProps };
|
116
95
|
};
|
117
96
|
// Annotate the CommonJS export names for ESM import in node:
|
118
97
|
0 && (module.exports = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-chart-tooltip.ts","../src/rechart-properties.ts"],"sourcesContent":["import type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport { splitObject, type Dict } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport type * as Recharts from \"recharts\"\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 { cursor, ...rest } = _tooltipProps\n const resolvedCursor = useMemo(\n () => ({ ...styles.cursor, ...cursor }),\n [cursor, styles],\n )\n\n // TODO: replace `className`\n const tooltipVars: Required<CSSUIProps>[\"var\"] = useMemo(\n () =>\n [\n {\n __prefix: \"ui\",\n name: \"cursor-fill\",\n token: \"colors\",\n value: resolvedCursor.fill,\n },\n {\n __prefix: \"ui\",\n name: \"cursor-stroke\",\n token: \"colors\",\n value: resolvedCursor.stroke,\n },\n {\n __prefix: \"ui\",\n name: \"cursor-stroke-width\",\n token: \"colors\",\n value: resolvedCursor.strokeWidth,\n },\n {\n __prefix: \"ui\",\n name: \"cursor-stroke-dasharray\",\n token: \"colors\",\n value: resolvedCursor.strokeDasharray,\n },\n ] as Required<CSSUIProps>[\"var\"],\n [resolvedCursor],\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 fill: \"var(--ui-cursor-fill)\",\n stroke: \"var(--ui-cursor-stroke)\",\n strokeWidth: \"var(--ui-cursor-stroke-width)\",\n strokeDasharray: \"var(--ui-cursor-stroke-dasharray)\",\n },\n ...props,\n ...tooltipProps,\n }),\n [tooltipAnimationDuration, tooltipProps],\n )\n\n return { tooltipProps: tooltipUIProps, getTooltipProps, tooltipVars }\n}\n","import type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\n\nexport const areaChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.AreaChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"stackOffset\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const barChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.BarChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"barCategoryGap\",\n \"barGap\",\n \"barSize\",\n \"maxBarSize\",\n \"stackOffset\",\n \"reverseStackOrder\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const lineChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.LineChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const radarChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.RadarChart\n>)[] = [\n \"width\",\n \"height\",\n \"data\",\n \"cx\",\n \"cy\",\n \"startAngle\",\n \"endAngle\",\n \"innerRadius\",\n \"outerRadius\",\n \"margin\",\n \"onMouseEnter\",\n \"onClick\",\n]\n\nexport const referenceLineProperties: (keyof Recharts.ReferenceLineProps)[] = [\n \"xAxisId\",\n \"yAxisId\",\n \"x\",\n \"y\",\n \"ifOverflow\",\n \"viewBox\",\n \"xAxis\",\n \"yAxis\",\n \"label\",\n \"isFront\",\n \"strokeWidth\",\n \"segment\",\n]\n\nexport const containerProperties: (keyof Omit<\n Recharts.ResponsiveContainerProps,\n \"children\"\n>)[] = [\n \"aspect\",\n \"width\",\n \"height\",\n \"minWidth\",\n \"minHeight\",\n \"debounce\",\n \"onResize\",\n]\n\nexport const gridProperties: (keyof Recharts.CartesianGridProps)[] = [\n \"x\",\n \"y\",\n \"width\",\n \"height\",\n \"horizontal\",\n \"vertical\",\n \"horizontalPoints\",\n \"horizontalCoordinatesGenerator\",\n \"verticalPoints\",\n \"verticalCoordinatesGenerator\",\n \"fill\",\n \"fillOpacity\",\n \"strokeDasharray\",\n]\n\nexport const xAxisProperties: (keyof Recharts.XAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"xAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"angle\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const yAxisProperties: (keyof Recharts.YAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"yAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const legendProperties: (keyof Omit<Recharts.LegendProps, \"ref\">)[] = [\n \"width\",\n \"height\",\n \"layout\",\n \"align\",\n \"verticalAlign\",\n \"iconSize\",\n \"iconType\",\n \"payload\",\n \"chartWidth\",\n \"chartHeight\",\n \"margin\",\n \"content\",\n \"formatter\",\n \"wrapperStyle\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const tooltipProperties: (keyof Recharts.TooltipProps<any, any>)[] = [\n \"offset\",\n \"filterNull\",\n \"itemStyle\",\n \"wrapperStyle\",\n \"contentStyle\",\n \"labelStyle\",\n \"cursor\",\n \"viewBox\",\n \"allowEscapeViewBox\",\n \"active\",\n \"position\",\n \"coordinate\",\n \"payload\",\n \"label\",\n \"content\",\n \"formatter\",\n \"labelFormatter\",\n \"itemSorter\",\n \"isAnimationActive\",\n \"animationDuration\",\n \"animationEasing\",\n]\n\nexport const areaProperties: (keyof Omit<Recharts.AreaProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"baseLine\",\n \"points\",\n \"stackId\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const barProperties: (keyof Omit<Recharts.BarProps, \"ref\">)[] = [\n \"layout\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"label\",\n \"data\",\n \"barSize\",\n \"maxBarSize\",\n \"minPointSize\",\n \"background\",\n \"shape\",\n \"activeBar\",\n \"stackId\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"radius\",\n]\n\nexport const radarProperties: (keyof Omit<Recharts.RadarProps, \"ref\">)[] = [\n \"dataKey\",\n \"points\",\n \"shape\",\n \"dot\",\n \"activeDot\",\n \"legendType\",\n \"label\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n]\n\nexport const lineProperties: (keyof Omit<Recharts.LineProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"hide\",\n \"points\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"strokeDasharray\",\n]\n\nexport const dotProperties: (keyof Omit<Recharts.DotProps, \"ref\">)[] = [\n \"cx\",\n \"cy\",\n \"r\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const polarGridProperties: (keyof Recharts.PolarGridProps)[] = [\n \"cx\",\n \"cy\",\n \"innerRadius\",\n \"outerRadius\",\n \"polarAngles\",\n \"polarRadius\",\n \"gridType\",\n]\n\nexport const polarAngleAxisProperties: (keyof Recharts.PolarAngleAxisProps)[] =\n [\n \"dataKey\",\n \"cx\",\n \"cy\",\n \"radius\",\n \"axisLine\",\n \"axisLineType\",\n \"tickLine\",\n \"tickSize\",\n \"tick\",\n \"ticks\",\n \"orient\",\n \"tickFormatter\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\nexport const polarRadiusAxisProperties: (keyof Recharts.PolarRadiusAxisProps)[] =\n [\n \"angle\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"cx\",\n \"cy\",\n \"domain\",\n \"reversed\",\n \"label\",\n \"orientation\",\n \"axisLine\",\n \"tick\",\n \"tickSize\",\n \"tickFormatter\",\n \"tickCount\",\n \"scale\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAuC;AACvC,mBAAqC;;;AC+N9B,IAAM,oBAA+D;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;AD/NO,IAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAc,gBAAgB,CAAC;AAAA,EAC/B,2BAA2B;AAAA,EAC3B;AACF,MAA4B;AAC1B,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAC5B,QAAM,qBAAiB;AAAA,IACrB,OAAO,EAAE,GAAG,OAAO,QAAQ,GAAG,OAAO;AAAA,IACrC,CAAC,QAAQ,MAAM;AAAA,EACjB;AAGA,QAAM,kBAA2C;AAAA,IAC/C,MACE;AAAA,MACE;AAAA,QACE,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO,eAAe;AAAA,MACxB;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO,eAAe;AAAA,MACxB;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO,eAAe;AAAA,MACxB;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO,eAAe;AAAA,MACxB;AAAA,IACF;AAAA,IACF,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,CAAC,cAAc,cAAc,QAAI;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,sBAIF;AAAA,IACF,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB;AAAA,MACA,mBAAmB;AAAA,MACnB,oBAAoB,4BAA4B,KAAK;AAAA,MACrD,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,iBAAiB;AAAA,MACnB;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,0BAA0B,YAAY;AAAA,EACzC;AAEA,SAAO,EAAE,cAAc,gBAAgB,iBAAiB,YAAY;AACtE;","names":[]}
|
1
|
+
{"version":3,"sources":["../src/use-chart-tooltip.ts","../src/chart-utils.ts","../src/rechart-properties.ts"],"sourcesContent":["import { useTheme, type CSSUIObject } from \"@yamada-ui/core\"\nimport { splitObject, type Dict } 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: cursorClassName,\n },\n ...props,\n ...tooltipProps,\n }),\n [cursorClassName, tooltipAnimationDuration, tooltipProps],\n )\n\n return { tooltipProps: tooltipUIProps, getTooltipProps }\n}\n","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","import type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\n\nexport const areaChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.AreaChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"stackOffset\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const barChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.BarChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"barCategoryGap\",\n \"barGap\",\n \"barSize\",\n \"maxBarSize\",\n \"stackOffset\",\n \"reverseStackOrder\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const lineChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.LineChart\n>)[] = [\n \"layout\",\n \"syncId\",\n \"syncMethod\",\n \"width\",\n \"height\",\n \"data\",\n \"margin\",\n \"onClick\",\n \"onMouseEnter\",\n \"onMouseMove\",\n \"onMouseLeave\",\n]\n\nexport const radarChartProperties: (keyof ComponentPropsWithoutRef<\n typeof Recharts.RadarChart\n>)[] = [\n \"width\",\n \"height\",\n \"data\",\n \"cx\",\n \"cy\",\n \"startAngle\",\n \"endAngle\",\n \"innerRadius\",\n \"outerRadius\",\n \"margin\",\n \"onMouseEnter\",\n \"onClick\",\n]\n\nexport const referenceLineProperties: (keyof Recharts.ReferenceLineProps)[] = [\n \"xAxisId\",\n \"yAxisId\",\n \"x\",\n \"y\",\n \"ifOverflow\",\n \"viewBox\",\n \"xAxis\",\n \"yAxis\",\n \"label\",\n \"isFront\",\n \"strokeWidth\",\n \"segment\",\n]\n\nexport const containerProperties: (keyof Omit<\n Recharts.ResponsiveContainerProps,\n \"children\"\n>)[] = [\n \"aspect\",\n \"width\",\n \"height\",\n \"minWidth\",\n \"minHeight\",\n \"debounce\",\n \"onResize\",\n]\n\nexport const gridProperties: (keyof Recharts.CartesianGridProps)[] = [\n \"x\",\n \"y\",\n \"width\",\n \"height\",\n \"horizontal\",\n \"vertical\",\n \"horizontalPoints\",\n \"horizontalCoordinatesGenerator\",\n \"verticalPoints\",\n \"verticalCoordinatesGenerator\",\n \"fill\",\n \"fillOpacity\",\n \"strokeDasharray\",\n]\n\nexport const xAxisProperties: (keyof Recharts.XAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"xAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"angle\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const yAxisProperties: (keyof Recharts.YAxisProps)[] = [\n \"hide\",\n \"dataKey\",\n \"yAxisId\",\n \"width\",\n \"height\",\n \"orientation\",\n \"type\",\n \"tickCount\",\n \"domain\",\n \"includeHidden\",\n \"interval\",\n \"padding\",\n \"minTickGap\",\n \"allowDecimals\",\n \"allowDataOverflow\",\n \"allowDuplicatedCategory\",\n \"axisLine\",\n \"tickLine\",\n \"tickSize\",\n \"tickFormatter\",\n \"ticks\",\n \"tick\",\n \"mirror\",\n \"reversed\",\n \"label\",\n \"scale\",\n \"unit\",\n \"name\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"tickMargin\",\n]\n\nexport const legendProperties: (keyof Omit<Recharts.LegendProps, \"ref\">)[] = [\n \"width\",\n \"height\",\n \"layout\",\n \"align\",\n \"verticalAlign\",\n \"iconSize\",\n \"iconType\",\n \"payload\",\n \"chartWidth\",\n \"chartHeight\",\n \"margin\",\n \"content\",\n \"formatter\",\n \"wrapperStyle\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const tooltipProperties: (keyof Recharts.TooltipProps<any, any>)[] = [\n \"offset\",\n \"filterNull\",\n \"itemStyle\",\n \"wrapperStyle\",\n \"contentStyle\",\n \"labelStyle\",\n \"cursor\",\n \"viewBox\",\n \"allowEscapeViewBox\",\n \"active\",\n \"position\",\n \"coordinate\",\n \"payload\",\n \"label\",\n \"content\",\n \"formatter\",\n \"labelFormatter\",\n \"itemSorter\",\n \"isAnimationActive\",\n \"animationDuration\",\n \"animationEasing\",\n]\n\nexport const areaProperties: (keyof Omit<Recharts.AreaProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"baseLine\",\n \"points\",\n \"stackId\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const barProperties: (keyof Omit<Recharts.BarProps, \"ref\">)[] = [\n \"layout\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"label\",\n \"data\",\n \"barSize\",\n \"maxBarSize\",\n \"minPointSize\",\n \"background\",\n \"shape\",\n \"activeBar\",\n \"stackId\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"radius\",\n]\n\nexport const radarProperties: (keyof Omit<Recharts.RadarProps, \"ref\">)[] = [\n \"dataKey\",\n \"points\",\n \"shape\",\n \"dot\",\n \"activeDot\",\n \"legendType\",\n \"label\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n]\n\nexport const lineProperties: (keyof Omit<Recharts.LineProps, \"ref\">)[] = [\n \"type\",\n \"dataKey\",\n \"xAxisId\",\n \"yAxisId\",\n \"legendType\",\n \"dot\",\n \"activeDot\",\n \"label\",\n \"hide\",\n \"points\",\n \"stroke\",\n \"strokeWidth\",\n \"layout\",\n \"connectNulls\",\n \"unit\",\n \"name\",\n \"isAnimationActive\",\n \"animationBegin\",\n \"animationDuration\",\n \"animationEasing\",\n \"id\",\n \"onAnimationStart\",\n \"onAnimationEnd\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n \"strokeDasharray\",\n]\n\nexport const dotProperties: (keyof Omit<Recharts.DotProps, \"ref\">)[] = [\n \"cx\",\n \"cy\",\n \"r\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n]\n\nexport const polarGridProperties: (keyof Recharts.PolarGridProps)[] = [\n \"cx\",\n \"cy\",\n \"innerRadius\",\n \"outerRadius\",\n \"polarAngles\",\n \"polarRadius\",\n \"gridType\",\n]\n\nexport const polarAngleAxisProperties: (keyof Recharts.PolarAngleAxisProps)[] =\n [\n \"dataKey\",\n \"cx\",\n \"cy\",\n \"radius\",\n \"axisLine\",\n \"axisLineType\",\n \"tickLine\",\n \"tickSize\",\n \"tick\",\n \"ticks\",\n \"orient\",\n \"tickFormatter\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\nexport const polarRadiusAxisProperties: (keyof Recharts.PolarRadiusAxisProps)[] =\n [\n \"angle\",\n \"type\",\n \"allowDuplicatedCategory\",\n \"cx\",\n \"cy\",\n \"domain\",\n \"reversed\",\n \"label\",\n \"orientation\",\n \"axisLine\",\n \"tick\",\n \"tickSize\",\n \"tickFormatter\",\n \"tickCount\",\n \"scale\",\n \"onClick\",\n \"onMouseDown\",\n \"onMouseUp\",\n \"onMouseMove\",\n \"onMouseOver\",\n \"onMouseOut\",\n \"onMouseEnter\",\n \"onMouseLeave\",\n ]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,eAA2C;AAC3C,IAAAC,gBAAuC;AACvC,mBAAqC;;;ACDrC,kBAAuB;AAEvB,mBAA0C;AAEnC,IAAM,eACX,IAAI,WACJ,CAAC,cACC;AAAA,EACE,GAAG,OAAO;AAAA,IAAI,CAAC,cACb,uBAAS,KAAK,IAAI,YAAQ,oBAAO,KAAK,EAAE,KAAK;AAAA,EAC/C;AACF;;;ACqNG,IAAM,oBAA+D;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;AF9NO,IAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAc,gBAAgB,CAAC;AAAA,EAC/B,2BAA2B;AAAA,EAC3B;AACF,MAA4B;AAC1B,QAAM,EAAE,MAAM,QAAI,uBAAS;AAC3B,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAC5B,QAAM,sBAAkB;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,QAAI;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,sBAIF;AAAA,IACF,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB;AAAA,MACA,mBAAmB;AAAA,MACnB,oBAAoB,4BAA4B,KAAK;AAAA,MACrD,QAAQ;AAAA,QACN,WAAW;AAAA,MACb;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,iBAAiB,0BAA0B,YAAY;AAAA,EAC1D;AAEA,SAAO,EAAE,cAAc,gBAAgB,gBAAgB;AACzD;","names":["import_core","import_utils"]}
|
@@ -87,7 +87,7 @@ declare const useLineChart: ({ data, series, layoutType, withDots, withActiveDot
|
|
87
87
|
lineVars: {
|
88
88
|
__prefix?: string | undefined;
|
89
89
|
name: string;
|
90
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
90
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
91
91
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
92
92
|
}[];
|
93
93
|
setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
|
package/dist/use-line-chart.d.ts
CHANGED
@@ -87,7 +87,7 @@ declare const useLineChart: ({ data, series, layoutType, withDots, withActiveDot
|
|
87
87
|
lineVars: {
|
88
88
|
__prefix?: string | undefined;
|
89
89
|
name: string;
|
90
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
90
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
91
91
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
92
92
|
}[];
|
93
93
|
setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import * as react from 'react';
|
2
2
|
import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
|
3
3
|
import * as _yamada_ui_core from '@yamada-ui/core';
|
4
|
-
import { CSSUIObject } from '@yamada-ui/core';
|
4
|
+
import { CSSUIProps, CSSUIObject } from '@yamada-ui/core';
|
5
5
|
import * as _yamada_ui_utils from '@yamada-ui/utils';
|
6
6
|
import { Dict } from '@yamada-ui/utils';
|
7
7
|
import * as Recharts from 'recharts';
|
@@ -36,10 +36,18 @@ type UseRadarChartOptions = {
|
|
36
36
|
* Props passed down to recharts `PolarAngleAxis` component.
|
37
37
|
*/
|
38
38
|
polarAngleAxisProps?: PolarAngleAxisProps;
|
39
|
+
/**
|
40
|
+
* Props passed down to recharts `tick` of `PolarAngleAxis` component.
|
41
|
+
*/
|
42
|
+
polarAngleAxisTickProps?: CSSUIProps;
|
39
43
|
/**
|
40
44
|
* Props passed down to recharts `PolarRadiusAxis` component.
|
41
45
|
*/
|
42
46
|
polarRadiusAxisProps?: PolarRadiusAxisProps;
|
47
|
+
/**
|
48
|
+
* Props passed down to recharts `tick` of `PolarRadiusAxis` component.
|
49
|
+
*/
|
50
|
+
polarRadiusAxisTickProps?: CSSUIProps;
|
43
51
|
/**
|
44
52
|
* Determines whether dots should be displayed.
|
45
53
|
*
|
@@ -68,15 +76,19 @@ type UseRadarChartOptions = {
|
|
68
76
|
* A function to format values on Y axis and inside the tooltip.
|
69
77
|
*/
|
70
78
|
valueFormatter?: (value: number) => string;
|
79
|
+
/**
|
80
|
+
* Dash array for the grid lines and cursor. The first number is the length of the solid line section and the second number is the length of the interval.
|
81
|
+
*/
|
82
|
+
strokeDasharray?: string | number;
|
71
83
|
};
|
72
84
|
type UseRadarChartProps = UseRadarChartOptions & {
|
73
85
|
styles: Dict<CSSUIObject>;
|
74
86
|
};
|
75
|
-
declare const useRadarChart: ({ data, series, dataKey, withDots, withActiveDots, strokeWidth, fillOpacity, valueFormatter, styles, ...rest }: UseRadarChartProps) => {
|
87
|
+
declare const useRadarChart: ({ data, series, dataKey, withDots, withActiveDots, strokeWidth, fillOpacity, valueFormatter, strokeDasharray, styles, ...rest }: UseRadarChartProps) => {
|
76
88
|
radarVars: {
|
77
89
|
__prefix?: string | undefined;
|
78
90
|
name: string;
|
79
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
91
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
80
92
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
81
93
|
}[];
|
82
94
|
getRadarChartProps: ChartPropGetter<"div", recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import * as react from 'react';
|
2
2
|
import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
|
3
3
|
import * as _yamada_ui_core from '@yamada-ui/core';
|
4
|
-
import { CSSUIObject } from '@yamada-ui/core';
|
4
|
+
import { CSSUIProps, CSSUIObject } from '@yamada-ui/core';
|
5
5
|
import * as _yamada_ui_utils from '@yamada-ui/utils';
|
6
6
|
import { Dict } from '@yamada-ui/utils';
|
7
7
|
import * as Recharts from 'recharts';
|
@@ -36,10 +36,18 @@ type UseRadarChartOptions = {
|
|
36
36
|
* Props passed down to recharts `PolarAngleAxis` component.
|
37
37
|
*/
|
38
38
|
polarAngleAxisProps?: PolarAngleAxisProps;
|
39
|
+
/**
|
40
|
+
* Props passed down to recharts `tick` of `PolarAngleAxis` component.
|
41
|
+
*/
|
42
|
+
polarAngleAxisTickProps?: CSSUIProps;
|
39
43
|
/**
|
40
44
|
* Props passed down to recharts `PolarRadiusAxis` component.
|
41
45
|
*/
|
42
46
|
polarRadiusAxisProps?: PolarRadiusAxisProps;
|
47
|
+
/**
|
48
|
+
* Props passed down to recharts `tick` of `PolarRadiusAxis` component.
|
49
|
+
*/
|
50
|
+
polarRadiusAxisTickProps?: CSSUIProps;
|
43
51
|
/**
|
44
52
|
* Determines whether dots should be displayed.
|
45
53
|
*
|
@@ -68,15 +76,19 @@ type UseRadarChartOptions = {
|
|
68
76
|
* A function to format values on Y axis and inside the tooltip.
|
69
77
|
*/
|
70
78
|
valueFormatter?: (value: number) => string;
|
79
|
+
/**
|
80
|
+
* Dash array for the grid lines and cursor. The first number is the length of the solid line section and the second number is the length of the interval.
|
81
|
+
*/
|
82
|
+
strokeDasharray?: string | number;
|
71
83
|
};
|
72
84
|
type UseRadarChartProps = UseRadarChartOptions & {
|
73
85
|
styles: Dict<CSSUIObject>;
|
74
86
|
};
|
75
|
-
declare const useRadarChart: ({ data, series, dataKey, withDots, withActiveDots, strokeWidth, fillOpacity, valueFormatter, styles, ...rest }: UseRadarChartProps) => {
|
87
|
+
declare const useRadarChart: ({ data, series, dataKey, withDots, withActiveDots, strokeWidth, fillOpacity, valueFormatter, strokeDasharray, styles, ...rest }: UseRadarChartProps) => {
|
76
88
|
radarVars: {
|
77
89
|
__prefix?: string | undefined;
|
78
90
|
name: string;
|
79
|
-
token?: "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "
|
91
|
+
token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
|
80
92
|
value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
|
81
93
|
}[];
|
82
94
|
getRadarChartProps: ChartPropGetter<"div", recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
|
package/dist/use-radar-chart.js
CHANGED
@@ -154,6 +154,7 @@ var useRadarChart = ({
|
|
154
154
|
strokeWidth = 2,
|
155
155
|
fillOpacity = 0.4,
|
156
156
|
valueFormatter,
|
157
|
+
strokeDasharray,
|
157
158
|
styles,
|
158
159
|
...rest
|
159
160
|
}) => {
|
@@ -184,58 +185,16 @@ var useRadarChart = ({
|
|
184
185
|
],
|
185
186
|
[fillOpacity, radarColors]
|
186
187
|
);
|
187
|
-
const [
|
188
|
+
const [chartProps, radarChartClassName] = (0, import_react.useMemo)(
|
188
189
|
() => {
|
189
190
|
var _a2;
|
190
|
-
return (
|
191
|
-
(_a2 = rest.
|
192
|
-
|
193
|
-
);
|
194
|
-
},
|
195
|
-
[rest.polarAngleAxisProps]
|
196
|
-
);
|
197
|
-
const [polarRadiusAxisProps, polarRadiusAxisStyles] = (0, import_react.useMemo)(
|
198
|
-
() => {
|
199
|
-
var _a2;
|
200
|
-
return (0, import_utils2.splitObject)(
|
201
|
-
(_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {},
|
202
|
-
polarRadiusAxisProperties
|
203
|
-
);
|
191
|
+
return getComponentProps(
|
192
|
+
[(_a2 = rest.chartProps) != null ? _a2 : {}, radarChartProperties],
|
193
|
+
styles.chart
|
194
|
+
)(theme);
|
204
195
|
},
|
205
|
-
[rest.
|
196
|
+
[rest.chartProps, styles.chart, theme]
|
206
197
|
);
|
207
|
-
const [chartProps, radarChartClassName] = (0, import_react.useMemo)(() => {
|
208
|
-
const resolvedRadarChartProps = {
|
209
|
-
"& .recharts-polar-grid-concentric-polygon": { ...styles.polarGrid },
|
210
|
-
"& .recharts-polar-grid-concentric-circle": { ...styles.polarGrid },
|
211
|
-
"& .recharts-polar-angle-axis": {
|
212
|
-
...styles.polarAngleAxis,
|
213
|
-
...polarAngleAxisStyles
|
214
|
-
},
|
215
|
-
"& .recharts-polar-angle-axis-tick": { ...styles.polarAngleAxisTick },
|
216
|
-
"& .recharts-polar-radius-axis": {
|
217
|
-
...styles.polarRadiusAxis,
|
218
|
-
...polarRadiusAxisStyles
|
219
|
-
},
|
220
|
-
"& .recharts-polar-radius-axis-tick": { ...styles.polarRadiusAxisTick },
|
221
|
-
...rest.chartProps
|
222
|
-
};
|
223
|
-
return getComponentProps(
|
224
|
-
[resolvedRadarChartProps, radarChartProperties],
|
225
|
-
styles.chart
|
226
|
-
)(theme);
|
227
|
-
}, [
|
228
|
-
polarAngleAxisStyles,
|
229
|
-
polarRadiusAxisStyles,
|
230
|
-
rest.chartProps,
|
231
|
-
styles.chart,
|
232
|
-
styles.polarAngleAxis,
|
233
|
-
styles.polarAngleAxisTick,
|
234
|
-
styles.polarGrid,
|
235
|
-
styles.polarRadiusAxis,
|
236
|
-
styles.polarRadiusAxisTick,
|
237
|
-
theme
|
238
|
-
]);
|
239
198
|
const [polarGridProps, polarGridClassName] = (0, import_react.useMemo)(
|
240
199
|
() => {
|
241
200
|
var _a2;
|
@@ -246,6 +205,40 @@ var useRadarChart = ({
|
|
246
205
|
},
|
247
206
|
[rest.polarGridProps, styles.polarGrid, theme]
|
248
207
|
);
|
208
|
+
const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react.useMemo)(
|
209
|
+
() => {
|
210
|
+
var _a2;
|
211
|
+
return getComponentProps(
|
212
|
+
[(_a2 = rest.polarAngleAxisProps) != null ? _a2 : {}, polarAngleAxisProperties],
|
213
|
+
styles.polarAngleAxis
|
214
|
+
)(theme);
|
215
|
+
},
|
216
|
+
[rest.polarAngleAxisProps, styles.polarAngleAxis, theme]
|
217
|
+
);
|
218
|
+
const polarAngleAxisTickClassName = (0, import_react.useMemo)(
|
219
|
+
() => getClassName({
|
220
|
+
...styles.polarAngleAxisTick,
|
221
|
+
...rest.polarAngleAxisTickProps
|
222
|
+
})(theme),
|
223
|
+
[rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme]
|
224
|
+
);
|
225
|
+
const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react.useMemo)(
|
226
|
+
() => {
|
227
|
+
var _a2;
|
228
|
+
return getComponentProps(
|
229
|
+
[(_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {}, polarRadiusAxisProperties],
|
230
|
+
styles.polarRadiusAxis
|
231
|
+
)(theme);
|
232
|
+
},
|
233
|
+
[rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme]
|
234
|
+
);
|
235
|
+
const polarRadiusAxisTickClassName = (0, import_react.useMemo)(
|
236
|
+
() => getClassName({
|
237
|
+
...styles.polarRadiusAxisTick,
|
238
|
+
...rest.polarRadiusAxisTickProps
|
239
|
+
})(theme),
|
240
|
+
[rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme]
|
241
|
+
);
|
249
242
|
const [radarProps, radarClassName] = (0, import_react.useMemo)(() => {
|
250
243
|
const resolvedRadarProps = {
|
251
244
|
fillOpacity: "var(--ui-fill-opacity)",
|
@@ -343,7 +336,6 @@ var useRadarChart = ({
|
|
343
336
|
dimmed ? dimDotClassName : void 0
|
344
337
|
)(theme);
|
345
338
|
resolvedDot = {
|
346
|
-
// BUG: className is not applied.
|
347
339
|
className: (0, import_utils2.cx)("ui-radar-chart__dot", className),
|
348
340
|
fill: color,
|
349
341
|
r: 4,
|
@@ -412,20 +404,24 @@ var useRadarChart = ({
|
|
412
404
|
const getPolarGridProps = (0, import_react.useCallback)(
|
413
405
|
({ className, ...props } = {}, ref = null) => ({
|
414
406
|
ref,
|
415
|
-
// BUG: `.recharts-polar-grid-concentric-xxx` is not applied className.
|
416
407
|
className: (0, import_utils2.cx)(className, polarGridClassName),
|
408
|
+
strokeDasharray,
|
417
409
|
...props,
|
418
410
|
...polarGridProps
|
419
411
|
}),
|
420
|
-
[polarGridClassName, polarGridProps]
|
412
|
+
[polarGridClassName, polarGridProps, strokeDasharray]
|
421
413
|
);
|
422
414
|
const getPolarAngleAxisProps = (0, import_react.useCallback)(
|
423
415
|
({ className, ...props } = {}, ref = null) => ({
|
424
416
|
ref,
|
425
|
-
|
426
|
-
// className: cx(className, polarAngleAxisClassName),
|
427
|
-
className,
|
417
|
+
className: (0, import_utils2.cx)(className, polarAngleAxisClassName),
|
428
418
|
dataKey,
|
419
|
+
tick: {
|
420
|
+
className: (0, import_utils2.cx)(
|
421
|
+
"ui-radar-chart__polar-angle-axis-tick",
|
422
|
+
polarAngleAxisTickClassName
|
423
|
+
)
|
424
|
+
},
|
429
425
|
tickFormatter: valueFormatter,
|
430
426
|
tickSize: 16,
|
431
427
|
...props,
|
@@ -433,24 +429,30 @@ var useRadarChart = ({
|
|
433
429
|
}),
|
434
430
|
[
|
435
431
|
dataKey,
|
436
|
-
|
432
|
+
polarAngleAxisClassName,
|
437
433
|
polarAngleAxisProps,
|
434
|
+
polarAngleAxisTickClassName,
|
438
435
|
valueFormatter
|
439
436
|
]
|
440
437
|
);
|
441
438
|
const getPolarRadiusAxisProps = (0, import_react.useCallback)(
|
442
439
|
({ className, ...props } = {}, ref = null) => ({
|
443
440
|
ref,
|
444
|
-
|
445
|
-
|
446
|
-
|
441
|
+
className: (0, import_utils2.cx)(className, polarRadiusAxisClassName),
|
442
|
+
tick: {
|
443
|
+
className: (0, import_utils2.cx)(
|
444
|
+
"ui-radar-chart__polar-radius-axis-tick",
|
445
|
+
polarRadiusAxisTickClassName
|
446
|
+
)
|
447
|
+
},
|
447
448
|
tickFormatter: valueFormatter,
|
448
449
|
...props,
|
449
450
|
...polarRadiusAxisProps
|
450
451
|
}),
|
451
452
|
[
|
452
|
-
|
453
|
+
polarRadiusAxisClassName,
|
453
454
|
polarRadiusAxisProps,
|
455
|
+
polarRadiusAxisTickClassName,
|
454
456
|
valueFormatter
|
455
457
|
]
|
456
458
|
);
|