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

package/dist/radar-chart.mjs

@@ -1,16 +1,16 @@
 "use client"
 import {
   RadarChart
-} from "./chunk-6OYWQ3NO.mjs";
-import "./chunk-6O5G3WYP.mjs";
-import "./chunk-XYUYAHJX.mjs";
-import "./chunk-OJ2MLZZ7.mjs";
-import "./chunk-IJRYXT4V.mjs";
-import "./chunk-X6CD7LHX.mjs";
-import "./chunk-YSPGYMRF.mjs";
-import "./chunk-A3IWA366.mjs";
+} from "./chunk-SCY5V45W.mjs";
+import "./chunk-EZG52466.mjs";
+import "./chunk-6JRMEI6J.mjs";
+import "./chunk-X6PIY2M3.mjs";
+import "./chunk-R2LOTDR3.mjs";
+import "./chunk-OUIKA4AX.mjs";
+import "./chunk-5VLSGWQD.mjs";
+import "./chunk-VK65X6Q2.mjs";
 import "./chunk-6YUJLLGN.mjs";
-import "./chunk-QL3DB7OJ.mjs";
+import "./chunk-TXNC7GLT.mjs";
 export {
   RadarChart
 };

package/dist/radial-chart.d.mts

@@ -14,11 +14,15 @@ import 'recharts/types/chart/generateCategoricalChart';
 
 interface RadialChartOptions {
     /**
-     * If `true`, tooltip is visible.
+     * Determines which data is displayed in the tooltip.
      *
-     * @default true
+     * @default 'all'
      */
-    withTooltip?: boolean;
+    tooltipDataSource?: TooltipDataSourceType;
+    /**
+     * Unit displayed next to each value in tooltip.
+     */
+    unit?: string;
     /**
      * If `true`, legend is visible.
      *
@@ -32,15 +36,11 @@ interface RadialChartOptions {
      */
     withPolarGrid?: boolean;
     /**
-     * Determines which data is displayed in the tooltip.
+     * If `true`, tooltip is visible.
      *
-     * @default 'all'
-     */
-    tooltipDataSource?: TooltipDataSourceType;
-    /**
-     * Unit displayed next to each value in tooltip.
+     * @default true
      */
-    unit?: string;
+    withTooltip?: boolean;
 }
 interface RadialChartProps extends Omit<HTMLUIProps, "fillOpacity" | "strokeDasharray">, ThemeProps<"radialChart">, RadialChartOptions, UseRadialChartOptions, UseChartTooltipOptions, UseChartLegendProps, UseChartLabelListOptions, UsePolarGridOptions, UseChartProps {
 }

package/dist/radial-chart.d.ts

@@ -14,11 +14,15 @@ import 'recharts/types/chart/generateCategoricalChart';
 
 interface RadialChartOptions {
     /**
-     * If `true`, tooltip is visible.
+     * Determines which data is displayed in the tooltip.
      *
-     * @default true
+     * @default 'all'
      */
-    withTooltip?: boolean;
+    tooltipDataSource?: TooltipDataSourceType;
+    /**
+     * Unit displayed next to each value in tooltip.
+     */
+    unit?: string;
     /**
      * If `true`, legend is visible.
      *
@@ -32,15 +36,11 @@ interface RadialChartOptions {
      */
     withPolarGrid?: boolean;
     /**
-     * Determines which data is displayed in the tooltip.
+     * If `true`, tooltip is visible.
      *
-     * @default 'all'
-     */
-    tooltipDataSource?: TooltipDataSourceType;
-    /**
-     * Unit displayed next to each value in tooltip.
+     * @default true
      */
-    unit?: string;
+    withTooltip?: boolean;
 }
 interface RadialChartProps extends Omit<HTMLUIProps, "fillOpacity" | "strokeDasharray">, ThemeProps<"radialChart">, RadialChartOptions, UseRadialChartOptions, UseChartTooltipOptions, UseChartLegendProps, UseChartLabelListOptions, UsePolarGridOptions, UseChartProps {
 }

package/dist/radial-chart.js

@@ -196,13 +196,13 @@ var useChart = ({ containerProps = {} }) => {
     getContainerProps
   };
 };
