@yamada-ui/charts 2.0.0-next-20240706053520 → 2.0.0-next-20240713062626

package/dist/index.js

@@ -1081,7 +1081,11 @@ var useLineChart = ({
           activeDotClassName
         )(theme);
         resolvedActiveDot = {
-          className: (0, import_utils10.cx)("ui-line-chart__active-dot", className),
+          className: (0, import_utils10.cx)(
+            "ui-line-chart__dot",
+            "ui-line-chart__dot--active",
+            className
+          ),
           fill: color,
           stroke: color,
           r: 4,
@@ -2024,7 +2028,11 @@ var useAreaChart = ({
           activeDotClassName
         )(theme);
         resolvedActiveDot = {
-          className: (0, import_utils14.cx)("ui-area-chart__active-dot", className),
+          className: (0, import_utils14.cx)(
+            "ui-area-chart__dot",
+            "ui-area-chart__dot--active",
+            className
+          ),
           stroke: color,
           r: 4,
           ...rest3
@@ -2579,7 +2587,11 @@ var useRadarChart = ({
           activeDotClassName
         )(theme);
         resolvedActiveDot = {
-          className: (0, import_utils16.cx)("ui-radar-chart__active-dot", className),
+          className: (0, import_utils16.cx)(
+            "ui-radar-chart__dot",
+            "ui-radar-chart__dot--active",
+            className
+          ),
           fill: color,
           stroke: color,
           r: 4,
@@ -2897,19 +2909,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%",
@@ -2917,19 +3010,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)(
@@ -2991,13 +3085,27 @@ var usePieChart = ({
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const labelClassName = (0, import_react15.useMemo)(
-    () => getClassName({ ...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) => {
@@ -3032,21 +3140,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,
@@ -3056,8 +3159,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,
@@ -3072,9 +3175,9 @@ var usePieChart = ({
       startAngle,
       endAngle,
       withLabels,
-      labelClassName,
+      label,
       withLabelLines,
-      labelLineClassName,
+      labelLine,
       activeShapeProps,
       inactiveShapeProps,
       pieProps
@@ -3085,7 +3188,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,
@@ -3104,9 +3207,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,
@@ -3126,12 +3229,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,
@@ -3151,6 +3256,9 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
     strokeWidth,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
+    valueFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -3163,7 +3271,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" })
@@ -3172,38 +3280,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: { ...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",
@@ -3215,10 +3321,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",
@@ -3242,13 +3348,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,
@@ -3270,10 +3376,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,
@@ -3293,6 +3401,9 @@ var PieChart = (0, import_core19.forwardRef)((props, ref) => {
     strokeWidth,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
+    valueFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -3305,7 +3416,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" })
@@ -3314,38 +3425,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: { ...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",
@@ -3357,10 +3466,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",