@yamada-ui/charts 1.5.4-dev-20241005224505 → 1.5.4-dev-20241006000212

package/dist/{chunk-NETTMC2D.mjs → chunk-YTUEG4IY.mjs}

@@ -1,26 +1,26 @@
 "use client"
 import {
   useChartLabel
-} from "./chunk-MVRWZTQ5.mjs";
+} from "./chunk-NLXYCM5J.mjs";
 import {
   usePieChart
-} from "./chunk-O3LMKYXK.mjs";
+} from "./chunk-TU6MKMMV.mjs";
 import {
   useChartTooltip
-} from "./chunk-OJ2MLZZ7.mjs";
+} from "./chunk-X6PIY2M3.mjs";
 import {
   useChartLegend
-} from "./chunk-IJRYXT4V.mjs";
+} from "./chunk-R2LOTDR3.mjs";
 import {
   ChartLegend
-} from "./chunk-X6CD7LHX.mjs";
+} from "./chunk-OUIKA4AX.mjs";
 import {
   ChartTooltip
-} from "./chunk-YSPGYMRF.mjs";
+} from "./chunk-5VLSGWQD.mjs";
 import {
   ChartProvider,
   useChart
-} from "./chunk-A3IWA366.mjs";
+} from "./chunk-VK65X6Q2.mjs";
 
 // src/donut-chart.tsx
 import {
@@ -46,71 +46,71 @@ var DonutChart = forwardRef((props, ref) => {
   const {
     className,
     data,
-    pieProps,
-    chartProps,
-    cellProps,
-    containerProps,
-    withTooltip = true,
-    withLegend = false,
-    tooltipProps,
-    tooltipAnimationDuration,
-    tooltipDataSource = "all",
-    valueFormatter,
-    labelFormatter,
-    unit,
-    paddingAngle,
-    startAngle,
     endAngle,
     withLabels,
-    withLabelLines,
-    labelOffset,
-    isPercent,
     innerRadius = withLabels ? "60%" : "80%",
+    isPercent,
+    labelFormatter,
+    labelOffset,
     outerRadius,
+    paddingAngle,
+    startAngle,
     strokeWidth,
-    legendProps,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    unit,
+    valueFormatter,
+    withLabelLines,
+    withLegend = false,
+    withTooltip = true,
+    cellProps,
+    chartProps,
+    containerProps,
     labelProps,
+    legendProps,
+    pieProps,
+    tooltipProps,
     ...rest
   } = omitThemeProps(mergedProps);
   const {
     pieVars,
-    getPieProps,
-    getPieChartProps,
+    setHighlightedArea,
     getCellProps,
-    setHighlightedArea
+    getPieChartProps,
+    getPieProps
   } = usePieChart({
     data,
-    pieProps,
-    chartProps,
-    cellProps,
+    endAngle,
     innerRadius,
+    isPercent,
+    labelFormatter,
+    labelOffset,
     outerRadius,
     paddingAngle,
     startAngle,
-    endAngle,
     strokeWidth,
-    withLabels,
+    styles,
     withLabelLines,
-    labelOffset,
-    isPercent,
-    labelFormatter,
-    styles
+    withLabels,
+    cellProps,
+    chartProps,
+    pieProps
   });
   const { getContainerProps } = useChart({ containerProps });
-  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
-    tooltipProps,
+  const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
+    styles,
     tooltipAnimationDuration,
-    styles
+    tooltipProps
   });
-  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
     legendProps
   });
