@yamada-ui/charts 1.4.1-next-20240820155044 → 1.5.0-dev-20240822150649

package/dist/index.js

@@ -2968,19 +2968,44 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
 });
 
 // src/donut-chart.tsx
+var import_core20 = require("@yamada-ui/core");
+var import_utils21 = require("@yamada-ui/utils");
+var import_react17 = require("react");
+var import_recharts6 = require("recharts");
+
+// src/use-chart-label.ts
+var import_core17 = require("@yamada-ui/core");
+var import_utils18 = require("@yamada-ui/utils");
+var import_react15 = require("react");
+var useChartLabel = ({ styles, ...rest }) => {
+  var _a;
+  const { theme } = (0, import_core17.useTheme)();
+  const [labelProps, labelClassName] = getComponentProps(
+    [(_a = rest.labelProps) != null ? _a : {}, labelProperties],
+    styles.label
+  )(theme);
+  const getLabelProps = (0, import_react15.useCallback)(
+    ({ className, ...props } = {}, ref = null) => {
+      return {
+        ref,
+        className: (0, import_utils18.cx)(className, labelClassName),
+        ...props,
+        ...labelProps
+      };
+    },
+    [labelClassName, labelProps]
+  );
+  return { getLabelProps };
+};
+
+// src/use-pie-chart.ts
 var import_core19 = require("@yamada-ui/core");
 var import_utils20 = require("@yamada-ui/utils");
 var import_react16 = require("react");
-var import_recharts6 = require("recharts");
 
-// src/use-pie-chart.ts
+// src/pie-chart-label.tsx
 var import_core18 = require("@yamada-ui/core");
 var import_utils19 = require("@yamada-ui/utils");
