@yamada-ui/charts 1.0.7-dev-20240421014947 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/area-chart.js +27 -23
- package/dist/area-chart.js.map +1 -1
- package/dist/area-chart.mjs +11 -11
- package/dist/bar-chart.js +27 -23
- package/dist/bar-chart.js.map +1 -1
- package/dist/bar-chart.mjs +11 -11
- package/dist/chart-legend.js +24 -21
- package/dist/chart-legend.js.map +1 -1
- package/dist/chart-legend.mjs +3 -3
- package/dist/chart-tooltip.d.mts +1 -1
- package/dist/chart-tooltip.d.ts +1 -1
- package/dist/chart-tooltip.js +3 -2
- package/dist/chart-tooltip.js.map +1 -1
- package/dist/chart-tooltip.mjs +3 -3
- package/dist/chart.types.d.mts +14 -1
- package/dist/chart.types.d.ts +14 -1
- package/dist/chart.types.js.map +1 -1
- package/dist/{chunk-VRRNF4N5.mjs → chunk-45QHUJKU.mjs} +14 -14
- package/dist/chunk-4WX5YS7M.mjs +179 -0
- package/dist/chunk-4WX5YS7M.mjs.map +1 -0
- package/dist/{chunk-OOYQ4AGM.mjs → chunk-5TVYPA64.mjs} +14 -14
- package/dist/chunk-BPR7YL3O.mjs +179 -0
- package/dist/chunk-BPR7YL3O.mjs.map +1 -0
- package/dist/{chunk-4C4GNOFE.mjs → chunk-E2I2XAZ6.mjs} +14 -14
- package/dist/{chunk-FARS4FTP.mjs → chunk-HDOYOHLA.mjs} +2 -2
- package/dist/{chunk-Z74O4FHB.mjs → chunk-KT4YOMM4.mjs} +2 -2
- package/dist/{chunk-32BO2QEP.mjs → chunk-LBC2B6UX.mjs} +5 -4
- package/dist/chunk-LBC2B6UX.mjs.map +1 -0
- package/dist/{chunk-3CY3IFRN.mjs → chunk-LGMALZCN.mjs} +2 -2
- package/dist/chunk-LHI57S6P.mjs +215 -0
- package/dist/chunk-LHI57S6P.mjs.map +1 -0
- package/dist/{chunk-LXZCGIND.mjs → chunk-LM2DQK2P.mjs} +2 -2
- package/dist/{chunk-FGDWJUA3.mjs → chunk-MWPICUEW.mjs} +2 -2
- package/dist/chunk-NEGDEVRX.mjs +53 -0
- package/dist/chunk-NEGDEVRX.mjs.map +1 -0
- package/dist/{chunk-5QCKM3B3.mjs → chunk-OSNFBRHL.mjs} +37 -1
- package/dist/chunk-OSNFBRHL.mjs.map +1 -0
- package/dist/{chunk-NCR54J3C.mjs → chunk-OW7SOTEF.mjs} +7 -7
- package/dist/{chunk-AURFFNDQ.mjs → chunk-P7AFSM5W.mjs} +2 -2
- package/dist/{chunk-XZVEEDQN.mjs → chunk-QZ5OXZ6Z.mjs} +2 -2
- package/dist/{chunk-HBC7HBKQ.mjs → chunk-RN6PXJAD.mjs} +2 -2
- package/dist/{chunk-VGB36NOI.mjs → chunk-STBYRLC5.mjs} +2 -2
- package/dist/{chunk-RXWD2EJ2.mjs → chunk-XIFDRM7J.mjs} +2 -2
- package/dist/donut-chart.d.mts +31 -0
- package/dist/donut-chart.d.ts +31 -0
- package/dist/donut-chart.js +702 -0
- package/dist/donut-chart.js.map +1 -0
- package/dist/donut-chart.mjs +16 -0
- package/dist/donut-chart.mjs.map +1 -0
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +552 -23
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +26 -17
- package/dist/line-chart.js +27 -23
- package/dist/line-chart.js.map +1 -1
- package/dist/line-chart.mjs +11 -11
- package/dist/pie-chart.d.mts +49 -0
- package/dist/pie-chart.d.ts +49 -0
- package/dist/pie-chart.js +702 -0
- package/dist/pie-chart.js.map +1 -0
- package/dist/pie-chart.mjs +16 -0
- package/dist/pie-chart.mjs.map +1 -0
- package/dist/radar-chart.js +27 -23
- package/dist/radar-chart.js.map +1 -1
- package/dist/radar-chart.mjs +8 -8
- package/dist/rechart-properties.d.mts +3 -1
- package/dist/rechart-properties.d.ts +3 -1
- package/dist/rechart-properties.js +38 -0
- package/dist/rechart-properties.js.map +1 -1
- package/dist/rechart-properties.mjs +5 -1
- package/dist/use-area-chart.d.mts +1 -1
- package/dist/use-area-chart.d.ts +1 -1
- package/dist/use-area-chart.js.map +1 -1
- package/dist/use-area-chart.mjs +2 -2
- package/dist/use-bar-chart.d.mts +1 -1
- package/dist/use-bar-chart.d.ts +1 -1
- package/dist/use-bar-chart.js.map +1 -1
- package/dist/use-bar-chart.mjs +2 -2
- package/dist/use-chart-axis.js.map +1 -1
- package/dist/use-chart-axis.mjs +2 -2
- package/dist/use-chart-grid.js.map +1 -1
- package/dist/use-chart-grid.mjs +2 -2
- package/dist/use-chart-legend.js.map +1 -1
- package/dist/use-chart-legend.mjs +2 -2
- package/dist/use-chart-reference-line.js.map +1 -1
- package/dist/use-chart-reference-line.mjs +2 -2
- package/dist/use-chart-tooltip.js.map +1 -1
- package/dist/use-chart-tooltip.mjs +2 -2
- package/dist/use-chart.js.map +1 -1
- package/dist/use-chart.mjs +2 -2
- package/dist/use-line-chart.d.mts +1 -1
- package/dist/use-line-chart.d.ts +1 -1
- package/dist/use-line-chart.js.map +1 -1
- package/dist/use-line-chart.mjs +2 -2
- package/dist/use-pie-chart.d.mts +112 -0
- package/dist/use-pie-chart.d.ts +112 -0
- package/dist/use-pie-chart.js +282 -0
- package/dist/use-pie-chart.js.map +1 -0
- package/dist/use-pie-chart.mjs +10 -0
- package/dist/use-pie-chart.mjs.map +1 -0
- package/dist/use-radar-chart.d.mts +1 -1
- package/dist/use-radar-chart.d.ts +1 -1
- package/dist/use-radar-chart.js.map +1 -1
- package/dist/use-radar-chart.mjs +2 -2
- package/package.json +5 -5
- package/dist/chunk-32BO2QEP.mjs.map +0 -1
- package/dist/chunk-5QCKM3B3.mjs.map +0 -1
- package/dist/chunk-RTTZPOUT.mjs +0 -50
- package/dist/chunk-RTTZPOUT.mjs.map +0 -1
- /package/dist/{chunk-VRRNF4N5.mjs.map → chunk-45QHUJKU.mjs.map} +0 -0
- /package/dist/{chunk-OOYQ4AGM.mjs.map → chunk-5TVYPA64.mjs.map} +0 -0
- /package/dist/{chunk-4C4GNOFE.mjs.map → chunk-E2I2XAZ6.mjs.map} +0 -0
- /package/dist/{chunk-FARS4FTP.mjs.map → chunk-HDOYOHLA.mjs.map} +0 -0
- /package/dist/{chunk-Z74O4FHB.mjs.map → chunk-KT4YOMM4.mjs.map} +0 -0
- /package/dist/{chunk-3CY3IFRN.mjs.map → chunk-LGMALZCN.mjs.map} +0 -0
- /package/dist/{chunk-LXZCGIND.mjs.map → chunk-LM2DQK2P.mjs.map} +0 -0
- /package/dist/{chunk-FGDWJUA3.mjs.map → chunk-MWPICUEW.mjs.map} +0 -0
- /package/dist/{chunk-NCR54J3C.mjs.map → chunk-OW7SOTEF.mjs.map} +0 -0
- /package/dist/{chunk-AURFFNDQ.mjs.map → chunk-P7AFSM5W.mjs.map} +0 -0
- /package/dist/{chunk-XZVEEDQN.mjs.map → chunk-QZ5OXZ6Z.mjs.map} +0 -0
- /package/dist/{chunk-HBC7HBKQ.mjs.map → chunk-RN6PXJAD.mjs.map} +0 -0
- /package/dist/{chunk-VGB36NOI.mjs.map → chunk-STBYRLC5.mjs.map} +0 -0
- /package/dist/{chunk-RXWD2EJ2.mjs.map → chunk-XIFDRM7J.mjs.map} +0 -0
package/dist/chart.types.d.ts
CHANGED
@@ -10,10 +10,12 @@ type AreaChartType = "default" | "stacked" | "percent" | "split";
|
|
10
10
|
type BarChartType = Exclude<AreaChartType, "split">;
|
11
11
|
type ChartAxisType = "x" | "y" | "xy" | "none";
|
12
12
|
type ChartCurveType = "bump" | "linear" | "natural" | "monotone" | "step" | "stepBefore" | "stepAfter";
|
13
|
+
type TooltipDataSourceType = "segment" | "all";
|
13
14
|
type AreaChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.AreaChart>>;
|
14
15
|
type BarChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.BarChart>>;
|
15
16
|
type LineChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.LineChart>>;
|
16
17
|
type RadarChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.RadarChart>>;
|
18
|
+
type PieChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.PieChart>>;
|
17
19
|
type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>;
|
18
20
|
type ResponsiveContainerProps = Merge<CSSUIProps, Omit<Recharts.ResponsiveContainerProps, "children">>;
|
19
21
|
type AreaProps = Merge<Merge<CSSUIProps, Recharts.AreaProps>, {
|
@@ -43,6 +45,17 @@ type RadarProps = Merge<Merge<CSSUIProps, Recharts.RadarProps>, {
|
|
43
45
|
dimDot?: DotProps;
|
44
46
|
dimRadar?: Partial<RadarProps>;
|
45
47
|
}>;
|
48
|
+
type PieProps = Merge<Merge<CSSUIProps, Recharts.PieProps>, {
|
49
|
+
activeShape?: Merge<SVGProps<SVGPathElement>, CSSUIProps>;
|
50
|
+
inactiveShape?: Merge<SVGProps<SVGPathElement>, CSSUIProps>;
|
51
|
+
label?: CSSUIProps;
|
52
|
+
labelLine?: CSSUIProps;
|
53
|
+
}>;
|
54
|
+
type CellProps = Merge<CSSUIProps, {
|
55
|
+
name: string;
|
56
|
+
value: number;
|
57
|
+
dimCell?: Partial<CellProps>;
|
58
|
+
}>;
|
46
59
|
type DotProps = Merge<Omit<Recharts.DotProps, "ref">, CSSUIProps>;
|
47
60
|
type XAxisProps = Merge<Merge<CSSUIProps, Recharts.XAxisProps>, {
|
48
61
|
color?: CSSUIProps["color"];
|
@@ -62,4 +75,4 @@ type PolarAngleAxisProps = Merge<Recharts.PolarAngleAxisProps, CSSUIProps>;
|
|
62
75
|
type PolarRadiusAxisProps = Merge<CSSUIProps, Recharts.PolarRadiusAxisProps>;
|
63
76
|
type ChartTooltip = ReactElement | ((props: Recharts.TooltipProps<number | string | Array<number | string>, number | string>) => ReactNode);
|
64
77
|
|
65
|
-
export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartPropGetter, ChartTooltip, DotProps, GridProps, LegendProps, LineChartProps, LineProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipProps, XAxisProps, YAxisProps };
|
78
|
+
export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, CellProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartPropGetter, ChartTooltip, DotProps, GridProps, LegendProps, LineChartProps, LineProps, PieChartProps, PieProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipDataSourceType, TooltipProps, XAxisProps, YAxisProps };
|
package/dist/chart.types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/chart.types.ts"],"sourcesContent":["import type { As, CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ComponentPropsWithoutRef,\n ReactElement,\n ReactNode,\n SVGProps,\n} from \"react\"\nimport type * as Recharts from \"recharts\"\n\nexport type ChartPropGetter<\n Y extends As = \"div\",\n M = undefined,\n D = undefined,\n> = (props?: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type RequiredChartPropGetter<\n Y extends As = \"div\",\n M = undefined,\n D = undefined,\n> = (props: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type ChartLayoutType = \"horizontal\" | \"vertical\"\nexport type AreaChartType = \"default\" | \"stacked\" | \"percent\" | \"split\"\nexport type BarChartType = Exclude<AreaChartType, \"split\">\nexport type ChartAxisType = \"x\" | \"y\" | \"xy\" | \"none\"\nexport type ChartCurveType =\n | \"bump\"\n | \"linear\"\n | \"natural\"\n | \"monotone\"\n | \"step\"\n | \"stepBefore\"\n | \"stepAfter\"\n\nexport type AreaChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.AreaChart>\n>\nexport type BarChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.BarChart>\n>\nexport type LineChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.LineChart>\n>\nexport type RadarChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.RadarChart>\n>\nexport type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>\nexport type ResponsiveContainerProps = Merge<\n CSSUIProps,\n Omit<Recharts.ResponsiveContainerProps, \"children\">\n>\nexport type AreaProps = Merge<\n Merge<CSSUIProps, Recharts.AreaProps>,\n {\n color: CSSUIProps[\"color\"]\n dot?: DotProps\n activeDot?: DotProps\n dimDot?: DotProps\n dimArea?: Partial<AreaProps>\n }\n>\nexport type LineProps = Merge<\n Merge<CSSUIProps, Recharts.LineProps>,\n {\n color: CSSUIProps[\"color\"]\n activeDot?: DotProps\n dot?: DotProps\n dimDot?: DotProps\n dimLine?: Partial<LineProps>\n }\n>\nexport type BarProps = Merge<\n Merge<CSSUIProps, Recharts.BarProps>,\n {\n color: CSSUIProps[\"color\"]\n activeBar?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n background?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n dimBar?: Partial<BarProps>\n }\n>\nexport type RadarProps = Merge<\n Merge<CSSUIProps, Recharts.RadarProps>,\n {\n color: CSSUIProps[\"color\"]\n dot?: DotProps\n activeDot?: DotProps\n dimDot?: DotProps\n dimRadar?: Partial<RadarProps>\n }\n>\nexport type DotProps = Merge<Omit<Recharts.DotProps, \"ref\">, CSSUIProps>\nexport type XAxisProps = Merge<\n Merge<CSSUIProps, Recharts.XAxisProps>,\n {\n color?: CSSUIProps[\"color\"]\n stroke?: CSSUIProps[\"color\"]\n fill?: CSSUIProps[\"color\"]\n }\n>\nexport type YAxisProps = Merge<\n Merge<CSSUIProps, Recharts.YAxisProps>,\n { color?: CSSUIProps[\"color\"] }\n>\nexport type LegendProps = Merge<CSSUIProps, Omit<Recharts.LegendProps, \"ref\">>\nexport type TooltipProps = Merge<\n Merge<CSSUIProps, Omit<Recharts.TooltipProps<any, any>, \"ref\">>,\n { cursor?: CSSUIProps }\n>\nexport type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>\nexport type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>\nexport type PolarAngleAxisProps = Merge<\n Recharts.PolarAngleAxisProps,\n CSSUIProps\n>\nexport type PolarRadiusAxisProps = Merge<\n CSSUIProps,\n Recharts.PolarRadiusAxisProps\n>\n\nexport type ChartTooltip =\n | ReactElement\n | ((\n props: Recharts.TooltipProps<\n number | string | Array<number | string>,\n number | string\n >,\n ) => ReactNode)\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|
1
|
+
{"version":3,"sources":["../src/chart.types.ts"],"sourcesContent":["import type { As, CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n ComponentPropsWithoutRef,\n ReactElement,\n ReactNode,\n SVGProps,\n} from \"react\"\nimport type * as Recharts from \"recharts\"\n\nexport type ChartPropGetter<\n Y extends As = \"div\",\n M = undefined,\n D = undefined,\n> = (props?: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type RequiredChartPropGetter<\n Y extends As = \"div\",\n M = undefined,\n D = undefined,\n> = (props: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type ChartLayoutType = \"horizontal\" | \"vertical\"\nexport type AreaChartType = \"default\" | \"stacked\" | \"percent\" | \"split\"\nexport type BarChartType = Exclude<AreaChartType, \"split\">\nexport type ChartAxisType = \"x\" | \"y\" | \"xy\" | \"none\"\nexport type ChartCurveType =\n | \"bump\"\n | \"linear\"\n | \"natural\"\n | \"monotone\"\n | \"step\"\n | \"stepBefore\"\n | \"stepAfter\"\nexport type TooltipDataSourceType = \"segment\" | \"all\"\n\nexport type AreaChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.AreaChart>\n>\nexport type BarChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.BarChart>\n>\nexport type LineChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.LineChart>\n>\nexport type RadarChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.RadarChart>\n>\nexport type PieChartProps = Merge<\n CSSUIProps,\n ComponentPropsWithoutRef<typeof Recharts.PieChart>\n>\nexport type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>\nexport type ResponsiveContainerProps = Merge<\n CSSUIProps,\n Omit<Recharts.ResponsiveContainerProps, \"children\">\n>\nexport type AreaProps = Merge<\n Merge<CSSUIProps, Recharts.AreaProps>,\n {\n color: CSSUIProps[\"color\"]\n dot?: DotProps\n activeDot?: DotProps\n dimDot?: DotProps\n dimArea?: Partial<AreaProps>\n }\n>\nexport type LineProps = Merge<\n Merge<CSSUIProps, Recharts.LineProps>,\n {\n color: CSSUIProps[\"color\"]\n activeDot?: DotProps\n dot?: DotProps\n dimDot?: DotProps\n dimLine?: Partial<LineProps>\n }\n>\nexport type BarProps = Merge<\n Merge<CSSUIProps, Recharts.BarProps>,\n {\n color: CSSUIProps[\"color\"]\n activeBar?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n background?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n dimBar?: Partial<BarProps>\n }\n>\nexport type RadarProps = Merge<\n Merge<CSSUIProps, Recharts.RadarProps>,\n {\n color: CSSUIProps[\"color\"]\n dot?: DotProps\n activeDot?: DotProps\n dimDot?: DotProps\n dimRadar?: Partial<RadarProps>\n }\n>\nexport type PieProps = Merge<\n Merge<CSSUIProps, Recharts.PieProps>,\n {\n activeShape?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n inactiveShape?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n label?: CSSUIProps\n labelLine?: CSSUIProps\n }\n>\nexport type CellProps = Merge<\n CSSUIProps,\n {\n name: string\n value: number\n dimCell?: Partial<CellProps>\n }\n>\nexport type DotProps = Merge<Omit<Recharts.DotProps, \"ref\">, CSSUIProps>\nexport type XAxisProps = Merge<\n Merge<CSSUIProps, Recharts.XAxisProps>,\n {\n color?: CSSUIProps[\"color\"]\n stroke?: CSSUIProps[\"color\"]\n fill?: CSSUIProps[\"color\"]\n }\n>\nexport type YAxisProps = Merge<\n Merge<CSSUIProps, Recharts.YAxisProps>,\n { color?: CSSUIProps[\"color\"] }\n>\nexport type LegendProps = Merge<CSSUIProps, Omit<Recharts.LegendProps, \"ref\">>\nexport type TooltipProps = Merge<\n Merge<CSSUIProps, Omit<Recharts.TooltipProps<any, any>, \"ref\">>,\n { cursor?: CSSUIProps }\n>\nexport type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>\nexport type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>\nexport type PolarAngleAxisProps = Merge<\n Recharts.PolarAngleAxisProps,\n CSSUIProps\n>\nexport type PolarRadiusAxisProps = Merge<\n CSSUIProps,\n Recharts.PolarRadiusAxisProps\n>\n\nexport type ChartTooltip =\n | ReactElement\n | ((\n props: Recharts.TooltipProps<\n number | string | Array<number | string>,\n number | string\n >,\n ) => ReactNode)\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|
@@ -1,32 +1,32 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useBarChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-STBYRLC5.mjs";
|
5
|
+
import {
|
6
|
+
useChartAxis
|
7
|
+
} from "./chunk-P7AFSM5W.mjs";
|
8
|
+
import {
|
9
|
+
useChartGrid
|
10
|
+
} from "./chunk-LGMALZCN.mjs";
|
5
11
|
import {
|
6
12
|
useChartReferenceLine
|
7
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-MWPICUEW.mjs";
|
8
14
|
import {
|
9
15
|
useChartLegend
|
10
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-LM2DQK2P.mjs";
|
11
17
|
import {
|
12
18
|
useChartTooltip
|
13
|
-
} from "./chunk-
|
14
|
-
import {
|
15
|
-
useChartAxis
|
16
|
-
} from "./chunk-AURFFNDQ.mjs";
|
17
|
-
import {
|
18
|
-
useChartGrid
|
19
|
-
} from "./chunk-3CY3IFRN.mjs";
|
19
|
+
} from "./chunk-RN6PXJAD.mjs";
|
20
20
|
import {
|
21
21
|
ChartLegend
|
22
|
-
} from "./chunk-
|
22
|
+
} from "./chunk-NEGDEVRX.mjs";
|
23
23
|
import {
|
24
24
|
ChartTooltip
|
25
|
-
} from "./chunk-
|
25
|
+
} from "./chunk-LBC2B6UX.mjs";
|
26
26
|
import {
|
27
27
|
ChartProvider,
|
28
28
|
useChart
|
29
|
-
} from "./chunk-
|
29
|
+
} from "./chunk-XIFDRM7J.mjs";
|
30
30
|
|
31
31
|
// src/bar-chart.tsx
|
32
32
|
import {
|
@@ -222,4 +222,4 @@ var BarChart = forwardRef((props, ref) => {
|
|
222
222
|
export {
|
223
223
|
BarChart
|
224
224
|
};
|
225
|
-
//# sourceMappingURL=chunk-
|
225
|
+
//# sourceMappingURL=chunk-45QHUJKU.mjs.map
|
@@ -0,0 +1,179 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
usePieChart
|
4
|
+
} from "./chunk-LHI57S6P.mjs";
|
5
|
+
import {
|
6
|
+
useChartLegend
|
7
|
+
} from "./chunk-LM2DQK2P.mjs";
|
8
|
+
import {
|
9
|
+
useChartTooltip
|
10
|
+
} from "./chunk-RN6PXJAD.mjs";
|
11
|
+
import {
|
12
|
+
ChartLegend
|
13
|
+
} from "./chunk-NEGDEVRX.mjs";
|
14
|
+
import {
|
15
|
+
ChartTooltip
|
16
|
+
} from "./chunk-LBC2B6UX.mjs";
|
17
|
+
import {
|
18
|
+
ChartProvider,
|
19
|
+
useChart
|
20
|
+
} from "./chunk-XIFDRM7J.mjs";
|
21
|
+
|
22
|
+
// src/pie-chart.tsx
|
23
|
+
import {
|
24
|
+
forwardRef,
|
25
|
+
omitThemeProps,
|
26
|
+
ui,
|
27
|
+
useMultiComponentStyle
|
28
|
+
} from "@yamada-ui/core";
|
29
|
+
import { cx } from "@yamada-ui/utils";
|
30
|
+
import { useMemo } from "react";
|
31
|
+
import {
|
32
|
+
Cell,
|
33
|
+
Legend,
|
34
|
+
Pie,
|
35
|
+
PieChart as RechartsPieChart,
|
36
|
+
ResponsiveContainer,
|
37
|
+
Tooltip
|
38
|
+
} from "recharts";
|
39
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
40
|
+
var PieChart = forwardRef((props, ref) => {
|
41
|
+
const [styles, mergedProps] = useMultiComponentStyle("PieChart", props);
|
42
|
+
const {
|
43
|
+
className,
|
44
|
+
data,
|
45
|
+
pieProps,
|
46
|
+
chartProps,
|
47
|
+
cellProps,
|
48
|
+
containerProps,
|
49
|
+
withTooltip = true,
|
50
|
+
withLegend = false,
|
51
|
+
tooltipProps,
|
52
|
+
tooltipAnimationDuration,
|
53
|
+
tooltipDataSource = "all",
|
54
|
+
valueFormatter,
|
55
|
+
unit,
|
56
|
+
innerRadius,
|
57
|
+
outerRadius,
|
58
|
+
paddingAngle,
|
59
|
+
startAngle,
|
60
|
+
endAngle,
|
61
|
+
withLabels,
|
62
|
+
withLabelLines,
|
63
|
+
strokeWidth,
|
64
|
+
legendProps,
|
65
|
+
...rest
|
66
|
+
} = omitThemeProps(mergedProps);
|
67
|
+
const {
|
68
|
+
pieVars,
|
69
|
+
getPieProps,
|
70
|
+
getPieChartProps,
|
71
|
+
getCellProps,
|
72
|
+
setHighlightedArea
|
73
|
+
} = usePieChart({
|
74
|
+
data,
|
75
|
+
pieProps,
|
76
|
+
chartProps,
|
77
|
+
cellProps,
|
78
|
+
innerRadius,
|
79
|
+
outerRadius,
|
80
|
+
paddingAngle,
|
81
|
+
startAngle,
|
82
|
+
endAngle,
|
83
|
+
strokeWidth,
|
84
|
+
withLabels,
|
85
|
+
withLabelLines,
|
86
|
+
styles
|
87
|
+
});
|
88
|
+
const { getContainerProps } = useChart({ containerProps });
|
89
|
+
const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
|
90
|
+
tooltipProps,
|
91
|
+
tooltipAnimationDuration,
|
92
|
+
styles
|
93
|
+
});
|
94
|
+
const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
|
95
|
+
legendProps
|
96
|
+
});
|
97
|
+
const cells = useMemo(
|
98
|
+
() => data.map(({ name }, index) => /* @__PURE__ */ jsx(
|
99
|
+
Cell,
|
100
|
+
{
|
101
|
+
...getCellProps({ index, className: "ui-pie-chart__cell" })
|
102
|
+
},
|
103
|
+
`pie-cell-${name}`
|
104
|
+
)),
|
105
|
+
[data, getCellProps]
|
106
|
+
);
|
107
|
+
return /* @__PURE__ */ jsx(ChartProvider, { value: { styles }, children: /* @__PURE__ */ jsx(
|
108
|
+
ui.div,
|
109
|
+
{
|
110
|
+
ref,
|
111
|
+
className: cx("ui-pie-chart", className),
|
112
|
+
var: pieVars,
|
113
|
+
__css: { maxW: "full", ...styles.container },
|
114
|
+
...rest,
|
115
|
+
children: /* @__PURE__ */ jsx(
|
116
|
+
ResponsiveContainer,
|
117
|
+
{
|
118
|
+
...getContainerProps({ className: "ui-pie-chart__container" }),
|
119
|
+
children: /* @__PURE__ */ jsxs(
|
120
|
+
RechartsPieChart,
|
121
|
+
{
|
122
|
+
...getPieChartProps({ className: "ui-pie-chart__chart" }),
|
123
|
+
children: [
|
124
|
+
/* @__PURE__ */ jsx(
|
125
|
+
Pie,
|
126
|
+
{
|
127
|
+
...getPieProps({
|
128
|
+
className: "ui-pie-chart__pie",
|
129
|
+
labelClassName: "ui-pie-chart__label",
|
130
|
+
labelLineClassName: "ui-pie-chart__label-line"
|
131
|
+
}),
|
132
|
+
children: cells
|
133
|
+
}
|
134
|
+
),
|
135
|
+
withLegend ? /* @__PURE__ */ jsx(
|
136
|
+
Legend,
|
137
|
+
{
|
138
|
+
content: ({ payload }) => /* @__PURE__ */ jsx(
|
139
|
+
ChartLegend,
|
140
|
+
{
|
141
|
+
className: "ui-pie-chart__legend",
|
142
|
+
payload,
|
143
|
+
onHighlight: setHighlightedArea,
|
144
|
+
...computedLegendProps
|
145
|
+
}
|
146
|
+
),
|
147
|
+
...getLegendProps()
|
148
|
+
}
|
149
|
+
) : null,
|
150
|
+
withTooltip ? /* @__PURE__ */ jsx(
|
151
|
+
Tooltip,
|
152
|
+
{
|
153
|
+
content: ({ label, payload }) => /* @__PURE__ */ jsx(
|
154
|
+
ChartTooltip,
|
155
|
+
{
|
156
|
+
className: "ui-pie-chart__tooltip",
|
157
|
+
label,
|
158
|
+
payload: tooltipDataSource === "segment" ? payload : data,
|
159
|
+
valueFormatter,
|
160
|
+
unit,
|
161
|
+
...computedTooltipProps
|
162
|
+
}
|
163
|
+
),
|
164
|
+
...getTooltipProps()
|
165
|
+
}
|
166
|
+
) : null
|
167
|
+
]
|
168
|
+
}
|
169
|
+
)
|
170
|
+
}
|
171
|
+
)
|
172
|
+
}
|
173
|
+
) });
|
174
|
+
});
|
175
|
+
|
176
|
+
export {
|
177
|
+
PieChart
|
178
|
+
};
|
179
|
+
//# sourceMappingURL=chunk-4WX5YS7M.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/pie-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n Cell,\n Legend,\n Pie,\n PieChart as RechartsPieChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\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 {\n useChartTooltip,\n type UseChartTooltipOptions,\n} from \"./use-chart-tooltip\"\nimport type { UsePieChartOptions } from \"./use-pie-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ntype PieChartOptions = {\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 which data is displayed in the tooltip.\n *\n * @default 'all'\n */\n tooltipDataSource?: TooltipDataSourceType\n /**\n * A function to format values inside the tooltip\n */\n valueFormatter?: (value: number) => string\n /**\n * Unit displayed next to each tick in y-axis.\n */\n unit?: string\n}\n\nexport type PieChartProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"pieChart\"> &\n PieChartOptions &\n UsePieChartOptions &\n UseChartTooltipOptions &\n UseChartLegendProps &\n UseChartProps\n\n/**\n * `PieChart` is a component for drawing pie charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/pie-chart\n */\nexport const PieChart = forwardRef<PieChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"PieChart\", props)\n const {\n className,\n data,\n pieProps,\n chartProps,\n cellProps,\n containerProps,\n withTooltip = true,\n withLegend = false,\n tooltipProps,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n valueFormatter,\n unit,\n innerRadius,\n outerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n withLabelLines,\n strokeWidth,\n legendProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n } = usePieChart({\n data,\n pieProps,\n chartProps,\n cellProps,\n innerRadius,\n outerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n strokeWidth,\n withLabels,\n withLabelLines,\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 cells = useMemo(\n () =>\n data.map(({ name }, index) => (\n <Cell\n key={`pie-cell-${name}`}\n {...getCellProps({ index, className: \"ui-pie-chart__cell\" })}\n />\n )),\n [data, getCellProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pie-chart\", className)}\n var={pieVars}\n __css={{ maxW: \"full\", ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-pie-chart__container\" })}\n >\n <RechartsPieChart\n {...getPieChartProps({ className: \"ui-pie-chart__chart\" })}\n >\n <Pie\n {...getPieProps({\n className: \"ui-pie-chart__pie\",\n labelClassName: \"ui-pie-chart__label\",\n labelLineClassName: \"ui-pie-chart__label-line\",\n })}\n >\n {cells}\n </Pie>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-pie-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-pie-chart__tooltip\"\n label={label}\n payload={tooltipDataSource === \"segment\" ? payload : data}\n valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsPieChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":[]}
|
@@ -1,38 +1,38 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useAreaChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-HDOYOHLA.mjs";
|
5
5
|
import {
|
6
6
|
AreaGradient
|
7
7
|
} from "./chunk-MSIOYYWR.mjs";
|
8
8
|
import {
|
9
9
|
AreaSplit
|
10
10
|
} from "./chunk-PNE3JG54.mjs";
|
11
|
+
import {
|
12
|
+
useChartAxis
|
13
|
+
} from "./chunk-P7AFSM5W.mjs";
|
14
|
+
import {
|
15
|
+
useChartGrid
|
16
|
+
} from "./chunk-LGMALZCN.mjs";
|
11
17
|
import {
|
12
18
|
useChartReferenceLine
|
13
|
-
} from "./chunk-
|
19
|
+
} from "./chunk-MWPICUEW.mjs";
|
14
20
|
import {
|
15
21
|
useChartLegend
|
16
|
-
} from "./chunk-
|
22
|
+
} from "./chunk-LM2DQK2P.mjs";
|
17
23
|
import {
|
18
24
|
useChartTooltip
|
19
|
-
} from "./chunk-
|
20
|
-
import {
|
21
|
-
useChartAxis
|
22
|
-
} from "./chunk-AURFFNDQ.mjs";
|
23
|
-
import {
|
24
|
-
useChartGrid
|
25
|
-
} from "./chunk-3CY3IFRN.mjs";
|
25
|
+
} from "./chunk-RN6PXJAD.mjs";
|
26
26
|
import {
|
27
27
|
ChartLegend
|
28
|
-
} from "./chunk-
|
28
|
+
} from "./chunk-NEGDEVRX.mjs";
|
29
29
|
import {
|
30
30
|
ChartTooltip
|
31
|
-
} from "./chunk-
|
31
|
+
} from "./chunk-LBC2B6UX.mjs";
|
32
32
|
import {
|
33
33
|
ChartProvider,
|
34
34
|
useChart
|
35
|
-
} from "./chunk-
|
35
|
+
} from "./chunk-XIFDRM7J.mjs";
|
36
36
|
|
37
37
|
// src/area-chart.tsx
|
38
38
|
import {
|
@@ -253,4 +253,4 @@ var AreaChart = forwardRef((props, ref) => {
|
|
253
253
|
export {
|
254
254
|
AreaChart
|
255
255
|
};
|
256
|
-
//# sourceMappingURL=chunk-
|
256
|
+
//# sourceMappingURL=chunk-5TVYPA64.mjs.map
|
@@ -0,0 +1,179 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
usePieChart
|
4
|
+
} from "./chunk-LHI57S6P.mjs";
|
5
|
+
import {
|
6
|
+
useChartLegend
|
7
|
+
} from "./chunk-LM2DQK2P.mjs";
|
8
|
+
import {
|
9
|
+
useChartTooltip
|
10
|
+
} from "./chunk-RN6PXJAD.mjs";
|
11
|
+
import {
|
12
|
+
ChartLegend
|
13
|
+
} from "./chunk-NEGDEVRX.mjs";
|
14
|
+
import {
|
15
|
+
ChartTooltip
|
16
|
+
} from "./chunk-LBC2B6UX.mjs";
|
17
|
+
import {
|
18
|
+
ChartProvider,
|
19
|
+
useChart
|
20
|
+
} from "./chunk-XIFDRM7J.mjs";
|
21
|
+
|
22
|
+
// src/donut-chart.tsx
|
23
|
+
import {
|
24
|
+
forwardRef,
|
25
|
+
omitThemeProps,
|
26
|
+
ui,
|
27
|
+
useMultiComponentStyle
|
28
|
+
} from "@yamada-ui/core";
|
29
|
+
import { cx } from "@yamada-ui/utils";
|
30
|
+
import { useMemo } from "react";
|
31
|
+
import {
|
32
|
+
Cell,
|
33
|
+
Legend,
|
34
|
+
Pie,
|
35
|
+
PieChart as RechartsPieChart,
|
36
|
+
ResponsiveContainer,
|
37
|
+
Tooltip
|
38
|
+
} from "recharts";
|
39
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
40
|
+
var DonutChart = forwardRef((props, ref) => {
|
41
|
+
const [styles, mergedProps] = useMultiComponentStyle("DonutChart", props);
|
42
|
+
const {
|
43
|
+
className,
|
44
|
+
data,
|
45
|
+
pieProps,
|
46
|
+
chartProps,
|
47
|
+
cellProps,
|
48
|
+
containerProps,
|
49
|
+
withTooltip = true,
|
50
|
+
withLegend = false,
|
51
|
+
tooltipProps,
|
52
|
+
tooltipAnimationDuration,
|
53
|
+
tooltipDataSource = "all",
|
54
|
+
valueFormatter,
|
55
|
+
unit,
|
56
|
+
paddingAngle,
|
57
|
+
startAngle,
|
58
|
+
endAngle,
|
59
|
+
withLabels,
|
60
|
+
withLabelLines,
|
61
|
+
innerRadius = withLabels ? "60%" : "80%",
|
62
|
+
outerRadius,
|
63
|
+
strokeWidth,
|
64
|
+
legendProps,
|
65
|
+
...rest
|
66
|
+
} = omitThemeProps(mergedProps);
|
67
|
+
const {
|
68
|
+
pieVars,
|
69
|
+
getPieProps,
|
70
|
+
getPieChartProps,
|
71
|
+
getCellProps,
|
72
|
+
setHighlightedArea
|
73
|
+
} = usePieChart({
|
74
|
+
data,
|
75
|
+
pieProps,
|
76
|
+
chartProps,
|
77
|
+
cellProps,
|
78
|
+
innerRadius,
|
79
|
+
outerRadius,
|
80
|
+
paddingAngle,
|
81
|
+
startAngle,
|
82
|
+
endAngle,
|
83
|
+
strokeWidth,
|
84
|
+
withLabels,
|
85
|
+
withLabelLines,
|
86
|
+
styles
|
87
|
+
});
|
88
|
+
const { getContainerProps } = useChart({ containerProps });
|
89
|
+
const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
|
90
|
+
tooltipProps,
|
91
|
+
tooltipAnimationDuration,
|
92
|
+
styles
|
93
|
+
});
|
94
|
+
const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
|
95
|
+
legendProps
|
96
|
+
});
|
97
|
+
const cells = useMemo(
|
98
|
+
() => data.map(({ name }, index) => /* @__PURE__ */ jsx(
|
99
|
+
Cell,
|
100
|
+
{
|
101
|
+
...getCellProps({ index, className: "ui-donut-chart__cell" })
|
102
|
+
},
|
103
|
+
`donut-cell-${name}`
|
104
|
+
)),
|
105
|
+
[data, getCellProps]
|
106
|
+
);
|
107
|
+
return /* @__PURE__ */ jsx(ChartProvider, { value: { styles }, children: /* @__PURE__ */ jsx(
|
108
|
+
ui.div,
|
109
|
+
{
|
110
|
+
ref,
|
111
|
+
className: cx("ui-donut-chart", className),
|
112
|
+
var: pieVars,
|
113
|
+
__css: { maxW: "full", ...styles.container },
|
114
|
+
...rest,
|
115
|
+
children: /* @__PURE__ */ jsx(
|
116
|
+
ResponsiveContainer,
|
117
|
+
{
|
118
|
+
...getContainerProps({ className: "ui-donut-chart__container" }),
|
119
|
+
children: /* @__PURE__ */ jsxs(
|
120
|
+
RechartsPieChart,
|
121
|
+
{
|
122
|
+
...getPieChartProps({ className: "ui-donut-chart__chart" }),
|
123
|
+
children: [
|
124
|
+
/* @__PURE__ */ jsx(
|
125
|
+
Pie,
|
126
|
+
{
|
127
|
+
...getPieProps({
|
128
|
+
className: "ui-donut-chart__donut",
|
129
|
+
labelClassName: "ui-donut-chart__label",
|
130
|
+
labelLineClassName: "ui-donut-chart__label-line"
|
131
|
+
}),
|
132
|
+
children: cells
|
133
|
+
}
|
134
|
+
),
|
135
|
+
withLegend ? /* @__PURE__ */ jsx(
|
136
|
+
Legend,
|
137
|
+
{
|
138
|
+
content: ({ payload }) => /* @__PURE__ */ jsx(
|
139
|
+
ChartLegend,
|
140
|
+
{
|
141
|
+
className: "ui-donut-chart__legend",
|
142
|
+
payload,
|
143
|
+
onHighlight: setHighlightedArea,
|
144
|
+
...computedLegendProps
|
145
|
+
}
|
146
|
+
),
|
147
|
+
...getLegendProps()
|
148
|
+
}
|
149
|
+
) : null,
|
150
|
+
withTooltip ? /* @__PURE__ */ jsx(
|
151
|
+
Tooltip,
|
152
|
+
{
|
153
|
+
content: ({ label, payload }) => /* @__PURE__ */ jsx(
|
154
|
+
ChartTooltip,
|
155
|
+
{
|
156
|
+
className: "ui-donut-chart__tooltip",
|
157
|
+
label,
|
158
|
+
payload: tooltipDataSource === "segment" ? payload : data,
|
159
|
+
valueFormatter,
|
160
|
+
unit,
|
161
|
+
...computedTooltipProps
|
162
|
+
}
|
163
|
+
),
|
164
|
+
...getTooltipProps()
|
165
|
+
}
|
166
|
+
) : null
|
167
|
+
]
|
168
|
+
}
|
169
|
+
)
|
170
|
+
}
|
171
|
+
)
|
172
|
+
}
|
173
|
+
) });
|
174
|
+
});
|
175
|
+
|
176
|
+
export {
|
177
|
+
DonutChart
|
178
|
+
};
|
179
|
+
//# sourceMappingURL=chunk-BPR7YL3O.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import {\n forwardRef,\n omitThemeProps,\n ui,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n Cell,\n Legend,\n Pie,\n PieChart as RechartsPieChart,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { PieChartProps } from \"./pie-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ntype DonutChartOptions = {\n /**\n * Controls innerRadius of the chart segments.\n * If it is a number, it is the width of the radius.\n * For example, `60` means the radius is `60px` and the diameter is `120px`.\n *\n * @default '60%'\n */\n innerRadius?: number | string\n}\n\nexport type DonutChartProps = PieChartProps & DonutChartOptions\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"DonutChart\", props)\n const {\n className,\n data,\n pieProps,\n chartProps,\n cellProps,\n containerProps,\n withTooltip = true,\n withLegend = false,\n tooltipProps,\n tooltipAnimationDuration,\n tooltipDataSource = \"all\",\n valueFormatter,\n unit,\n paddingAngle,\n startAngle,\n endAngle,\n withLabels,\n withLabelLines,\n innerRadius = withLabels ? \"60%\" : \"80%\",\n outerRadius,\n strokeWidth,\n legendProps,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const {\n pieVars,\n getPieProps,\n getPieChartProps,\n getCellProps,\n setHighlightedArea,\n } = usePieChart({\n data,\n pieProps,\n chartProps,\n cellProps,\n innerRadius,\n outerRadius,\n paddingAngle,\n startAngle,\n endAngle,\n strokeWidth,\n withLabels,\n withLabelLines,\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 cells = useMemo(\n () =>\n data.map(({ name }, index) => (\n <Cell\n key={`donut-cell-${name}`}\n {...getCellProps({ index, className: \"ui-donut-chart__cell\" })}\n />\n )),\n [data, getCellProps],\n )\n\n return (\n <ChartProvider value={{ styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-donut-chart\", className)}\n var={pieVars}\n __css={{ maxW: \"full\", ...styles.container }}\n {...rest}\n >\n <ResponsiveContainer\n {...getContainerProps({ className: \"ui-donut-chart__container\" })}\n >\n <RechartsPieChart\n {...getPieChartProps({ className: \"ui-donut-chart__chart\" })}\n >\n <Pie\n {...getPieProps({\n className: \"ui-donut-chart__donut\",\n labelClassName: \"ui-donut-chart__label\",\n labelLineClassName: \"ui-donut-chart__label-line\",\n })}\n >\n {cells}\n </Pie>\n\n {withLegend ? (\n <Legend\n content={({ payload }) => (\n <ChartLegend\n className=\"ui-donut-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-donut-chart__tooltip\"\n label={label}\n payload={tooltipDataSource === \"segment\" ? payload : data}\n valueFormatter={valueFormatter}\n unit={unit}\n {...computedTooltipProps}\n />\n )}\n {...getTooltipProps()}\n />\n ) : null}\n </RechartsPieChart>\n </ResponsiveContainer>\n </ui.div>\n </ChartProvider>\n )\n})\n"],"mappings":"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","names":[]}
|
@@ -1,32 +1,32 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useLineChart
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-QZ5OXZ6Z.mjs";
|
5
|
+
import {
|
6
|
+
useChartAxis
|
7
|
+
} from "./chunk-P7AFSM5W.mjs";
|
8
|
+
import {
|
9
|
+
useChartGrid
|
10
|
+
} from "./chunk-LGMALZCN.mjs";
|
5
11
|
import {
|
6
12
|
useChartReferenceLine
|
7
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-MWPICUEW.mjs";
|
8
14
|
import {
|
9
15
|
useChartLegend
|
10
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-LM2DQK2P.mjs";
|
11
17
|
import {
|
12
18
|
useChartTooltip
|
13
|
-
} from "./chunk-
|
14
|
-
import {
|
15
|
-
useChartAxis
|
16
|
-
} from "./chunk-AURFFNDQ.mjs";
|
17
|
-
import {
|
18
|
-
useChartGrid
|
19
|
-
} from "./chunk-3CY3IFRN.mjs";
|
19
|
+
} from "./chunk-RN6PXJAD.mjs";
|
20
20
|
import {
|
21
21
|
ChartLegend
|
22
|
-
} from "./chunk-
|
22
|
+
} from "./chunk-NEGDEVRX.mjs";
|
23
23
|
import {
|
24
24
|
ChartTooltip
|
25
|
-
} from "./chunk-
|
25
|
+
} from "./chunk-LBC2B6UX.mjs";
|
26
26
|
import {
|
27
27
|
ChartProvider,
|
28
28
|
useChart
|
29
|
-
} from "./chunk-
|
29
|
+
} from "./chunk-XIFDRM7J.mjs";
|
30
30
|
|
31
31
|
// src/line-chart.tsx
|
32
32
|
import {
|
@@ -229,4 +229,4 @@ var LineChart = forwardRef((props, ref) => {
|
|
229
229
|
export {
|
230
230
|
LineChart
|
231
231
|
};
|
232
|
-
//# sourceMappingURL=chunk-
|
232
|
+
//# sourceMappingURL=chunk-E2I2XAZ6.mjs.map
|
@@ -3,7 +3,7 @@ import {
|
|
3
3
|
areaChartProperties,
|
4
4
|
areaProperties,
|
5
5
|
dotProperties
|
6
|
-
} from "./chunk-
|
6
|
+
} from "./chunk-OSNFBRHL.mjs";
|
7
7
|
import {
|
8
8
|
getComponentProps
|
9
9
|
} from "./chunk-QL3DB7OJ.mjs";
|
@@ -323,4 +323,4 @@ var useAreaChart = ({
|
|
323
323
|
export {
|
324
324
|
useAreaChart
|
325
325
|
};
|
326
|
-
//# sourceMappingURL=chunk-
|
326
|
+
//# sourceMappingURL=chunk-HDOYOHLA.mjs.map
|
@@ -6,7 +6,7 @@ import {
|
|
6
6
|
polarRadiusAxisProperties,
|
7
7
|
radarChartProperties,
|
8
8
|
radarProperties
|
9
|
-
} from "./chunk-
|
9
|
+
} from "./chunk-OSNFBRHL.mjs";
|
10
10
|
import {
|
11
11
|
getClassName,
|
12
12
|
getComponentProps
|
@@ -341,4 +341,4 @@ var useRadarChart = ({
|
|
341
341
|
export {
|
342
342
|
useRadarChart
|
343
343
|
};
|
344
|
-
//# sourceMappingURL=chunk-
|
344
|
+
//# sourceMappingURL=chunk-KT4YOMM4.mjs.map
|