@yamada-ui/charts 2.0.0-next-20240820160301 → 2.0.0-next-20240908154823

package/dist/donut-chart.js

@@ -24,9 +24,9 @@ __export(donut_chart_exports, {
   DonutChart: () => DonutChart
 });
 module.exports = __toCommonJS(donut_chart_exports);
-var import_core8 = require("@yamada-ui/core");
-var import_utils9 = require("@yamada-ui/utils");
-var import_react5 = require("react");
+var import_core9 = require("@yamada-ui/core");
+var import_utils10 = require("@yamada-ui/utils");
+var import_react6 = require("react");
 var import_recharts = require("recharts");
 
 // src/chart-legend.tsx
@@ -143,6 +143,16 @@ var pieProperties = [
   "onMouseEnter",
   "onMouseLeave"
 ];
+var labelProperties = [
+  "viewBox",
+  "formatter",
+  "value",
+  "position",
+  "offset",
+  "children",
+  "content",
+  "id"
+];
 
 // src/use-chart.ts
 var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
@@ -230,18 +240,26 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core4.forwardRef)(
   ({
     label,
+    dataKey = "value",
     className,
     payload = [],
     valueFormatter,
     labelFormatter,
     unit,
+    isRadialChart,
     ...rest
   }, ref) => {
     var _a;
     const { styles } = useTooltip();
     const items = payload.map(
-      ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
+      ({
+        color: colorProp,
+        name: nameProp,
+        [dataKey]: valueProp,
+        payload: payload2
+      } = {}, index) => {
         var _a2;
+        const name = isRadialChart ? payload2 == null ? void 0 : payload2.name : nameProp;
         const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
         let value;
         if ((0, import_utils4.isArray)(valueProp)) {
@@ -307,17 +325,42 @@ var ChartTooltip = (0, import_core4.forwardRef)(
   }
 );
 
-// src/use-chart-legend.ts
+// src/use-chart-label.ts
+var import_core5 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
+var useChartLabel = ({ styles, ...rest }) => {
+  var _a;
+  const { theme } = (0, import_core5.useTheme)();
+  const [labelProps, labelClassName] = getComponentProps(
+    [(_a = rest.labelProps) != null ? _a : {}, labelProperties],
+    styles.label
+  )(theme);
+  const getLabelProps = (0, import_react2.useCallback)(
+    ({ className, ...props } = {}, ref = null) => {
+      return {
+        ref,
+        className: (0, import_utils5.cx)(className, labelClassName),
+        ...props,
+        ...labelProps
+      };
+    },
+    [labelClassName, labelProps]
+  );
+  return { getLabelProps };
+};
+
+// src/use-chart-legend.ts
+var import_utils6 = require("@yamada-ui/utils");
+var import_react3 = require("react");
 var useChartLegend = ({
   legendProps: _legendProps = {}
 }) => {
-  const [rest, legendProps] = (0, import_utils5.splitObject)(
+  const [rest, legendProps] = (0, import_utils6.splitObject)(
     _legendProps,
     legendProperties
   );
-  const getLegendProps = (0, import_react2.useCallback)(
+  const getLegendProps = (0, import_react3.useCallback)(
     (props, ref = null) => {
       return {
         ref,
@@ -332,31 +375,31 @@ var useChartLegend = ({
 };
 
 // src/use-chart-tooltip.ts
-var import_core5 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-var import_react3 = require("react");
+var import_core6 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_react4 = require("react");
 var useChartTooltip = ({
   tooltipProps: _tooltipProps = {},
   tooltipAnimationDuration = 0,
   styles
 }) => {
-  const { theme } = (0, import_core5.useTheme)();
+  const { theme } = (0, import_core6.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
-  const cursorClassName = (0, import_react3.useMemo)(
+  const cursorClassName = (0, import_react4.useMemo)(
     () => getClassName({ ...styles.cursor, ...cursor })(theme),
     [cursor, styles.cursor, theme]
   );
-  const [tooltipProps, tooltipUIProps] = (0, import_utils6.splitObject)(
+  const [tooltipProps, tooltipUIProps] = (0, import_utils7.splitObject)(
     rest,
     tooltipProperties
   );
-  const getTooltipProps = (0, import_react3.useCallback)(
+  const getTooltipProps = (0, import_react4.useCallback)(
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
       isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
-        className: (0, import_utils6.cx)("ui-chart__cursor", cursorClassName)
+        className: (0, import_utils7.cx)("ui-chart__cursor", cursorClassName)
       },
       ...props,
       ...tooltipProps
@@ -367,13 +410,13 @@ var useChartTooltip = ({
 };
 
 // src/use-pie-chart.ts
-var import_core7 = require("@yamada-ui/core");
-var import_utils8 = require("@yamada-ui/utils");
-var import_react4 = require("react");
+var import_core8 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react5 = require("react");
 
 // src/pie-chart-label.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_utils7 = require("@yamada-ui/utils");
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var RADIAN = Math.PI / 180;
 var DEFAULT_LABEL_OFFSET = 22;
@@ -400,16 +443,16 @@ var pieChartLabel = ({
   const displayLabel = () => {
     if (isPercent) {
       return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
-    } else if (!(0, import_utils7.isUndefined)(labelFormatter)) {
+    } else if (!(0, import_utils8.isUndefined)(labelFormatter)) {
       return labelFormatter(value);
     } else {
       return value;
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_core6.ui.text,
+    import_core7.ui.text,
     {
-      className: (0, import_utils7.cx)(cellClassName, "ui-chart__label"),
+      className: (0, import_utils8.cx)(cellClassName, "ui-chart__label"),
       x,
       y,
       textAnchor,
@@ -438,9 +481,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_runtime3.jsx)(
-    import_core6.ui.path,
+    import_core7.ui.path,
     {
-      className: (0, import_utils7.cx)(cellClassName, "ui-chart__label-line"),
+      className: (0, import_utils8.cx)(cellClassName, "ui-chart__label-line"),
       d,
       __css: styles,
       ...labelLineProps
@@ -467,8 +510,8 @@ var usePieChart = ({
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core7.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react4.useState)(null);
+  const { theme } = (0, import_core8.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react5.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
   const {
@@ -478,23 +521,22 @@ var usePieChart = ({
     labelLine: labelLineProps,
     ...computedPieProps
   } = (_b = rest.pieProps) != null ? _b : {};
-  const cellColors = (0, import_react4.useMemo)(
+  const cellColors = (0, import_react5.useMemo)(
     () => data.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `cell-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
     })),
     [data]
   );
-  const pieVars = (0, import_react4.useMemo)(
+  const pieVars = (0, import_react5.useMemo)(
     () => [
       ...cellColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, cellColors]
   );
-  const [chartProps, chartClassName] = (0, import_react4.useMemo)(
+  const [chartProps, chartClassName] = (0, import_react5.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -504,40 +546,40 @@ var usePieChart = ({
     },
     [rest.chartProps, styles.chart, theme]
   );
-  const [pieProps, pieClassName] = (0, import_react4.useMemo)(
+  const [pieProps, pieClassName] = (0, import_react5.useMemo)(
     () => getComponentProps(
       [computedPieProps, pieProperties],
       styles.pie
     )(theme),
     [computedPieProps, styles.pie, theme]
   );
-  const cellClassName = (0, import_react4.useMemo)(() => {
+  const cellClassName = (0, import_react5.useMemo)(() => {
     const resolvedCellProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
       ...styles.cell,
       ...computedCellProps
     };
     return getClassName(resolvedCellProps)(theme);
   }, [computedCellProps, styles.cell, theme]);
-  const dimCellClassName = (0, import_react4.useMemo)(() => {
+  const dimCellClassName = (0, import_react5.useMemo)(() => {
     const resolvedDimCell = { ...styles.dimCell, ...dimCell };
     return getClassName(resolvedDimCell)(theme);
   }, [dimCell, styles.dimCell, theme]);
-  const activeShapeProps = (0, import_react4.useMemo)(
+  const activeShapeProps = (0, import_react5.useMemo)(
     () => getComponentProps(
       [activeShape, pieProperties],
       styles.activeShape
     )(theme, true),
     [activeShape, styles.activeShape, theme]
   );
-  const inactiveShapeProps = (0, import_react4.useMemo)(
+  const inactiveShapeProps = (0, import_react5.useMemo)(
     () => getComponentProps(
       [inactiveShape, pieProperties],
       styles.inactiveShape
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const label = (0, import_react4.useCallback)(
+  const label = (0, import_react5.useCallback)(
     (props) => pieChartLabel({
       labelOffset,
       isPercent,
@@ -548,7 +590,7 @@ var usePieChart = ({
     }),
     [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
   );
-  const labelLine = (0, import_react4.useCallback)(
+  const labelLine = (0, import_react5.useCallback)(
     (props) => {
       return pieChartLabelLine({
         labelOffset,
@@ -559,10 +601,10 @@ var usePieChart = ({
     },
     [labelLineProps, labelOffset, styles.labelLine]
   );
-  const cellPropList = (0, import_react4.useMemo)(
+  const cellPropList = (0, import_react5.useMemo)(
     () => data.map((props, index) => {
       const { name, dimCell: dimCell2 = {}, ...computedProps } = props;
-      const color = `var(--ui-cell-${index})`;
+      const color = (0, import_core8.getVar)(`cell-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== name;
       const resolvedProps = {
         ...computedProps,
@@ -589,19 +631,19 @@ var usePieChart = ({
       theme
     ]
   );
-  const getPieChartProps = (0, import_react4.useCallback)(
+  const getPieChartProps = (0, import_react5.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils8.cx)(className, chartClassName),
+      className: (0, import_utils9.cx)(className, chartClassName),
       ...props,
       ...chartProps
     }),
     [chartProps, chartClassName]
   );
-  const getPieProps = (0, import_react4.useCallback)(
+  const getPieProps = (0, import_react5.useCallback)(
     ({ className, ...props }, ref = null) => ({
       ref,
-      className: (0, import_utils8.cx)(className, pieClassName),
+      className: (0, import_utils9.cx)(className, pieClassName),
       dataKey: "value",
       data,
       rootTabIndex: -1,
@@ -635,12 +677,12 @@ var usePieChart = ({
       pieProps
     ]
   );
-  const getCellProps = (0, import_react4.useCallback)(
+  const getCellProps = (0, import_react5.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
       const { className, color } = cellPropList[index];
       return {
         ref,
-        className: (0, import_utils8.cx)(classNameProp, className),
+        className: (0, import_utils9.cx)(classNameProp, className),
         fill: color,
         stroke: color,
         strokeWidth,
@@ -660,8 +702,8 @@ var usePieChart = ({
 
 // src/donut-chart.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("DonutChart", props);
+var DonutChart = (0, import_core9.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)("DonutChart", props);
   const {
     className,
     data,
@@ -688,8 +730,9 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
     outerRadius,
     strokeWidth,
     legendProps,
+    labelProps,
     ...rest
-  } = (0, import_core8.omitThemeProps)(mergedProps);
+  } = (0, import_core9.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -723,7 +766,8 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const cells = (0, import_react5.useMemo)(
+  const { getLabelProps } = useChartLabel({ labelProps, styles });
+  const cells = (0, import_react6.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_recharts.Cell,
       {
@@ -734,12 +778,11 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_core8.ui.div,
+    import_core9.ui.div,
     {
       ref,
-      className: (0, import_utils9.cx)("ui-donut-chart", className),
-      var: pieVars,
-      __css: { ...styles.container },
+      className: (0, import_utils10.cx)("ui-donut-chart", className),
+      __css: { maxW: "full", vars: pieVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_recharts.ResponsiveContainer,
@@ -750,13 +793,21 @@ var DonutChart = (0, import_core8.forwardRef)((props, ref) => {
             {
               ...getPieChartProps({ className: "ui-donut-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   import_recharts.Pie,
                   {
                     ...getPieProps({
                       className: "ui-donut-chart__donut"
                     }),
-                    children: cells
+                    children: [
+                      cells,
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        import_recharts.Label,
+                        {
+                          ...getLabelProps({ className: "ui-donut-chart__label" })
+                        }
+                      )
+                    ]
                   }
                 ),
                 withLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(