-var import_react15 = require("react");
-
-// src/pie-chart-label.tsx
-var import_core17 = require("@yamada-ui/core");
-var import_utils18 = require("@yamada-ui/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var RADIAN = Math.PI / 180;
 var DEFAULT_LABEL_OFFSET = 22;
@@ -3007,16 +3032,16 @@ var pieChartLabel = ({
   const displayLabel = () => {
     if (isPercent) {
       return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
-    } else if (!(0, import_utils18.isUndefined)(labelFormatter)) {
+    } else if (!(0, import_utils19.isUndefined)(labelFormatter)) {
       return labelFormatter(value);
     } else {
       return value;
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_core17.ui.text,
+    import_core18.ui.text,
     {
-      className: (0, import_utils18.cx)(cellClassName, "ui-chart__label"),
+      className: (0, import_utils19.cx)(cellClassName, "ui-chart__label"),
       x,
       y,
       textAnchor,
@@ -3045,9 +3070,9 @@ var pieChartLabelLine = ({
   const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
   const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_core17.ui.path,
+    import_core18.ui.path,
     {
-      className: (0, import_utils18.cx)(cellClassName, "ui-chart__label-line"),
+      className: (0, import_utils19.cx)(cellClassName, "ui-chart__label-line"),
       d,
       __css: styles,
       ...labelLineProps
@@ -3074,8 +3099,8 @@ var usePieChart = ({
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core18.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react15.useState)(null);
+  const { theme } = (0, import_core19.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react16.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
   const {
@@ -3085,7 +3110,7 @@ var usePieChart = ({
     labelLine: labelLineProps,
     ...computedPieProps
   } = (_b = rest.pieProps) != null ? _b : {};
-  const cellColors = (0, import_react15.useMemo)(
+  const cellColors = (0, import_react16.useMemo)(
     () => data.map(({ color }, index) => ({
       __prefix: "ui",
       name: `cell-${index}`,
@@ -3094,14 +3119,14 @@ var usePieChart = ({
     })),
     [data]
   );
-  const pieVars = (0, import_react15.useMemo)(
+  const pieVars = (0, import_react16.useMemo)(
     () => [
       ...cellColors,
       { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, cellColors]
   );
-  const [chartProps, chartClassName] = (0, import_react15.useMemo)(
+  const [chartProps, chartClassName] = (0, import_react16.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -3111,14 +3136,14 @@ var usePieChart = ({
     },
     [rest.chartProps, styles.chart, theme]
   );
-  const [pieProps, pieClassName] = (0, import_react15.useMemo)(
+  const [pieProps, pieClassName] = (0, import_react16.useMemo)(
     () => getComponentProps(
       [computedPieProps, pieProperties],
       styles.pie
     )(theme),
     [computedPieProps, styles.pie, theme]
   );
-  const cellClassName = (0, import_react15.useMemo)(() => {
+  const cellClassName = (0, import_react16.useMemo)(() => {
     const resolvedCellProps = {
       fillOpacity: "var(--ui-fill-opacity)",
       ...styles.cell,
@@ -3126,25 +3151,25 @@ var usePieChart = ({
     };
     return getClassName(resolvedCellProps)(theme);
   }, [computedCellProps, styles.cell, theme]);
-  const dimCellClassName = (0, import_react15.useMemo)(() => {
+  const dimCellClassName = (0, import_react16.useMemo)(() => {
     const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell };
     return getClassName(resolvedDimCell)(theme);
   }, [dimCell, theme]);
-  const activeShapeProps = (0, import_react15.useMemo)(
+  const activeShapeProps = (0, import_react16.useMemo)(
     () => getComponentProps(
       [{ _focus: { outline: "none" }, ...activeShape }, pieProperties],
       styles.activeShape
     )(theme, true),
     [activeShape, styles.activeShape, theme]
   );
-  const inactiveShapeProps = (0, import_react15.useMemo)(
+  const inactiveShapeProps = (0, import_react16.useMemo)(
     () => getComponentProps(
       [inactiveShape, pieProperties],
       styles.inactiveShape
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const label = (0, import_react15.useCallback)(
+  const label = (0, import_react16.useCallback)(
     (props) => pieChartLabel({
       labelOffset,
       isPercent,
@@ -3155,7 +3180,7 @@ var usePieChart = ({
     }),
     [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
   );
-  const labelLine = (0, import_react15.useCallback)(
+  const labelLine = (0, import_react16.useCallback)(
     (props) => {
       return pieChartLabelLine({
         labelOffset,
@@ -3166,7 +3191,7 @@ var usePieChart = ({
     },
     [labelLineProps, labelOffset, styles.labelLine]
   );
-  const cellPropList = (0, import_react15.useMemo)(
+  const cellPropList = (0, import_react16.useMemo)(
     () => data.map((props, index) => {
       const { name, dimCell: dimCell2 = {}, ...computedProps } = props;
       const color = `var(--ui-cell-${index})`;
@@ -3196,19 +3221,19 @@ var usePieChart = ({
       theme
     ]
   );
-  const getPieChartProps = (0, import_react15.useCallback)(
+  const getPieChartProps = (0, import_react16.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils19.cx)(className, chartClassName),
+      className: (0, import_utils20.cx)(className, chartClassName),
       ...props,
       ...chartProps
     }),
     [chartProps, chartClassName]
   );
-  const getPieProps = (0, import_react15.useCallback)(
+  const getPieProps = (0, import_react16.useCallback)(
     ({ className, ...props }, ref = null) => ({
       ref,
-      className: (0, import_utils19.cx)(className, pieClassName),
+      className: (0, import_utils20.cx)(className, pieClassName),
       dataKey: "value",
       data,
       rootTabIndex: -1,
@@ -3242,12 +3267,12 @@ var usePieChart = ({
       pieProps
     ]
   );
-  const getCellProps = (0, import_react15.useCallback)(
+  const getCellProps = (0, import_react16.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
       const { className, color } = cellPropList[index];
       return {
         ref,
-        className: (0, import_utils19.cx)(classNameProp, className),
+        className: (0, import_utils20.cx)(classNameProp, className),
         fill: color,
         stroke: color,
         strokeWidth,
@@ -3267,8 +3292,8 @@ var usePieChart = ({
 
 // src/donut-chart.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core19.useMultiComponentStyle)("DonutChart", props);
+var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core20.useMultiComponentStyle)("DonutChart", props);
   const {
     className,
     data,
@@ -3295,8 +3320,9 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     outerRadius,
     strokeWidth,
     legendProps,
+    labelProps,
     ...rest
-  } = (0, import_core19.omitThemeProps)(mergedProps);
+  } = (0, import_core20.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3330,7 +3356,8 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const cells = (0, import_react16.useMemo)(
+  const { getLabelProps } = useChartLabel({ labelProps, styles });
+  const cells = (0, import_react17.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_recharts6.Cell,
       {
@@ -3341,10 +3368,10 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_core19.ui.div,
+    import_core20.ui.div,
     {
       ref,
-      className: (0, import_utils20.cx)("ui-donut-chart", className),
+      className: (0, import_utils21.cx)("ui-donut-chart", className),
       var: pieVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
@@ -3357,13 +3384,21 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
             {
               ...getPieChartProps({ className: "ui-donut-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   import_recharts6.Pie,
                   {
                     ...getPieProps({
                       className: "ui-donut-chart__donut"
                     }),
-                    children: cells
+                    children: [
+                      cells,
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        import_recharts6.Label,
+                        {
+                          ...getLabelProps({ className: "ui-donut-chart__label" })
+                        }
+                      )
+                    ]
                   }
                 ),
                 withLegend ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3408,13 +3443,13 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
 });
 
 // src/pie-chart.tsx
-var import_core20 = require("@yamada-ui/core");
-var import_utils21 = require("@yamada-ui/utils");
-var import_react17 = require("react");
+var import_core21 = require("@yamada-ui/core");
+var import_utils22 = require("@yamada-ui/utils");
+var import_react18 = require("react");
 var import_recharts7 = require("recharts");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var PieChart = (0, import_core20.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core20.useMultiComponentStyle)("PieChart", props);
+var PieChart = (0, import_core21.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core21.useMultiComponentStyle)("PieChart", props);
   const {
     className,
     data,
@@ -3442,7 +3477,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     strokeWidth,
     legendProps,
     ...rest
-  } = (0, import_core20.omitThemeProps)(mergedProps);
+  } = (0, import_core21.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3476,7 +3511,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const cells = (0, import_react17.useMemo)(
+  const cells = (0, import_react18.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts7.Cell,
       {
@@ -3487,10 +3522,10 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_core20.ui.div,
+    import_core21.ui.div,
     {
       ref,
-      className: (0, import_utils21.cx)("ui-pie-chart", className),
+      className: (0, import_utils22.cx)("ui-pie-chart", className),
       var: pieVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,