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

package/dist/pie-chart.d.mts

@@ -12,11 +12,15 @@ import 'recharts/types/chart/generateCategoricalChart';
 
 interface PieChartOptions {
     /**
-     * If `true`, tooltip is visible.
+     * Determines which data is displayed in the tooltip.
      *
-     * @default true
+     * @default 'all'
      */
-    withTooltip?: boolean;
+    tooltipDataSource?: TooltipDataSourceType;
+    /**
+     * Unit displayed next to each value in tooltip.
+     */
+    unit?: string;
     /**
      * If `true`, legend is visible.
      *
@@ -24,17 +28,13 @@ interface PieChartOptions {
      */
     withLegend?: boolean;
     /**
-     * Determines which data is displayed in the tooltip.
+     * If `true`, tooltip is visible.
      *
-     * @default 'all'
-     */
-    tooltipDataSource?: TooltipDataSourceType;
-    /**
-     * Unit displayed next to each value in tooltip.
+     * @default true
      */
-    unit?: string;
+    withTooltip?: boolean;
 }
-interface PieChartProps extends Omit<HTMLUIProps, "strokeWidth" | "fillOpacity">, ThemeProps<"pieChart">, PieChartOptions, UsePieChartOptions, Omit<UseChartTooltipOptions, "labelFormatter">, UseChartLegendProps, UseChartProps {
+interface PieChartProps extends Omit<HTMLUIProps, "fillOpacity" | "strokeWidth">, ThemeProps<"pieChart">, PieChartOptions, UsePieChartOptions, Omit<UseChartTooltipOptions, "labelFormatter">, UseChartLegendProps, UseChartProps {
 }
 /**
  * `PieChart` is a component for drawing pie charts to compare multiple sets of data.

package/dist/pie-chart.d.ts

@@ -12,11 +12,15 @@ import 'recharts/types/chart/generateCategoricalChart';
 
 interface PieChartOptions {
     /**
-     * If `true`, tooltip is visible.
+     * Determines which data is displayed in the tooltip.
      *
-     * @default true
+     * @default 'all'
      */
-    withTooltip?: boolean;
+    tooltipDataSource?: TooltipDataSourceType;
+    /**
+     * Unit displayed next to each value in tooltip.
+     */
+    unit?: string;
     /**
      * If `true`, legend is visible.
      *
@@ -24,17 +28,13 @@ interface PieChartOptions {
      */
     withLegend?: boolean;
     /**
-     * Determines which data is displayed in the tooltip.
+     * If `true`, tooltip is visible.
      *
-     * @default 'all'
-     */
-    tooltipDataSource?: TooltipDataSourceType;
-    /**
-     * Unit displayed next to each value in tooltip.
+     * @default true
      */
-    unit?: string;
+    withTooltip?: boolean;
 }
