@yamada-ui/charts 1.0.0

package/dist/use-radar-chart.d.mts

@@ -0,0 +1,93 @@
+import * as react from 'react';
+import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { CSSUIObject } from '@yamada-ui/core';
+import * as _yamada_ui_utils from '@yamada-ui/utils';
+import { Dict } from '@yamada-ui/utils';
+import * as Recharts from 'recharts';
+import { RadarProps, RadarChartProps, PolarGridProps, PolarAngleAxisProps, PolarRadiusAxisProps, ChartPropGetter, RequiredChartPropGetter } from './chart.types.mjs';
+
+type UseRadarChartOptions = {
+    /**
+     * Chart data.
+     */
+    data: Dict[];
+    /**
+     * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.
+     */
+    series: RadarProps[];
+    /**
+     * The key of a group of data which should be unique in an chart.
+     */
+    dataKey: string;
+    /**
+     * Props for the radar.
+     */
+    radarProps?: Partial<RadarProps>;
+    /**
+     * Props passed down to recharts `RadarChart` component.
+     */
+    radarChartProps?: RadarChartProps;
+    /**
+     * Props passed down to recharts `PolarGrid` component.
+     */
+    polarGridProps?: PolarGridProps;
+    /**
+     * Props passed down to recharts `PolarAngleAxis` component.
+     */
+    polarAngleAxisProps?: PolarAngleAxisProps;
+    /**
+     * Props passed down to recharts `PolarRadiusAxis` component.
+     */
+    polarRadiusAxisProps?: PolarRadiusAxisProps;
+    /**
+     * Determines whether dots should be displayed.
+     *
+     * @default false
+     */
+    withDots?: boolean;
+    /**
+     * Determines whether activeDots should be displayed.
+     *
+     * @default true
+     */
+    withActiveDots?: boolean;
+    /**
+     * Stroke width for the chart radars.
+     *
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Controls fill opacity of all radars.
+     *
+     * @default 1
+     */
+    fillOpacity?: number | [number, number];
+    /**
+     * A function to format values on Y axis and inside the tooltip.
+     */
+    valueFormatter?: (value: number) => string;
+};
+type UseRadarChartProps = UseRadarChartOptions & {
+    styles: Dict<CSSUIObject>;
+};
+declare const useRadarChart: ({ data, series, dataKey, withDots, withActiveDots, strokeWidth, fillOpacity, valueFormatter, styles, ...rest }: UseRadarChartProps) => {
+    radarVars: {
+        __prefix?: string | undefined;
+        name: string;
+        token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
+        value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
+    }[];
+    getRadarChartProps: ChartPropGetter<"div", recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
+    getRadarProps: RequiredChartPropGetter<"div", {
+        index: number;
+    }, Omit<Recharts.RadarProps, "ref">>;
+    getPolarGridProps: ChartPropGetter<"div", Recharts.PolarGridProps, Recharts.PolarGridProps>;
+    getPolarAngleAxisProps: ChartPropGetter<"div", Recharts.PolarAngleAxisProps, Omit<Recharts.PolarAngleAxisProps, "ref">>;
+    getPolarRadiusAxisProps: ChartPropGetter<"div", Recharts.PolarRadiusAxisProps, Omit<Recharts.PolarRadiusAxisProps, "ref">>;
+    setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
+};
+type UseRadarChartReturn = ReturnType<typeof useRadarChart>;
+
+export { type UseRadarChartOptions, type UseRadarChartReturn, useRadarChart };

package/dist/use-radar-chart.d.ts

