@yamada-ui/charts 1.1.2-next-20240429233030 → 1.1.2

package/dist/donut-chart.js

@@ -1,702 +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/donut-chart.tsx
-var donut_chart_exports = {};
-__export(donut_chart_exports, {
-  DonutChart: () => DonutChart
-});
-module.exports = __toCommonJS(donut_chart_exports);
-var import_core7 = require("@yamada-ui/core");
-var import_utils8 = require("@yamada-ui/utils");
-var import_react5 = require("react");
-var import_recharts = require("recharts");
-
-// src/chart-legend.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-
-// src/use-chart.ts
-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 pieChartProperties = ["width", "height", "margin", "onClick", "onMouseEnter", "onMouseLeave"];
-var containerProperties = [
-  "aspect",
-  "width",
-  "height",
-  "minWidth",
-  "minHeight",
-  "debounce",
-  "onResize"
-];
-var legendProperties = [
-  "width",
-  "height",
-  "layout",
-  "align",
-  "verticalAlign",
-  "iconSize",
-  "iconType",
-  "payload",
-  "chartWidth",
-  "chartHeight",
-  "margin",
-  "content",
-  "formatter",
-  "wrapperStyle",
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseMove",
-  "onMouseOver",
-  "onMouseOut",
-  "onMouseEnter",
-  "onMouseLeave"
-];
-var tooltipProperties = [
-  "offset",
-  "filterNull",
-  "itemStyle",
-  "wrapperStyle",
-  "contentStyle",
-  "labelStyle",
-  "cursor",
-  "viewBox",
-  "allowEscapeViewBox",
-  "active",
-  "position",
-  "coordinate",
-  "payload",
-  "label",
-  "content",
-  "formatter",
-  "labelFormatter",
-  "itemSorter",
-  "isAnimationActive",
-  "animationDuration",
-  "animationEasing"
-];
-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"
-];
-
-// src/use-chart.ts
-var [ChartProvider, useChartContext] = (0, import_utils2.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 } = (0, import_core2.useTheme)();
-  const [reChartsProps, propClassName] = getComponentProps([
-    containerProps,
-    containerProperties
-  ])(theme);
-  const getContainerProps = (0, import_react.useCallback)(
-    ({ className, ...props } = {}, ref = null) => ({
-      ref,
-      className: (0, import_utils2.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
-  };
-};
-
-// src/chart-legend.tsx
-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, 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,
-      {
-        ref,
-        className: (0, import_utils3.cx)("ui-chart__legend", className),
-        __css: styles.legend,
-        ...rest,
-        children: items
-      }
-    );
-  }
-);
-
-// src/chart-tooltip.tsx
-var import_core4 = require("@yamada-ui/core");
-var import_utils4 = require("@yamada-ui/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChartTooltip = (0, import_core4.forwardRef)(
-  ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {
-    const { styles } = useTooltip();
-    const items = payload.map(
-      ({ 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) => {
-            var _a2;
-            return `${(_a2 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a2 : value2}`;
-          }).join(" - ");
-        } else {
-          value = (_a = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a : valueProp;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_core4.ui.div,
-          {
-            className: "ui-chart__tooltip-item",
-            __css: styles.tooltipItem,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_core4.ui.div,
-                {
-                  className: "ui-chart__tooltip-swatch",
-                  background: color,
-                  __css: styles.tooltipSwatch
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_core4.ui.span,
-                {
-                  className: "ui-chart__tooltip-label",
-                  __css: styles.tooltipLabel,
-                  children: name
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_core4.ui.span,
-                {
-                  className: "ui-chart__tooltip-value",
-                  __css: styles.tooltipValue,
-                  children: [
-                    value,
-                    unit ? unit : ""
-                  ]
-                }
-              )
-            ]
-          },
-          `tooltip-payload-${index}`
-        );
-      }
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_core4.ui.div,
-      {
-        ref,
-        className: (0, import_utils4.cx)("ui-chart__tooltip", className),
-        __css: styles.tooltip,
-        ...rest,
-        children: [
-          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 })
-        ]
-      }
-    );
-  }
-);
-
-// src/use-chart-legend.ts
-var import_utils5 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-var useChartLegend = ({
-  legendProps: _legendProps = {}
-}) => {
-  const [rest, legendProps] = (0, import_utils5.splitObject)(
-    _legendProps,
-    legendProperties
-  );
-  const getLegendProps = (0, import_react2.useCallback)(
-    (props, ref = null) => {
-      return {
-        ref,
-        verticalAlign: "top",
-        ...props,
-        ...rest
-      };
-    },
-    [rest]
-  );
-  return { legendProps, getLegendProps };
-};
-
-// src/use-chart-tooltip.ts
-var import_core5 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-var import_react3 = require("react");
-var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
-  tooltipAnimationDuration = 0,
-  styles
-}) => {
-  const { theme } = (0, import_core5.useTheme)();
-  const { cursor, ...rest } = _tooltipProps;
-  const cursorClassName = (0, import_react3.useMemo)(
-    () => getClassName({ ...styles.cursor, ...cursor })(theme),
-    [cursor, styles.cursor, theme]
-  );
-  const [tooltipProps, tooltipUIProps] = (0, import_utils6.splitObject)(
-    rest,
-    tooltipProperties
-  );
-  const getTooltipProps = (0, import_react3.useCallback)(
-    (props, ref = null) => ({
-      ref,
-      animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
-      cursor: {
-        className: (0, import_utils6.cx)("ui-chart__cursor", cursorClassName)
-      },
-      ...props,
-      ...tooltipProps
-    }),
-    [cursorClassName, tooltipAnimationDuration, tooltipProps]
-  );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
-};
-
-// src/use-pie-chart.ts
-var import_core6 = require("@yamada-ui/core");
-var import_utils7 = require("@yamada-ui/utils");
-var import_react4 = 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_core6.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react4.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_react4.useMemo)(
-    () => data.map(({ color }, index) => ({
-      __prefix: "ui",
-      name: `cell-${index}`,
-      token: "colors",
-      value: color != null ? color : "transparent"
-    })),
-    [data]
-  );
-  const pieVars = (0, import_react4.useMemo)(
-    () => [
-      ...cellColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
-    ],
-    [fillOpacity, cellColors]
-  );
-  const [chartProps, chartClassName] = (0, import_react4.useMemo)(
-    () => {
-      var _a2;
-      return getComponentProps(
-        [(_a2 = rest.chartProps) != null ? _a2 : {}, pieChartProperties],
-        styles.chart
-      )(theme);
-    },
-    [rest.chartProps, styles.chart, theme]
-  );
-  const [pieProps, pieClassName] = (0, import_react4.useMemo)(
-    () => getComponentProps(
-      [computedPieProps, pieProperties],
-      styles.pie
-    )(theme),
-    [computedPieProps, styles.pie, theme]
-  );
-  const cellClassName = (0, import_react4.useMemo)(() => {
-    const resolvedCellProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
-      ...styles.cell,
-      ...computedCellProps
-    };
-    return getClassName(resolvedCellProps)(theme);
-  }, [computedCellProps, styles.cell, theme]);
-  const dimCellClassName = (0, import_react4.useMemo)(() => {
-    const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell };
-    return getClassName(resolvedDimCell)(theme);
-  }, [dimCell, theme]);
-  const activeShapeProps = (0, import_react4.useMemo)(
-    () => getComponentProps(
-      [{ _focus: { outline: "none" }, ...activeShape }, pieProperties],
-      styles.activeShape
-    )(theme, true),
-    [activeShape, styles.activeShape, theme]
-  );
-  const inactiveShapeProps = (0, import_react4.useMemo)(
-    () => getComponentProps(
-      [inactiveShape, pieProperties],
-      styles.inactiveShape
-    )(theme, true),
-    [inactiveShape, styles.inactiveShape, theme]
-  );
-  const labelClassName = (0, import_react4.useMemo)(
-    () => getClassName({ fillOpacity: 1, ...styles.label, ...label })(theme),
-    [label, styles.label, theme]
-  );
-  const labelLineClassName = (0, import_react4.useMemo)(
-    () => getClassName({ ...styles.labelLine, ...labelLine })(theme),
-    [labelLine, styles.labelLine, theme]
-  );
-  const cellPropList = (0, import_react4.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_react4.useCallback)(
-    ({ className, ...props } = {}, ref = null) => ({
-      ref,
-      className: (0, import_utils7.cx)(className, chartClassName),
-      ...props,
-      ...chartProps
-    }),
-    [chartProps, chartClassName]
-  );
-  const getPieProps = (0, import_react4.useCallback)(
-    ({
-      className,
-      labelClassName: labelClassNameProp,
-      labelLineClassName: labelLineClassNameProp,
-      ...props
-    }, ref = null) => ({
-      ref,
-      className: (0, import_utils7.cx)(className, pieClassName),
-      dataKey: "value",
-      data,
-      rootTabIndex: -1,
-      outerRadius,
-      innerRadius,
-      paddingAngle,
-      startAngle,
-      endAngle,
-      isAnimationActive: false,
-      label: withLabels ? { className: (0, import_utils7.cx)(labelClassNameProp, labelClassName) } : false,
-      labelLine: withLabelLines ? { className: (0, import_utils7.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_react4.useCallback)(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
-      const { className, color } = cellPropList[index];
-      return {
-        ref,
-        className: (0, import_utils7.cx)(classNameProp, className),
-        fill: color,
-        stroke: color,
-        strokeWidth,
-        ...props
-      };
-    },
-    [cellPropList, strokeWidth]
-  );
-  return {
-    pieVars,
-    getPieProps,
-    getPieChartProps,
-    getCellProps,
-    setHighlightedArea
-  };
-};
-
-// src/donut-chart.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var DonutChart = (0, import_core7.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core7.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_core7.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_react5.useMemo)(
-    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_recharts.Cell,
-      {
-        ...getCellProps({ index, className: "ui-donut-chart__cell" })
-      },
-      `donut-cell-${name}`
-    )),
-    [data, getCellProps]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_core7.ui.div,
-    {
-      ref,
-      className: (0, import_utils8.cx)("ui-donut-chart", className),
-      var: pieVars,
-      __css: { maxW: "full", ...styles.container },
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_recharts.ResponsiveContainer,
-        {
-          ...getContainerProps({ className: "ui-donut-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            import_recharts.PieChart,
-            {
-              ...getPieChartProps({ className: "ui-donut-chart__chart" }),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.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_runtime3.jsx)(
-                  import_recharts.Legend,
-                  {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      ChartLegend,
-                      {
-                        className: "ui-donut-chart__legend",
-                        payload,
-                        onHighlight: setHighlightedArea,
-                        ...computedLegendProps
-                      }
-                    ),
-                    ...getLegendProps()
-                  }
-                ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.Tooltip,
-                  {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      ChartTooltip,
-                      {
-                        className: "ui-donut-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 = {
-  DonutChart
-});
-//# sourceMappingURL=donut-chart.js.map