-  const { getLabelProps } = useChartLabel({ labelProps, styles });
+  const { getLabelProps } = useChartLabel({ styles, labelProps });
   const cells = useMemo(
     () => data.map(({ name }, index) => /* @__PURE__ */ jsx(
       Cell,
       {
-        ...getCellProps({ index, className: "ui-donut-chart__cell" })
+        ...getCellProps({ className: "ui-donut-chart__cell", index })
       },
       `donut-cell-${name}`
     )),
@@ -173,8 +173,8 @@ var DonutChart = forwardRef((props, ref) => {
                         className: "ui-donut-chart__tooltip",
                         label,
                         payload: tooltipDataSource === "segment" ? payload : data,
-                        valueFormatter,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),
@@ -195,4 +195,4 @@ DonutChart.__ui__ = "DonutChart";
 export {
   DonutChart
 };
-//# sourceMappingURL=chunk-NETTMC2D.mjs.map
+//# sourceMappingURL=chunk-YTUEG4IY.mjs.map

package/dist/chunk-YTUEG4IY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import type { PieChartProps } from \"./pie-chart\"\nimport type { UseChartLabelOptions } from \"./use-chart-label\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  Cell,\n  Label,\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 { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLabel } from \"./use-chart-label\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ninterface 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 interface DonutChartProps\n  extends PieChartProps,\n    DonutChartOptions,\n    UseChartLabelOptions {}\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/data-display/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"DonutChart\", props)\n  const {\n    className,\n    data,\n    endAngle,\n    withLabels,\n    innerRadius = withLabels ? \"60%\" : \"80%\",\n    isPercent,\n    labelFormatter,\n    labelOffset,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    strokeWidth,\n    tooltipAnimationDuration,\n    tooltipDataSource = \"all\",\n    unit,\n    valueFormatter,\n    withLabelLines,\n    withLegend = false,\n    withTooltip = true,\n    cellProps,\n    chartProps,\n    containerProps,\n    labelProps,\n    legendProps,\n    pieProps,\n    tooltipProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    pieVars,\n    setHighlightedArea,\n    getCellProps,\n    getPieChartProps,\n    getPieProps,\n  } = usePieChart({\n    data,\n    endAngle,\n    innerRadius,\n    isPercent,\n    labelFormatter,\n    labelOffset,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    strokeWidth,\n    styles,\n    withLabelLines,\n    withLabels,\n    cellProps,\n    chartProps,\n    pieProps,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const { getTooltipProps, tooltipProps: computedTooltipProps } =\n    useChartTooltip({\n      styles,\n      tooltipAnimationDuration,\n      tooltipProps,\n    })\n  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n    legendProps,\n  })\n  const { getLabelProps } = useChartLabel({ styles, labelProps })\n\n  const cells = useMemo(\n    () =>\n      data.map(({ name }, index) => (\n        <Cell\n          key={`donut-cell-${name}`}\n          {...getCellProps({ className: \"ui-donut-chart__cell\", index })}\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        __css={{ maxW: \"full\", vars: pieVars, ...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              })}\n            >\n              {cells}\n              <Label\n                {...getLabelProps({ className: \"ui-donut-chart__label\" })}\n              />\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                    unit={unit}\n                    valueFormatter={valueFormatter}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n\nDonutChart.displayName = \"DonutChart\"\nDonutChart.__ui__ = \"DonutChart\"\n"],"mappings":"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","names":[]}

package/dist/{chunk-VUTCH2CU.mjs → chunk-YX23LEQ7.mjs}

