@yamada-ui/charts 2.0.0-next-20240703154117 → 2.0.0-next-20240705212157

package/dist/index.js

@@ -506,6 +506,16 @@ var polarRadiusAxisProperties = [
   "onMouseEnter",
   "onMouseLeave"
 ];
+var labelProperties = [
+  "viewBox",
+  "formatter",
+  "value",
+  "position",
+  "offset",
+  "children",
+  "content",
+  "id"
+];
 
 // src/use-chart.ts
 var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
@@ -673,12 +683,14 @@ var useChartAxis = ({
   gridAxis = "x",
   withXAxis = true,
   withYAxis = true,
-  xAxisProps: _xAxisProps = {},
-  yAxisProps: _yAxisProps = {},
+  xAxisLabel: xAxisLabelProp,
+  yAxisLabel: yAxisLabelProp,
   unit,
   valueFormatter,
-  styles
+  styles,
+  ...rest
 }) => {
+  var _a, _b, _c, _d;
   const { theme } = (0, import_core5.useTheme)();
   const xAxisKey = (0, import_react2.useMemo)(
     () => layoutType === "vertical" ? { type: "number" } : { dataKey },
@@ -695,14 +707,24 @@ var useChartAxis = ({
   const yTickLine = getTickLine(withYTickLine);
   const yAxisTickFormatter = type === "percent" && layoutType !== "vertical" ? valueToPercent : valueFormatter;
   const xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : valueFormatter;
-  const [xAxisReChartsProps, xAxisClassName] = getComponentProps(
-    [_xAxisProps, xAxisProperties],
+  const xAxisLabel = layoutType === "vertical" ? yAxisLabelProp : xAxisLabelProp;
+  const yAxisLabel = layoutType === "vertical" ? xAxisLabelProp : yAxisLabelProp;
+  const [xAxisProps, xAxisClassName] = getComponentProps(
+    [(_a = rest.xAxisProps) != null ? _a : {}, xAxisProperties],
     styles.xAxis
   )(theme);
-  const [yAxisReChartsProps, yAxisClassName] = getComponentProps(
-    [_yAxisProps, yAxisProperties],
+  const [yAxisProps, yAxisClassName] = getComponentProps(
+    [(_b = rest.yAxisProps) != null ? _b : {}, yAxisProperties],
     styles.yAxis
   )(theme);
+  const [xAxisLabelProps, xAxisLabelClassName] = getComponentProps(
+    [(_c = rest.xAxisLabelProps) != null ? _c : {}, labelProperties],
+    styles.xAxisLabel
+  )(theme);
+  const [yAxisLabelProps, yAxisLabelClassName] = getComponentProps(
+    [(_d = rest.yAxisLabelProps) != null ? _d : {}, labelProperties],
+    styles.yAxisLabel
+  )(theme);
   const getXAxisProps = (0, import_react2.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils5.cx)(className, xAxisClassName),
@@ -718,7 +740,7 @@ var useChartAxis = ({
       minTickGap: 5,
       tickFormatter: xAxisTickFormatter,
       ...props,
-      ...xAxisReChartsProps
+      ...xAxisProps
     }),
     [
       xAxisClassName,
@@ -726,7 +748,7 @@ var useChartAxis = ({
       xAxisKey,
       xTickLine,
       xAxisTickFormatter,
-      xAxisReChartsProps
+      xAxisProps
     ]
   );
   const getYAxisProps = (0, import_react2.useCallback)(
@@ -744,7 +766,7 @@ var useChartAxis = ({
       unit,
       tickFormatter: yAxisTickFormatter,
       ...props,
-      ...yAxisReChartsProps
+      ...yAxisProps
     }),
     [
       yAxisClassName,
@@ -753,10 +775,39 @@ var useChartAxis = ({
       yTickLine,
       unit,
       yAxisTickFormatter,
-      yAxisReChartsProps
+      yAxisProps
     ]
   );
-  return { getXAxisProps, getYAxisProps };
+  const getXAxisLabelProps = (0, import_react2.useCallback)(
+    ({ className, ...props } = {}) => ({
+      className: (0, import_utils5.cx)(className, xAxisLabelClassName),
+      value: xAxisLabel,
+      position: "insideBottom",
+      offset: -20,
+      ...props,
+      ...xAxisLabelProps
+    }),
+    [xAxisLabel, xAxisLabelClassName, xAxisLabelProps]
+  );
+  const getYAxisLabelProps = (0, import_react2.useCallback)(
+    ({ className, ...props } = {}) => ({
+      className: (0, import_utils5.cx)(className, yAxisLabelClassName),
+      value: yAxisLabel,
+      position: "insideLeft",
+      angle: -90,
+      textAnchor: "middle",
+      offset: -5,
+      ...props,
+      ...yAxisLabelProps
+    }),
+    [yAxisLabel, yAxisLabelClassName, yAxisLabelProps]
+  );
+  return {
+    getXAxisProps,
+    getYAxisProps,
+    getXAxisLabelProps,
+    getYAxisLabelProps
+  };
 };
 var valueToPercent = (value) => {
   return `${(value * 100).toFixed(0)}%`;
@@ -911,6 +962,8 @@ var useLineChart = ({
   referenceLineProps,
   fillOpacity = 1,
   syncId,
+  xAxisLabel,
+  yAxisLabel,
   styles,
   ...rest
 }) => {
@@ -1092,10 +1145,23 @@ var useLineChart = ({
       data,
       layout: layoutType,
       syncId,
+      margin: {
+        bottom: xAxisLabel ? 30 : void 0,
+        left: yAxisLabel ? 10 : void 0,
+        right: yAxisLabel ? 5 : void 0
+      },
       ...props,
       ...chartProps
     }),
-    [data, layoutType, syncId, lineChartClassName, chartProps]
+    [
+      lineChartClassName,
+      data,
+      layoutType,
+      syncId,
+      xAxisLabel,
+      yAxisLabel,
+      chartProps
+    ]
   );
   const getLineProps = (0, import_react7.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
@@ -1145,6 +1211,10 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     withYAxis,
     xAxisProps,
     yAxisProps,
+    xAxisLabel,
+    yAxisLabel,
+    xAxisLabelProps,
+    yAxisLabelProps,
     unit,
     valueFormatter,
     referenceLineProps,
@@ -1180,10 +1250,17 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     connectNulls,
     fillOpacity,
     syncId,
+    xAxisLabel,
+    yAxisLabel,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
-  const { getXAxisProps, getYAxisProps } = useChartAxis({
+  const {
+    getXAxisProps,
+    getYAxisProps,
+    getXAxisLabelProps,
+    getYAxisLabelProps
+  } = useChartAxis({
     dataKey,
     type,
     layoutType,
@@ -1193,6 +1270,10 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     withYAxis,
     xAxisProps,
     yAxisProps,
+    xAxisLabel,
+    yAxisLabel,
+    xAxisLabelProps,
+    yAxisLabelProps,
     unit,
     valueFormatter,
     styles
@@ -1261,8 +1342,22 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
                     ...getGridProps({ className: "ui-line-chart__grid" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.XAxis, { ...getXAxisProps({ className: "ui-line-chart__x-axis" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.YAxis, { ...getYAxisProps({ className: "ui-line-chart__y-axis" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.XAxis, { ...getXAxisProps({ className: "ui-line-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.Label,
+                  {
+                    ...getXAxisLabelProps({
+                      className: "ui-line-chart__x-axis-label"
+                    })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.YAxis, { ...getYAxisProps({ className: "ui-line-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.Label,
+                  {
+                    ...getYAxisLabelProps({
+                      className: "ui-line-chart__y-axis-label"
+                    })
+                  }
+                ) }),
                 withLegend ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_recharts.Legend,
                   {
@@ -1324,6 +1419,8 @@ var useBarChart = ({
   referenceLineProps = [],
   fillOpacity = 1,
   syncId,
+  xAxisLabel,
+  yAxisLabel,
   styles,
   ...rest
 }) => {
@@ -1489,10 +1586,24 @@ var useBarChart = ({
       stackOffset: type === "percent" ? "expand" : void 0,
       layout: layoutType,
       syncId,
+      margin: {
+        bottom: xAxisLabel ? 30 : void 0,
+        left: yAxisLabel ? 10 : void 0,
+        right: yAxisLabel ? 5 : void 0
+      },
       ...props,
       ...chartProps
     }),
-    [barChartClassName, chartProps, data, syncId, layoutType, type]
+    [
+      barChartClassName,
+      data,
+      type,
+      layoutType,
+      syncId,
+      xAxisLabel,
+      yAxisLabel,
+      chartProps
+    ]
   );
   return {
     barVars,
@@ -1518,6 +1629,10 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     barProps,
     xAxisProps,
     yAxisProps,
+    xAxisLabel,
+    yAxisLabel,
+    xAxisLabelProps,
+    yAxisLabelProps,
     type = "default",
     withTooltip = true,
     withLegend = false,
@@ -1546,10 +1661,17 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     referenceLineProps,
     fillOpacity,
     syncId,
+    xAxisLabel,
+    yAxisLabel,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
-  const { getXAxisProps, getYAxisProps } = useChartAxis({
+  const {
+    getXAxisProps,
+    getYAxisProps,
+    getXAxisLabelProps,
+    getYAxisLabelProps
+  } = useChartAxis({
     dataKey,
     type,
     layoutType,
@@ -1559,6 +1681,10 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     withYAxis,
     xAxisProps,
     yAxisProps,
+    xAxisLabel,
+    yAxisLabel,
+    xAxisLabelProps,
+    yAxisLabelProps,
     unit,
     valueFormatter,
     styles
@@ -1629,8 +1755,22 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
                     ...getGridProps({ className: "ui-bar-chart__grid" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.XAxis, { ...getXAxisProps({ className: "ui-bar-chart__x-axis" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.YAxis, { ...getYAxisProps({ className: "ui-bar-chart__y-axis" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.XAxis, { ...getXAxisProps({ className: "ui-bar-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.Label,
+                  {
+                    ...getXAxisLabelProps({
+                      className: "ui-bar-chart__x-axis-label"
+                    })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.YAxis, { ...getYAxisProps({ className: "ui-bar-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.Label,
+                  {
+                    ...getYAxisLabelProps({
+                      className: "ui-bar-chart__y-axis-label"
+                    })
+                  }
+                ) }),
                 withLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   import_recharts2.Legend,
                   {
@@ -1741,6 +1881,8 @@ var useAreaChart = ({
   splitOffset,
   referenceLineProps,
   syncId,
+  xAxisLabel,
+  yAxisLabel,
   styles,
   ...rest
 }) => {
@@ -1950,10 +2092,24 @@ var useAreaChart = ({
       stackOffset: type === "percent" ? "expand" : void 0,
       layout: layoutType,
       syncId,
+      margin: {
+        bottom: xAxisLabel ? 30 : void 0,
+        left: yAxisLabel ? 10 : void 0,
+        right: yAxisLabel ? 5 : void 0
+      },
       ...props,
       ...chartProps
     }),
-    [areaChartClassName, data, type, layoutType, syncId, chartProps]
+    [
+      areaChartClassName,
+      data,
+      type,
+      layoutType,
+      syncId,
+      xAxisLabel,
+      yAxisLabel,
+      chartProps
+    ]
   );
   const getAreaSplitProps = (0, import_react11.useCallback)(
     (props = {}) => ({
@@ -2039,6 +2195,10 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     withYAxis,
     xAxisProps,
     yAxisProps,
+    xAxisLabel,
+    yAxisLabel,
+    xAxisLabelProps,
+    yAxisLabelProps,
     type = "default",
     withTooltip = true,
     withLegend = false,
@@ -2091,10 +2251,17 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     splitColors,
     splitOffset,
     syncId,
+    xAxisLabel,
+    yAxisLabel,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
-  const { getXAxisProps, getYAxisProps } = useChartAxis({
+  const {
+    getXAxisProps,
+    getYAxisProps,
+    getXAxisLabelProps,
+    getYAxisLabelProps
+  } = useChartAxis({
     dataKey,
     type,
     layoutType,
@@ -2104,6 +2271,10 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     withYAxis,
     xAxisProps,
     yAxisProps,
+    xAxisLabel,
+    yAxisLabel,
+    xAxisLabelProps,
+    yAxisLabelProps,
     unit,
     valueFormatter,
     styles
@@ -2175,8 +2346,22 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
                     ...getGridProps({ className: "ui-area-chart__grid" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.XAxis, { ...getXAxisProps({ className: "ui-area-chart__x-axis" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.YAxis, { ...getYAxisProps({ className: "ui-area-chart__y-axis" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.XAxis, { ...getXAxisProps({ className: "ui-area-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_recharts3.Label,
+                  {
+                    ...getXAxisLabelProps({
+                      className: "ui-area-chart__x-axis-label"
+                    })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.YAxis, { ...getYAxisProps({ className: "ui-area-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_recharts3.Label,
+                  {
+                    ...getYAxisLabelProps({
+                      className: "ui-area-chart__y-axis-label"
+                    })
+                  }
+                ) }),
                 withLegend ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   import_recharts3.Legend,
                   {