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

package/dist/use-area-chart.d.mts

@@ -1,13 +1,13 @@
+import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
 import * as react from 'react';
 import * as _yamada_ui_utils from '@yamada-ui/utils';
 import { Dict } from '@yamada-ui/utils';
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { RequiredPropGetter, PropGetter, CSSUIObject } from '@yamada-ui/core';
-import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
 import * as Recharts from 'recharts';
 import { AreaGradientProps } from './area-chart-gradient.mjs';
 import { AreaSplitProps } from './area-chart-split.mjs';
-import { AreaProps, AreaChartType, AreaChartProps, ChartLayoutType, ChartCurveType, ReferenceLineProps } from './chart.types.mjs';
+import { AreaProps, AreaChartType, ChartCurveType, ChartLayoutType, AreaChartProps, ReferenceLineProps } from './chart.types.mjs';
 
 interface UseAreaChartOptions {
     /**
@@ -18,10 +18,6 @@ interface UseAreaChartOptions {
      * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.
      */
     series: AreaProps[];
-    /**
-     * Props for the areas.
-     */
-    areaProps?: Partial<AreaProps>;
     /**
      * Controls how chart areas are positioned relative to each other.
      *
@@ -29,36 +25,11 @@ interface UseAreaChartOptions {
      */
     type?: AreaChartType;
     /**
-     * Props passed down to recharts `AreaChart` component.
-     */
-    chartProps?: AreaChartProps;
-    /**
-     * If any two categorical charts have the same syncId,
-     * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.
-     */
-    syncId?: number | string;
-    /**
-     * Chart orientation.
-     *
-     * @default 'horizontal'
-     */
-    layoutType?: ChartLayoutType;
-    /**
-     * Determines whether the chart area should be represented with a gradient instead of the solid color.
-     */
-    withGradient?: boolean;
-    /**
-     * Determines whether dots should be displayed.
-     *
-     * @default true
-     */
-    withDots?: boolean;
-    /**
-     * Determines whether activeDots should be displayed.
+     * Determines whether points with `null` values should be connected.
      *
      * @default true
      */
-    withActiveDots?: boolean;
+    connectNulls?: boolean;
     /**
      * Type of the curve.
      *
@@ -66,17 +37,17 @@ interface UseAreaChartOptions {
      */
     curveType?: ChartCurveType;
     /**
-     * Stroke width for the chart areas.
+     * Controls fill opacity of all areas.
      *
-     * @default 2
+     * @default 0.4
      */
-    strokeWidth?: number;
+    fillOpacity?: [number, number] | number;
     /**
-     * Determines whether points with `null` values should be connected.
+     * Chart orientation.
      *
-     * @default true
+     * @default 'horizontal'
      */
-    connectNulls?: boolean;
+    layoutType?: ChartLayoutType;
     /**
      * A tuple of colors used when `type="split"` is set, ignored in all other cases.
      *
@@ -89,15 +60,32 @@ interface UseAreaChartOptions {
      */
     splitOffset?: number;
     /**
-     * Reference lines that should be displayed on the chart.
+     * Stroke width for the chart areas.
+     *
+     * @default 2
      */
-    referenceLineProps?: ReferenceLineProps[];
+    strokeWidth?: number;
     /**
-     * Controls fill opacity of all areas.
+     * If any two categorical charts have the same syncId,
+     * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.
+     */
+    syncId?: number | string;
+    /**
+     * Determines whether activeDots should be displayed.
      *
-     * @default 0.4
+     * @default true
+     */
+    withActiveDots?: boolean;
+    /**
+     * Determines whether dots should be displayed.
+     *
+     * @default true
      */
-    fillOpacity?: number | [number, number];
+    withDots?: boolean;
+    /**
+     * Determines whether the chart area should be represented with a gradient instead of the solid color.
+     */
+    withGradient?: boolean;
     /**
      * A label to display below the X axis.
      */
@@ -106,24 +94,36 @@ interface UseAreaChartOptions {
      * A label to display below the Y axis.
      */
     yAxisLabel?: string;
+    /**
+     * Props for the areas.
+     */
+    areaProps?: Partial<AreaProps>;
+    /**
+     * Props passed down to recharts `AreaChart` component.
+     */
+    chartProps?: AreaChartProps;
+    /**
+     * Reference lines that should be displayed on the chart.
+     */
+    referenceLineProps?: ReferenceLineProps[];
 }
 interface UseAreaChartProps extends UseAreaChartOptions {
-    styles: Dict<CSSUIObject>;
+    styles: Dict<CSSUIObject | undefined>;
 }
-declare const useAreaChart: ({ data, series, type, layoutType, withGradient: withGradientProp, withDots, withActiveDots, curveType, strokeWidth, connectNulls, fillOpacity, splitColors, splitOffset, referenceLineProps, syncId, xAxisLabel, yAxisLabel, styles, ...rest }: UseAreaChartProps) => {
-    getAreaChartProps: RequiredPropGetter<recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
-    getAreaSplitProps: PropGetter<Partial<AreaSplitProps>, AreaSplitProps>;
-    getAreaProps: RequiredPropGetter<Partial<Recharts.AreaProps> & {
-        index: number;
-    }, Omit<Recharts.AreaProps, "ref">>;
-    getAreaGradientProps: PropGetter<Partial<AreaGradientProps>, AreaGradientProps>;
+declare const useAreaChart: ({ type, connectNulls, curveType, data, fillOpacity, layoutType, series, splitColors, splitOffset, strokeWidth, styles, syncId, withActiveDots, withDots, withGradient: withGradientProp, xAxisLabel, yAxisLabel, referenceLineProps, ...rest }: UseAreaChartProps) => {
     areaVars: {
-        __prefix?: string;
         name: string;
         token?: _yamada_ui_core.ThemeToken;
         value?: _yamada_ui_core.Token<number | _yamada_ui_utils.StringLiteral>;
+        __prefix?: string;
     }[];
     setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
+    getAreaChartProps: RequiredPropGetter<recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
+    getAreaGradientProps: PropGetter<Partial<AreaGradientProps>, AreaGradientProps>;
+    getAreaProps: RequiredPropGetter<{
+        index: number;
+    } & Partial<Recharts.AreaProps>, Omit<Recharts.AreaProps, "ref">>;
+    getAreaSplitProps: PropGetter<Partial<AreaSplitProps>, AreaSplitProps>;
 };
 type UseAreaChartReturn = ReturnType<typeof useAreaChart>;
 

package/dist/use-area-chart.d.ts

@@ -1,13 +1,13 @@
+import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
 import * as react from 'react';
 import * as _yamada_ui_utils from '@yamada-ui/utils';
 import { Dict } from '@yamada-ui/utils';
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { RequiredPropGetter, PropGetter, CSSUIObject } from '@yamada-ui/core';
-import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
 import * as Recharts from 'recharts';
 import { AreaGradientProps } from './area-chart-gradient.js';
 import { AreaSplitProps } from './area-chart-split.js';
-import { AreaProps, AreaChartType, AreaChartProps, ChartLayoutType, ChartCurveType, ReferenceLineProps } from './chart.types.js';
+import { AreaProps, AreaChartType, ChartCurveType, ChartLayoutType, AreaChartProps, ReferenceLineProps } from './chart.types.js';
 
 interface UseAreaChartOptions {
     /**
@@ -18,10 +18,6 @@ interface UseAreaChartOptions {
      * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.
      */
     series: AreaProps[];
-    /**
-     * Props for the areas.
-     */
-    areaProps?: Partial<AreaProps>;
     /**
      * Controls how chart areas are positioned relative to each other.
      *
@@ -29,36 +25,11 @@ interface UseAreaChartOptions {
      */
     type?: AreaChartType;
     /**
-     * Props passed down to recharts `AreaChart` component.
-     */
-    chartProps?: AreaChartProps;
-    /**
-     * If any two categorical charts have the same syncId,
-     * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.
-     */
-    syncId?: number | string;
-    /**
-     * Chart orientation.
-     *
-     * @default 'horizontal'
-     */
-    layoutType?: ChartLayoutType;
-    /**
-     * Determines whether the chart area should be represented with a gradient instead of the solid color.
-     */
-    withGradient?: boolean;
-    /**
-     * Determines whether dots should be displayed.
-     *
-     * @default true
-     */
-    withDots?: boolean;
-    /**
-     * Determines whether activeDots should be displayed.
+     * Determines whether points with `null` values should be connected.
      *
      * @default true
      */
-    withActiveDots?: boolean;
+    connectNulls?: boolean;
     /**
      * Type of the curve.
      *
@@ -66,17 +37,17 @@ interface UseAreaChartOptions {
      */
     curveType?: ChartCurveType;
     /**
-     * Stroke width for the chart areas.
+     * Controls fill opacity of all areas.
      *
-     * @default 2
+     * @default 0.4
      */
-    strokeWidth?: number;
+    fillOpacity?: [number, number] | number;
     /**
-     * Determines whether points with `null` values should be connected.
+     * Chart orientation.
      *
-     * @default true
+     * @default 'horizontal'
      */
-    connectNulls?: boolean;
+    layoutType?: ChartLayoutType;
     /**
      * A tuple of colors used when `type="split"` is set, ignored in all other cases.
      *
@@ -89,15 +60,32 @@ interface UseAreaChartOptions {
      */
     splitOffset?: number;
     /**
-     * Reference lines that should be displayed on the chart.
+     * Stroke width for the chart areas.
+     *
+     * @default 2
      */
-    referenceLineProps?: ReferenceLineProps[];
+    strokeWidth?: number;
     /**
-     * Controls fill opacity of all areas.
+     * If any two categorical charts have the same syncId,
+     * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.
+     */
+    syncId?: number | string;
+    /**
+     * Determines whether activeDots should be displayed.
      *
-     * @default 0.4
+     * @default true
+     */
+    withActiveDots?: boolean;
+    /**
+     * Determines whether dots should be displayed.
+     *
+     * @default true
      */
-    fillOpacity?: number | [number, number];
+    withDots?: boolean;
+    /**
+     * Determines whether the chart area should be represented with a gradient instead of the solid color.
+     */
+    withGradient?: boolean;
     /**
      * A label to display below the X axis.
      */
@@ -106,24 +94,36 @@ interface UseAreaChartOptions {
      * A label to display below the Y axis.
      */
     yAxisLabel?: string;
+    /**
+     * Props for the areas.
+     */
+    areaProps?: Partial<AreaProps>;
+    /**
+     * Props passed down to recharts `AreaChart` component.
+     */
+    chartProps?: AreaChartProps;
+    /**
+     * Reference lines that should be displayed on the chart.
+     */
+    referenceLineProps?: ReferenceLineProps[];
 }
 interface UseAreaChartProps extends UseAreaChartOptions {
-    styles: Dict<CSSUIObject>;
+    styles: Dict<CSSUIObject | undefined>;
 }
-declare const useAreaChart: ({ data, series, type, layoutType, withGradient: withGradientProp, withDots, withActiveDots, curveType, strokeWidth, connectNulls, fillOpacity, splitColors, splitOffset, referenceLineProps, syncId, xAxisLabel, yAxisLabel, styles, ...rest }: UseAreaChartProps) => {
-    getAreaChartProps: RequiredPropGetter<recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
-    getAreaSplitProps: PropGetter<Partial<AreaSplitProps>, AreaSplitProps>;
-    getAreaProps: RequiredPropGetter<Partial<Recharts.AreaProps> & {
-        index: number;
-    }, Omit<Recharts.AreaProps, "ref">>;
-    getAreaGradientProps: PropGetter<Partial<AreaGradientProps>, AreaGradientProps>;
+declare const useAreaChart: ({ type, connectNulls, curveType, data, fillOpacity, layoutType, series, splitColors, splitOffset, strokeWidth, styles, syncId, withActiveDots, withDots, withGradient: withGradientProp, xAxisLabel, yAxisLabel, referenceLineProps, ...rest }: UseAreaChartProps) => {
     areaVars: {
-        __prefix?: string;
         name: string;
         token?: _yamada_ui_core.ThemeToken;
         value?: _yamada_ui_core.Token<number | _yamada_ui_utils.StringLiteral>;
+        __prefix?: string;
     }[];
     setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
+    getAreaChartProps: RequiredPropGetter<recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
+    getAreaGradientProps: PropGetter<Partial<AreaGradientProps>, AreaGradientProps>;
+    getAreaProps: RequiredPropGetter<{
+        index: number;
+    } & Partial<Recharts.AreaProps>, Omit<Recharts.AreaProps, "ref">>;
+    getAreaSplitProps: PropGetter<Partial<AreaSplitProps>, AreaSplitProps>;
 };
 type UseAreaChartReturn = ReturnType<typeof useAreaChart>;
 

package/dist/use-area-chart.js

@@ -107,24 +107,24 @@ var dotProperties = [
 
 // src/use-area-chart.ts
 var useAreaChart = ({
-  data,
-  series,
   type,
-  layoutType = "horizontal",
-  withGradient: withGradientProp,
-  withDots = true,
-  withActiveDots = true,
-  curveType = "monotone",
-  strokeWidth = 2,
   connectNulls = true,
+  curveType = "monotone",
+  data,
   fillOpacity = 0.4,
+  layoutType = "horizontal",
+  series,
   splitColors = ["#ee6a5d", "#5fce7d"],
   splitOffset,
-  referenceLineProps,
+  strokeWidth = 2,
+  styles,
   syncId,
+  withActiveDots = true,
+  withDots = true,
+  withGradient: withGradientProp,
   xAxisLabel,
   yAxisLabel,
-  styles,
+  referenceLineProps,
   ...rest
 }) => {
   var _a;
@@ -136,10 +136,10 @@ var useAreaChart = ({
   const withGradient = typeof withGradientProp === "boolean" ? withGradientProp : type === "default";
   const shouldHighlight = highlightedArea !== null;
   const {
-    dot = {},
     activeDot = {},
-    dimDot,
     dimArea,
+    dimDot,
+    dot = {},
     ...computedAreaProps
   } = (_a = rest.areaProps) != null ? _a : {};
   const areaColors = (0, import_react.useMemo)(
@@ -154,7 +154,7 @@ var useAreaChart = ({
     () => splitColors.map((color, index) => ({
       name: `area-split-${index}`,
       token: "colors",
-      value: color != null ? color : "transparent"
+      value: color || "transparent"
     })),
     [splitColors]
   );
@@ -227,24 +227,27 @@ var useAreaChart = ({
     );
   }, [dimDot, theme]);
   const defaultSplitOffset = (0, import_react.useMemo)(() => {
+    var _a2;
     if (series.length === 1) {
-      const dataKey = series[0].dataKey;
-      const dataMax = Math.max(...data.map((item) => item[dataKey]));
-      const dataMin = Math.min(...data.map((item) => item[dataKey]));
-      if (dataMax <= 0) return 0;
-      if (dataMin >= 0) return 1;
-      return dataMax / (dataMax - dataMin);
+      const dataKey = (_a2 = series[0]) == null ? void 0 : _a2.dataKey;
+      if (dataKey) {
+        const dataMax = Math.max(...data.map((item) => item[dataKey]));
+        const dataMin = Math.min(...data.map((item) => item[dataKey]));
+        if (dataMax <= 0) return 0;
+        if (dataMin >= 0) return 1;
+        return dataMax / (dataMax - dataMin);
+      }
     }
     return 0.5;
   }, [data, series]);
   const areaPropsList = (0, import_react.useMemo)(
     () => series.map((props, index) => {
       const {
-        dataKey,
-        dot: dot2 = {},
         activeDot: activeDot2 = {},
-        dimDot: dimDot2 = {},
+        dataKey,
         dimArea: dimArea2 = {},
+        dimDot: dimDot2 = {},
+        dot: dot2 = {},
         strokeDasharray,
         ...computedProps
       } = props;
@@ -271,8 +274,8 @@ var useAreaChart = ({
         )(theme);
         resolvedActiveDot = {
           className: (0, import_utils2.cx)("ui-area-chart__active-dot", className),
-          stroke: color,
           r: 4,
+          stroke: color,
           ...rest3
         };
       } else {
@@ -303,11 +306,11 @@ var useAreaChart = ({
       return {
         ...rest2,
         id,
+        activeDot: resolvedActiveDot,
         color,
-        strokeDasharray,
         dataKey,
-        activeDot: resolvedActiveDot,
-        dot: resolvedDot
+        dot: resolvedDot,
+        strokeDasharray
       };
     }),
     [
@@ -335,14 +338,14 @@ var useAreaChart = ({
       ref,
       className: (0, import_utils2.cx)(className, areaChartClassName),
       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
     }),
@@ -360,40 +363,41 @@ var useAreaChart = ({
   const getAreaSplitProps = (0, import_react.useCallback)(
     (props = {}) => ({
       id: splitId,
-      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
       fillOpacity: fillOpacityVar,
+      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
       ...props
     }),
     [defaultSplitOffset, splitId, splitOffset, fillOpacityVar]
   );
   const getAreaProps = (0, import_react.useCallback)(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
+    ({ className: classNameProp, index, ...props }, ref = null) => {
+      var _a2;
       const {
         id,
-        color,
         className,
-        dataKey,
-        strokeDasharray,
         activeDot: activeDot2,
+        color,
+        dataKey = "",
         dot: dot2,
+        strokeDasharray,
         ...rest2
-      } = areaPropsList[index];
+      } = (_a2 = areaPropsList[index]) != null ? _a2 : {};
       return {
+        id,
         ref,
+        type: curveType,
+        name: dataKey,
         className: (0, import_utils2.cx)(classNameProp, className),
-        id,
         activeDot: activeDot2,
-        dot: dot2,
-        name: dataKey,
-        type: curveType,
+        connectNulls,
         dataKey,
+        dot: dot2,
         fill: type === "split" ? `url(#${splitId})` : `url(#${id})`,
-        strokeWidth,
-        stroke: color,
         isAnimationActive: false,
-        connectNulls,
         stackId: stacked ? "stack" : void 0,
+        stroke: color,
         strokeDasharray,
+        strokeWidth,
         ...props,
         ...rest2
       };
@@ -410,19 +414,19 @@ var useAreaChart = ({
   );
   const getAreaGradientProps = (0, import_react.useCallback)(
     (props = {}) => ({
-      withGradient,
       fillOpacity: fillOpacityVar,
+      withGradient,
       ...props
     }),
     [withGradient, fillOpacityVar]
   );
   return {
+    areaVars,
+    setHighlightedArea,
     getAreaChartProps,
-    getAreaSplitProps,
-    getAreaProps,
     getAreaGradientProps,
-    areaVars,
-    setHighlightedArea
+    getAreaProps,
+    getAreaSplitProps
   };
 };
 // Annotate the CommonJS export names for ESM import in node: