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

package/dist/radar-chart.js

@@ -24,9 +24,9 @@ __export(radar_chart_exports, {
   RadarChart: () => RadarChart
 });
 module.exports = __toCommonJS(radar_chart_exports);
-var import_core7 = require("@yamada-ui/core");
-var import_utils8 = require("@yamada-ui/utils");
-var import_react5 = require("react");
+var import_core8 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react6 = require("react");
 var import_recharts = require("recharts");
 
 // src/chart-legend.tsx
@@ -158,7 +158,8 @@ var polarGridProperties = [
   "outerRadius",
   "polarAngles",
   "polarRadius",
-  "gridType"
+  "gridType",
+  "radialLines"
 ];
 var polarAngleAxisProperties = [
   "dataKey",
@@ -296,18 +297,26 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core4.forwardRef)(
   ({
     label,
+    dataKey = "value",
     className,
     payload = [],
     valueFormatter,
     labelFormatter,
     unit,
+    isRadialChart,
     ...rest
   }, ref) => {
     var _a;
     const { styles } = useTooltip();
     const items = payload.map(
-      ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
+      ({
+        color: colorProp,
+        name: nameProp,
+        [dataKey]: valueProp,
+        payload: payload2
+      } = {}, index) => {
         var _a2;
+        const name = isRadialChart ? payload2 == null ? void 0 : payload2.name : nameProp;
         const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
         let value;
         if ((0, import_utils4.isArray)(valueProp)) {
@@ -432,10 +441,43 @@ var useChartTooltip = ({
   return { tooltipProps: tooltipUIProps, getTooltipProps };
 };
 
-// src/use-radar-chart.ts
+// src/use-polar-grid.tsx
 var import_core6 = require("@yamada-ui/core");
 var import_utils7 = require("@yamada-ui/utils");
 var import_react4 = require("react");
+var usePolarGrid = ({
+  strokeDasharray,
+  styles,
+  ...rest
+}) => {
+  const { theme } = (0, import_core6.useTheme)();
+  const [polarGridProps, polarGridClassName] = (0, import_react4.useMemo)(
+    () => {
+      var _a;
+      return getComponentProps(
+        [(_a = rest.polarGridProps) != null ? _a : {}, polarGridProperties],
+        styles.polarGrid
+      )(theme);
+    },
+    [rest.polarGridProps, styles.polarGrid, theme]
+  );
+  const getPolarGridProps = (0, import_react4.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils7.cx)(className, polarGridClassName),
+      strokeDasharray,
+      ...props,
+      ...polarGridProps
+    }),
+    [polarGridClassName, polarGridProps, strokeDasharray]
+  );
+  return { getPolarGridProps };
+};
+
+// src/use-radar-chart.ts
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_react5 = require("react");
 var useRadarChart = ({
   data,
   series,
@@ -446,13 +488,12 @@ var useRadarChart = ({
   fillOpacity = 0.4,
   polarAngleAxisTickFormatter,
   polarRadiusAxisTickFormatter,
-  strokeDasharray,
   styles,
   ...rest
 }) => {
   var _a;
-  const { theme } = (0, import_core6.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react4.useState)(null);
+  const { theme } = (0, import_core7.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react5.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const {
     dot = {},
@@ -461,23 +502,22 @@ var useRadarChart = ({
     dimRadar = {},
     ...computedRadarProps
   } = (_a = rest.radarProps) != null ? _a : {};
-  const radarColors = (0, import_react4.useMemo)(
+  const radarColors = (0, import_react5.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `radar-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
     })),
     [series]
   );
-  const radarVars = (0, import_react4.useMemo)(
+  const radarVars = (0, import_react5.useMemo)(
     () => [
       ...radarColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, radarColors]
   );
-  const [chartProps, radarChartClassName] = (0, import_react4.useMemo)(
+  const [chartProps, radarChartClassName] = (0, import_react5.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -487,17 +527,7 @@ var useRadarChart = ({
     },
     [rest.chartProps, styles.chart, theme]
   );
-  const [polarGridProps, polarGridClassName] = (0, import_react4.useMemo)(
-    () => {
-      var _a2;
-      return getComponentProps(
-        [(_a2 = rest.polarGridProps) != null ? _a2 : {}, polarGridProperties],
-        styles.polarGrid
-      )(theme);
-    },
-    [rest.polarGridProps, styles.polarGrid, theme]
-  );
-  const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react4.useMemo)(
+  const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react5.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -507,14 +537,14 @@ var useRadarChart = ({
     },
     [rest.polarAngleAxisProps, styles.polarAngleAxis, theme]
   );
-  const polarAngleAxisTickClassName = (0, import_react4.useMemo)(
+  const polarAngleAxisTickClassName = (0, import_react5.useMemo)(
     () => getClassName({
       ...styles.polarAngleAxisTick,
       ...rest.polarAngleAxisTickProps
     })(theme),
     [rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme]
   );
-  const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react4.useMemo)(
+  const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react5.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -524,16 +554,16 @@ var useRadarChart = ({
     },
     [rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme]
   );
-  const polarRadiusAxisTickClassName = (0, import_react4.useMemo)(
+  const polarRadiusAxisTickClassName = (0, import_react5.useMemo)(
     () => getClassName({
       ...styles.polarRadiusAxisTick,
       ...rest.polarRadiusAxisTickProps
     })(theme),
     [rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme]
   );
-  const [radarProps, radarClassName] = (0, import_react4.useMemo)(() => {
+  const [radarProps, radarClassName] = (0, import_react5.useMemo)(() => {
     const resolvedRadarProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
       ...computedRadarProps
     };
     return getComponentProps(
@@ -541,32 +571,32 @@ var useRadarChart = ({
       styles.radar
     )(theme);
   }, [computedRadarProps, styles.radar, theme]);
-  const [dimRadarProps, dimRadarClassName] = (0, import_react4.useMemo)(
+  const [dimRadarProps, dimRadarClassName] = (0, import_react5.useMemo)(
     () => getComponentProps(
       [dimRadar, radarProperties],
       styles.dimRadar
     )(theme),
     [dimRadar, styles.dimRadar, theme]
   );
-  const [dotProps, dotClassName] = (0, import_react4.useMemo)(
+  const [dotProps, dotClassName] = (0, import_react5.useMemo)(
     () => getComponentProps([dot, dotProperties], styles.dot)(theme),
     [dot, styles.dot, theme]
   );
-  const [activeDotProps, activeDotClassName] = (0, import_react4.useMemo)(
+  const [activeDotProps, activeDotClassName] = (0, import_react5.useMemo)(
     () => getComponentProps(
       [activeDot, dotProperties],
       styles.activeDot
     )(theme),
     [activeDot, styles.activeDot, theme]
   );
-  const [dimDotProps, dimDotClassName] = (0, import_react4.useMemo)(
+  const [dimDotProps, dimDotClassName] = (0, import_react5.useMemo)(
     () => getComponentProps(
       [dimDot, dotProperties],
       styles.dimDot
     )(theme),
     [dimDot, styles.dimDot, theme]
   );
-  const radarPropList = (0, import_react4.useMemo)(
+  const radarPropList = (0, import_react5.useMemo)(
     () => series.map((props, index) => {
       const {
         dataKey: dataKey2,
@@ -576,7 +606,7 @@ var useRadarChart = ({
         dimRadar: dimRadar2 = {},
         ...computedProps
       } = props;
-      const color = `var(--ui-radar-${index})`;
+      const color = (0, import_core7.getVar)(`radar-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey2;
       const computedDimRadar = { ...dimRadarProps, ...dimRadar2 };
       const resolvedProps = {
@@ -600,7 +630,7 @@ var useRadarChart = ({
           activeDotClassName
         )(theme);
         resolvedActiveDot = {
-          className: (0, import_utils7.cx)(
+          className: (0, import_utils8.cx)(
             "ui-radar-chart__dot",
             "ui-radar-chart__dot--active",
             className
@@ -627,7 +657,7 @@ var useRadarChart = ({
           dimmed ? dimDotClassName : void 0
         )(theme);
         resolvedDot = {
-          className: (0, import_utils7.cx)("ui-radar-chart__dot", className),
+          className: (0, import_utils8.cx)("ui-radar-chart__dot", className),
           fill: color,
           r: 4,
           ...rest3
@@ -662,22 +692,22 @@ var useRadarChart = ({
       withDots
     ]
   );
-  const getRadarChartProps = (0, import_react4.useCallback)(
+  const getRadarChartProps = (0, import_react5.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils7.cx)(className, radarChartClassName),
+      className: (0, import_utils8.cx)(className, radarChartClassName),
       data,
       ...props,
       ...chartProps
     }),
     [data, radarChartClassName, chartProps]
   );
-  const getRadarProps = (0, import_react4.useCallback)(
+  const getRadarProps = (0, import_react5.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
       const { color, className, dataKey: dataKey2, activeDot: activeDot2, dot: dot2, ...rest2 } = radarPropList[index];
       return {
         ref,
-        className: (0, import_utils7.cx)(classNameProp, className),
+        className: (0, import_utils8.cx)(classNameProp, className),
         activeDot: activeDot2,
         dot: dot2,
         name: dataKey2,
@@ -692,23 +722,13 @@ var useRadarChart = ({
     },
     [radarPropList, strokeWidth]
   );
-  const getPolarGridProps = (0, import_react4.useCallback)(
-    ({ className, ...props } = {}, ref = null) => ({
-      ref,
-      className: (0, import_utils7.cx)(className, polarGridClassName),
-      strokeDasharray,
-      ...props,
-      ...polarGridProps
-    }),
-    [polarGridClassName, polarGridProps, strokeDasharray]
-  );
-  const getPolarAngleAxisProps = (0, import_react4.useCallback)(
+  const getPolarAngleAxisProps = (0, import_react5.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils7.cx)(className, polarAngleAxisClassName),
+      className: (0, import_utils8.cx)(className, polarAngleAxisClassName),
       dataKey,
       tick: {
-        className: (0, import_utils7.cx)(
+        className: (0, import_utils8.cx)(
           "ui-radar-chart__polar-angle-axis-tick",
           polarAngleAxisTickClassName
         )
@@ -726,12 +746,12 @@ var useRadarChart = ({
       polarAngleAxisTickFormatter
     ]
   );
-  const getPolarRadiusAxisProps = (0, import_react4.useCallback)(
+  const getPolarRadiusAxisProps = (0, import_react5.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils7.cx)(className, polarRadiusAxisClassName),
+      className: (0, import_utils8.cx)(className, polarRadiusAxisClassName),
       tick: {
-        className: (0, import_utils7.cx)(
+        className: (0, import_utils8.cx)(
           "ui-radar-chart__polar-radius-axis-tick",
           polarRadiusAxisTickClassName
         )
@@ -751,7 +771,6 @@ var useRadarChart = ({
     radarVars,
     getRadarChartProps,
     getRadarProps,
-    getPolarGridProps,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
     setHighlightedArea
@@ -760,8 +779,8 @@ var useRadarChart = ({
 
 // src/radar-chart.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var RadarChart = (0, import_core7.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("RadarChart", props);
+var RadarChart = (0, import_core8.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("RadarChart", props);
   const {
     className,
     data,
@@ -793,11 +812,10 @@ var RadarChart = (0, import_core7.forwardRef)((props, ref) => {
     withPolarAngleAxis = true,
     withPolarRadiusAxis = false,
     ...rest
-  } = (0, import_core7.omitThemeProps)(mergedProps);
+  } = (0, import_core8.omitThemeProps)(mergedProps);
   const {
     getRadarProps,
     getRadarChartProps,
-    getPolarGridProps,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
     radarVars,
@@ -808,7 +826,6 @@ var RadarChart = (0, import_core7.forwardRef)((props, ref) => {
     dataKey,
     radarProps,
     chartProps,
-    polarGridProps,
     polarAngleAxisProps,
     polarAngleAxisTickProps,
     polarRadiusAxisProps,
@@ -819,7 +836,6 @@ var RadarChart = (0, import_core7.forwardRef)((props, ref) => {
     fillOpacity,
     polarAngleAxisTickFormatter,
     polarRadiusAxisTickFormatter,
-    strokeDasharray,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -831,7 +847,12 @@ var RadarChart = (0, import_core7.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const radars = (0, import_react5.useMemo)(
+  const { getPolarGridProps } = usePolarGrid({
+    polarGridProps,
+    strokeDasharray,
+    styles
+  });
+  const radars = (0, import_react6.useMemo)(
     () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_recharts.Radar,
       {
@@ -842,12 +863,11 @@ var RadarChart = (0, import_core7.forwardRef)((props, ref) => {
     [getRadarProps, series]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_core7.ui.div,
+    import_core8.ui.div,
     {
       ref,
-      className: (0, import_utils8.cx)("ui-radar-chart", className),
-      var: radarVars,
-      __css: { ...styles.container },
+      className: (0, import_utils9.cx)("ui-radar-chart", className),
+      __css: { maxW: "full", vars: radarVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_recharts.ResponsiveContainer,