@yamada-ui/charts 1.3.2 → 1.4.0-dev-20240802181515

package/dist/index.js

@@ -601,20 +601,29 @@ var import_core4 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core4.forwardRef)(
-  ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {
+  ({
+    label,
+    className,
+    payload = [],
+    valueFormatter,
+    labelFormatter,
+    unit,
+    ...rest
+  }, ref) => {
+    var _a;
     const { styles } = useTooltip();
     const items = payload.map(
       ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
-        var _a;
+        var _a2;
         const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
         let value;
         if ((0, import_utils4.isArray)(valueProp)) {
           value = valueProp.map((value2) => {
-            var _a2;
-            return `${(_a2 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a2 : value2}`;
+            var _a3;
+            return `${(_a3 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a3 : value2}`;
           }).join(" - ");
         } else {
-          value = (_a = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a : valueProp;
+          value = (_a2 = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a2 : valueProp;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           import_core4.ui.div,
@@ -663,7 +672,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
         __css: styles.tooltip,
         ...rest,
         children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: (_a = labelFormatter == null ? void 0 : labelFormatter(label)) != null ? _a : label }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
         ]
       }
@@ -686,7 +695,8 @@ var useChartAxis = ({
   xAxisLabel: xAxisLabelProp,
   yAxisLabel: yAxisLabelProp,
   unit,
-  valueFormatter,
+  yAxisTickFormatter = type === "percent" && layoutType === "horizontal" ? valueToPercent : void 0,
+  xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
   styles,
   ...rest
 }) => {
@@ -705,8 +715,6 @@ var useChartAxis = ({
   const getTickLine = (withTickLine) => withTickLine ? { stroke: "currentColor" } : false;
   const xTickLine = getTickLine(withXTickLine);
   const yTickLine = getTickLine(withYTickLine);
-  const yAxisTickFormatter = type === "percent" && layoutType !== "vertical" ? valueToPercent : valueFormatter;
-  const xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : valueFormatter;
   const xAxisLabel = layoutType === "vertical" ? yAxisLabelProp : xAxisLabelProp;
   const yAxisLabel = layoutType === "vertical" ? xAxisLabelProp : yAxisLabelProp;
   const [xAxisProps, xAxisClassName] = getComponentProps(
@@ -1221,7 +1229,10 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     valueFormatter,
+    labelFormatter,
     referenceLineProps,
     tooltipProps,
     tooltipAnimationDuration,
@@ -1280,7 +1291,8 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
-    valueFormatter,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     styles
   });
   const { getReferenceLineProps } = useChartReferenceLine({
@@ -1388,6 +1400,7 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
                         label,
                         payload,
                         valueFormatter,
+                        labelFormatter,
                         unit,
                         ...computedTooltipProps
                       }
@@ -1643,7 +1656,10 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     withLegend = false,
     containerProps,
     unit,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     valueFormatter,
+    labelFormatter,
     tooltipProps,
     tooltipAnimationDuration,
     legendProps,
@@ -1691,7 +1707,8 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
-    valueFormatter,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     styles
   });
   const { getReferenceLineProps } = useChartReferenceLine({
@@ -1801,6 +1818,7 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
                         label,
                         payload,
                         valueFormatter,
+                        labelFormatter,
                         unit,
                         ...computedTooltipProps
                       }
@@ -2219,7 +2237,10 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     unit,
     gridProps,
     strokeDasharray,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     valueFormatter,
+    labelFormatter,
     tooltipProps,
     tooltipAnimationDuration,
     legendProps,
@@ -2288,7 +2309,8 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
-    valueFormatter,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     styles
   });
   const { getReferenceLineProps } = useChartReferenceLine({
@@ -2399,6 +2421,7 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
                         label,
                         payload,
                         valueFormatter,
+                        labelFormatter,
                         unit,
                         ...computedTooltipProps
                       }
@@ -2436,7 +2459,8 @@ var useRadarChart = ({
   withActiveDots = false,
   strokeWidth = 2,
   fillOpacity = 0.4,
-  valueFormatter,
+  polarAngleAxisTickFormatter,
+  polarRadiusAxisTickFormatter,
   strokeDasharray,
   styles,
   ...rest
@@ -2705,7 +2729,7 @@ var useRadarChart = ({
           polarAngleAxisTickClassName
         )
       },
-      tickFormatter: valueFormatter,
+      tickFormatter: polarAngleAxisTickFormatter,
       tickSize: 16,
       ...props,
       ...polarAngleAxisProps
@@ -2715,7 +2739,7 @@ var useRadarChart = ({
       polarAngleAxisClassName,
       polarAngleAxisProps,
       polarAngleAxisTickClassName,
-      valueFormatter
+      polarAngleAxisTickFormatter
     ]
   );
   const getPolarRadiusAxisProps = (0, import_react13.useCallback)(
@@ -2728,7 +2752,7 @@ var useRadarChart = ({
           polarRadiusAxisTickClassName
         )
       },
-      tickFormatter: valueFormatter,
+      tickFormatter: polarRadiusAxisTickFormatter,
       ...props,
       ...polarRadiusAxisProps
     }),
@@ -2736,7 +2760,7 @@ var useRadarChart = ({
       polarRadiusAxisClassName,
       polarRadiusAxisProps,
       polarRadiusAxisTickClassName,
-      valueFormatter
+      polarRadiusAxisTickFormatter
     ]
   );
   return {
@@ -2772,6 +2796,8 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     tooltipAnimationDuration,
     unit,
     valueFormatter,
+    polarAngleAxisTickFormatter,
+    polarRadiusAxisTickFormatter,
     strokeDasharray,
     withDots,
     withActiveDots,
@@ -2807,7 +2833,8 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     withActiveDots,
     strokeWidth,
     fillOpacity,
-    valueFormatter,
+    polarAngleAxisTickFormatter,
+    polarRadiusAxisTickFormatter,
     strokeDasharray,
     styles
   });
@@ -2943,7 +2970,7 @@ var pieChartLabel = ({
   labelOffset: labelOffsetProp,
   isPercent,
   labelProps,
-  valueFormatter,
+  labelFormatter,
   styles
 }) => {
   const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
@@ -2953,8 +2980,8 @@ var pieChartLabel = ({
   const displayLabel = () => {
     if (isPercent) {
       return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
-    } else if (!(0, import_utils18.isUndefined)(valueFormatter)) {
-      return valueFormatter(value);
+    } else if (!(0, import_utils18.isUndefined)(labelFormatter)) {
+      return labelFormatter(value);
     } else {
       return value;
     }
@@ -3015,7 +3042,7 @@ var usePieChart = ({
   paddingAngle = 0,
   startAngle = 90,
   endAngle = -270,
-  valueFormatter,
+  labelFormatter,
   styles,
   ...rest
 }) => {
@@ -3095,11 +3122,11 @@ var usePieChart = ({
       labelOffset,
       isPercent,
       labelProps,
-      valueFormatter,
+      labelFormatter,
       styles: styles.label,
       ...props
     }),
-    [isPercent, labelOffset, labelProps, styles.label, valueFormatter]
+    [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
   );
   const labelLine = (0, import_react15.useCallback)(
     (props) => {
@@ -3228,6 +3255,7 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     tooltipAnimationDuration,
     tooltipDataSource = "all",
     valueFormatter,
+    labelFormatter,
     unit,
     paddingAngle,
     startAngle,
@@ -3263,7 +3291,7 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     withLabelLines,
     labelOffset,
     isPercent,
-    valueFormatter,
+    labelFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -3373,6 +3401,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     tooltipAnimationDuration,
     tooltipDataSource = "all",
     valueFormatter,
+    labelFormatter,
     unit,
     innerRadius,
     outerRadius,
@@ -3408,7 +3437,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     withLabelLines,
     labelOffset,
     isPercent,
-    valueFormatter,
+    labelFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });