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

package/dist/bar-chart.js

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(bar_chart_exports);
 var import_core10 = require("@yamada-ui/core");
 var import_utils11 = require("@yamada-ui/utils");
 var import_react8 = require("react");
-var import_recharts = require("recharts");
+var import_recharts2 = require("recharts");
 
 // src/chart-legend.tsx
 var import_core3 = require("@yamada-ui/core");
@@ -365,20 +365,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,
@@ -427,7 +436,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 })
         ]
       }
@@ -435,10 +444,12 @@ var ChartTooltip = (0, import_core4.forwardRef)(
   }
 );
 
-// src/use-bar-chart.ts
+// src/use-bar-chart.tsx
 var import_core5 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
+var import_recharts = require("recharts");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var useBarChart = ({
   data,
   series,
@@ -450,6 +461,7 @@ var useBarChart = ({
   xAxisLabel,
   yAxisLabel,
   styles,
+  cell = defaultBarCell,
   ...rest
 }) => {
   var _a;
@@ -606,6 +618,22 @@ var useBarChart = ({
     },
     [barPropsList, stacked]
   );
+  const bars = (0, import_react2.useMemo)(() => {
+    const hasStack = series.some((entry) => entry.stackId);
+    return series.map((series2, index) => {
+      const { dataKey } = series2;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_recharts.Bar,
+        {
+          ...getBarProps({ index, className: "ui-bar-chart__bar" }),
+          children: data.map(
+            (data2, index2) => (0, import_utils5.runIfFunc)(cell, { series: series2, data: data2, index: index2, hasStack })
+          )
+        },
+        `bar-${dataKey}`
+      );
+    });
+  }, [series, getBarProps, cell, data]);
   const getBarChartProps = (0, import_react2.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
@@ -634,12 +662,29 @@ var useBarChart = ({
     ]
   );
   return {
+    bars,
     barVars,
     getBarProps,
     getBarChartProps,
     setHighlightedArea
   };
 };
+var defaultBarCell = ({
+  hasStack,
+  series,
+  data,
+  index
+}) => {
+  const { dataKey } = series;
+  const key = `cell-${dataKey}-${index}`;
+  if (!hasStack) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.Cell, {}, key);
+  const keys = Object.keys(data);
+  const values = Object.values(data);
+  const currentIndex = keys.findIndex((key2) => key2 === dataKey);
+  const lastIndex = values.findLastIndex((value) => value !== 0);
+  if (currentIndex === lastIndex) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.Cell, {}, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.Cell, { radius: 0 }, key);
+};
 
 // src/use-chart-axis.ts
 var import_core6 = require("@yamada-ui/core");
@@ -656,7 +701,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
 }) => {
@@ -675,8 +721,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(
@@ -917,7 +961,7 @@ var useChartTooltip = ({
 };
 
 // src/bar-chart.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var BarChart = (0, import_core10.forwardRef)((props, ref) => {
   const [styles, mergedProps] = (0, import_core10.useMultiComponentStyle)("BarChart", props);
   const {
@@ -941,7 +985,10 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
     withLegend = false,
     containerProps,
     unit,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     valueFormatter,
+    labelFormatter,
     tooltipProps,
     tooltipAnimationDuration,
     legendProps,
@@ -952,11 +999,13 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
     fillOpacity,
     chartProps,
     syncId,
+    cell,
     ...rest
   } = (0, import_core10.omitThemeProps)(mergedProps);
-  const { getBarChartProps, getBarProps, barVars, setHighlightedArea } = useBarChart({
+  const { bars, barVars, getBarChartProps, setHighlightedArea } = useBarChart({
     data,
     series,
+    cell,
     type,
     layoutType,
     chartProps,
@@ -989,7 +1038,8 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
     xAxisLabelProps,
     yAxisLabelProps,
     unit,
-    valueFormatter,
+    yAxisTickFormatter,
+    xAxisTickFormatter,
     styles
   });
   const { getReferenceLineProps } = useChartReferenceLine({
@@ -1010,21 +1060,9 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const bars = (0, import_react8.useMemo)(
-    () => series.map(({ dataKey: dataKey2 }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_recharts.Bar,
-        {
-          ...getBarProps({ index, className: "ui-bar-chart__bar" })
-        },
-        `bar-${dataKey2}`
-      );
-    }),
-    [getBarProps, series]
-  );
   const referenceLinesItems = (0, import_react8.useMemo)(
-    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_recharts.ReferenceLine,
+    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_recharts2.ReferenceLine,
       {
         ...getReferenceLineProps({
           index,
@@ -1035,7 +1073,7 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
     )),
     [getReferenceLineProps, referenceLineProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_core10.ui.div,
     {
       ref,
@@ -1043,41 +1081,41 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
       var: barVars,
       __css: { ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_recharts.ResponsiveContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_recharts2.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-bar-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            import_recharts.BarChart,
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_recharts2.BarChart,
             {
               ...getBarChartProps({ className: "ui-bar-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.CartesianGrid,
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.CartesianGrid,
                   {
                     ...getGridProps({ className: "ui-bar-chart__grid" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.XAxis, { ...getXAxisProps({ className: "ui-bar-chart__x-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.Label,
+                /* @__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_runtime3.jsx)(import_recharts.YAxis, { ...getYAxisProps({ className: "ui-bar-chart__y-axis" }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.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_runtime3.jsx)(
-                  import_recharts.Legend,
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       ChartLegend,
                       {
                         className: "ui-bar-chart__legend",
@@ -1089,16 +1127,17 @@ var BarChart = (0, import_core10.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.Tooltip,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-bar-chart__tooltip",
                         label,
                         payload,
                         valueFormatter,
+                        labelFormatter,
                         unit,
                         ...computedTooltipProps
                       }