@yamada-ui/charts 1.1.2 → 1.1.4-dev-20240508155232

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

@@ -0,0 +1,123 @@
+import * as react from 'react';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { CSSUIObject } from '@yamada-ui/core';
+import * as _yamada_ui_utils from '@yamada-ui/utils';
+import { Dict } from '@yamada-ui/utils';
+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, ChartPropGetter, RequiredChartPropGetter } from './chart.types.mjs';
+import 'react/jsx-runtime';
+
+type UseAreaChartOptions = {
+    /**
+     * Chart data.
+     */
+    data: Dict[];
+    /**
+     * 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.
+     *
+     * @default `default`
+     */
+    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.
+     *
+     * @default true
+     */
+    withActiveDots?: boolean;
+    /**
+     * Type of the curve.
+     *
+     * @default `monotone`
+     */
+    curveType?: ChartCurveType;
+    /**
+     * Stroke width for the chart areas.
+     *
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Determines whether points with `null` values should be connected.
+     *
+     * @default true
+     */
+    connectNulls?: boolean;
+    /**
+     * A tuple of colors used when `type="split"` is set, ignored in all other cases.
+     *
+     * @default '["red.400", "green.400"]'
+     */
+    splitColors?: [string, string];
+    /**
+     * Offset for the split gradient. By default, value is inferred from `data` and `series` if possible.
+     * Must be generated from the data array with `getSplitOffset` function.
+     */
+    splitOffset?: number;
+    /**
+     * Reference lines that should be displayed on the chart.
+     */
+    referenceLineProps?: ReferenceLineProps[];
+    /**
+     * Controls fill opacity of all areas.
+     *
+     * @default 0.4
+     */
+    fillOpacity?: number | [number, number];
+};
+type UseAreaChartProps = UseAreaChartOptions & {
+    styles: Dict<CSSUIObject>;
+};
+declare const useAreaChart: ({ data, series, type, layoutType, withGradient: withGradientProp, withDots, withActiveDots, curveType, strokeWidth, connectNulls, fillOpacity, splitColors, splitOffset, referenceLineProps, syncId, styles, ...rest }: UseAreaChartProps) => {
+    getAreaChartProps: ChartPropGetter<"div", recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
+    getAreaSplitProps: ChartPropGetter<"div", Partial<AreaSplitProps>, AreaSplitProps>;
+    getAreaProps: RequiredChartPropGetter<"div", {
+        index: number;
+    }, Omit<Recharts.AreaProps, "ref">>;
+    getAreaGradientProps: ChartPropGetter<"div", Partial<AreaGradientProps>, AreaGradientProps>;
+    areaVars: {
+        __prefix?: string | undefined;
+        name: string;
+        token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
+        value?: (number | _yamada_ui_utils.StringLiteral | Partial<Record<(string & {}) | "base" | "sm" | "md" | "lg" | "xl" | "2xl", number | _yamada_ui_utils.StringLiteral>> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
+    }[];
+    setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
+};
+type UseAreaChartReturn = ReturnType<typeof useAreaChart>;
+
+export { type UseAreaChartOptions, type UseAreaChartProps, type UseAreaChartReturn, useAreaChart };

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

@@ -0,0 +1,123 @@
+import * as react from 'react';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { CSSUIObject } from '@yamada-ui/core';
+import * as _yamada_ui_utils from '@yamada-ui/utils';
+import { Dict } from '@yamada-ui/utils';
+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, ChartPropGetter, RequiredChartPropGetter } from './chart.types.js';
+import 'react/jsx-runtime';
+
+type UseAreaChartOptions = {
+    /**
+     * Chart data.
+     */
+    data: Dict[];
+    /**
+     * 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.
+     *
+     * @default `default`
+     */
+    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.
+     *
+     * @default true
+     */
+    withActiveDots?: boolean;
+    /**
+     * Type of the curve.
+     *
+     * @default `monotone`
+     */
+    curveType?: ChartCurveType;
+    /**
+     * Stroke width for the chart areas.
+     *
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Determines whether points with `null` values should be connected.
+     *
+     * @default true
+     */
+    connectNulls?: boolean;
+    /**
+     * A tuple of colors used when `type="split"` is set, ignored in all other cases.
+     *
+     * @default '["red.400", "green.400"]'
+     */
+    splitColors?: [string, string];
+    /**
+     * Offset for the split gradient. By default, value is inferred from `data` and `series` if possible.
+     * Must be generated from the data array with `getSplitOffset` function.
+     */
+    splitOffset?: number;
+    /**
+     * Reference lines that should be displayed on the chart.
+     */
+    referenceLineProps?: ReferenceLineProps[];
+    /**
+     * Controls fill opacity of all areas.
+     *
+     * @default 0.4
+     */
+    fillOpacity?: number | [number, number];
+};
+type UseAreaChartProps = UseAreaChartOptions & {
+    styles: Dict<CSSUIObject>;
+};
+declare const useAreaChart: ({ data, series, type, layoutType, withGradient: withGradientProp, withDots, withActiveDots, curveType, strokeWidth, connectNulls, fillOpacity, splitColors, splitOffset, referenceLineProps, syncId, styles, ...rest }: UseAreaChartProps) => {
+    getAreaChartProps: ChartPropGetter<"div", recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
+    getAreaSplitProps: ChartPropGetter<"div", Partial<AreaSplitProps>, AreaSplitProps>;
+    getAreaProps: RequiredChartPropGetter<"div", {
+        index: number;
+    }, Omit<Recharts.AreaProps, "ref">>;
+    getAreaGradientProps: ChartPropGetter<"div", Partial<AreaGradientProps>, AreaGradientProps>;
+    areaVars: {
+        __prefix?: string | undefined;
+        name: string;
+        token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
+        value?: (number | _yamada_ui_utils.StringLiteral | Partial<Record<(string & {}) | "base" | "sm" | "md" | "lg" | "xl" | "2xl", number | _yamada_ui_utils.StringLiteral>> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
+    }[];
+    setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
+};
+type UseAreaChartReturn = ReturnType<typeof useAreaChart>;
+
+export { type UseAreaChartOptions, type UseAreaChartProps, type UseAreaChartReturn, useAreaChart };

package/dist/use-area-chart.js

@@ -0,0 +1,420 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-area-chart.ts
+var use_area_chart_exports = {};
+__export(use_area_chart_exports, {
+  useAreaChart: () => useAreaChart
+});
+module.exports = __toCommonJS(use_area_chart_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
+
+// src/chart-utils.ts
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var getClassName = (...styles) => (theme) => (0, import_utils.cx)(
+  ...styles.map(
+    (style) => (0, import_utils.isString)(style) ? style : (0, import_core.getCSS)(style)(theme)
+  )
+);
+var getComponentProps = ([obj, keys], ...props) => (theme, isContain) => {
+  const [pickedProps, omittedProps] = (0, import_utils.splitObject)(obj, keys);
+  const className = getClassName(...props, omittedProps)(theme);
+  return !isContain ? [pickedProps, className] : { ...pickedProps, className };
+};
+
+// src/rechart-properties.ts
+var areaChartProperties = [
+  "layout",
+  "syncId",
+  "syncMethod",
+  "width",
+  "height",
+  "data",
+  "margin",
+  "stackOffset",
+  "onClick",
+  "onMouseEnter",
+  "onMouseMove",
+  "onMouseLeave"
+];
+var areaProperties = [
+  "type",
+  "dataKey",
+  "xAxisId",
+  "yAxisId",
+  "legendType",
+  "dot",
+  "activeDot",
+  "label",
+  "stroke",
+  "strokeWidth",
+  "layout",
+  "baseLine",
+  "points",
+  "stackId",
+  "connectNulls",
+  "unit",
+  "name",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "id",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+var dotProperties = [
+  "cx",
+  "cy",
+  "r",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+
+// src/use-area-chart.ts
+var useAreaChart = ({
+  data,
+  series,
+  type,
+  layoutType = "horizontal",
+  withGradient: withGradientProp,
+  withDots = true,
+  withActiveDots = true,
+  curveType = "monotone",
+  strokeWidth = 2,
+  connectNulls = true,
+  fillOpacity = 0.4,
+  splitColors = ["#ee6a5d", "#5fce7d"],
+  splitOffset,
+  referenceLineProps,
+  syncId,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const uuid = (0, import_react.useId)();
+  const { theme } = (0, import_core2.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react.useState)(null);
+  const splitId = `${uuid}-split`;
+  const stacked = type === "stacked" || type === "percent";
+  const withGradient = typeof withGradientProp === "boolean" ? withGradientProp : type === "default";
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    dot = {},
+    activeDot = {},
+    dimDot,
+    dimArea,
+    ...computedAreaProps
+  } = (_a = rest.areaProps) != null ? _a : {};
+  const areaColors = (0, import_react.useMemo)(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `area-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const areaSplitColors = (0, import_react.useMemo)(
+    () => splitColors.map((color, index) => ({
+      __prefix: "ui",
+      name: `area-split-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [splitColors]
+  );
+  const referenceLineColors = (0, import_react.useMemo)(
+    () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `reference-line-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })) : [],
+    [referenceLineProps]
+  );
+  const areaVars = (0, import_react.useMemo)(() => {
+    return [
+      ...areaColors,
+      ...areaSplitColors,
+      ...referenceLineColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ];
+  }, [areaColors, areaSplitColors, referenceLineColors, fillOpacity]);
+  const [chartProps, areaChartClassName] = (0, import_react.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.chartProps) != null ? _a2 : {}, areaChartProperties],
+        styles.chart
+      )(theme);
+    },
+    [rest.chartProps, styles.chart, theme]
+  );
+  const [areaProps, areaClassName] = (0, import_react.useMemo)(() => {
+    const resolvedAreaProps = {
+      fillOpacity: 1,
+      strokeOpacity: 1,
+      ...computedAreaProps
+    };
+    return getComponentProps(
+      [resolvedAreaProps, areaProperties],
+      styles.area
+    )(theme);
+  }, [computedAreaProps, styles.area, theme]);
+  const [dimAreaProps, dimAreaClassName] = (0, import_react.useMemo)(() => {
+    const resolvedDimArea = {
+      fillOpacity: 0,
+      strokeOpacity: 0.3,
+      ...dimArea
+    };
+    return getComponentProps([resolvedDimArea, areaProperties])(
+      theme
+    );
+  }, [dimArea, theme]);
+  const [dotProps, dotClassName] = (0, import_react.useMemo)(() => {
+    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
+    return getComponentProps(
+      [resolvedDot, dotProperties],
+      styles.dot
+    )(theme);
+  }, [dot, styles.dot, theme]);
+  const [activeDotProps, activeDotClassName] = (0, import_react.useMemo)(
+    () => getComponentProps(
+      [activeDot, dotProperties],
+      styles.activeDot
+    )(theme),
+    [activeDot, styles.activeDot, theme]
+  );
+  const [dimDotProps, dimDotClassName] = (0, import_react.useMemo)(() => {
+    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
+    return getComponentProps([resolvedDimDot, dotProperties])(
+      theme
+    );
+  }, [dimDot, theme]);
+  const defaultSplitOffset = (0, import_react.useMemo)(() => {
+    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);
+    }
+    return 0.5;
+  }, [data, series]);
+  const areaPropsList = (0, import_react.useMemo)(
+    () => series.map((props, index) => {
+      const {
+        dataKey,
+        dot: dot2 = {},
+        activeDot: activeDot2 = {},
+        dimDot: dimDot2 = {},
+        dimArea: dimArea2 = {},
+        strokeDasharray,
+        ...computedProps
+      } = props;
+      const id = `${uuid}-${dataKey}`;
+      const color = `var(--ui-area-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== dataKey;
+      const computedDimArea = { ...dimAreaProps, ...dimArea2 };
+      const resolvedProps = {
+        ...areaProps,
+        ...computedProps,
+        ...dimmed ? computedDimArea : {}
+      };
+      const rest2 = getComponentProps(
+        [resolvedProps, areaProperties],
+        areaClassName,
+        dimmed ? dimAreaClassName : void 0
+      )(theme, true);
+      let resolvedActiveDot;
+      if (withActiveDots) {
+        const computedActiveDot = { ...activeDotProps, ...activeDot2 };
+        const [rest3, className] = getComponentProps(
+          [computedActiveDot, dotProperties],
+          activeDotClassName
+        )(theme);
+        resolvedActiveDot = {
+          className: (0, import_utils2.cx)("ui-area-chart__active-dot", className),
+          stroke: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedActiveDot = false;
+      }
+      let resolvedDot;
+      if (withDots) {
+        const computedDimDot = { ...dimDotProps, ...dimDot2 };
+        const computedDot = {
+          ...dotProps,
+          ...dot2,
+          ...dimmed ? computedDimDot : {}
+        };
+        const [rest3, className] = getComponentProps(
+          [computedDot, dotProperties],
+          dotClassName,
+          dimmed ? dimDotClassName : void 0
+        )(theme);
+        resolvedDot = {
+          className: (0, import_utils2.cx)("ui-area-chart__dot", className),
+          fill: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedDot = false;
+      }
+      return {
+        ...rest2,
+        id,
+        color,
+        strokeDasharray,
+        dataKey,
+        activeDot: resolvedActiveDot,
+        dot: resolvedDot
+      };
+    }),
+    [
+      series,
+      uuid,
+      shouldHighlight,
+      highlightedArea,
+      dimAreaProps,
+      dimDotProps,
+      areaProps,
+      areaClassName,
+      dimAreaClassName,
+      theme,
+      withActiveDots,
+      withDots,
+      activeDotProps,
+      activeDotClassName,
+      dotProps,
+      dotClassName,
+      dimDotClassName
+    ]
+  );
+  const getAreaChartProps = (0, import_react.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils2.cx)(className, areaChartClassName),
+      data,
+      stackOffset: type === "percent" ? "expand" : void 0,
+      layout: layoutType,
+      syncId,
+      ...props,
+      ...chartProps
+    }),
+    [areaChartClassName, data, type, layoutType, syncId, chartProps]
+  );
+  const getAreaSplitProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      id: splitId,
+      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...props
+    }),
+    [defaultSplitOffset, splitId, splitOffset]
+  );
+  const getAreaProps = (0, import_react.useCallback)(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const {
+        id,
+        color,
+        className,
+        dataKey,
+        strokeDasharray,
+        activeDot: activeDot2,
+        dot: dot2,
+        ...rest2
+      } = areaPropsList[index];
+      return {
+        ref,
+        className: (0, import_utils2.cx)(classNameProp, className),
+        id,
+        activeDot: activeDot2,
+        dot: dot2,
+        name: dataKey,
+        type: curveType,
+        dataKey,
+        fill: type === "split" ? `url(#${splitId})` : `url(#${id})`,
+        strokeWidth,
+        stroke: color,
+        isAnimationActive: false,
+        connectNulls,
+        stackId: stacked ? "stack" : void 0,
+        strokeDasharray,
+        ...props,
+        ...rest2
+      };
+    },
+    [
+      areaPropsList,
+      connectNulls,
+      curveType,
+      splitId,
+      stacked,
+      strokeWidth,
+      type
+    ]
+  );
+  const getAreaGradientProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      withGradient,
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...props
+    }),
+    [withGradient]
+  );
+  return {
+    getAreaChartProps,
+    getAreaSplitProps,
+    getAreaProps,
+    getAreaGradientProps,
+    areaVars,
+    setHighlightedArea
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAreaChart
+});
+//# sourceMappingURL=use-area-chart.js.map