@yamada-ui/charts 1.1.2-dev-20240430063353 → 1.1.2-dev-20240501174240

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

@@ -1,123 +0,0 @@
-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 | _yamada_ui_core.ResponsiveObject<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

@@ -1,123 +0,0 @@
-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 | _yamada_ui_core.ResponsiveObject<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

@@ -1,420 +0,0 @@
-"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