@yamada-ui/charts 1.5.4-dev-20241005224505 → 1.5.4-dev-20241006000212

package/dist/line-chart.js

@@ -312,13 +312,13 @@ var useChart = ({ containerProps = {} }) => {
     getContainerProps
   };
 };
-var useLegend = ({} = {}) => {
+var useLegend = () => {
   const { styles } = useChartContext();
   return {
     styles
   };
 };
-var useTooltip = ({} = {}) => {
+var useTooltip = () => {
   const { styles } = useChartContext();
   return {
     styles
@@ -330,7 +330,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ChartLegend = (0, import_core3.forwardRef)(
   ({ className, payload = [], onHighlight, ...rest }, ref) => {
     const { styles } = useLegend();
-    const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
+    const items = payload.map(({ color, dataKey, value: valueProp }, index) => {
       const value = dataKey != null ? dataKey : valueProp;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_core3.ui.div,
@@ -375,22 +375,22 @@ var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core4.forwardRef)(
   ({
-    label,
-    dataKey = "value",
     className,
-    payload = [],
-    valueFormatter,
+    dataKey = "value",
+    isRadialChart,
+    label,
     labelFormatter,
+    payload = [],
     unit,
-    isRadialChart,
+    valueFormatter,
     ...rest
   }, ref) => {
     var _a;
     const { styles } = useTooltip();
     const items = payload.map(
       ({
-        color: colorProp,
         name: nameProp,
+        color: colorProp,
         [dataKey]: valueProp,
         payload: payload2
       } = {}, index) => {
@@ -468,19 +468,19 @@ var import_core5 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var useChartAxis = ({
-  dataKey,
   type,
+  dataKey,
+  gridAxis = "x",
   layoutType = "horizontal",
+  styles,
   tickLine = "y",
-  gridAxis = "x",
+  unit,
   withXAxis = true,
   withYAxis = true,
   xAxisLabel: xAxisLabelProp,
+  xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
   yAxisLabel: yAxisLabelProp,
-  unit,
   yAxisTickFormatter = type === "percent" && layoutType === "horizontal" ? valueToPercent : void 0,
-  xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : void 0,
-  styles,
   ...rest
 }) => {
   var _a, _b, _c, _d;
@@ -490,7 +490,7 @@ var useChartAxis = ({
     [dataKey, layoutType]
   );
   const yAxisKey = (0, import_react2.useMemo)(
-    () => layoutType === "vertical" ? { dataKey, type: "category" } : { type: "number" },
+    () => layoutType === "vertical" ? { type: "category", dataKey } : { type: "number" },
     [dataKey, layoutType]
   );
   const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
@@ -521,15 +521,15 @@ var useChartAxis = ({
       className: (0, import_utils5.cx)(className, xAxisClassName),
       hide: !withXAxis,
       ...xAxisKey,
-      tick: {
-        transform: "translate(0, 10)",
-        fill: "currentColor"
-      },
-      stroke: "",
       interval: "preserveStartEnd",
-      tickLine: xTickLine,
       minTickGap: 5,
+      stroke: "",
+      tick: {
+        fill: "currentColor",
+        transform: "translate(0, 10)"
+      },
       tickFormatter: xAxisTickFormatter,
+      tickLine: xTickLine,
       ...props,
       ...xAxisProps
     }),
@@ -545,17 +545,17 @@ var useChartAxis = ({
   const getYAxisProps = (0, import_react2.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils5.cx)(className, yAxisClassName),
-      hide: !withYAxis,
       axisLine: false,
+      hide: !withYAxis,
       ...yAxisKey,
-      tickLine: yTickLine,
+      allowDecimals: true,
       tick: {
-        transform: "translate(-10, 0)",
-        fill: "currentColor"
+        fill: "currentColor",
+        transform: "translate(-10, 0)"
       },
-      allowDecimals: true,
-      unit,
       tickFormatter: yAxisTickFormatter,
+      tickLine: yTickLine,
+      unit,
       ...props,
       ...yAxisProps
     }),
@@ -572,9 +572,9 @@ var useChartAxis = ({
   const getXAxisLabelProps = (0, import_react2.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils5.cx)(className, xAxisLabelClassName),
-      value: xAxisLabel,
-      position: "insideBottom",
       offset: -20,
+      position: "insideBottom",
+      value: xAxisLabel,
       ...props,
       ...xAxisLabelProps
     }),
@@ -583,21 +583,21 @@ var useChartAxis = ({
   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,
+      position: "insideLeft",
+      textAnchor: "middle",
+      value: yAxisLabel,
       ...props,
       ...yAxisLabelProps
     }),
     [yAxisLabel, yAxisLabelClassName, yAxisLabelProps]
   );
   return {
-    getXAxisProps,
-    getYAxisProps,
     getXAxisLabelProps,
-    getYAxisLabelProps
+    getXAxisProps,
+    getYAxisLabelProps,
+    getYAxisProps
   };
 };
 var valueToPercent = (value) => {
@@ -609,10 +609,10 @@ var import_core6 = require("@yamada-ui/core");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useChartGrid = ({
-  gridProps = {},
   gridAxis = "x",
   strokeDasharray = "5 5",
-  styles
+  styles,
+  gridProps = {}
 }) => {
   const { theme } = (0, import_core6.useTheme)();
   const [reChartsProps, propClassName] = getComponentProps(
@@ -623,9 +623,9 @@ var useChartGrid = ({
     ({ className, ...props } = {}, ref = null) => ({
       ref,
       className: (0, import_utils6.cx)("ui-chart__grid", className, propClassName),
+      horizontal: gridAxis === "x" || gridAxis === "xy",
       strokeDasharray,
       vertical: gridAxis === "y" || gridAxis === "xy",
-      horizontal: gridAxis === "x" || gridAxis === "xy",
       ...props,
       ...reChartsProps
     }),
@@ -655,7 +655,7 @@ var useChartLegend = ({
     },
     [rest]
   );
-  return { legendProps, getLegendProps };
+  return { getLegendProps, legendProps };
 };
 
 // src/use-chart-reference-line.ts
@@ -663,8 +663,8 @@ var import_core7 = require("@yamada-ui/core");
 var import_utils8 = require("@yamada-ui/utils");
 var import_react5 = require("react");
 var useChartReferenceLine = ({
-  referenceLineProps = [],
-  styles
+  styles,
+  referenceLineProps = []
 }) => {
   const { theme } = (0, import_core7.useTheme)();
   const styleClassName = (0, import_core7.getCSS)(styles.referenceLine)(theme);
@@ -676,23 +676,24 @@ var useChartReferenceLine = ({
       )(theme);
       const color = (0, import_core7.getVar)(`reference-line-${index}`)(theme);
       const label = {
-        value: labelProp,
         fill: color,
         position: "insideBottomLeft",
+        value: labelProp,
         ...(0, import_utils8.isObject)(labelProp) ? labelProp : {}
       };
-      return { propClassName, color, label, ...rest };
+      return { color, label, propClassName, ...rest };
     }),
     [referenceLineProps, styleClassName, theme]
   );
   const getReferenceLineProps = (0, import_react5.useCallback)(
-    ({ index, className, ...props }, ref = null) => {
-      const { propClassName, color, label, ...rest } = propList[index];
+    ({ className, index, ...props }, ref = null) => {
+      var _a;
+      const { color, label, propClassName, ...rest } = (_a = propList[index]) != null ? _a : {};
       return {
         ref,
         className: (0, import_utils8.cx)(className, propClassName),
-        stroke: color,
         label,
+        stroke: color,
         ...props,
         ...rest
       };
@@ -707,9 +708,9 @@ var import_core8 = require("@yamada-ui/core");
 var import_utils9 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
+  styles,
   tooltipAnimationDuration = 0,
-  styles
+  tooltipProps: _tooltipProps = {}
 }) => {
   const { theme } = (0, import_core8.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
@@ -725,16 +726,16 @@ var useChartTooltip = ({
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
         className: (0, import_utils9.cx)("ui-chart__cursor", cursorClassName)
       },
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       ...props,
       ...tooltipProps
     }),
     [cursorClassName, tooltipAnimationDuration, tooltipProps]
   );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
+  return { getTooltipProps, tooltipProps: tooltipUIProps };
 };
 
 // src/use-line-chart.ts
@@ -742,20 +743,20 @@ var import_core9 = require("@yamada-ui/core");
 var import_utils10 = require("@yamada-ui/utils");
 var import_react7 = require("react");
 var useLineChart = ({
+  connectNulls = true,
+  curveType = "monotone",
   data,
-  series,
+  fillOpacity = 1,
   layoutType = "horizontal",
-  withDots = true,
-  withActiveDots = true,
-  curveType = "monotone",
+  series,
   strokeWidth = 2,
-  connectNulls = true,
-  referenceLineProps,
-  fillOpacity = 1,
+  styles,
   syncId,
+  withActiveDots = true,
+  withDots = true,
   xAxisLabel,
   yAxisLabel,
-  styles,
+  referenceLineProps,
   ...rest
 }) => {
   var _a;
@@ -763,10 +764,10 @@ var useLineChart = ({
   const [highlightedArea, setHighlightedArea] = (0, import_react7.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const {
-    dot = {},
     activeDot = {},
     dimDot,
     dimLine,
+    dot = {},
     ...computedLineProps
   } = (_a = rest.lineProps) != null ? _a : {};
   const lineColors = (0, import_react7.useMemo)(
@@ -847,11 +848,11 @@ var useLineChart = ({
   const linePropList = (0, import_react7.useMemo)(
     () => series.map((props, index) => {
       const {
-        dataKey,
-        dot: dot2 = {},
         activeDot: activeDot2 = {},
+        dataKey,
         dimDot: dimDot2 = {},
         dimLine: dimLine2 = {},
+        dot: dot2 = {},
         ...computedProps
       } = props;
       const color = (0, import_core9.getVar)(`line-${index}`)(theme);
@@ -877,8 +878,8 @@ var useLineChart = ({
         resolvedActiveDot = {
           className: (0, import_utils10.cx)("ui-line-chart__active-dot", className),
           fill: color,
-          stroke: color,
           r: 4,
+          stroke: color,
           ...rest3
         };
       } else {
@@ -907,9 +908,9 @@ var useLineChart = ({
       }
       return {
         ...rest2,
+        activeDot: resolvedActiveDot,
         color,
         dataKey,
-        activeDot: resolvedActiveDot,
         dot: resolvedDot
       };
     }),
@@ -938,12 +939,12 @@ var useLineChart = ({
       className: (0, import_utils10.cx)(className, lineChartClassName),
       data,
       layout: layoutType,
-      syncId,
       margin: {
         bottom: xAxisLabel ? 30 : void 0,
         left: yAxisLabel ? 10 : void 0,
         right: yAxisLabel ? 5 : void 0
       },
+      syncId,
       ...props,
       ...chartProps
     }),
@@ -958,20 +959,21 @@ var useLineChart = ({
     ]
   );
   const getLineProps = (0, import_react7.useCallback)(
-    ({ index, className: classNameProp, ...props }) => {
-      const { color, className, dataKey, activeDot: activeDot2, dot: dot2, ...rest2 } = linePropList[index];
+    ({ className: classNameProp, index, ...props }) => {
+      var _a2;
+      const { className, activeDot: activeDot2, color, dataKey, dot: dot2, ...rest2 } = (_a2 = linePropList[index]) != null ? _a2 : {};
       return {
+        type: curveType,
+        name: (0, import_utils10.runIfFunc)(dataKey, {}),
         className: (0, import_utils10.cx)(classNameProp, className),
         activeDot: activeDot2,
-        dot: dot2,
-        name: dataKey,
-        type: curveType,
+        connectNulls,
         dataKey,
+        dot: dot2,
         fill: color,
-        strokeWidth,
-        stroke: color,
         isAnimationActive: false,
-        connectNulls,
+        stroke: color,
+        strokeWidth,
         ...props,
         ...rest2
       };
@@ -979,10 +981,10 @@ var useLineChart = ({
     [connectNulls, curveType, linePropList, strokeWidth]
   );
   return {
-    getLineProps,
-    getLineChartProps,
     lineVars,
-    setHighlightedArea
+    setHighlightedArea,
+    getLineChartProps,
+    getLineProps
   };
 };
 
@@ -991,113 +993,113 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var LineChart = (0, import_core10.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core10.useComponentMultiStyle)("LineChart", props);
   const {
+    type,
     className,
-    containerProps,
-    gridProps,
-    gridAxis,
-    strokeDasharray,
+    connectNulls,
+    curveType,
+    data,
     dataKey,
-    type,
+    fillOpacity,
+    gridAxis,
+    labelFormatter,
     layoutType,
+    series,
+    strokeDasharray,
+    strokeWidth,
+    syncId,
     tickLine,
+    tooltipAnimationDuration,
+    unit,
+    valueFormatter,
+    withActiveDots,
+    withDots,
+    withLegend = false,
+    withTooltip = true,
     withXAxis,
     withYAxis,
-    xAxisProps,
-    yAxisProps,
     xAxisLabel,
+    xAxisTickFormatter,
     yAxisLabel,
-    xAxisLabelProps,
-    yAxisLabelProps,
-    unit,
     yAxisTickFormatter,
-    xAxisTickFormatter,
-    valueFormatter,
-    labelFormatter,
-    referenceLineProps,
-    tooltipProps,
-    tooltipAnimationDuration,
-    legendProps,
-    withLegend = false,
-    withTooltip = true,
-    series,
-    data,
     chartProps,
+    containerProps,
+    gridProps,
+    legendProps,
     lineProps,
-    withDots,
-    withActiveDots,
-    curveType,
-    strokeWidth,
-    connectNulls,
-    fillOpacity,
-    syncId,
+    referenceLineProps,
+    tooltipProps,
+    xAxisLabelProps,
+    xAxisProps,
+    yAxisLabelProps,
+    yAxisProps,
     ...rest
   } = (0, import_core10.omitThemeProps)(mergedProps);
-  const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } = useLineChart({
+  const { lineVars, setHighlightedArea, getLineChartProps, getLineProps } = useLineChart({
+    connectNulls,
+    curveType,
+    data,
+    fillOpacity,
     layoutType,
     series,
-    referenceLineProps,
-    data,
-    chartProps,
-    lineProps,
-    withDots,
-    withActiveDots,
-    curveType,
     strokeWidth,
-    connectNulls,
-    fillOpacity,
+    styles,
     syncId,
+    withActiveDots,
+    withDots,
     xAxisLabel,
     yAxisLabel,
-    styles
+    chartProps,
+    lineProps,
+    referenceLineProps
   });
   const { getContainerProps } = useChart({ containerProps });
   const {
-    getXAxisProps,
-    getYAxisProps,
     getXAxisLabelProps,
-    getYAxisLabelProps
+    getXAxisProps,
+    getYAxisLabelProps,
+    getYAxisProps
   } = useChartAxis({
-    dataKey,
     type,
+    dataKey,
+    gridAxis,
     layoutType,
+    styles,
     tickLine,
-    gridAxis,
+    unit,
     withXAxis,
     withYAxis,
-    xAxisProps,
-    yAxisProps,
     xAxisLabel,
+    xAxisTickFormatter,
     yAxisLabel,
+    yAxisTickFormatter,
     xAxisLabelProps,
+    xAxisProps,
     yAxisLabelProps,
-    unit,
-    yAxisTickFormatter,
-    xAxisTickFormatter,
-    styles
+    yAxisProps
   });
   const { getReferenceLineProps } = useChartReferenceLine({
-    referenceLineProps,
-    styles
+    styles,
+    referenceLineProps
   });
   const { getGridProps } = useChartGrid({
-    gridProps,
     gridAxis,
     strokeDasharray,
-    styles
+    styles,
+    gridProps
   });
-  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
-    tooltipProps,
+  const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
+    styles,
     tooltipAnimationDuration,
-    styles
+    tooltipProps
   });
-  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
     legendProps
   });
   const lines = (0, import_react8.useMemo)(
     () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_recharts.Line,
       {
-        ...getLineProps({ index, className: "ui-line-chart__line" })
+        ...getLineProps({ className: "ui-line-chart__line", index })
       },
       `line-${dataKey2}`
     )),
@@ -1108,8 +1110,8 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
       import_recharts.ReferenceLine,
       {
         ...getReferenceLineProps({
-          index,
-          className: "ui-line-chart__reference-line"
+          className: "ui-line-chart__reference-line",
+          index
         })
       },
       `referenceLine-${index}`
@@ -1177,10 +1179,10 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
                       {
                         className: "ui-line-chart__tooltip",
                         label,
-                        payload,
-                        valueFormatter,
                         labelFormatter,
+                        payload,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),