-interface PieChartProps extends Omit<HTMLUIProps, "strokeWidth" | "fillOpacity">, ThemeProps<"pieChart">, PieChartOptions, UsePieChartOptions, Omit<UseChartTooltipOptions, "labelFormatter">, UseChartLegendProps, UseChartProps {
+interface PieChartProps extends Omit<HTMLUIProps, "fillOpacity" | "strokeWidth">, ThemeProps<"pieChart">, PieChartOptions, UsePieChartOptions, Omit<UseChartTooltipOptions, "labelFormatter">, UseChartLegendProps, UseChartProps {
 }
 /**
  * `PieChart` is a component for drawing pie charts to compare multiple sets of data.

package/dist/pie-chart.js

@@ -168,13 +168,13 @@ var useChart = ({ containerProps = {} }) => {
     getContainerProps
   };
 };
-var useLegend = ({} = {}) => {
+var useLegend = () => {
   const { styles } = useChartContext();
   return {
     styles
   };
 };
-var useTooltip = ({} = {}) => {
+var useTooltip = () => {
   const { styles } = useChartContext();
   return {
     styles
@@ -186,7 +186,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ChartLegend = (0, import_core3.forwardRef)(
   ({ className, payload = [], onHighlight, ...rest }, ref) => {
     const { styles } = useLegend();
-    const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
+    const items = payload.map(({ color, dataKey, value: valueProp }, index) => {
       const value = dataKey != null ? dataKey : valueProp;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_core3.ui.div,
@@ -231,22 +231,22 @@ var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core4.forwardRef)(
   ({
-    label,
-    dataKey = "value",
     className,
-    payload = [],
-    valueFormatter,
+    dataKey = "value",
+    isRadialChart,
+    label,
     labelFormatter,
+    payload = [],
     unit,
-    isRadialChart,
+    valueFormatter,
     ...rest
   }, ref) => {
     var _a;
     const { styles } = useTooltip();
     const items = payload.map(
       ({
-        color: colorProp,
         name: nameProp,
+        color: colorProp,
         [dataKey]: valueProp,
         payload: payload2
       } = {}, index) => {
@@ -340,7 +340,7 @@ var useChartLegend = ({
     },
     [rest]
   );
-  return { legendProps, getLegendProps };
+  return { getLegendProps, legendProps };
 };
 
 // src/use-chart-tooltip.ts
@@ -348,9 +348,9 @@ var import_core5 = require("@yamada-ui/core");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
+  styles,
   tooltipAnimationDuration = 0,
-  styles
+  tooltipProps: _tooltipProps = {}
 }) => {
   const { theme } = (0, import_core5.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
@@ -366,16 +366,16 @@ var useChartTooltip = ({
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
         className: (0, import_utils6.cx)("ui-chart__cursor", cursorClassName)
       },
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       ...props,
       ...tooltipProps
     }),
     [cursorClassName, tooltipAnimationDuration, tooltipProps]
   );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
+  return { getTooltipProps, tooltipProps: tooltipUIProps };
 };
 
 // src/use-pie-chart.ts
@@ -393,17 +393,17 @@ var pieChartLabel = ({
   className: cellClassName,
   cx: cxProp = 0,
   cy: cyProp = 0,
-  midAngle = 0,
   innerRadius = 0,
-  outerRadius = 0,
+  isPercent,
+  labelFormatter,
+  labelOffset: labelOffsetProp,
+  midAngle = 0,
   middleRadius = 0,
+  outerRadius = 0,
   percent = 0,
+  styles,
   value = 0,
-  labelOffset: labelOffsetProp,
-  isPercent,
-  labelProps,
-  labelFormatter,
-  styles
+  labelProps
 }) => {
   const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
   const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
@@ -422,10 +422,10 @@ var pieChartLabel = ({
     import_core6.ui.text,
     {
       className: (0, import_utils7.cx)(cellClassName, "ui-chart__label"),
+      dominantBaseline: "central",
+      textAnchor,
       x,
       y,
-      textAnchor,
-      dominantBaseline: "central",
       __css: styles,
       ...labelProps,
       children: displayLabel()
@@ -437,18 +437,19 @@ var pieChartLabelLine = ({
   cx: cxProp = 0,
   cy: cyProp = 0,
   innerRadius = 0,
+  labelOffset: labelOffsetProp,
   midAngle = 0,
   middleRadius = 0,
   outerRadius = 0,
   points = [{ x: 0, y: 0 }],
-  labelOffset: labelOffsetProp,
-  labelLineProps,
-  styles
+  styles,
+  labelLineProps
 }) => {
+  var _a, _b;
   const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
   const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
   const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
-  const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
+  const d = `M ${(_a = points[0]) == null ? void 0 : _a.x} ${(_b = points[0]) == null ? void 0 : _b.y} L ${x} ${y}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_core6.ui.path,
     {
@@ -463,19 +464,19 @@ var pieChartLabelLine = ({
 // src/use-pie-chart.ts
 var usePieChart = ({
   data,
-  withLabels = false,
-  withLabelLines = false,
-  labelOffset,
-  isPercent = false,
-  strokeWidth = 1,
+  endAngle = -270,
   fillOpacity = 1,
   innerRadius = "0%",
+  isPercent = false,
+  labelFormatter,
+  labelOffset,
+  withLabels = false,
   outerRadius = withLabels ? "80%" : "100%",
   paddingAngle = 0,
   startAngle = 90,
-  endAngle = -270,
-  labelFormatter,
+  strokeWidth = 1,
   styles,
+  withLabelLines = false,
   ...rest
 }) => {
   var _a, _b;
@@ -550,11 +551,11 @@ var usePieChart = ({
   );
   const label = (0, import_react4.useCallback)(
     (props) => pieChartLabel({
-      labelOffset,
       isPercent,
-      labelProps,
       labelFormatter,
+      labelOffset,
       styles: styles.label,
+      labelProps,
       ...props
     }),
     [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
@@ -563,8 +564,8 @@ var usePieChart = ({
     (props) => {
       return pieChartLabelLine({
         labelOffset,
-        labelLineProps,
         styles: styles.labelLine,
+        labelLineProps,
         ...props
       });
     },
@@ -587,8 +588,8 @@ var usePieChart = ({
         dimmed ? dimCellClassName : void 0
       )(theme);
       return {
-        color,
-        className
+        className,
+        color
       };
     }),
     [
@@ -613,19 +614,19 @@ var usePieChart = ({
     ({ className, ...props }, ref = null) => ({
       ref,
       className: (0, import_utils8.cx)(className, pieClassName),
-      dataKey: "value",
+      activeShape: activeShapeProps,
       data,
-      rootTabIndex: -1,
-      outerRadius,
-      innerRadius,
-      paddingAngle,
-      startAngle,
+      dataKey: "value",
       endAngle,
+      inactiveShape: inactiveShapeProps,
+      innerRadius,
       isAnimationActive: false,
       label: withLabels ? label : false,
       labelLine: withLabelLines ? labelLine : false,
-      activeShape: activeShapeProps,
-      inactiveShape: inactiveShapeProps,
+      outerRadius,
+      paddingAngle,
+      rootTabIndex: -1,
+      startAngle,
       ...props,
       ...pieProps
     }),
@@ -647,8 +648,9 @@ var usePieChart = ({
     ]
   );
   const getCellProps = (0, import_react4.useCallback)(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
-      const { className, color } = cellPropList[index];
+    ({ className: classNameProp, index, ...props }, ref = null) => {
+      var _a2;
+      const { className, color } = (_a2 = cellPropList[index]) != null ? _a2 : {};
       return {
         ref,
         className: (0, import_utils8.cx)(classNameProp, className),
@@ -662,10 +664,10 @@ var usePieChart = ({
   );
   return {
     pieVars,
-    getPieProps,
-    getPieChartProps,
+    setHighlightedArea,
     getCellProps,
-    setHighlightedArea
+    getPieChartProps,
+    getPieProps
   };
 };
 
@@ -676,69 +678,69 @@ var PieChart = (0, import_core8.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
   } = (0, import_core8.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 = (0, import_react5.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_recharts.Cell,
       {
-        ...getCellProps({ index, className: "ui-pie-chart__cell" })
+        ...getCellProps({ className: "ui-pie-chart__cell", index })
       },
       `pie-cell-${name}`
     )),
@@ -793,8 +795,8 @@ var PieChart = (0, import_core8.forwardRef)((props, ref) => {
                         className: "ui-pie-chart__tooltip",
                         label,
                         payload: tooltipDataSource === "segment" ? payload : data,
-                        valueFormatter,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),