@yamada-ui/charts 2.0.0-next-20240820160301 → 2.0.0-next-20240908154823

package/dist/radial-chart.js

@@ -0,0 +1,767 @@
+"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/radial-chart.tsx
+var radial_chart_exports = {};
+__export(radial_chart_exports, {
+  RadialChart: () => RadialChart
+});
+module.exports = __toCommonJS(radial_chart_exports);
+var import_core9 = require("@yamada-ui/core");
+var import_utils10 = require("@yamada-ui/utils");
+var import_react7 = 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 radialChartProperties = [
+  "width",
+  "height",
+  "data",
+  "margin",
+  "barCategoryGap",
+  "barGap",
+  "cx",
+  "cy",
+  "startAngle",
+  "endAngle",
+  "innerRadius",
+  "outerRadius",
+  "barSize",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onClick"
+];
+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 radialBarProperties = [
+  "legendType",
+  "label",
+  "background",
+  "data",
+  "dataKey",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave",
+  "cornerRadius"
+];
+var polarGridProperties = [
+  "cx",
+  "cy",
+  "innerRadius",
+  "outerRadius",
+  "polarAngles",
+  "polarRadius",
+  "gridType",
+  "radialLines"
+];
+var labelListProperties = [
+  "dataKey",
+  "valueAccessor",
+  "content",
+  "position",
+  "offset",
+  "formatter",
+  "data",
+  "clockWise",
+  "id",
+  "position"
+];
+
+// 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,
+    dataKey = "value",
+    className,
+    payload = [],
+    valueFormatter,
+    labelFormatter,
+    unit,
+    isRadialChart,
+    ...rest
+  }, ref) => {
+    var _a;
+    const { styles } = useTooltip();
+    const items = payload.map(
+      ({
+        color: colorProp,
+        name: nameProp,
+        [dataKey]: valueProp,
+        payload: payload2
+      } = {}, index) => {
+        var _a2;
+        const name = isRadialChart ? payload2 == null ? void 0 : payload2.name : nameProp;
+        const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
+        let value;
+        if ((0, import_utils4.isArray)(valueProp)) {
+          value = valueProp.map((value2) => {
+            var _a3;
+            return `${(_a3 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a3 : value2}`;
+          }).join(" - ");
+        } else {
+          value = (_a2 = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a2 : 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: (_a = labelFormatter == null ? void 0 : labelFormatter(label)) != null ? _a : 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-label-list.ts
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var useChartLabelList = ({
+  labelListProps = [],
+  styles
+}) => {
+  const { theme } = (0, import_core5.useTheme)();
+  const styleClassName = (0, import_core5.getCSS)(styles.labelList)(theme);
+  const propList = (0, import_react2.useMemo)(
+    () => labelListProps.map(
+      (props) => getComponentProps(
+        [props, labelListProperties],
+        styleClassName
+      )(theme, true)
+    ),
+    [labelListProps, styleClassName, theme]
+  );
+  const getLabelLineProps = (0, import_react2.useCallback)(
+    ({ index, className, ...props }, ref = null) => {
+      const { className: propClassName, ...rest } = propList[index];
+      return {
+        ref,
+        className: (0, import_utils5.cx)(className, propClassName),
+        ...props,
+        ...rest
+      };
+    },
+    [propList]
+  );
+  return { getLabelLineProps };
+};
+
+// src/use-chart-legend.ts
+var import_utils6 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var useChartLegend = ({
+  legendProps: _legendProps = {}
+}) => {
+  const [rest, legendProps] = (0, import_utils6.splitObject)(
+    _legendProps,
+    legendProperties
+  );
+  const getLegendProps = (0, import_react3.useCallback)(
+    (props, ref = null) => {
+      return {
+        ref,
+        verticalAlign: "top",
+        ...props,
+        ...rest
+      };
+    },
+    [rest]
+  );
+  return { legendProps, getLegendProps };
+};
+
+// src/use-chart-tooltip.ts
+var import_core6 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+var useChartTooltip = ({
+  tooltipProps: _tooltipProps = {},
+  tooltipAnimationDuration = 0,
+  styles
+}) => {
+  const { theme } = (0, import_core6.useTheme)();
+  const { cursor, ...rest } = _tooltipProps;
+  const cursorClassName = (0, import_react4.useMemo)(
+    () => getClassName({ ...styles.cursor, ...cursor })(theme),
+    [cursor, styles.cursor, theme]
+  );
+  const [tooltipProps, tooltipUIProps] = (0, import_utils7.splitObject)(
+    rest,
+    tooltipProperties
+  );
+  const getTooltipProps = (0, import_react4.useCallback)(
+    (props, ref = null) => ({
+      ref,
+      animationDuration: tooltipAnimationDuration,
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
+      cursor: {
+        className: (0, import_utils7.cx)("ui-chart__cursor", cursorClassName)
+      },
+      ...props,
+      ...tooltipProps
+    }),
+    [cursorClassName, tooltipAnimationDuration, tooltipProps]
+  );
+  return { tooltipProps: tooltipUIProps, getTooltipProps };
+};
+
+// src/use-polar-grid.tsx
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+var usePolarGrid = ({
+  strokeDasharray,
+  styles,
+  ...rest
+}) => {
+  const { theme } = (0, import_core7.useTheme)();
+  const [polarGridProps, polarGridClassName] = (0, import_react5.useMemo)(
+    () => {
+      var _a;
+      return getComponentProps(
+        [(_a = rest.polarGridProps) != null ? _a : {}, polarGridProperties],
+        styles.polarGrid
+      )(theme);
+    },
+    [rest.polarGridProps, styles.polarGrid, theme]
+  );
+  const getPolarGridProps = (0, import_react5.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils8.cx)(className, polarGridClassName),
+      strokeDasharray,
+      ...props,
+      ...polarGridProps
+    }),
+    [polarGridClassName, polarGridProps, strokeDasharray]
+  );
+  return { getPolarGridProps };
+};
+
+// src/use-radial-chart.ts
+var import_core8 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react6 = require("react");
+var useRadialChart = ({
+  data: dataProp,
+  dataKey = "value",
+  innerRadius = "10%",
+  outerRadius = "80%",
+  startAngle = 90,
+  endAngle = -180,
+  fillOpacity = 1,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const { theme } = (0, import_core8.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react6.useState)(null);
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    background: backgroundProps = {},
+    dimRadialBar: dimRadialBarProps = {},
+    ...computedRadialBarProps
+  } = (_a = rest.radialBarProps) != null ? _a : {};
+  const radialVars = (0, import_react6.useMemo)(
+    () => dataProp.map(({ color }, index) => ({
+      name: `radial-bar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [dataProp]
+  );
+  const dimRadialBarClassName = (0, import_react6.useMemo)(() => {
+    const resolvedDimRadialBar = {
+      fillOpacity: 0.3,
+      strokeOpacity: 0,
+      ...dimRadialBarProps
+    };
+    return getClassName(resolvedDimRadialBar)(theme);
+  }, [dimRadialBarProps, theme]);
+  const [chartProps, chartClassName] = (0, import_react6.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.chartProps) != null ? _a2 : {}, radialChartProperties],
+        styles.chart
+      )(theme);
+    },
+    [rest.chartProps, styles.chart, theme]
+  );
+  const background = (0, import_react6.useMemo)(
+    () => getComponentProps(
+      [backgroundProps, radialBarProperties],
+      styles.background
+    )(theme, true),
+    [backgroundProps, styles.background, theme]
+  );
+  const [radialBarProps, radialBarClassName] = (0, import_react6.useMemo)(
+    () => getComponentProps(
+      [computedRadialBarProps != null ? computedRadialBarProps : {}, radialBarProperties],
+      styles.radialBar
+    )(theme),
+    [computedRadialBarProps, styles.radialBar, theme]
+  );
+  const data = (0, import_react6.useMemo)(
+    () => dataProp.map((props, index) => {
+      const {
+        name,
+        value,
+        color,
+        dimRadialBar = {},
+        ...computedProps
+      } = props;
+      const dimmed = shouldHighlight && highlightedArea !== name;
+      const resolvedProps = {
+        ...computedProps,
+        ...dimmed ? dimRadialBar : { fillOpacity }
+      };
+      const className = getClassName(
+        resolvedProps,
+        dimmed ? dimRadialBarClassName : void 0
+      )(theme);
+      return {
+        className,
+        fill: (0, import_core8.getVar)(`radial-bar-${index}`)(theme),
+        name,
+        value,
+        color
+      };
+    }),
+    [
+      dataProp,
+      dimRadialBarClassName,
+      fillOpacity,
+      highlightedArea,
+      shouldHighlight,
+      theme
+    ]
+  );
+  const getRadialChartProps = (0, import_react6.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils9.cx)(className, chartClassName),
+      data,
+      innerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      ...props,
+      ...chartProps
+    }),
+    [
+      chartClassName,
+      chartProps,
+      data,
+      endAngle,
+      innerRadius,
+      outerRadius,
+      startAngle
+    ]
+  );
+  const getRadialBarProps = (0, import_react6.useCallback)(
+    ({ className, ...props }, ref = null) => ({
+      ref,
+      className: (0, import_utils9.cx)(className, radialBarClassName),
+      dataKey,
+      isAnimationActive: false,
+      background,
+      ...props,
+      ...radialBarProps
+    }),
+    [background, dataKey, radialBarClassName, radialBarProps]
+  );
+  return {
+    radialVars,
+    setHighlightedArea,
+    getRadialChartProps,
+    getRadialBarProps
+  };
+};
+
+// src/radial-chart.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RadialChart = (0, import_core9.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)("RadialChart", props);
+  const {
+    className,
+    data,
+    dataKey,
+    chartProps,
+    radialBarProps,
+    containerProps,
+    withPolarGrid = false,
+    withTooltip = true,
+    withLegend = false,
+    tooltipProps,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    valueFormatter,
+    unit,
+    legendProps,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fillOpacity,
+    labelListProps = [],
+    polarGridProps,
+    strokeDasharray,
+    ...rest
+  } = (0, import_core9.omitThemeProps)(mergedProps);
+  const {
+    getRadialChartProps,
+    getRadialBarProps,
+    radialVars,
+    setHighlightedArea
+  } = useRadialChart({
+    data,
+    dataKey,
+    styles,
+    chartProps,
+    radialBarProps,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fillOpacity
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const { getLabelLineProps } = useChartLabelList({ labelListProps, styles });
+  const { getPolarGridProps } = usePolarGrid({
+    polarGridProps,
+    strokeDasharray,
+    styles
+  });
+  const labelLists = (0, import_react7.useMemo)(
+    () => labelListProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_recharts.LabelList,
+      {
+        ...getLabelLineProps({
+          index,
+          className: "ui-radial-chart__label-list"
+        })
+      },
+      `labelList-${index}`
+    )),
+    [getLabelLineProps, labelListProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core9.ui.div,
+    {
+      ref,
+      className: (0, import_utils10.cx)("ui-radial-chart", className),
+      __css: { maxW: "full", vars: radialVars, ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_recharts.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-radial-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_recharts.RadialBarChart,
+            {
+              ...getRadialChartProps({
+                className: "ui-radial-chart__chart"
+              }),
+              children: [
+                withPolarGrid ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.PolarGrid,
+                  {
+                    ...getPolarGridProps({
+                      className: "ui-radial-chart__polar-grid"
+                    })
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.RadialBar,
+                  {
+                    ...getRadialBarProps({
+                      className: "ui-radial-chart__radial-bar"
+                    }),
+                    children: labelLists
+                  }
+                ),
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-radial-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.Tooltip,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-radial-chart__tooltip",
+                        isRadialChart: tooltipDataSource === "segment" ? true : false,
+                        payload: tooltipDataSource === "segment" ? payload : data,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RadialChart
+});
+//# sourceMappingURL=radial-chart.js.map