@yamada-ui/charts 1.2.1-dev-20240707090208 → 1.3.0-dev-20240711080421

package/dist/index.js

@@ -2914,19 +2914,100 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
 });
 
 // src/donut-chart.tsx
-var import_core18 = require("@yamada-ui/core");
-var import_utils19 = require("@yamada-ui/utils");
+var import_core19 = require("@yamada-ui/core");
+var import_utils20 = require("@yamada-ui/utils");
 var import_react16 = require("react");
 var import_recharts5 = require("recharts");
 
 // src/use-pie-chart.ts
+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_react15 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var RADIAN = Math.PI / 180;
+var DEFAULT_LABEL_OFFSET = 22;
+var pieChartLabel = ({
+  className: cellClassName,
+  cx: cxProp = 0,
+  cy: cyProp = 0,
+  midAngle = 0,
+  innerRadius = 0,
+  outerRadius = 0,
+  middleRadius = 0,
+  percent = 0,
+  value = 0,
+  labelOffset: labelOffsetProp,
+  isParcent,
+  labelProps,
+  valueFormatter,
+  styles
+}) => {
+  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 textAnchor = x > cxProp ? "start" : x < cxProp ? "end" : "middle";
+  const displayLabel = () => {
+    if (isParcent) {
+      return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
+    } else if (!(0, import_utils18.isUndefined)(valueFormatter)) {
+      return valueFormatter(value);
+    } else {
+      return value;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_core17.ui.text,
+    {
+      className: (0, import_utils18.cx)(cellClassName, "ui-chart__label"),
+      x,
+      y,
+      textAnchor,
+      dominantBaseline: "central",
+      __css: styles,
+      ...labelProps,
+      children: displayLabel()
+    }
+  );
+};
+var pieChartLabelLine = ({
+  className: cellClassName,
+  cx: cxProp = 0,
+  cy: cyProp = 0,
+  innerRadius = 0,
+  midAngle = 0,
+  middleRadius = 0,
+  outerRadius = 0,
+  points = [{ x: 0, y: 0 }],
+  labelOffset: labelOffsetProp,
+  labelLineProps,
+  styles
+}) => {
+  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}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_core17.ui.path,
+    {
+      className: (0, import_utils18.cx)(cellClassName, "ui-chart__label-line"),
+      d,
+      __css: styles,
+      ...labelLineProps
+    }
+  );
+};
+
+// src/use-pie-chart.ts
 var usePieChart = ({
   data,
   withLabels = false,
   withLabelLines = false,
+  labelOffset,
+  isParcent = false,
   strokeWidth = 1,
   fillOpacity = 1,
   innerRadius = "0%",
@@ -2934,19 +3015,20 @@ var usePieChart = ({
   paddingAngle = 0,
   startAngle = 90,
   endAngle = -270,
+  valueFormatter,
   styles,
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core17.useTheme)();
+  const { theme } = (0, import_core18.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react15.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
   const {
     activeShape = {},
     inactiveShape = {},
-    label,
-    labelLine,
+    label: labelProps,
+    labelLine: labelLineProps,
     ...computedPieProps
   } = (_b = rest.pieProps) != null ? _b : {};
   const cellColors = (0, import_react15.useMemo)(
@@ -3008,13 +3090,27 @@ var usePieChart = ({
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const labelClassName = (0, import_react15.useMemo)(
-    () => getClassName({ fillOpacity: 1, ...styles.label, ...label })(theme),
-    [label, styles.label, theme]
-  );
-  const labelLineClassName = (0, import_react15.useMemo)(
-    () => getClassName({ ...styles.labelLine, ...labelLine })(theme),
-    [labelLine, styles.labelLine, theme]
+  const label = (0, import_react15.useCallback)(
+    (props) => pieChartLabel({
+      labelOffset,
+      isParcent,
+      labelProps,
+      valueFormatter,
+      styles: styles.label,
+      ...props
+    }),
+    [isParcent, labelOffset, labelProps, styles.label, valueFormatter]
+  );
+  const labelLine = (0, import_react15.useCallback)(
+    (props) => {
+      return pieChartLabelLine({
+        labelOffset,
+        labelLineProps,
+        styles: styles.labelLine,
+        ...props
+      });
+    },
+    [labelLineProps, labelOffset, styles.labelLine]
   );
   const cellPropList = (0, import_react15.useMemo)(
     () => data.map((props, index) => {
@@ -3049,21 +3145,16 @@ var usePieChart = ({
   const getPieChartProps = (0, import_react15.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils18.cx)(className, chartClassName),
+      className: (0, import_utils19.cx)(className, chartClassName),
       ...props,
       ...chartProps
     }),
     [chartProps, chartClassName]
   );
   const getPieProps = (0, import_react15.useCallback)(
-    ({
-      className,
-      labelClassName: labelClassNameProp,
-      labelLineClassName: labelLineClassNameProp,
-      ...props
-    }, ref = null) => ({
+    ({ className, ...props }, ref = null) => ({
       ref,
-      className: (0, import_utils18.cx)(className, pieClassName),
+      className: (0, import_utils19.cx)(className, pieClassName),
       dataKey: "value",
       data,
       rootTabIndex: -1,
@@ -3073,8 +3164,8 @@ var usePieChart = ({
       startAngle,
       endAngle,
       isAnimationActive: false,
-      label: withLabels ? { className: (0, import_utils18.cx)(labelClassNameProp, labelClassName) } : false,
-      labelLine: withLabelLines ? { className: (0, import_utils18.cx)(labelLineClassNameProp, labelLineClassName) } : false,
+      label: withLabels ? label : false,
+      labelLine: withLabelLines ? labelLine : false,
       activeShape: activeShapeProps,
       inactiveShape: inactiveShapeProps,
       ...props,
@@ -3089,9 +3180,9 @@ var usePieChart = ({
       startAngle,
       endAngle,
       withLabels,
-      labelClassName,
+      label,
       withLabelLines,
-      labelLineClassName,
+      labelLine,
       activeShapeProps,
       inactiveShapeProps,
       pieProps
@@ -3102,7 +3193,7 @@ var usePieChart = ({
       const { className, color } = cellPropList[index];
       return {
         ref,
-        className: (0, import_utils18.cx)(classNameProp, className),
+        className: (0, import_utils19.cx)(classNameProp, className),
         fill: color,
         stroke: color,
         strokeWidth,
@@ -3121,9 +3212,9 @@ var usePieChart = ({
 };
 
 // src/donut-chart.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core18.useMultiComponentStyle)("DonutChart", props);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core19.useMultiComponentStyle)("DonutChart", props);
   const {
     className,
     data,
@@ -3143,12 +3234,14 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
     endAngle,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
     innerRadius = withLabels ? "60%" : "80%",
     outerRadius,
     strokeWidth,
     legendProps,
     ...rest
-  } = (0, import_core18.omitThemeProps)(mergedProps);
+  } = (0, import_core19.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3168,6 +3261,9 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
     strokeWidth,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
+    valueFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -3180,7 +3276,7 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
     legendProps
   });
   const cells = (0, import_react16.useMemo)(
-    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_recharts5.Cell,
       {
         ...getCellProps({ index, className: "ui-donut-chart__cell" })
@@ -3189,38 +3285,36 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
     )),
     [data, getCellProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_core18.ui.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_core19.ui.div,
     {
       ref,
-      className: (0, import_utils19.cx)("ui-donut-chart", className),
+      className: (0, import_utils20.cx)("ui-donut-chart", className),
       var: pieVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         import_recharts5.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-donut-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             import_recharts5.PieChart,
             {
               ...getPieChartProps({ className: "ui-donut-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   import_recharts5.Pie,
                   {
                     ...getPieProps({
-                      className: "ui-donut-chart__donut",
-                      labelClassName: "ui-donut-chart__label",
-                      labelLineClassName: "ui-donut-chart__label-line"
+                      className: "ui-donut-chart__donut"
                     }),
                     children: cells
                   }
                 ),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   import_recharts5.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       ChartLegend,
                       {
                         className: "ui-donut-chart__legend",
@@ -3232,10 +3326,10 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   import_recharts5.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-donut-chart__tooltip",
@@ -3259,13 +3353,13 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
 });
 
 // src/pie-chart.tsx
-var import_core19 = require("@yamada-ui/core");
-var import_utils20 = require("@yamada-ui/utils");
+var import_core20 = require("@yamada-ui/core");
+var import_utils21 = require("@yamada-ui/utils");
 var import_react17 = require("react");
 var import_recharts6 = require("recharts");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var PieChart = (0, import_core19.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core19.useMultiComponentStyle)("PieChart", props);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var PieChart = (0, import_core20.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core20.useMultiComponentStyle)("PieChart", props);
   const {
     className,
     data,
@@ -3287,10 +3381,12 @@ var PieChart = (0, import_core19.forwardRef)((props, ref) => {
     endAngle,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
     strokeWidth,
     legendProps,
     ...rest
-  } = (0, import_core19.omitThemeProps)(mergedProps);
+  } = (0, import_core20.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3310,6 +3406,9 @@ var PieChart = (0, import_core19.forwardRef)((props, ref) => {
     strokeWidth,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
+    valueFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -3322,7 +3421,7 @@ var PieChart = (0, import_core19.forwardRef)((props, ref) => {
     legendProps
   });
   const cells = (0, import_react17.useMemo)(
-    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_recharts6.Cell,
       {
         ...getCellProps({ index, className: "ui-pie-chart__cell" })
@@ -3331,38 +3430,36 @@ var PieChart = (0, import_core19.forwardRef)((props, ref) => {
     )),
     [data, getCellProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_core19.ui.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_core20.ui.div,
     {
       ref,
-      className: (0, import_utils20.cx)("ui-pie-chart", className),
+      className: (0, import_utils21.cx)("ui-pie-chart", className),
       var: pieVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_recharts6.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-pie-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             import_recharts6.PieChart,
             {
               ...getPieChartProps({ className: "ui-pie-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   import_recharts6.Pie,
                   {
                     ...getPieProps({
-                      className: "ui-pie-chart__pie",
-                      labelClassName: "ui-pie-chart__label",
-                      labelLineClassName: "ui-pie-chart__label-line"
+                      className: "ui-pie-chart__pie"
                     }),
                     children: cells
                   }
                 ),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   import_recharts6.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       ChartLegend,
                       {
                         className: "ui-pie-chart__legend",
@@ -3374,10 +3471,10 @@ var PieChart = (0, import_core19.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   import_recharts6.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-pie-chart__tooltip",