@@ -0,0 +1,93 @@
+import * as react from 'react';
+import * as recharts_types_chart_generateCategoricalChart from 'recharts/types/chart/generateCategoricalChart';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { CSSUIObject } from '@yamada-ui/core';
+import * as _yamada_ui_utils from '@yamada-ui/utils';
+import { Dict } from '@yamada-ui/utils';
+import * as Recharts from 'recharts';
+import { RadarProps, RadarChartProps, PolarGridProps, PolarAngleAxisProps, PolarRadiusAxisProps, ChartPropGetter, RequiredChartPropGetter } from './chart.types.js';
+
+type UseRadarChartOptions = {
+    /**
+     * Chart data.
+     */
+    data: Dict[];
+    /**
+     * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.
+     */
+    series: RadarProps[];
+    /**
+     * The key of a group of data which should be unique in an chart.
+     */
+    dataKey: string;
+    /**
+     * Props for the radar.
+     */
+    radarProps?: Partial<RadarProps>;
+    /**
+     * Props passed down to recharts `RadarChart` component.
+     */
+    radarChartProps?: RadarChartProps;
+    /**
+     * Props passed down to recharts `PolarGrid` component.
+     */
+    polarGridProps?: PolarGridProps;
+    /**
+     * Props passed down to recharts `PolarAngleAxis` component.
+     */
+    polarAngleAxisProps?: PolarAngleAxisProps;
+    /**
+     * Props passed down to recharts `PolarRadiusAxis` component.
+     */
+    polarRadiusAxisProps?: PolarRadiusAxisProps;
+    /**
+     * Determines whether dots should be displayed.
+     *
+     * @default false
+     */
+    withDots?: boolean;
+    /**
+     * Determines whether activeDots should be displayed.
+     *
+     * @default true
+     */
+    withActiveDots?: boolean;
+    /**
+     * Stroke width for the chart radars.
+     *
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Controls fill opacity of all radars.
+     *
+     * @default 1
+     */
+    fillOpacity?: number | [number, number];
+    /**
+     * A function to format values on Y axis and inside the tooltip.
+     */
+    valueFormatter?: (value: number) => string;
+};
+type UseRadarChartProps = UseRadarChartOptions & {
+    styles: Dict<CSSUIObject>;
+};
+declare const useRadarChart: ({ data, series, dataKey, withDots, withActiveDots, strokeWidth, fillOpacity, valueFormatter, styles, ...rest }: UseRadarChartProps) => {
+    radarVars: {
+        __prefix?: string | undefined;
+        name: string;
+        token?: "colors" | "transitionDuration" | "transitionProperty" | "animations" | "blurs" | "borders" | "breakpoints" | "fonts" | "fontSizes" | "fontWeights" | "gradients" | "layerStyles" | "letterSpacings" | "lineHeights" | "radii" | "shadows" | "sizes" | "spaces" | "textStyles" | "transitionEasing" | "zIndices" | undefined;
+        value?: (number | _yamada_ui_utils.StringLiteral | _yamada_ui_core.ResponsiveObject<number | _yamada_ui_utils.StringLiteral> | _yamada_ui_core.ColorModeArray<number | _yamada_ui_utils.StringLiteral>) | undefined;
+    }[];
+    getRadarChartProps: ChartPropGetter<"div", recharts_types_chart_generateCategoricalChart.CategoricalChartProps, recharts_types_chart_generateCategoricalChart.CategoricalChartProps>;
+    getRadarProps: RequiredChartPropGetter<"div", {
+        index: number;
+    }, Omit<Recharts.RadarProps, "ref">>;
+    getPolarGridProps: ChartPropGetter<"div", Recharts.PolarGridProps, Recharts.PolarGridProps>;
+    getPolarAngleAxisProps: ChartPropGetter<"div", Recharts.PolarAngleAxisProps, Omit<Recharts.PolarAngleAxisProps, "ref">>;
+    getPolarRadiusAxisProps: ChartPropGetter<"div", Recharts.PolarRadiusAxisProps, Omit<Recharts.PolarRadiusAxisProps, "ref">>;
+    setHighlightedArea: react.Dispatch<react.SetStateAction<string | null>>;
+};
+type UseRadarChartReturn = ReturnType<typeof useRadarChart>;
+
+export { type UseRadarChartOptions, type UseRadarChartReturn, useRadarChart };

package/dist/use-radar-chart.js