-var useLegend = ({} = {}) => {
+var useLegend = () => {
   const { styles } = useChartContext();
   return {
     styles
   };
 };
-var useTooltip = ({} = {}) => {
+var useTooltip = () => {
   const { styles } = useChartContext();
   return {
     styles
@@ -214,7 +214,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,
@@ -259,22 +259,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) => {
@@ -352,8 +352,8 @@ var import_core5 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var useChartLabelList = ({
-  labelListProps = [],
-  styles
+  styles,
+  labelListProps = []
 }) => {
   const { theme } = (0, import_core5.useTheme)();
   const styleClassName = (0, import_core5.getCSS)(styles.labelList)(theme);
@@ -367,8 +367,9 @@ var useChartLabelList = ({
     [labelListProps, styleClassName, theme]
   );
   const getLabelLineProps = (0, import_react2.useCallback)(
-    ({ index, className, ...props }, ref = null) => {
-      const { className: propClassName, ...rest } = propList[index];
+    ({ className, index, ...props }, ref = null) => {
+      var _a;
+      const { className: propClassName, ...rest } = (_a = propList[index]) != null ? _a : {};
       return {
         ref,
         className: (0, import_utils5.cx)(className, propClassName),
@@ -402,7 +403,7 @@ var useChartLegend = ({
     },
     [rest]
   );
-  return { legendProps, getLegendProps };
+  return { getLegendProps, legendProps };
 };
 
 // src/use-chart-tooltip.ts
@@ -410,9 +411,9 @@ var import_core6 = require("@yamada-ui/core");
 var import_utils7 = require("@yamada-ui/utils");
 var import_react4 = require("react");
 var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
+  styles,
   tooltipAnimationDuration = 0,
-  styles
+  tooltipProps: _tooltipProps = {}
 }) => {
   const { theme } = (0, import_core6.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
@@ -428,16 +429,16 @@ var useChartTooltip = ({
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
         className: (0, import_utils7.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,11 +481,11 @@ var import_react6 = require("react");
 var useRadialChart = ({
   data: dataProp,
   dataKey = "value",
+  endAngle = -180,
+  fillOpacity = 1,
   innerRadius = "10%",
   outerRadius = "80%",
   startAngle = 90,
-  endAngle = -180,
-  fillOpacity = 1,
   styles,
   ...rest
 }) => {
@@ -532,7 +533,7 @@ var useRadialChart = ({
   );
   const [radialBarProps, radialBarClassName] = (0, import_react6.useMemo)(
     () => getComponentProps(
-      [computedRadialBarProps != null ? computedRadialBarProps : {}, radialBarProperties],
+      [computedRadialBarProps, radialBarProperties],
       styles.radialBar
     )(theme),
     [computedRadialBarProps, styles.radialBar, theme]
@@ -541,9 +542,9 @@ var useRadialChart = ({
     () => dataProp.map((props, index) => {
       const {
         name,
-        value,
         color,
         dimRadialBar = {},
+        value,
         ...computedProps
       } = props;
       const dimmed = shouldHighlight && highlightedArea !== name;
@@ -556,11 +557,11 @@ var useRadialChart = ({
         dimmed ? dimRadialBarClassName : void 0
       )(theme);
       return {
+        name,
         className,
+        color,
         fill: (0, import_core8.getVar)(`radial-bar-${index}`)(theme),
-        name,
-        value,
-        color
+        value
       };
     }),
     [
@@ -577,10 +578,10 @@ var useRadialChart = ({
       ref,
       className: (0, import_utils9.cx)(className, chartClassName),
       data,
+      endAngle,
       innerRadius,
       outerRadius,
       startAngle,
-      endAngle,
       ...props,
       ...chartProps
     }),
@@ -598,9 +599,9 @@ var useRadialChart = ({
     ({ className, ...props }, ref = null) => ({
       ref,
       className: (0, import_utils9.cx)(className, radialBarClassName),
+      background,
       dataKey,
       isAnimationActive: false,
-      background,
       ...props,
       ...radialBarProps
     }),
@@ -609,8 +610,8 @@ var useRadialChart = ({
   return {
     radialVars,
     setHighlightedArea,
-    getRadialChartProps,
-    getRadialBarProps
+    getRadialBarProps,
+    getRadialChartProps
   };
 };
 
@@ -622,67 +623,67 @@ var RadialChart = (0, import_core9.forwardRef)((props, ref) => {
     className,
     data,
     dataKey,
-    chartProps,
-    radialBarProps,
-    containerProps,
-    withPolarGrid = false,
-    withTooltip = true,
-    withLegend = false,
-    tooltipProps,
-    tooltipAnimationDuration,
-    tooltipDataSource = "all",
-    valueFormatter,
-    unit,
-    legendProps,
+    endAngle,
+    fillOpacity,
     innerRadius,
     outerRadius,
     startAngle,
-    endAngle,
-    fillOpacity,
+    strokeDasharray,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    unit,
+    valueFormatter,
+    withLegend = false,
+    withPolarGrid = false,
+    withTooltip = true,
+    chartProps,
+    containerProps,
     labelListProps = [],
+    legendProps,
     polarGridProps,
-    strokeDasharray,
+    radialBarProps,
+    tooltipProps,
     ...rest
   } = (0, import_core9.omitThemeProps)(mergedProps);
   const {
-    getRadialChartProps,
-    getRadialBarProps,
     radialVars,
-    setHighlightedArea
+    setHighlightedArea,
+    getRadialBarProps,
+    getRadialChartProps
   } = useRadialChart({
     data,
     dataKey,
-    styles,
-    chartProps,
-    radialBarProps,
+    endAngle,
+    fillOpacity,
     innerRadius,
     outerRadius,
     startAngle,
-    endAngle,
-    fillOpacity
+    styles,
+    chartProps,
+    radialBarProps
   });
   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 { getLabelLineProps } = useChartLabelList({ labelListProps, styles });
+  const { getLabelLineProps } = useChartLabelList({ styles, labelListProps });
   const { getPolarGridProps } = usePolarGrid({
-    polarGridProps,
     strokeDasharray,
-    styles
+    styles,
+    polarGridProps
   });
   const labelLists = (0, import_react7.useMemo)(
     () => labelListProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_recharts.LabelList,
       {
         ...getLabelLineProps({
-          index,
-          className: "ui-radial-chart__label-list"
+          className: "ui-radial-chart__label-list",
+          index
         })
       },
       `labelList-${index}`
@@ -748,8 +749,8 @@ var RadialChart = (0, import_core9.forwardRef)((props, ref) => {
                         className: "ui-radial-chart__tooltip",
                         isRadialChart: tooltipDataSource === "segment" ? true : false,
                         payload: tooltipDataSource === "segment" ? payload : data,
-                        valueFormatter,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),