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

package/dist/bar-chart.js

@@ -305,13 +305,13 @@ var useChart = ({ containerProps = {} }) => {
     getContainerProps
   };
 };
-var useLegend = ({} = {}) => {
+var useLegend = () => {
   const { styles } = useChartContext();
   return {
     styles
   };
 };
-var useTooltip = ({} = {}) => {
+var useTooltip = () => {
   const { styles } = useChartContext();
   return {
     styles
@@ -323,7 +323,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,
@@ -368,22 +368,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) => {
@@ -463,17 +463,17 @@ var import_react2 = require("react");
 var import_recharts = require("recharts");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var useBarChart = ({
-  data,
-  series,
   type = "default",
-  layoutType = "horizontal",
-  referenceLineProps = [],
+  cell = defaultBarCell,
+  data,
   fillOpacity = 1,
+  layoutType = "horizontal",
+  series,
+  styles,
   syncId,
   xAxisLabel,
   yAxisLabel,
-  styles,
-  cell = defaultBarCell,
+  referenceLineProps = [],
   ...rest
 }) => {
   var _a;
@@ -552,9 +552,9 @@ var useBarChart = ({
   const barPropsList = (0, import_react2.useMemo)(
     () => series.map((props, index) => {
       const {
-        dataKey,
         activeBar: activeBar2 = {},
         background: background2 = {},
+        dataKey,
         dimBar: dimBar2 = {},
         ...computedProps
       } = props;
@@ -608,20 +608,29 @@ var useBarChart = ({
     ]
   );
   const getBarProps = (0, import_react2.useCallback)(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
-      const { id, className, activeBar: activeBar2, background: background2, color, dataKey, ...rest2 } = barPropsList[index];
+    ({ className: classNameProp, index, ...props }, ref = null) => {
+      var _a2;
+      const {
+        id,
+        className,
+        activeBar: activeBar2,
+        background: background2,
+        color,
+        dataKey = "",
+        ...rest2
+      } = (_a2 = barPropsList[index]) != null ? _a2 : {};
       return {
+        id,
         ref,
+        name: dataKey,
         className: (0, import_utils5.cx)(classNameProp, className),
         activeBar: activeBar2,
         background: background2,
-        id,
-        name: dataKey,
         dataKey,
         fill: color,
-        stroke: color,
         isAnimationActive: false,
         stackId: stacked ? "stack" : void 0,
+        stroke: color,
         ...props,
         ...rest2
       };
@@ -635,9 +644,9 @@ var useBarChart = ({
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_recharts.Bar,
         {
-          ...getBarProps({ index, className: "ui-bar-chart__bar" }),
+          ...getBarProps({ className: "ui-bar-chart__bar", index }),
           children: data.map(
-            (data2, index2) => (0, import_utils5.runIfFunc)(cell, { series: series2, data: data2, index: index2, hasStack })
+            (data2, index2) => (0, import_utils5.runIfFunc)(cell, { data: data2, hasStack, index: index2, series: series2 })
           )
         },
         `bar-${dataKey}`
@@ -649,14 +658,14 @@ var useBarChart = ({
       ref,
       className: (0, import_utils5.cx)(className, barChartClassName),
       data,
-      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
       },
+      stackOffset: type === "percent" ? "expand" : void 0,
+      syncId,
       ...props,
       ...chartProps
     }),
@@ -674,16 +683,16 @@ var useBarChart = ({
   return {
     bars,
     barVars,
-    getBarProps,
+    setHighlightedArea,
     getBarChartProps,
-    setHighlightedArea
+    getBarProps
   };
 };
 var defaultBarCell = ({
-  hasStack,
-  series,
   data,
-  index
+  hasStack,
+  index,
+  series
 }) => {
   const { dataKey } = series;
   const key = `cell-${dataKey}-${index}`;
@@ -701,19 +710,19 @@ var import_core6 = require("@yamada-ui/core");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = 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;
@@ -723,7 +732,7 @@ var useChartAxis = ({
     [dataKey, layoutType]
   );
   const yAxisKey = (0, import_react3.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");
@@ -754,15 +763,15 @@ var useChartAxis = ({
       className: (0, import_utils6.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
     }),
@@ -778,17 +787,17 @@ var useChartAxis = ({
   const getYAxisProps = (0, import_react3.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils6.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
     }),
@@ -805,9 +814,9 @@ var useChartAxis = ({
   const getXAxisLabelProps = (0, import_react3.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils6.cx)(className, xAxisLabelClassName),
-      value: xAxisLabel,
-      position: "insideBottom",
       offset: -20,
+      position: "insideBottom",
+      value: xAxisLabel,
       ...props,
       ...xAxisLabelProps
     }),
@@ -816,21 +825,21 @@ var useChartAxis = ({
   const getYAxisLabelProps = (0, import_react3.useCallback)(
     ({ className, ...props } = {}) => ({
       className: (0, import_utils6.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) => {
@@ -842,10 +851,10 @@ var import_core7 = require("@yamada-ui/core");
 var import_utils7 = require("@yamada-ui/utils");
 var import_react4 = require("react");
 var useChartGrid = ({
-  gridProps = {},
   gridAxis = "x",
   strokeDasharray = "5 5",
-  styles
+  styles,
+  gridProps = {}
 }) => {
   const { theme } = (0, import_core7.useTheme)();
   const [reChartsProps, propClassName] = getComponentProps(
@@ -856,9 +865,9 @@ var useChartGrid = ({
     ({ className, ...props } = {}, ref = null) => ({
       ref,
       className: (0, import_utils7.cx)("ui-chart__grid", className, propClassName),
+      horizontal: gridAxis === "x" || gridAxis === "xy",
       strokeDasharray,
       vertical: gridAxis === "y" || gridAxis === "xy",
-      horizontal: gridAxis === "x" || gridAxis === "xy",
       ...props,
       ...reChartsProps
     }),
@@ -888,7 +897,7 @@ var useChartLegend = ({
     },
     [rest]
   );
-  return { legendProps, getLegendProps };
+  return { getLegendProps, legendProps };
 };
 
 // src/use-chart-reference-line.ts
@@ -896,8 +905,8 @@ var import_core8 = require("@yamada-ui/core");
 var import_utils9 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 var useChartReferenceLine = ({
-  referenceLineProps = [],
-  styles
+  styles,
+  referenceLineProps = []
 }) => {
   const { theme } = (0, import_core8.useTheme)();
   const styleClassName = (0, import_core8.getCSS)(styles.referenceLine)(theme);
@@ -909,23 +918,24 @@ var useChartReferenceLine = ({
       )(theme);
       const color = (0, import_core8.getVar)(`reference-line-${index}`)(theme);
       const label = {
-        value: labelProp,
         fill: color,
         position: "insideBottomLeft",
+        value: labelProp,
         ...(0, import_utils9.isObject)(labelProp) ? labelProp : {}
       };
-      return { propClassName, color, label, ...rest };
+      return { color, label, propClassName, ...rest };
     }),
     [referenceLineProps, styleClassName, theme]
   );
   const getReferenceLineProps = (0, import_react6.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_utils9.cx)(className, propClassName),
-        stroke: color,
         label,
+        stroke: color,
         ...props,
         ...rest
       };
@@ -940,9 +950,9 @@ var import_core9 = require("@yamada-ui/core");
 var import_utils10 = require("@yamada-ui/utils");
 var import_react7 = require("react");
 var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
+  styles,
   tooltipAnimationDuration = 0,
-  styles
+  tooltipProps: _tooltipProps = {}
 }) => {
   const { theme } = (0, import_core9.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
@@ -958,16 +968,16 @@ var useChartTooltip = ({
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
         className: (0, import_utils10.cx)("ui-chart__cursor", cursorClassName)
       },
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       ...props,
       ...tooltipProps
     }),
     [cursorClassName, tooltipAnimationDuration, tooltipProps]
   );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
+  return { getTooltipProps, tooltipProps: tooltipUIProps };
 };
 
 // src/bar-chart.tsx
@@ -975,99 +985,99 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var BarChart = (0, import_core10.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core10.useComponentMultiStyle)("BarChart", props);
   const {
+    type = "default",
     className,
-    series,
+    cell,
+    data,
     dataKey,
+    fillOpacity,
+    gridAxis,
+    labelFormatter,
     layoutType,
+    series,
+    strokeDasharray,
+    syncId,
     tickLine,
-    gridAxis,
+    tooltipAnimationDuration,
+    unit,
+    valueFormatter,
+    withLegend = false,
+    withTooltip = true,
     withXAxis,
     withYAxis,
-    barProps,
-    xAxisProps,
-    yAxisProps,
     xAxisLabel,
+    xAxisTickFormatter,
     yAxisLabel,
-    xAxisLabelProps,
-    yAxisLabelProps,
-    type = "default",
-    withTooltip = true,
-    withLegend = false,
-    containerProps,
-    unit,
     yAxisTickFormatter,
-    xAxisTickFormatter,
-    valueFormatter,
-    labelFormatter,
-    tooltipProps,
-    tooltipAnimationDuration,
+    barProps,
+    chartProps,
+    containerProps,
+    gridProps,
     legendProps,
-    data,
     referenceLineProps = [],
-    gridProps,
-    strokeDasharray,
-    fillOpacity,
-    chartProps,
-    syncId,
-    cell,
+    tooltipProps,
+    xAxisLabelProps,
+    xAxisProps,
+    yAxisLabelProps,
+    yAxisProps,
     ...rest
   } = (0, import_core10.omitThemeProps)(mergedProps);
-  const { bars, barVars, getBarChartProps, setHighlightedArea } = useBarChart({
-    data,
-    series,
-    cell,
+  const { bars, barVars, setHighlightedArea, getBarChartProps } = useBarChart({
     type,
-    layoutType,
-    chartProps,
-    barProps,
-    referenceLineProps,
+    cell,
+    data,
     fillOpacity,
+    layoutType,
+    series,
+    styles,
     syncId,
     xAxisLabel,
     yAxisLabel,
-    styles
+    barProps,
+    chartProps,
+    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 referenceLinesItems = (0, import_react8.useMemo)(
@@ -1075,8 +1085,8 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
       import_recharts2.ReferenceLine,
       {
         ...getReferenceLineProps({
-          index,
-          className: "ui-bar-chart__reference-line"
+          className: "ui-bar-chart__reference-line",
+          index
         })
       },
       `referenceLine-${index}`
@@ -1144,10 +1154,10 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
                       {
                         className: "ui-bar-chart__tooltip",
                         label,
-                        payload,
-                        valueFormatter,
                         labelFormatter,
+                        payload,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),