@yamada-ui/charts 1.0.7-dev-20240421014947 → 1.1.0

package/dist/index.js

@@ -23,7 +23,9 @@ var src_exports = {};
 __export(src_exports, {
   AreaChart: () => AreaChart,
   BarChart: () => BarChart,
+  DonutChart: () => DonutChart,
   LineChart: () => LineChart,
+  PieChart: () => PieChart,
   RadarChart: () => RadarChart
 });
 module.exports = __toCommonJS(src_exports);
@@ -118,6 +120,7 @@ var radarChartProperties = [
   "onMouseEnter",
   "onClick"
 ];
+var pieChartProperties = ["width", "height", "margin", "onClick", "onMouseEnter", "onMouseLeave"];
 var referenceLineProperties = [
   "xAxisId",
   "yAxisId",
@@ -399,6 +402,39 @@ var lineProperties = [
   "onMouseLeave",
   "strokeDasharray"
 ];
+var pieProperties = [
+  "cx",
+  "cy",
+  "innerRadius",
+  "outerRadius",
+  "startAngle",
+  "endAngle",
+  "minAngle",
+  "paddingAngle",
+  "nameKey",
+  "dataKey",
+  "legendType",
+  "label",
+  "labelLine",
+  "data",
+  "activeIndex",
+  "activeShape",
+  "inactiveShape",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
 var dotProperties = [
   "cx",
   "cy",
@@ -513,27 +549,30 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ChartLegend = (0, import_core3.forwardRef)(
   ({ className, payload = [], onHighlight, ...rest }, ref) => {
     const { styles } = useLegend();
-    const items = payload.map(({ dataKey, color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_core3.ui.div,
-      {
-        className: "ui-chart__legend-item",
-        onMouseEnter: () => onHighlight(dataKey),
-        onMouseLeave: () => onHighlight(null),
-        __css: styles.legendItem,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_core3.ui.div,
-            {
-              className: "ui-chart__legend-swatch",
-              background: color,
-              __css: styles.legendSwatch
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core3.ui.span, { className: "ui-chart__legend-label", children: dataKey })
-        ]
-      },
-      `legend-${index}`
-    ));
+    const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
+      const value = dataKey != null ? dataKey : valueProp;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_core3.ui.div,
+        {
+          className: "ui-chart__legend-item",
+          onMouseEnter: () => onHighlight(value),
+          onMouseLeave: () => onHighlight(null),
+          __css: styles.legendItem,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_core3.ui.div,
+              {
+                className: "ui-chart__legend-swatch",
+                background: color,
+                __css: styles.legendSwatch
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core3.ui.span, { className: "ui-chart__legend-label", children: value })
+          ]
+        },
+        `legend-${index}`
+      );
+    });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_core3.ui.div,
       {
@@ -555,8 +594,9 @@ var ChartTooltip = (0, import_core4.forwardRef)(
   ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {
     const { styles } = useTooltip();
     const items = payload.map(
-      ({ color, name, value: valueProp } = {}, index) => {
+      ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
         var _a;
+        const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
         let value;
         if ((0, import_utils4.isArray)(valueProp)) {
           value = valueProp.map((value2) => {
@@ -613,7 +653,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
         __css: styles.tooltip,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }),
+          label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
         ]
       }
@@ -2689,11 +2729,500 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     }
   ) });
 });
