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

package/dist/chunk-BPR7YL3O.mjs

@@ -0,0 +1,179 @@
+"use client"
+import {
+  usePieChart
+} from "./chunk-LHI57S6P.mjs";
+import {
+  useChartLegend
+} from "./chunk-LM2DQK2P.mjs";
+import {
+  useChartTooltip
+} from "./chunk-RN6PXJAD.mjs";
+import {
+  ChartLegend
+} from "./chunk-NEGDEVRX.mjs";
+import {
+  ChartTooltip
+} from "./chunk-LBC2B6UX.mjs";
+import {
+  ChartProvider,
+  useChart
+} from "./chunk-XIFDRM7J.mjs";
+
+// src/donut-chart.tsx
+import {
+  forwardRef,
+  omitThemeProps,
+  ui,
+  useMultiComponentStyle
+} from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { useMemo } from "react";
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart as RechartsPieChart,
+  ResponsiveContainer,
+  Tooltip
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DonutChart = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("DonutChart", props);
+  const {
+    className,
+    data,
+    pieProps,
+    chartProps,
+    cellProps,
+    containerProps,
+    withTooltip = true,
+    withLegend = false,
+    tooltipProps,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    valueFormatter,
+    unit,
+    paddingAngle,
+    startAngle,
+    endAngle,
+    withLabels,
+    withLabelLines,
+    innerRadius = withLabels ? "60%" : "80%",
+    outerRadius,
+    strokeWidth,
+    legendProps,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const {
+    pieVars,
+    getPieProps,
+    getPieChartProps,
+    getCellProps,
+    setHighlightedArea
+  } = usePieChart({
+    data,
+    pieProps,
+    chartProps,
+    cellProps,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    startAngle,
+    endAngle,
+    strokeWidth,
+    withLabels,
+    withLabelLines,
+    styles
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const cells = useMemo(
+    () => data.map(({ name }, index) => /* @__PURE__ */ jsx(
+      Cell,
+      {
+        ...getCellProps({ index, className: "ui-donut-chart__cell" })
+      },
+      `donut-cell-${name}`
+    )),
+    [data, getCellProps]
+  );
+  return /* @__PURE__ */ jsx(ChartProvider, { value: { styles }, children: /* @__PURE__ */ jsx(
+    ui.div,
+    {
+      ref,
+      className: cx("ui-donut-chart", className),
+      var: pieVars,
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-donut-chart__container" }),
+          children: /* @__PURE__ */ jsxs(
+            RechartsPieChart,
+            {
+              ...getPieChartProps({ className: "ui-donut-chart__chart" }),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Pie,
+                  {
+                    ...getPieProps({
+                      className: "ui-donut-chart__donut",
+                      labelClassName: "ui-donut-chart__label",
+                      labelLineClassName: "ui-donut-chart__label-line"
+                    }),
+                    children: cells
+                  }
+                ),
+                withLegend ? /* @__PURE__ */ jsx(
+                  Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ jsx(
+                      ChartLegend,
+                      {
+                        className: "ui-donut-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ jsx(
+                      ChartTooltip,
+                      {
+                        className: "ui-donut-chart__tooltip",
+                        label,
+                        payload: tooltipDataSource === "segment" ? payload : data,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+export {
+  DonutChart
+};
+//# sourceMappingURL=chunk-BPR7YL3O.mjs.map

package/dist/chunk-BPR7YL3O.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  Cell,\n  Legend,\n  Pie,\n  PieChart as RechartsPieChart,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { PieChartProps } from \"./pie-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ntype DonutChartOptions = {\n  /**\n   * Controls innerRadius of the chart segments.\n   * If it is a number, it is the width of the radius.\n   * For example, `60` means the radius is `60px` and the diameter is `120px`.\n   *\n   * @default '60%'\n   */\n  innerRadius?: number | string\n}\n\nexport type DonutChartProps = PieChartProps & DonutChartOptions\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"DonutChart\", props)\n  const {\n    className,\n    data,\n    pieProps,\n    chartProps,\n    cellProps,\n    containerProps,\n    withTooltip = true,\n    withLegend = false,\n    tooltipProps,\n    tooltipAnimationDuration,\n    tooltipDataSource = \"all\",\n    valueFormatter,\n    unit,\n    paddingAngle,\n    startAngle,\n    endAngle,\n    withLabels,\n    withLabelLines,\n    innerRadius = withLabels ? \"60%\" : \"80%\",\n    outerRadius,\n    strokeWidth,\n    legendProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    pieVars,\n    getPieProps,\n    getPieChartProps,\n    getCellProps,\n    setHighlightedArea,\n  } = usePieChart({\n    data,\n    pieProps,\n    chartProps,\n    cellProps,\n    innerRadius,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    endAngle,\n    strokeWidth,\n    withLabels,\n    withLabelLines,\n    styles,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const { tooltipProps: computedTooltipProps, getTooltipProps } =\n    useChartTooltip({\n      tooltipProps,\n      tooltipAnimationDuration,\n      styles,\n    })\n  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n    legendProps,\n  })\n\n  const cells = useMemo(\n    () =>\n      data.map(({ name }, index) => (\n        <Cell\n          key={`donut-cell-${name}`}\n          {...getCellProps({ index, className: \"ui-donut-chart__cell\" })}\n        />\n      )),\n    [data, getCellProps],\n  )\n\n  return (\n    <ChartProvider value={{ styles }}>\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-donut-chart\", className)}\n        var={pieVars}\n        __css={{ maxW: \"full\", ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-donut-chart__container\" })}\n        >\n          <RechartsPieChart\n            {...getPieChartProps({ className: \"ui-donut-chart__chart\" })}\n          >\n            <Pie\n              {...getPieProps({\n                className: \"ui-donut-chart__donut\",\n                labelClassName: \"ui-donut-chart__label\",\n                labelLineClassName: \"ui-donut-chart__label-line\",\n              })}\n            >\n              {cells}\n            </Pie>\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-donut-chart__legend\"\n                    payload={payload}\n                    onHighlight={setHighlightedArea}\n                    {...computedLegendProps}\n                  />\n                )}\n                {...getLegendProps()}\n              />\n            ) : null}\n\n            {withTooltip ? (\n              <Tooltip\n                content={({ label, payload }) => (\n                  <ChartTooltip\n                    className=\"ui-donut-chart__tooltip\"\n                    label={label}\n                    payload={tooltipDataSource === \"segment\" ? payload : data}\n                    valueFormatter={valueFormatter}\n                    unit={unit}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n"],"mappings":"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","names":[]}

package/dist/chunk-E2I2XAZ6.mjs

@@ -0,0 +1,232 @@
+"use client"
+import {
+  useLineChart
+} from "./chunk-QZ5OXZ6Z.mjs";
+import {
+  useChartAxis
+} from "./chunk-P7AFSM5W.mjs";
+import {
+  useChartGrid
+} from "./chunk-LGMALZCN.mjs";
+import {
+  useChartReferenceLine
+} from "./chunk-MWPICUEW.mjs";
+import {
+  useChartLegend
+} from "./chunk-LM2DQK2P.mjs";
+import {
+  useChartTooltip
+} from "./chunk-RN6PXJAD.mjs";
+import {
+  ChartLegend
+} from "./chunk-NEGDEVRX.mjs";
+import {
+  ChartTooltip
+} from "./chunk-LBC2B6UX.mjs";
+import {
+  ChartProvider,
+  useChart
+} from "./chunk-XIFDRM7J.mjs";
+
+// src/line-chart.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { useMemo } from "react";
+import {
+  LineChart as ReChartsLineChart,
+  Legend,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ReferenceLine,
+  Line
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LineChart = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("LineChart", props);
+  const {
+    className,
+    containerProps,
+    gridProps,
+    gridAxis,
+    strokeDasharray,
+    dataKey,
+    type,
+    layoutType,
+    tickLine,
+    withXAxis,
+    withYAxis,
+    xAxisProps,
+    yAxisProps,
+    unit,
+    valueFormatter,
+    referenceLineProps,
+    tooltipProps,
+    tooltipAnimationDuration,
+    legendProps,
+    withLegend = false,
+    withTooltip = true,
+    series,
+    data,
+    chartProps,
+    lineProps,
+    withDots,
+    withActiveDots,
+    curveType,
+    strokeWidth,
+    connectNulls,
+    fillOpacity,
+    syncId,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } = useLineChart({
+    layoutType,
+    series,
+    referenceLineProps,
+    data,
+    chartProps,
+    lineProps,
+    withDots,
+    withActiveDots,
+    curveType,
+    strokeWidth,
+    connectNulls,
+    fillOpacity,
+    syncId,
+    styles
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { getXAxisProps, getYAxisProps } = useChartAxis({
+    dataKey,
+    type,
+    layoutType,
+    tickLine,
+    gridAxis,
+    withXAxis,
+    withYAxis,
+    xAxisProps,
+    yAxisProps,
+    unit,
+    valueFormatter,
+    styles
+  });
+  const { getReferenceLineProps } = useChartReferenceLine({
+    referenceLineProps,
+    styles
+  });
+  const { getGridProps } = useChartGrid({
+    gridProps,
+    gridAxis,
+    strokeDasharray,
+    styles
+  });
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const lines = useMemo(
+    () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        ...getLineProps({ index, className: "ui-line-chart__line" })
+      },
+      `line-${dataKey2}`
+    )),
+    [getLineProps, series]
+  );
+  const referenceLinesItems = useMemo(
+    () => referenceLineProps == null ? void 0 : referenceLineProps.map((_, index) => /* @__PURE__ */ jsx(
+      ReferenceLine,
+      {
+        ...getReferenceLineProps({
+          index,
+          className: "ui-line-chart__reference-line"
+        })
+      },
+      `referenceLine-${index}`
+    )),
+    [getReferenceLineProps, referenceLineProps]
+  );
+  return /* @__PURE__ */ jsx(ChartProvider, { value: { styles }, children: /* @__PURE__ */ jsx(
+    ui.div,
+    {
+      ref,
+      className: cx("ui-line-chart", className),
+      var: lineVars,
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-line-chart__container" }),
+          children: /* @__PURE__ */ jsxs(
+            ReChartsLineChart,
+            {
+              ...getLineChartProps({ className: "ui-line-chart__chart" }),
+              children: [
+                /* @__PURE__ */ jsx(
+                  CartesianGrid,
+                  {
+                    ...getGridProps({ className: "ui-line-chart__grid" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(XAxis, { ...getXAxisProps({ className: "ui-line-chart__x-axis" }) }),
+                /* @__PURE__ */ jsx(YAxis, { ...getYAxisProps({ className: "ui-line-chart__y-axis" }) }),
+                withLegend ? /* @__PURE__ */ jsx(
+                  Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ jsx(
+                      ChartLegend,
+                      {
+                        className: "ui-line-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ jsx(
+                      ChartTooltip,
+                      {
+                        className: "ui-line-chart__tooltip",
+                        label,
+                        payload,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null,
+                lines,
+                referenceLinesItems
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+export {
+  LineChart
+};
+//# sourceMappingURL=chunk-E2I2XAZ6.mjs.map

package/dist/chunk-E2I2XAZ6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/line-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  LineChart as ReChartsLineChart,\n  Legend,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n  ReferenceLine,\n  Line,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport type { UseChartAxisOptions } from \"./use-chart-axis\"\nimport { useChartAxis } from \"./use-chart-axis\"\nimport type { UseChartGridOptions } from \"./use-chart-grid\"\nimport { useChartGrid } from \"./use-chart-grid\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport type { UseChartReferenceLineOptions } from \"./use-chart-reference-line\"\nimport { useChartReferenceLine } from \"./use-chart-reference-line\"\nimport {\n  useChartTooltip,\n  type UseChartTooltipOptions,\n} from \"./use-chart-tooltip\"\nimport { useLineChart } from \"./use-line-chart\"\nimport type { UseLineChartOptions } from \"./use-line-chart\"\n\ntype LineChartOptions = {\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n}\n\nexport type LineChartProps = HTMLUIProps<\"div\"> &\n  ThemeProps<\"LineChart\"> &\n  LineChartOptions &\n  UseChartProps &\n  UseChartAxisOptions &\n  UseChartReferenceLineOptions &\n  UseChartGridOptions &\n  UseChartTooltipOptions &\n  UseChartLegendProps &\n  UseLineChartOptions\n\n/**\n * `LineChart` is a component for drawing line charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/line-chart\n */\nexport const LineChart = forwardRef<LineChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"LineChart\", props)\n  const {\n    className,\n    containerProps,\n    gridProps,\n    gridAxis,\n    strokeDasharray,\n    dataKey,\n    type,\n    layoutType,\n    tickLine,\n    withXAxis,\n    withYAxis,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    valueFormatter,\n    referenceLineProps,\n    tooltipProps,\n    tooltipAnimationDuration,\n    legendProps,\n    withLegend = false,\n    withTooltip = true,\n    series,\n    data,\n    chartProps,\n    lineProps,\n    withDots,\n    withActiveDots,\n    curveType,\n    strokeWidth,\n    connectNulls,\n    fillOpacity,\n    syncId,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } =\n    useLineChart({\n      layoutType,\n      series,\n      referenceLineProps,\n      data,\n      chartProps,\n      lineProps,\n      withDots,\n      withActiveDots,\n      curveType,\n      strokeWidth,\n      connectNulls,\n      fillOpacity,\n      syncId,\n      styles,\n    })\n  const { getContainerProps } = useChart({ containerProps })\n  const { getXAxisProps, getYAxisProps } = useChartAxis({\n    dataKey,\n    type,\n    layoutType,\n    tickLine,\n    gridAxis,\n    withXAxis,\n    withYAxis,\n    xAxisProps,\n    yAxisProps,\n    unit,\n    valueFormatter,\n    styles,\n  })\n  const { getReferenceLineProps } = useChartReferenceLine({\n    referenceLineProps,\n    styles,\n  })\n  const { getGridProps } = useChartGrid({\n    gridProps,\n    gridAxis,\n    strokeDasharray,\n    styles,\n  })\n  const { tooltipProps: computedTooltipProps, getTooltipProps } =\n    useChartTooltip({\n      tooltipProps,\n      tooltipAnimationDuration,\n      styles,\n    })\n  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n    legendProps,\n  })\n\n  const lines = useMemo(\n    () =>\n      series.map(({ dataKey }, index) => (\n        <Line\n          key={`line-${dataKey}`}\n          {...getLineProps({ index, className: \"ui-line-chart__line\" })}\n        />\n      )),\n    [getLineProps, series],\n  )\n\n  const referenceLinesItems = useMemo(\n    () =>\n      referenceLineProps?.map((_, index) => (\n        <ReferenceLine\n          key={`referenceLine-${index}`}\n          {...getReferenceLineProps({\n            index,\n            className: \"ui-line-chart__reference-line\",\n          })}\n        />\n      )),\n    [getReferenceLineProps, referenceLineProps],\n  )\n\n  return (\n    <ChartProvider value={{ styles }}>\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-line-chart\", className)}\n        var={lineVars}\n        __css={{ maxW: \"full\", ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-line-chart__container\" })}\n        >\n          <ReChartsLineChart\n            {...getLineChartProps({ className: \"ui-line-chart__chart\" })}\n          >\n            <CartesianGrid\n              {...getGridProps({ className: \"ui-line-chart__grid\" })}\n            />\n            <XAxis {...getXAxisProps({ className: \"ui-line-chart__x-axis\" })} />\n            <YAxis {...getYAxisProps({ className: \"ui-line-chart__y-axis\" })} />\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-line-chart__legend\"\n                    payload={payload}\n                    onHighlight={setHighlightedArea}\n                    {...computedLegendProps}\n                  />\n                )}\n                {...getLegendProps()}\n              />\n            ) : null}\n\n            {withTooltip ? (\n              <Tooltip\n                content={({ label, payload }) => (\n                  <ChartTooltip\n                    className=\"ui-line-chart__tooltip\"\n                    label={label}\n                    payload={payload}\n                    valueFormatter={valueFormatter}\n                    unit={unit}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n\n            {lines}\n            {referenceLinesItems}\n          </ReChartsLineChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n"],"mappings":"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","names":["dataKey"]}