@yamada-ui/charts 1.5.4-next-20241005220055 → 1.5.4-next-20241008193728

package/dist/radar-chart.js

@@ -235,13 +235,13 @@ var useChart = ({ containerProps = {} }) => {
     getContainerProps
   };
 };
-var useLegend = ({} = {}) => {
+var useLegend = () => {
   const { styles } = useChartContext();
   return {
     styles
   };
 };
-var useTooltip = ({} = {}) => {
+var useTooltip = () => {
   const { styles } = useChartContext();
   return {
     styles
@@ -253,7 +253,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,
@@ -289,6 +289,8 @@ var ChartLegend = (0, import_core3.forwardRef)(
     );
   }
 );
+ChartLegend.displayName = "ChartLegend";
+ChartLegend.__ui__ = "ChartLegend";
 
 // src/chart-tooltip.tsx
 var import_core4 = require("@yamada-ui/core");
@@ -296,22 +298,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) => {
@@ -381,6 +383,8 @@ var ChartTooltip = (0, import_core4.forwardRef)(
     );
   }
 );
+ChartTooltip.displayName = "ChartTooltip";
+ChartTooltip.__ui__ = "ChartTooltip";
 
 // src/use-chart-legend.ts
 var import_utils5 = require("@yamada-ui/utils");
@@ -403,7 +407,7 @@ var useChartLegend = ({
     },
     [rest]
   );
-  return { legendProps, getLegendProps };
+  return { getLegendProps, legendProps };
 };
 
 // src/use-chart-tooltip.ts
@@ -411,9 +415,9 @@ var import_core5 = require("@yamada-ui/core");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
+  styles,
   tooltipAnimationDuration = 0,
-  styles
+  tooltipProps: _tooltipProps = {}
 }) => {
   const { theme } = (0, import_core5.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
@@ -429,16 +433,16 @@ var useChartTooltip = ({
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
         className: (0, import_utils6.cx)("ui-chart__cursor", cursorClassName)
       },
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       ...props,
       ...tooltipProps
     }),
     [cursorClassName, tooltipAnimationDuration, tooltipProps]
   );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
+  return { getTooltipProps, tooltipProps: tooltipUIProps };
 };
 
 // src/use-polar-grid.tsx