+
+// src/donut-chart.tsx
+var import_core18 = require("@yamada-ui/core");
+var import_utils19 = require("@yamada-ui/utils");
+var import_react16 = require("react");
+var import_recharts5 = require("recharts");
+
+// src/use-pie-chart.ts
+var import_core17 = require("@yamada-ui/core");
+var import_utils18 = require("@yamada-ui/utils");
+var import_react15 = require("react");
+var usePieChart = ({
+  data,
+  withLabels = false,
+  withLabelLines = false,
+  strokeWidth = 1,
+  fillOpacity = 1,
+  innerRadius = "0%",
+  outerRadius = withLabels ? "80%" : "100%",
+  paddingAngle = 0,
+  startAngle = 90,
+  endAngle = -270,
+  styles,
+  ...rest
+}) => {
+  var _a, _b;
+  const { theme } = (0, import_core17.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react15.useState)(null);
+  const shouldHighlight = highlightedArea !== null;
+  const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
+  const {
+    activeShape = {},
+    inactiveShape = {},
+    label,
+    labelLine,
+    ...computedPieProps
+  } = (_b = rest.pieProps) != null ? _b : {};
+  const cellColors = (0, import_react15.useMemo)(
+    () => data.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `cell-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [data]
+  );
+  const pieVars = (0, import_react15.useMemo)(
+    () => [
+      ...cellColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ],
+    [fillOpacity, cellColors]
+  );
+  const [chartProps, chartClassName] = (0, import_react15.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.chartProps) != null ? _a2 : {}, pieChartProperties],
+        styles.chart
+      )(theme);
+    },
+    [rest.chartProps, styles.chart, theme]
+  );
+  const [pieProps, pieClassName] = (0, import_react15.useMemo)(
+    () => getComponentProps(
+      [computedPieProps, pieProperties],
+      styles.pie
+    )(theme),
+    [computedPieProps, styles.pie, theme]
+  );
+  const cellClassName = (0, import_react15.useMemo)(() => {
+    const resolvedCellProps = {
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...styles.cell,
+      ...computedCellProps
+    };
+    return getClassName(resolvedCellProps)(theme);
+  }, [computedCellProps, styles.cell, theme]);
+  const dimCellClassName = (0, import_react15.useMemo)(() => {
+    const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell };
+    return getClassName(resolvedDimCell)(theme);
+  }, [dimCell, theme]);
+  const activeShapeProps = (0, import_react15.useMemo)(
+    () => getComponentProps(
+      [{ _focus: { outline: "none" }, ...activeShape }, pieProperties],
+      styles.activeShape
+    )(theme, true),
+    [activeShape, styles.activeShape, theme]
+  );
+  const inactiveShapeProps = (0, import_react15.useMemo)(
+    () => getComponentProps(
+      [inactiveShape, pieProperties],
+      styles.inactiveShape
+    )(theme, true),
+    [inactiveShape, styles.inactiveShape, theme]
+  );
+  const labelClassName = (0, import_react15.useMemo)(
+    () => getClassName({ fillOpacity: 1, ...styles.label, ...label })(theme),
+    [label, styles.label, theme]
+  );
+  const labelLineClassName = (0, import_react15.useMemo)(
+    () => getClassName({ ...styles.labelLine, ...labelLine })(theme),
+    [labelLine, styles.labelLine, theme]
+  );
+  const cellPropList = (0, import_react15.useMemo)(
+    () => data.map((props, index) => {
+      const { name, dimCell: dimCell2 = {}, ...computedProps } = props;
+      const color = `var(--ui-cell-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== name;
+      const resolvedProps = {
+        ...computedProps,
+        ...dimmed ? dimCell2 : {}
+      };
+      const className = getClassName(
+        {
+          cellClassName,
+          ...resolvedProps
+        },
+        dimmed ? dimCellClassName : void 0
+      )(theme);
+      return {
+        color,
+        className
+      };
+    }),
+    [
+      cellClassName,
+      data,
+      dimCellClassName,
+      highlightedArea,
+      shouldHighlight,
+      theme
+    ]
+  );
+  const getPieChartProps = (0, import_react15.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils18.cx)(className, chartClassName),
+      ...props,
+      ...chartProps
+    }),
+    [chartProps, chartClassName]
+  );
+  const getPieProps = (0, import_react15.useCallback)(
+    ({
+      className,
+      labelClassName: labelClassNameProp,
+      labelLineClassName: labelLineClassNameProp,
+      ...props
+    }, ref = null) => ({
+      ref,
+      className: (0, import_utils18.cx)(className, pieClassName),
+      dataKey: "value",
+      data,
+      rootTabIndex: -1,
+      outerRadius,
+      innerRadius,
+      paddingAngle,
+      startAngle,
+      endAngle,
+      isAnimationActive: false,
+      label: withLabels ? { className: (0, import_utils18.cx)(labelClassNameProp, labelClassName) } : false,
+      labelLine: withLabelLines ? { className: (0, import_utils18.cx)(labelLineClassNameProp, labelLineClassName) } : false,
+      activeShape: activeShapeProps,
+      inactiveShape: inactiveShapeProps,
+      ...props,
+      ...pieProps
+    }),
+    [
+      pieClassName,
+      data,
+      outerRadius,
+      innerRadius,
+      paddingAngle,
+      startAngle,
+      endAngle,
+      withLabels,
+      labelClassName,
+      withLabelLines,
+      labelLineClassName,
+      activeShapeProps,
+      inactiveShapeProps,
+      pieProps
+    ]
+  );
+  const getCellProps = (0, import_react15.useCallback)(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const { className, color } = cellPropList[index];
+      return {
+        ref,
+        className: (0, import_utils18.cx)(classNameProp, className),
+        fill: color,
+        stroke: color,
+        strokeWidth,
+        ...props
+      };
+    },
+    [cellPropList, strokeWidth]
+  );
+  return {
+    pieVars,
+    getPieProps,
+    getPieChartProps,
+    getCellProps,
+    setHighlightedArea
+  };
+};
+
+// src/donut-chart.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core18.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
+  } = (0, import_core18.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 = (0, import_react16.useMemo)(
+    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_recharts5.Cell,
+      {
+        ...getCellProps({ index, className: "ui-donut-chart__cell" })
+      },
+      `donut-cell-${name}`
+    )),
+    [data, getCellProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_core18.ui.div,
+    {
+      ref,
+      className: (0, import_utils19.cx)("ui-donut-chart", className),
+      var: pieVars,
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_recharts5.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-donut-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            import_recharts5.PieChart,
+            {
+              ...getPieChartProps({ className: "ui-donut-chart__chart" }),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.Pie,
+                  {
+                    ...getPieProps({
+                      className: "ui-donut-chart__donut",
+                      labelClassName: "ui-donut-chart__label",
+                      labelLineClassName: "ui-donut-chart__label-line"
+                    }),
+                    children: cells
+                  }
+                ),
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-donut-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_recharts5.Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-donut-chart__tooltip",
+                        label,
+                        payload: tooltipDataSource === "segment" ? payload : data,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+// src/pie-chart.tsx
+var import_core19 = require("@yamada-ui/core");
+var import_utils20 = require("@yamada-ui/utils");
+var import_react17 = require("react");
+var import_recharts6 = require("recharts");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PieChart = (0, import_core19.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core19.useMultiComponentStyle)("PieChart", props);
+  const {
+    className,
+    data,
+    pieProps,
+    chartProps,
+    cellProps,
+    containerProps,
+    withTooltip = true,
+    withLegend = false,
+    tooltipProps,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    valueFormatter,
+    unit,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    startAngle,
+    endAngle,
+    withLabels,
+    withLabelLines,
+    strokeWidth,
+    legendProps,
+    ...rest
+  } = (0, import_core19.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 = (0, import_react17.useMemo)(
+    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_recharts6.Cell,
+      {
+        ...getCellProps({ index, className: "ui-pie-chart__cell" })
+      },
+      `pie-cell-${name}`
+    )),
+    [data, getCellProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_core19.ui.div,
+    {
+      ref,
+      className: (0, import_utils20.cx)("ui-pie-chart", className),
+      var: pieVars,
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_recharts6.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-pie-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            import_recharts6.PieChart,
+            {
+              ...getPieChartProps({ className: "ui-pie-chart__chart" }),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  import_recharts6.Pie,
+                  {
+                    ...getPieProps({
+                      className: "ui-pie-chart__pie",
+                      labelClassName: "ui-pie-chart__label",
+                      labelLineClassName: "ui-pie-chart__label-line"
+                    }),
+                    children: cells
+                  }
+                ),
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  import_recharts6.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-pie-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  import_recharts6.Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-pie-chart__tooltip",
+                        label,
+                        payload: tooltipDataSource === "segment" ? payload : data,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AreaChart,
   BarChart,
+  DonutChart,
   LineChart,
+  PieChart,
   RadarChart
 });
 //# sourceMappingURL=index.js.map