@@ -0,0 +1,471 @@
+"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/use-radar-chart.ts
+var use_radar_chart_exports = {};
+__export(use_radar_chart_exports, {
+  useRadarChart: () => useRadarChart
+});
+module.exports = __toCommonJS(use_radar_chart_exports);
+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 radarChartProperties = [
+  "width",
+  "height",
+  "data",
+  "cx",
+  "cy",
+  "startAngle",
+  "endAngle",
+  "innerRadius",
+  "outerRadius",
+  "margin",
+  "onMouseEnter",
+  "onClick"
+];
+var radarProperties = [
+  "dataKey",
+  "points",
+  "shape",
+  "dot",
+  "activeDot",
+  "legendType",
+  "label",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "onAnimationStart",
+  "onAnimationEnd"
+];
+var dotProperties = [
+  "cx",
+  "cy",
+  "r",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+var polarGridProperties = [
+  "cx",
+  "cy",
+  "innerRadius",
+  "outerRadius",
+  "polarAngles",
+  "polarRadius",
+  "gridType"
+];
+var polarAngleAxisProperties = [
+  "dataKey",
+  "cx",
+  "cy",
+  "radius",
+  "axisLine",
+  "axisLineType",
+  "tickLine",
+  "tickSize",
+  "tick",
+  "ticks",
+  "orient",
+  "tickFormatter",
+  "type",
+  "allowDuplicatedCategory",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+var polarRadiusAxisProperties = [
+  "angle",
+  "type",
+  "allowDuplicatedCategory",
+  "cx",
+  "cy",
+  "domain",
+  "reversed",
+  "label",
+  "orientation",
+  "axisLine",
+  "tick",
+  "tickSize",
+  "tickFormatter",
+  "tickCount",
+  "scale",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+
+// src/use-radar-chart.ts
+var useRadarChart = ({
+  data,
+  series,
+  dataKey,
+  withDots = false,
+  withActiveDots = false,
+  strokeWidth = 2,
+  fillOpacity = 0.4,
+  valueFormatter,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const { theme } = (0, import_core2.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react.useState)(null);
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    dot = {},
+    activeDot = {},
+    dimDot,
+    dimRadar,
+    ...computedRadarProps
+  } = (_a = rest.radarProps) != null ? _a : {};
+  const radarColors = (0, import_react.useMemo)(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `radar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const radarVars = (0, import_react.useMemo)(
+    () => [
+      ...radarColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ],
+    [fillOpacity, radarColors]
+  );
+  const [polarAngleAxisProps, polarAngleAxisStyles] = (0, import_react.useMemo)(
+    () => {
+      var _a2;
+      return (0, import_utils2.splitObject)(
+        (_a2 = rest.polarAngleAxisProps) != null ? _a2 : {},
+        polarAngleAxisProperties
+      );
+    },
+    [rest.polarAngleAxisProps]
+  );
+  const [polarRadiusAxisProps, polarRadiusAxisStyles] = (0, import_react.useMemo)(
+    () => {
+      var _a2;
+      return (0, import_utils2.splitObject)(
+        (_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {},
+        polarRadiusAxisProperties
+      );
+    },
+    [rest.polarRadiusAxisProps]
+  );
+  const [radarChartProps, radarChartClassName] = (0, import_react.useMemo)(() => {
+    const resolvedRadarChartProps = {
+      "& .recharts-polar-grid-concentric-polygon": { ...styles.polarGrid },
+      "& .recharts-polar-grid-concentric-circle": { ...styles.polarGrid },
+      "& .recharts-polar-angle-axis": {
+        ...styles.polarAngleAxis,
+        ...polarAngleAxisStyles
+      },
+      "& .recharts-polar-angle-axis-tick": { ...styles.polarAngleAxisTick },
+      "& .recharts-polar-radius-axis": {
+        ...styles.polarRadiusAxis,
+        ...polarRadiusAxisStyles
+      },
+      "& .recharts-polar-radius-axis-tick": { ...styles.polarRadiusAxisTick },
+      ...rest.radarChartProps
+    };
+    return getComponentProps(
+      [resolvedRadarChartProps, radarChartProperties],
+      styles.chart
+    )(theme);
+  }, [
+    polarAngleAxisStyles,
+    polarRadiusAxisStyles,
+    rest.radarChartProps,
+    styles.chart,
+    styles.polarAngleAxis,
+    styles.polarAngleAxisTick,
+    styles.polarGrid,
+    styles.polarRadiusAxis,
+    styles.polarRadiusAxisTick,
+    theme
+  ]);
+  const [polarGridProps, polarGridClassName] = (0, import_react.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.polarGridProps) != null ? _a2 : {}, polarGridProperties],
+        styles.polarGrid
+      )(theme);
+    },
+    [rest.polarGridProps, styles.polarGrid, theme]
+  );
+  const [radarProps, radarClassName] = (0, import_react.useMemo)(() => {
+    const resolvedRadarProps = {
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...computedRadarProps
+    };
+    return getComponentProps(
+      [resolvedRadarProps, radarProperties],
+      styles.radar
+    )(theme);
+  }, [computedRadarProps, styles.radar, theme]);
+  const [dimRadarProps, dimRadarClassName] = (0, import_react.useMemo)(() => {
+    const resolvedDimRadar = {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.3,
+      ...dimRadar
+    };
+    return getComponentProps([resolvedDimRadar, radarProperties])(
+      theme
+    );
+  }, [dimRadar, theme]);
+  const [dotProps, dotClassName] = (0, import_react.useMemo)(() => {
+    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
+    return getComponentProps(
+      [resolvedDot, dotProperties],
+      styles.dot
+    )(theme);
+  }, [dot, styles.dot, theme]);
+  const [activeDotProps, activeDotClassName] = (0, import_react.useMemo)(
+    () => getComponentProps(
+      [activeDot, dotProperties],
+      styles.activeDot
+    )(theme),
+    [activeDot, styles.activeDot, theme]
+  );
+  const [dimDotProps, dimDotClassName] = (0, import_react.useMemo)(() => {
+    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
+    return getComponentProps([resolvedDimDot, dotProperties])(
+      theme
+    );
+  }, [dimDot, theme]);
+  const radarPropList = (0, import_react.useMemo)(
+    () => series.map((props, index) => {
+      const {
+        dataKey: dataKey2,
+        dot: dot2 = {},
+        activeDot: activeDot2 = {},
+        dimDot: dimDot2 = {},
+        dimRadar: dimRadar2 = {},
+        ...computedProps
+      } = props;
+      const color = `var(--ui-radar-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== dataKey2;
+      const computedDimRadar = { ...dimRadarProps, ...dimRadar2 };
+      const resolvedProps = {
+        ...radarProps,
+        ...computedProps,
+        ...dimmed ? computedDimRadar : {}
+      };
+      const rest2 = getComponentProps(
+        [resolvedProps, radarProperties],
+        radarClassName,
+        dimmed ? dimRadarClassName : void 0
+      )(theme, true);
+      let resolvedActiveDot;
+      if (withActiveDots) {
+        const computedActiveDot = {
+          ...activeDotProps,
+          ...activeDot2
+        };
+        const [rest3, className] = getComponentProps(
+          [computedActiveDot, dotProperties],
+          activeDotClassName
+        )(theme);
+        resolvedActiveDot = {
+          className: (0, import_utils2.cx)("ui-radar-chart__active-dot", className),
+          fill: color,
+          stroke: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedActiveDot = false;
+      }
+      let resolvedDot;
+      if (withDots) {
+        const computedDimDot = { ...dimDotProps, ...dimDot2 };
+        const computedDot = {
+          ...dotProps,
+          ...dot2,
+          ...dimmed ? computedDimDot : {}
+        };
+        const [rest3, className] = getComponentProps(
+          [computedDot, dotProperties],
+          dotClassName,
+          dimmed ? dimDotClassName : void 0
+        )(theme);
+        resolvedDot = {
+          // BUG: className is not applied.
+          className: (0, import_utils2.cx)("ui-radar-chart__dot", className),
+          fill: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedDot = false;
+      }
+      return {
+        ...rest2,
+        color,
+        dataKey: dataKey2,
+        dot: resolvedDot,
+        activeDot: resolvedActiveDot
+      };
+    }),
+    [
+      activeDotClassName,
+      activeDotProps,
+      dimDotClassName,
+      dimDotProps,
+      dimRadarClassName,
+      dimRadarProps,
+      dotClassName,
+      dotProps,
+      highlightedArea,
+      radarClassName,
+      radarProps,
+      series,
+      shouldHighlight,
+      theme,
+      withActiveDots,
+      withDots
+    ]
+  );
+  const getRadarChartProps = (0, import_react.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils2.cx)(className, radarChartClassName),
+      data,
+      ...props,
+      ...radarChartProps
+    }),
+    [data, radarChartClassName, radarChartProps]
+  );
+  const getRadarProps = (0, import_react.useCallback)(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const { color, className, dataKey: dataKey2, activeDot: activeDot2, dot: dot2, ...rest2 } = radarPropList[index];
+      return {
+        ref,
+        className: (0, import_utils2.cx)(classNameProp, className),
+        activeDot: activeDot2,
+        dot: dot2,
+        name: dataKey2,
+        dataKey: dataKey2,
+        fill: color,
+        strokeWidth,
+        stroke: color,
+        isAnimationActive: false,
+        ...props,
+        ...rest2
+      };
+    },
+    [radarPropList, strokeWidth]
+  );
+  const getPolarGridProps = (0, import_react.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      // BUG: `.recharts-polar-grid-concentric-xxx` is not applied className.
+      className: (0, import_utils2.cx)(className, polarGridClassName),
+      ...props,
+      ...polarGridProps
+    }),
+    [polarGridClassName, polarGridProps]
+  );
+  const getPolarAngleAxisProps = (0, import_react.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      // BUG: className is not applied.
+      // className: cx(className, polarAngleAxisClassName),
+      className,
+      dataKey,
+      tickFormatter: valueFormatter,
+      tickSize: 16,
+      ...props,
+      ...polarAngleAxisProps
+    }),
+    [
+      dataKey,
+      // polarAngleAxisClassName,
+      polarAngleAxisProps,
+      valueFormatter
+    ]
+  );
+  const getPolarRadiusAxisProps = (0, import_react.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      // BUG: className is not applied.
+      // className: cx(className, polarRadiusAxisClassName),
+      className,
+      tickFormatter: valueFormatter,
+      ...props,
+      ...polarRadiusAxisProps
+    }),
+    [
+      // polarRadiusAxisClassName,
+      polarRadiusAxisProps,
+      valueFormatter
+    ]
+  );
+  return {
+    radarVars,
+    getRadarChartProps,
+    getRadarProps,
+    getPolarGridProps,
+    getPolarAngleAxisProps,
+    getPolarRadiusAxisProps,
+    setHighlightedArea
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useRadarChart
+});
+//# sourceMappingURL=use-radar-chart.js.map