@@ -480,15 +484,15 @@ var import_utils8 = require("@yamada-ui/utils");
 var import_react5 = require("react");
 var useRadarChart = ({
   data,
-  series,
   dataKey,
-  withDots = false,
-  withActiveDots = false,
-  strokeWidth = 2,
   fillOpacity = 0.4,
   polarAngleAxisTickFormatter,
   polarRadiusAxisTickFormatter,
+  series,
+  strokeWidth = 2,
   styles,
+  withActiveDots = false,
+  withDots = false,
   ...rest
 }) => {
   var _a;
@@ -496,10 +500,10 @@ var useRadarChart = ({
   const [highlightedArea, setHighlightedArea] = (0, import_react5.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const {
-    dot = {},
     activeDot = {},
     dimDot,
     dimRadar,
+    dot = {},
     ...computedRadarProps
   } = (_a = rest.radarProps) != null ? _a : {};
   const radarColors = (0, import_react5.useMemo)(
@@ -604,11 +608,11 @@ var useRadarChart = ({
   const radarPropList = (0, import_react5.useMemo)(
     () => series.map((props, index) => {
       const {
-        dataKey: dataKey2,
-        dot: dot2 = {},
         activeDot: activeDot2 = {},
+        dataKey: dataKey2,
         dimDot: dimDot2 = {},
         dimRadar: dimRadar2 = {},
+        dot: dot2 = {},
         ...computedProps
       } = props;
       const color = (0, import_core7.getVar)(`radar-${index}`)(theme);
@@ -637,8 +641,8 @@ var useRadarChart = ({
         resolvedActiveDot = {
           className: (0, import_utils8.cx)("ui-radar-chart__active-dot", className),
           fill: color,
-          stroke: color,
           r: 4,
+          stroke: color,
           ...rest3
         };
       } else {
@@ -668,10 +672,10 @@ var useRadarChart = ({
       }
       return {
         ...rest2,
+        activeDot: resolvedActiveDot,
         color,
         dataKey: dataKey2,
-        dot: resolvedDot,
-        activeDot: resolvedActiveDot
+        dot: resolvedDot
       };
     }),
     [
@@ -704,19 +708,27 @@ var useRadarChart = ({
     [data, radarChartClassName, chartProps]
   );
   const getRadarProps = (0, import_react5.useCallback)(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
-      const { color, className, dataKey: dataKey2, activeDot: activeDot2, dot: dot2, ...rest2 } = radarPropList[index];
+    ({ className: classNameProp, index, ...props }, ref = null) => {
+      var _a2;
+      const {
+        className,
+        activeDot: activeDot2,
+        color,
+        dataKey: dataKey2 = "",
+        dot: dot2,
+        ...rest2
+      } = (_a2 = radarPropList[index]) != null ? _a2 : {};
       return {
         ref,
+        name: dataKey2,
         className: (0, import_utils8.cx)(classNameProp, className),
         activeDot: activeDot2,
-        dot: dot2,
-        name: dataKey2,
         dataKey: dataKey2,
+        dot: dot2,
         fill: color,
-        strokeWidth,
-        stroke: color,
         isAnimationActive: false,
+        stroke: color,
+        strokeWidth,
         ...props,
         ...rest2
       };
@@ -770,11 +782,11 @@ var useRadarChart = ({
   );
   return {
     radarVars,
-    getRadarChartProps,
-    getRadarProps,
+    setHighlightedArea,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
-    setHighlightedArea
+    getRadarChartProps,
+    getRadarProps
   };
 };
 
@@ -785,79 +797,79 @@ var RadarChart = (0, import_core8.forwardRef)((props, ref) => {
   const {
     className,
     data,
-    series,
     dataKey,
-    radarProps,
-    chartProps,
-    polarGridProps,
-    polarAngleAxisProps,
-    polarAngleAxisTickProps,
-    polarRadiusAxisProps,
-    polarRadiusAxisTickProps,
-    containerProps,
-    tooltipProps,
-    legendProps,
-    tooltipAnimationDuration,
-    unit,
-    valueFormatter,
+    fillOpacity,
     polarAngleAxisTickFormatter,
     polarRadiusAxisTickFormatter,
+    series,
     strokeDasharray,
-    withDots,
-    withActiveDots,
     strokeWidth,
-    fillOpacity,
-    withTooltip = true,
+    tooltipAnimationDuration,
+    unit,
+    valueFormatter,
+    withActiveDots,
+    withDots,
     withLegend = false,
-    withPolarGrid = true,
     withPolarAngleAxis = true,
+    withPolarGrid = true,
     withPolarRadiusAxis = false,
+    withTooltip = true,
+    chartProps,
+    containerProps,
+    legendProps,
+    polarAngleAxisProps,
+    polarAngleAxisTickProps,
+    polarGridProps,
+    polarRadiusAxisProps,
+    polarRadiusAxisTickProps,
+    radarProps,
+    tooltipProps,
     ...rest
   } = (0, import_core8.omitThemeProps)(mergedProps);
   const {
-    getRadarProps,
-    getRadarChartProps,
+    radarVars,
+    setHighlightedArea,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
-    radarVars,
-    setHighlightedArea
+    getRadarChartProps,
+    getRadarProps
   } = useRadarChart({
     data,
-    series,
     dataKey,
-    radarProps,
+    fillOpacity,
+    polarAngleAxisTickFormatter,
+    polarRadiusAxisTickFormatter,
+    series,
+    strokeWidth,
+    styles,
+    withActiveDots,
+    withDots,
     chartProps,
     polarAngleAxisProps,
     polarAngleAxisTickProps,
     polarRadiusAxisProps,
     polarRadiusAxisTickProps,
-    withDots,
-    withActiveDots,
-    strokeWidth,
-    fillOpacity,
-    polarAngleAxisTickFormatter,
-    polarRadiusAxisTickFormatter,
-    styles
+    radarProps
   });
   const { getContainerProps } = useChart({ containerProps });
-  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 { getPolarGridProps } = usePolarGrid({
-    polarGridProps,
     strokeDasharray,
-    styles
+    styles,
+    polarGridProps
   });
   const radars = (0, import_react6.useMemo)(
     () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_recharts.Radar,
       {
-        ...getRadarProps({ index, className: "ui-radar-chart__radar" })
+        ...getRadarProps({ className: "ui-radar-chart__radar", index })
       },
       `radar-${dataKey2}`
     )),
@@ -927,8 +939,8 @@ var RadarChart = (0, import_core8.forwardRef)((props, ref) => {
                         className: "ui-line-chart__tooltip",
                         label,
                         payload,
-                        valueFormatter,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),
@@ -944,6 +956,8 @@ var RadarChart = (0, import_core8.forwardRef)((props, ref) => {
     }
   ) });
 });
+RadarChart.displayName = "RadarChart";
+RadarChart.__ui__ = "RadarChart";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   RadarChart