@@ -6,7 +6,7 @@ import {
 import {
   getClassName,
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-radial-chart.ts
 import { getVar, useTheme } from "@yamada-ui/core";
@@ -15,11 +15,11 @@ import { useCallback, useMemo, useState } from "react";
 var useRadialChart = ({
   data: dataProp,
   dataKey = "value",
+  endAngle = -180,
+  fillOpacity = 1,
   innerRadius = "10%",
   outerRadius = "80%",
   startAngle = 90,
-  endAngle = -180,
-  fillOpacity = 1,
   styles,
   ...rest
 }) => {
@@ -67,7 +67,7 @@ var useRadialChart = ({
   );
   const [radialBarProps, radialBarClassName] = useMemo(
     () => getComponentProps(
-      [computedRadialBarProps != null ? computedRadialBarProps : {}, radialBarProperties],
+      [computedRadialBarProps, radialBarProperties],
       styles.radialBar
     )(theme),
     [computedRadialBarProps, styles.radialBar, theme]
@@ -76,9 +76,9 @@ var useRadialChart = ({
     () => dataProp.map((props, index) => {
       const {
         name,
-        value,
         color,
         dimRadialBar = {},
+        value,
         ...computedProps
       } = props;
       const dimmed = shouldHighlight && highlightedArea !== name;
@@ -91,11 +91,11 @@ var useRadialChart = ({
         dimmed ? dimRadialBarClassName : void 0
       )(theme);
       return {
+        name,
         className,
+        color,
         fill: getVar(`radial-bar-${index}`)(theme),
-        name,
-        value,
-        color
+        value
       };
     }),
     [
@@ -112,10 +112,10 @@ var useRadialChart = ({
       ref,
       className: cx(className, chartClassName),
       data,
+      endAngle,
       innerRadius,
       outerRadius,
       startAngle,
-      endAngle,
       ...props,
       ...chartProps
     }),
@@ -133,9 +133,9 @@ var useRadialChart = ({
     ({ className, ...props }, ref = null) => ({
       ref,
       className: cx(className, radialBarClassName),
+      background,
       dataKey,
       isAnimationActive: false,
-      background,
       ...props,
       ...radialBarProps
     }),
@@ -144,12 +144,12 @@ var useRadialChart = ({
   return {
     radialVars,
     setHighlightedArea,
-    getRadialChartProps,
-    getRadialBarProps
+    getRadialBarProps,
+    getRadialChartProps
   };
 };
 
 export {
   useRadialChart
 };
-//# sourceMappingURL=chunk-VUTCH2CU.mjs.map
+//# sourceMappingURL=chunk-YX23LEQ7.mjs.map

package/dist/chunk-YX23LEQ7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-radial-chart.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  PropGetter,\n  RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type { RadialBarProps, RadialChartProps } from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport {\n  radialBarProperties,\n  radialChartProperties,\n} from \"./rechart-properties\"\n\nexport interface UseRadialChartOptions {\n  /**\n   * Chart data.\n   */\n  data: Dict[]\n  /**\n   * The key of a group of data which should be unique in an chart.\n   *\n   * @default 'value'\n   */\n  dataKey?: string\n  /**\n   * Controls angle at which chart ends.\n   *\n   * @default -180\n   */\n  endAngle?: number\n  /**\n   * Controls fill opacity of all pies.\n   *\n   * @default 1\n   */\n  fillOpacity?: [number, number] | number\n  /**\n   * Controls innerRadius of the chart segments.\n   * If it is a number, it is the width of the radius.\n   * For example, `60` means the radius is `60px` and the diameter is `120px`.\n   *\n   * @default '10%'\n   */\n  innerRadius?: number | string\n  /**\n   * Controls thickness of the chart segments. If it is a number, it is calculated as px.\n   * If it is a number, it is the width of the radius.\n   * For example, `60` means the radius is `60px` and the diameter is `120px`.\n   *\n   * @default '80%'\n   */\n  outerRadius?: number | string\n  /**\n   * Controls angle at which chart starts.\n   *\n   * @default 90\n   */\n  startAngle?: number\n  /**\n   * Props passed down to recharts `RadialBarChart` component.\n   */\n  chartProps?: RadialChartProps\n  /**\n   * Props for the radialBar.\n   */\n  radialBarProps?: Partial<RadialBarProps>\n}\n\ninterface UseRadialChartProps extends UseRadialChartOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useRadialChart = ({\n  data: dataProp,\n  dataKey = \"value\",\n  endAngle = -180,\n  fillOpacity = 1,\n  innerRadius = \"10%\",\n  outerRadius = \"80%\",\n  startAngle = 90,\n  styles,\n  ...rest\n}: UseRadialChartProps) => {\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n  const shouldHighlight = highlightedArea !== null\n  const {\n    background: backgroundProps = {},\n    dimRadialBar: dimRadialBarProps = {},\n    ...computedRadialBarProps\n  } = rest.radialBarProps ?? {}\n\n  const radialVars: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      dataProp.map(({ color }, index) => ({\n        name: `radial-bar-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [dataProp],\n  )\n\n  const dimRadialBarClassName = useMemo(() => {\n    const resolvedDimRadialBar = {\n      fillOpacity: 0.3,\n      strokeOpacity: 0,\n      ...dimRadialBarProps,\n    }\n\n    return getClassName(resolvedDimRadialBar)(theme)\n  }, [dimRadialBarProps, theme])\n\n  const [chartProps, chartClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.chartProps ?? {}, radialChartProperties],\n        styles.chart,\n      )(theme),\n    [rest.chartProps, styles.chart, theme],\n  )\n\n  const background = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [backgroundProps, radialBarProperties],\n        styles.background,\n      )(theme, true),\n    [backgroundProps, styles.background, theme],\n  )\n\n  const [radialBarProps, radialBarClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [computedRadialBarProps, radialBarProperties],\n        styles.radialBar,\n      )(theme),\n    [computedRadialBarProps, styles.radialBar, theme],\n  )\n\n  const data = useMemo(\n    () =>\n      dataProp.map((props, index) => {\n        const {\n          name,\n          color,\n          dimRadialBar = {},\n          value,\n          ...computedProps\n        } = props\n        const dimmed = shouldHighlight && highlightedArea !== name\n        const resolvedProps = {\n          ...computedProps,\n          ...(dimmed ? dimRadialBar : { fillOpacity }),\n        }\n\n        const className = getClassName(\n          resolvedProps,\n          dimmed ? dimRadialBarClassName : undefined,\n        )(theme)\n\n        return {\n          name,\n          className,\n          color,\n          fill: getVar(`radial-bar-${index}`)(theme),\n          value,\n        }\n      }),\n    [\n      dataProp,\n      dimRadialBarClassName,\n      fillOpacity,\n      highlightedArea,\n      shouldHighlight,\n      theme,\n    ],\n  )\n\n  const getRadialChartProps: PropGetter<\n    ComponentPropsWithoutRef<typeof Recharts.RadialBarChart>,\n    ComponentPropsWithoutRef<typeof Recharts.RadialBarChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, chartClassName),\n      data,\n      endAngle,\n      innerRadius,\n      outerRadius,\n      startAngle,\n      ...props,\n      ...chartProps,\n    }),\n    [\n      chartClassName,\n      chartProps,\n      data,\n      endAngle,\n      innerRadius,\n      outerRadius,\n      startAngle,\n    ],\n  )\n\n  const getRadialBarProps: RequiredPropGetter<\n    Partial<Recharts.RadialBarProps>,\n    Omit<Recharts.RadialBarProps, \"ref\">\n  > = useCallback(\n    ({ className, ...props }, ref = null) => ({\n      ref,\n      className: cx(className, radialBarClassName),\n      background,\n      dataKey,\n      isAnimationActive: false,\n      ...props,\n      ...radialBarProps,\n    }),\n    [background, dataKey, radialBarClassName, radialBarProps],\n  )\n\n  return {\n    radialVars,\n    setHighlightedArea,\n    getRadialBarProps,\n    getRadialChartProps,\n  }\n}\n\nexport type UseRadialChartReturn = ReturnType<typeof useRadialChart>\n"],"mappings":"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","names":["_a"]}

package/dist/{chunk-DZL5KQOJ.mjs → chunk-ZRV4LO67.mjs}

@@ -1,23 +1,23 @@
 "use client"
 import {
   usePieChart
-} from "./chunk-O3LMKYXK.mjs";
+} from "./chunk-TU6MKMMV.mjs";
 import {
   useChartTooltip
-} from "./chunk-OJ2MLZZ7.mjs";
+} from "./chunk-X6PIY2M3.mjs";
 import {
   useChartLegend
-} from "./chunk-IJRYXT4V.mjs";
+} from "./chunk-R2LOTDR3.mjs";
 import {
   ChartLegend
-} from "./chunk-X6CD7LHX.mjs";
+} from "./chunk-OUIKA4AX.mjs";
 import {
   ChartTooltip
-} from "./chunk-YSPGYMRF.mjs";
+} from "./chunk-5VLSGWQD.mjs";
 import {
   ChartProvider,
   useChart
-} from "./chunk-A3IWA366.mjs";
+} from "./chunk-VK65X6Q2.mjs";
 
 // src/pie-chart.tsx
 import {
@@ -42,69 +42,69 @@ var PieChart = forwardRef((props, ref) => {
   const {
     className,
     data,
-    pieProps,
-    chartProps,
-    cellProps,
-    containerProps,
-    withTooltip = true,
-    withLegend = false,
-    tooltipProps,
-    tooltipAnimationDuration,
-    tooltipDataSource = "all",
-    valueFormatter,
-    labelFormatter,
-    unit,
+    endAngle,
     innerRadius,
+    isPercent,
+    labelFormatter,
+    labelOffset,
     outerRadius,
     paddingAngle,
     startAngle,
-    endAngle,
-    withLabels,
-    withLabelLines,
-    labelOffset,
-    isPercent,
     strokeWidth,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    unit,
+    valueFormatter,
+    withLabelLines,
+    withLabels,
+    withLegend = false,
+    withTooltip = true,
+    cellProps,
+    chartProps,
+    containerProps,
     legendProps,
+    pieProps,
+    tooltipProps,
     ...rest
   } = omitThemeProps(mergedProps);
   const {
     pieVars,
-    getPieProps,
-    getPieChartProps,
+    setHighlightedArea,
     getCellProps,
-    setHighlightedArea
+    getPieChartProps,
+    getPieProps
   } = usePieChart({
     data,
-    pieProps,
-    chartProps,
-    cellProps,
+    endAngle,
     innerRadius,
+    isPercent,
+    labelFormatter,
+    labelOffset,
     outerRadius,
     paddingAngle,
     startAngle,
-    endAngle,
     strokeWidth,
-    withLabels,
+    styles,
     withLabelLines,
-    labelOffset,
-    isPercent,
-    labelFormatter,
-    styles
+    withLabels,
+    cellProps,
+    chartProps,
+    pieProps
   });
   const { getContainerProps } = useChart({ containerProps });
-  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
-    tooltipProps,
+  const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
+    styles,
     tooltipAnimationDuration,
-    styles
+    tooltipProps
   });
-  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
     legendProps
   });
   const cells = useMemo(
     () => data.map(({ name }, index) => /* @__PURE__ */ jsx(
       Cell,
       {
-        ...getCellProps({ index, className: "ui-pie-chart__cell" })
+        ...getCellProps({ className: "ui-pie-chart__cell", index })
       },
       `pie-cell-${name}`
     )),
@@ -159,8 +159,8 @@ var PieChart = forwardRef((props, ref) => {
                         className: "ui-pie-chart__tooltip",
                         label,
                         payload: tooltipDataSource === "segment" ? payload : data,
-                        valueFormatter,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),
@@ -181,4 +181,4 @@ PieChart.__ui__ = "PieChart";
 export {
   PieChart
 };
-//# sourceMappingURL=chunk-DZL5KQOJ.mjs.map
+//# sourceMappingURL=chunk-ZRV4LO67.mjs.map

package/dist/chunk-ZRV4LO67.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pie-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport type { UsePieChartOptions } from \"./use-pie-chart\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\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 { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ninterface PieChartOptions {\n  /**\n   * Determines which data is displayed in the tooltip.\n   *\n   * @default 'all'\n   */\n  tooltipDataSource?: TooltipDataSourceType\n  /**\n   * Unit displayed next to each value in tooltip.\n   */\n  unit?: string\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n}\n\nexport interface PieChartProps\n  extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeWidth\">,\n    ThemeProps<\"pieChart\">,\n    PieChartOptions,\n    UsePieChartOptions,\n    Omit<UseChartTooltipOptions, \"labelFormatter\">,\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/data-display/pie-chart\n */\nexport const PieChart = forwardRef<PieChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"PieChart\", props)\n  const {\n    className,\n    data,\n    endAngle,\n    innerRadius,\n    isPercent,\n    labelFormatter,\n    labelOffset,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    strokeWidth,\n    tooltipAnimationDuration,\n    tooltipDataSource = \"all\",\n    unit,\n    valueFormatter,\n    withLabelLines,\n    withLabels,\n    withLegend = false,\n    withTooltip = true,\n    cellProps,\n    chartProps,\n    containerProps,\n    legendProps,\n    pieProps,\n    tooltipProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    pieVars,\n    setHighlightedArea,\n    getCellProps,\n    getPieChartProps,\n    getPieProps,\n  } = usePieChart({\n    data,\n    endAngle,\n    innerRadius,\n    isPercent,\n    labelFormatter,\n    labelOffset,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    strokeWidth,\n    styles,\n    withLabelLines,\n    withLabels,\n    cellProps,\n    chartProps,\n    pieProps,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const { getTooltipProps, tooltipProps: computedTooltipProps } =\n    useChartTooltip({\n      styles,\n      tooltipAnimationDuration,\n      tooltipProps,\n    })\n  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n    legendProps,\n  })\n\n  const cells = useMemo(\n    () =>\n      data.map(({ name }, index) => (\n        <Cell\n          key={`pie-cell-${name}`}\n          {...getCellProps({ className: \"ui-pie-chart__cell\", index })}\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        __css={{ maxW: \"full\", vars: pieVars, ...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              })}\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                    unit={unit}\n                    valueFormatter={valueFormatter}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n\nPieChart.displayName = \"PieChart\"\nPieChart.__ui__ = \"PieChart\"\n"],"mappings":"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","names":[]}