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

package/dist/chunk-STBYRLC5.mjs

@@ -0,0 +1,208 @@
+"use client"
+import {
+  barChartProperties,
+  barProperties
+} from "./chunk-OSNFBRHL.mjs";
+import {
+  getComponentProps
+} from "./chunk-QL3DB7OJ.mjs";
+
+// src/use-bar-chart.ts
+import { useTheme } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import {
+  useCallback,
+  useState,
+  useId,
+  useMemo
+} from "react";
+var useBarChart = ({
+  data,
+  series,
+  type = "default",
+  layoutType = "horizontal",
+  referenceLineProps = [],
+  fillOpacity = 1,
+  syncId,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const uuid = useId();
+  const { theme } = useTheme();
+  const [highlightedArea, setHighlightedArea] = useState(null);
+  const stacked = type === "stacked" || type === "percent";
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    activeBar = {},
+    background = {},
+    dimBar,
+    ...computedBarProps
+  } = (_a = rest.barProps) != null ? _a : {};
+  const barColors = useMemo(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `bar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const referenceLineColors = useMemo(
+    () => referenceLineProps.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `reference-line-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [referenceLineProps]
+  );
+  const barVars = useMemo(() => {
+    return [
+      ...barColors,
+      ...referenceLineColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ];
+  }, [barColors, fillOpacity, referenceLineColors]);
+  const [chartProps, barChartClassName] = useMemo(() => {
+    const resolvedBarChartProps = { barGap: 8, ...rest.chartProps };
+    return getComponentProps(
+      [resolvedBarChartProps, barChartProperties],
+      styles.chart
+    )(theme);
+  }, [rest.chartProps, styles.chart, theme]);
+  const [barProps, barClassName] = useMemo(() => {
+    const resolvedBarProps = {
+      fillOpacity: "var(--ui-fill-opacity)",
+      strokeOpacity: 1,
+      ...computedBarProps
+    };
+    return getComponentProps(
+      [resolvedBarProps, barProperties],
+      styles.bar
+    )(theme);
+  }, [computedBarProps, styles.bar, theme]);
+  const [dimBarProps, dimBarClassName] = useMemo(() => {
+    const resolvedDimBar = { fillOpacity: 0.3, strokeOpacity: 0, ...dimBar };
+    return getComponentProps([resolvedDimBar, barProperties])(
+      theme
+    );
+  }, [dimBar, theme]);
+  const [activeBarProps, activeBarClassName] = useMemo(
+    () => getComponentProps(
+      [activeBar, barProperties],
+      styles.activeBar
+    )(theme),
+    [activeBar, styles.activeBar, theme]
+  );
+  const [backgroundProps, backgroundClassName] = useMemo(
+    () => getComponentProps(
+      [background, barProperties],
+      styles.background
+    )(theme),
+    [background, styles.background, theme]
+  );
+  const barPropsList = useMemo(
+    () => series.map((props, index) => {
+      const {
+        dataKey,
+        activeBar: activeBar2 = {},
+        background: background2 = {},
+        dimBar: dimBar2 = {},
+        ...computedProps
+      } = props;
+      const id = `${uuid}-${dataKey}`;
+      const color = `var(--ui-bar-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== dataKey;
+      const computedDimBar = { ...dimBarProps, ...dimBar2 };
+      const resolvedProps = {
+        ...barProps,
+        ...computedProps,
+        ...dimmed ? computedDimBar : {}
+      };
+      const rest2 = getComponentProps(
+        [resolvedProps, barProperties],
+        barClassName,
+        dimmed ? dimBarClassName : void 0
+      )(theme, true);
+      const computedActiveBar = { ...activeBarProps, ...activeBar2 };
+      const resolvedActiveBar = getComponentProps(
+        [computedActiveBar, barProperties],
+        activeBarClassName
+      )(theme, true);
+      const computedBackground = { ...backgroundProps, ...background2 };
+      const resolvedBackground = getComponentProps(
+        [computedBackground, barProperties],
+        backgroundClassName
+      )(theme, true);
+      return {
+        ...rest2,
+        id,
+        activeBar: resolvedActiveBar,
+        background: resolvedBackground,
+        color,
+        dataKey
+      };
+    }),
+    [
+      activeBarClassName,
+      activeBarProps,
+      backgroundClassName,
+      backgroundProps,
+      barClassName,
+      barProps,
+      dimBarClassName,
+      dimBarProps,
+      highlightedArea,
+      series,
+      shouldHighlight,
+      theme,
+      uuid
+    ]
+  );
+  const getBarProps = useCallback(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const { id, className, activeBar: activeBar2, background: background2, color, dataKey, ...rest2 } = barPropsList[index];
+      return {
+        ref,
+        className: cx(classNameProp, className),
+        activeBar: activeBar2,
+        background: background2,
+        id,
+        name: dataKey,
+        dataKey,
+        fill: color,
+        stroke: color,
+        isAnimationActive: false,
+        stackId: stacked ? "stack" : void 0,
+        ...props,
+        ...rest2
+      };
+    },
+    [barPropsList, stacked]
+  );
+  const getBarChartProps = useCallback(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: cx(className, barChartClassName),
+      data,
+      stackOffset: type === "percent" ? "expand" : void 0,
+      layout: layoutType,
+      syncId,
+      ...props,
+      ...chartProps
+    }),
+    [barChartClassName, chartProps, data, syncId, layoutType, type]
+  );
+  return {
+    barVars,
+    getBarProps,
+    getBarChartProps,
+    setHighlightedArea
+  };
+};
+
+export {
+  useBarChart
+};
+//# sourceMappingURL=chunk-STBYRLC5.mjs.map

package/dist/chunk-STBYRLC5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-bar-chart.ts"],"sourcesContent":["import { type CSSUIObject, useTheme, type CSSUIProps } from \"@yamada-ui/core\"\nimport { type Dict, cx } from \"@yamada-ui/utils\"\nimport {\n  type ComponentPropsWithoutRef,\n  useCallback,\n  useState,\n  useId,\n  useMemo,\n} from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport type {\n  BarProps,\n  BarChartType,\n  BarChartProps,\n  ChartPropGetter,\n  ChartLayoutType,\n  ReferenceLineProps,\n  RequiredChartPropGetter,\n} from \"./chart.types\"\nimport { barProperties, barChartProperties } from \"./rechart-properties\"\n\nexport type UseBarChartOptions = {\n  /**\n   * Chart data.\n   */\n  data: Dict[]\n  /**\n   * An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.\n   */\n  series: BarProps[]\n  /**\n   * Props for the bars.\n   */\n  barProps?: Partial<BarProps>\n  /**\n   * Controls how chart bars are positioned relative to each other.\n   *\n   * @default `default`\n   */\n  type?: BarChartType\n  /**\n   * Chart orientation.\n   *\n   * @default 'horizontal'\n   */\n  layoutType?: ChartLayoutType\n  /**\n   * If any two categorical charts have the same syncId,\n   * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.\n   */\n  syncId?: number | string\n  /**\n   * Props passed down to recharts `BarChart` component.\n   */\n  chartProps?: BarChartProps\n  /**\n   * Reference lines that should be displayed on the chart.\n   */\n  referenceLineProps?: ReferenceLineProps[]\n  /**\n   * Controls fill opacity of all bars.\n   *\n   * @default 1\n   */\n  fillOpacity?: number | [number, number]\n}\n\nexport type UseBarChartProps = UseBarChartOptions & {\n  styles: Dict<CSSUIObject>\n}\n\nexport const useBarChart = ({\n  data,\n  series,\n  type = \"default\",\n  layoutType = \"horizontal\",\n  referenceLineProps = [],\n  fillOpacity = 1,\n  syncId,\n  styles,\n  ...rest\n}: UseBarChartProps) => {\n  const uuid = useId()\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null)\n  const stacked = type === \"stacked\" || type === \"percent\"\n  const shouldHighlight = highlightedArea !== null\n  const {\n    activeBar = {},\n    background = {},\n    dimBar,\n    ...computedBarProps\n  } = rest.barProps ?? {}\n\n  const barColors: CSSUIProps[\"var\"] = useMemo(\n    () =>\n      series.map(({ color }, index) => ({\n        __prefix: \"ui\",\n        name: `bar-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [series],\n  )\n\n  const referenceLineColors: CSSUIProps[\"var\"] = useMemo(\n    () =>\n      referenceLineProps.map(({ color }, index) => ({\n        __prefix: \"ui\",\n        name: `reference-line-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [referenceLineProps],\n  )\n\n  const barVars: CSSUIProps[\"var\"] = useMemo(() => {\n    return [\n      ...barColors,\n      ...referenceLineColors,\n      { __prefix: \"ui\", name: \"fill-opacity\", value: fillOpacity },\n    ]\n  }, [barColors, fillOpacity, referenceLineColors])\n\n  const [chartProps, barChartClassName] = useMemo(() => {\n    const resolvedBarChartProps = { barGap: 8, ...rest.chartProps }\n\n    return getComponentProps<Dict, string>(\n      [resolvedBarChartProps, barChartProperties],\n      styles.chart,\n    )(theme)\n  }, [rest.chartProps, styles.chart, theme])\n\n  const [barProps, barClassName] = useMemo(() => {\n    const resolvedBarProps = {\n      fillOpacity: \"var(--ui-fill-opacity)\",\n      strokeOpacity: 1,\n      ...computedBarProps,\n    }\n\n    return getComponentProps<Dict, string>(\n      [resolvedBarProps, barProperties],\n      styles.bar,\n    )(theme)\n  }, [computedBarProps, styles.bar, theme])\n\n  const [dimBarProps, dimBarClassName] = useMemo(() => {\n    const resolvedDimBar = { fillOpacity: 0.3, strokeOpacity: 0, ...dimBar }\n\n    return getComponentProps<Dict, string>([resolvedDimBar, barProperties])(\n      theme,\n    )\n  }, [dimBar, theme])\n\n  const [activeBarProps, activeBarClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [activeBar, barProperties],\n        styles.activeBar,\n      )(theme),\n    [activeBar, styles.activeBar, theme],\n  )\n\n  const [backgroundProps, backgroundClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [background, barProperties],\n        styles.background,\n      )(theme),\n    [background, styles.background, theme],\n  )\n\n  const barPropsList = useMemo(\n    () =>\n      series.map((props, index) => {\n        const {\n          dataKey,\n          activeBar = {},\n          background = {},\n          dimBar = {},\n          ...computedProps\n        } = props\n        const id = `${uuid}-${dataKey}`\n        const color = `var(--ui-bar-${index})`\n        const dimmed = shouldHighlight && highlightedArea !== dataKey\n        const computedDimBar = { ...dimBarProps, ...dimBar }\n        const resolvedProps = {\n          ...barProps,\n          ...computedProps,\n          ...(dimmed ? computedDimBar : {}),\n        }\n\n        const rest = getComponentProps<Dict, string>(\n          [resolvedProps, barProperties],\n          barClassName,\n          dimmed ? dimBarClassName : undefined,\n        )(theme, true)\n\n        const computedActiveBar = { ...activeBarProps, ...activeBar }\n\n        const resolvedActiveBar = getComponentProps<Dict, string>(\n          [computedActiveBar, barProperties],\n          activeBarClassName,\n        )(theme, true)\n\n        const computedBackground = { ...backgroundProps, ...background }\n\n        const resolvedBackground = getComponentProps<Dict, string>(\n          [computedBackground, barProperties],\n          backgroundClassName,\n        )(theme, true)\n\n        return {\n          ...rest,\n          id,\n          activeBar: resolvedActiveBar,\n          background: resolvedBackground,\n          color,\n          dataKey,\n        }\n      }),\n    [\n      activeBarClassName,\n      activeBarProps,\n      backgroundClassName,\n      backgroundProps,\n      barClassName,\n      barProps,\n      dimBarClassName,\n      dimBarProps,\n      highlightedArea,\n      series,\n      shouldHighlight,\n      theme,\n      uuid,\n    ],\n  )\n\n  const getBarProps: RequiredChartPropGetter<\n    \"div\",\n    {\n      index: number\n    },\n    Omit<Recharts.BarProps, \"ref\">\n  > = useCallback(\n    ({ index, className: classNameProp, ...props }, ref = null) => {\n      const { id, className, activeBar, background, color, dataKey, ...rest } =\n        barPropsList[index]\n\n      return {\n        ref,\n        className: cx(classNameProp, className),\n        activeBar,\n        background,\n        id,\n        name: dataKey as string,\n        dataKey,\n        fill: color,\n        stroke: color,\n        isAnimationActive: false,\n        stackId: stacked ? \"stack\" : undefined,\n        ...(props as Omit<Recharts.BarProps, \"dataKey\">),\n        ...rest,\n      } as Recharts.BarProps\n    },\n    [barPropsList, stacked],\n  )\n\n  const getBarChartProps: ChartPropGetter<\n    \"div\",\n    ComponentPropsWithoutRef<typeof Recharts.BarChart>,\n    ComponentPropsWithoutRef<typeof Recharts.BarChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, barChartClassName),\n      data,\n      stackOffset: type === \"percent\" ? \"expand\" : undefined,\n      layout: layoutType,\n      syncId,\n      ...props,\n      ...chartProps,\n    }),\n    [barChartClassName, chartProps, data, syncId, layoutType, type],\n  )\n\n  return {\n    barVars,\n    getBarProps,\n    getBarChartProps,\n    setHighlightedArea,\n  }\n}\n\nexport type UseBarChartReturn = ReturnType<typeof useBarChart>\n"],"mappings":"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","names":["activeBar","background","dimBar","rest"]}

package/dist/chunk-XIFDRM7J.mjs

@@ -0,0 +1,56 @@
+"use client"
+import {
+  containerProperties
+} from "./chunk-OSNFBRHL.mjs";
+import {
+  getComponentProps
+} from "./chunk-QL3DB7OJ.mjs";
+
+// src/use-chart.ts
+import { useTheme } from "@yamada-ui/core";
+import { createContext, cx } from "@yamada-ui/utils";
+import { useCallback } from "react";
+var [ChartProvider, useChartContext] = createContext({
+  name: "ChartContext",
+  errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in "<LineChart />" or "<BarChart />" etc.`
+});
+var useChart = ({ containerProps = {} }) => {
+  const { theme } = useTheme();
+  const [reChartsProps, propClassName] = getComponentProps([
+    containerProps,
+    containerProperties
+  ])(theme);
+  const getContainerProps = useCallback(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: cx("ui-chart__container", className, propClassName),
+      ...props,
+      ...reChartsProps
+    }),
+    [propClassName, reChartsProps]
+  );
+  return {
+    getContainerProps
+  };
+};
+var useLegend = ({} = {}) => {
+  const { styles } = useChartContext();
+  return {
+    styles
+  };
+};
+var useTooltip = ({} = {}) => {
+  const { styles } = useChartContext();
+  return {
+    styles
+  };
+};
+
+export {
+  ChartProvider,
+  useChartContext,
+  useChart,
+  useLegend,
+  useTooltip
+};
+//# sourceMappingURL=chunk-XIFDRM7J.mjs.map

package/dist/chunk-XIFDRM7J.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart.ts"],"sourcesContent":["import { useTheme, type CSSUIObject } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport type { ChartPropGetter, ResponsiveContainerProps } from \"./chart.types\"\nimport { containerProperties } from \"./rechart-properties\"\n\ntype ChartContext = { styles: Record<string, CSSUIObject> }\n\nexport const [ChartProvider, useChartContext] = createContext<ChartContext>({\n  name: \"ChartContext\",\n  errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in \"<LineChart />\" or \"<BarChart />\" etc.`,\n})\n\nexport type UseChartProps = {\n  /**\n   * Props passed down to recharts `ResponsiveContainer` component.\n   */\n  containerProps?: ResponsiveContainerProps\n}\n\nexport const useChart = ({ containerProps = {} }: UseChartProps) => {\n  const { theme } = useTheme()\n  const [reChartsProps, propClassName] = getComponentProps<Dict, string>([\n    containerProps,\n    containerProperties,\n  ])(theme)\n\n  const getContainerProps: ChartPropGetter<\n    \"div\",\n    Partial<Omit<Recharts.ResponsiveContainerProps, \"children\">>,\n    Omit<Recharts.ResponsiveContainerProps, \"children\">\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(\"ui-chart__container\", className as string, propClassName),\n      ...props,\n      ...reChartsProps,\n    }),\n    [propClassName, reChartsProps],\n  )\n\n  return {\n    getContainerProps,\n  }\n}\n\nexport type UseChartReturn = ReturnType<typeof useChart>\n\nexport type UseLegendProps = {}\n\nexport const useLegend = ({}: UseLegendProps = {}) => {\n  const { styles } = useChartContext()\n  return {\n    styles,\n  }\n}\nexport type UseLegendReturn = ReturnType<typeof useLegend>\n\nexport type UseTooltipProps = {}\n\nexport const useTooltip = ({}: UseTooltipProps = {}) => {\n  const { styles } = useChartContext()\n  return {\n    styles,\n  }\n}\nexport type UseTooltipReturn = ReturnType<typeof useTooltip>\n"],"mappings":";;;;;;;;;AAAA,SAAS,gBAAkC;AAE3C,SAAS,eAAe,UAAU;AAClC,SAAS,mBAAmB;AAQrB,IAAM,CAAC,eAAe,eAAe,IAAI,cAA4B;AAAA,EAC1E,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AASM,IAAM,WAAW,CAAC,EAAE,iBAAiB,CAAC,EAAE,MAAqB;AAClE,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,eAAe,aAAa,IAAI,kBAAgC;AAAA,IACrE;AAAA,IACA;AAAA,EACF,CAAC,EAAE,KAAK;AAER,QAAM,oBAIF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,UAAU;AAAA,MAC7C;AAAA,MACA,WAAW,GAAG,uBAAuB,WAAqB,aAAa;AAAA,MACvE,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;AAMO,IAAM,YAAY,CAAC,CAAC,IAAoB,CAAC,MAAM;AACpD,QAAM,EAAE,OAAO,IAAI,gBAAgB;AACnC,SAAO;AAAA,IACL;AAAA,EACF;AACF;AAKO,IAAM,aAAa,CAAC,CAAC,IAAqB,CAAC,MAAM;AACtD,QAAM,EAAE,OAAO,IAAI,gBAAgB;AACnC,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":[]}

package/dist/donut-chart.d.mts

@@ -0,0 +1,31 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { PieChartProps } from './pie-chart.mjs';
+import './chart.types.mjs';
+import '@yamada-ui/utils';
+import 'react';
+import 'recharts';
+import './use-chart.mjs';
+import './use-chart-legend.mjs';
+import './use-chart-tooltip.mjs';
+import './use-pie-chart.mjs';
+import 'recharts/types/chart/generateCategoricalChart';
+
+type DonutChartOptions = {
+    /**
+     * Controls innerRadius of the chart segments.
+     * If it is a number, it is the width of the radius.
+     * For example, `60` means the radius is `60px` and the diameter is `120px`.
+     *
+     * @default '60%'
+     */
+    innerRadius?: number | string;
+};
+type DonutChartProps = PieChartProps & DonutChartOptions;
+/**
+ * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.
+ *
+ * @see Docs https://yamada-ui.com/components/feedback/donut-chart
+ */
+declare const DonutChart: _yamada_ui_core.Component<"div", DonutChartProps>;
+
+export { DonutChart, type DonutChartProps };

package/dist/donut-chart.d.ts

@@ -0,0 +1,31 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { PieChartProps } from './pie-chart.js';
+import './chart.types.js';
+import '@yamada-ui/utils';
+import 'react';
+import 'recharts';
+import './use-chart.js';
+import './use-chart-legend.js';
+import './use-chart-tooltip.js';
+import './use-pie-chart.js';
+import 'recharts/types/chart/generateCategoricalChart';
+
+type DonutChartOptions = {
+    /**
+     * Controls innerRadius of the chart segments.
+     * If it is a number, it is the width of the radius.
+     * For example, `60` means the radius is `60px` and the diameter is `120px`.
+     *
+     * @default '60%'
+     */
+    innerRadius?: number | string;
+};
+type DonutChartProps = PieChartProps & DonutChartOptions;
+/**
+ * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.
+ *
+ * @see Docs https://yamada-ui.com/components/feedback/donut-chart
+ */
+declare const DonutChart: _yamada_ui_core.Component<"div", DonutChartProps>;
+
+export { DonutChart, type DonutChartProps };