@yamada-ui/charts 1.5.4-dev-20241005224505 → 1.5.4-dev-20241006000212

package/dist/chunk-EZG52466.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-radar-chart.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  PropGetter,\n  RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type {\n  PolarAngleAxisProps,\n  PolarRadiusAxisProps,\n  RadarChartProps,\n  RadarProps,\n} from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport {\n  dotProperties,\n  polarAngleAxisProperties,\n  polarRadiusAxisProperties,\n  radarChartProperties,\n  radarProperties,\n} from \"./rechart-properties\"\n\nexport interface UseRadarChartOptions {\n  /**\n   * Chart data.\n   */\n  data: Dict[]\n  /**\n   * The key of a group of data which should be unique in an chart.\n   */\n  dataKey: string\n  /**\n   * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.\n   */\n  series: RadarProps[]\n  /**\n   * Controls fill opacity of all radars.\n   *\n   * @default 1\n   */\n  fillOpacity?: [number, number] | number\n  /**\n   * A function to format Y axis tick.\n   */\n  polarAngleAxisTickFormatter?: (value: number) => string\n  /**\n   * A function to format X axis tick.\n   */\n  polarRadiusAxisTickFormatter?: (value: number) => string\n  /**\n   * Stroke width for the chart radars.\n   *\n   * @default 2\n   */\n  strokeWidth?: number\n  /**\n   * Determines whether activeDots should be displayed.\n   *\n   * @default true\n   */\n  withActiveDots?: boolean\n  /**\n   * Determines whether dots should be displayed.\n   *\n   * @default false\n   */\n  withDots?: boolean\n  /**\n   * Props passed down to recharts `RadarChart` component.\n   */\n  chartProps?: RadarChartProps\n  /**\n   * Props passed down to recharts `PolarAngleAxis` component.\n   */\n  polarAngleAxisProps?: PolarAngleAxisProps\n  /**\n   * Props passed down to recharts `tick` of `PolarAngleAxis` component.\n   */\n  polarAngleAxisTickProps?: CSSUIProps\n  /**\n   * Props passed down to recharts `PolarRadiusAxis` component.\n   */\n  polarRadiusAxisProps?: PolarRadiusAxisProps\n  /**\n   * Props passed down to recharts `tick` of `PolarRadiusAxis` component.\n   */\n  polarRadiusAxisTickProps?: CSSUIProps\n  /**\n   * Props for the radar.\n   */\n  radarProps?: Partial<RadarProps>\n}\n\ninterface UseRadarChartProps extends UseRadarChartOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useRadarChart = ({\n  data,\n  dataKey,\n  fillOpacity = 0.4,\n  polarAngleAxisTickFormatter,\n  polarRadiusAxisTickFormatter,\n  series,\n  strokeWidth = 2,\n  styles,\n  withActiveDots = false,\n  withDots = false,\n  ...rest\n}: UseRadarChartProps) => {\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n  const shouldHighlight = highlightedArea !== null\n  const {\n    activeDot = {},\n    dimDot,\n    dimRadar,\n    dot = {},\n    ...computedRadarProps\n  } = rest.radarProps ?? {}\n\n  const radarColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      series.map(({ color }, index) => ({\n        name: `radar-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [series],\n  )\n\n  const radarVars: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      [\n        ...radarColors,\n        { name: \"fill-opacity\", value: fillOpacity },\n      ] as Required<CSSUIProps>[\"vars\"],\n    [fillOpacity, radarColors],\n  )\n\n  const [chartProps, radarChartClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.chartProps ?? {}, radarChartProperties],\n        styles.chart,\n      )(theme),\n    [rest.chartProps, styles.chart, theme],\n  )\n\n  const [polarAngleAxisProps, polarAngleAxisClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.polarAngleAxisProps ?? {}, polarAngleAxisProperties],\n        styles.polarAngleAxis,\n      )(theme),\n    [rest.polarAngleAxisProps, styles.polarAngleAxis, theme],\n  )\n\n  const polarAngleAxisTickClassName = useMemo(\n    () =>\n      getClassName({\n        ...styles.polarAngleAxisTick,\n        ...rest.polarAngleAxisTickProps,\n      })(theme),\n    [rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme],\n  )\n\n  const [polarRadiusAxisProps, polarRadiusAxisClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.polarRadiusAxisProps ?? {}, polarRadiusAxisProperties],\n        styles.polarRadiusAxis,\n      )(theme),\n    [rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme],\n  )\n\n  const polarRadiusAxisTickClassName = useMemo(\n    () =>\n      getClassName({\n        ...styles.polarRadiusAxisTick,\n        ...rest.polarRadiusAxisTickProps,\n      })(theme),\n    [rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme],\n  )\n\n  const [radarProps, radarClassName] = useMemo(() => {\n    const resolvedRadarProps = {\n      fillOpacity: \"$fill-opacity\",\n      ...computedRadarProps,\n    }\n\n    return getComponentProps<Dict, string>(\n      [resolvedRadarProps, radarProperties],\n      styles.radar,\n    )(theme)\n  }, [computedRadarProps, styles.radar, theme])\n\n  const [dimRadarProps, dimRadarClassName] = useMemo(() => {\n    const resolvedDimRadar = {\n      fillOpacity: 0.3,\n      strokeOpacity: 0.3,\n      ...dimRadar,\n    }\n\n    return getComponentProps<Dict, string>([resolvedDimRadar, radarProperties])(\n      theme,\n    )\n  }, [dimRadar, theme])\n\n  const [dotProps, dotClassName] = useMemo(() => {\n    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot }\n\n    return getComponentProps<Dict, string>(\n      [resolvedDot, dotProperties],\n      styles.dot,\n    )(theme)\n  }, [dot, styles.dot, theme])\n\n  const [activeDotProps, activeDotClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [activeDot, dotProperties],\n        styles.activeDot,\n      )(theme),\n    [activeDot, styles.activeDot, theme],\n  )\n\n  const [dimDotProps, dimDotClassName] = useMemo(() => {\n    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot }\n    return getComponentProps<Dict, string>([resolvedDimDot, dotProperties])(\n      theme,\n    )\n  }, [dimDot, theme])\n\n  const radarPropList = useMemo(\n    () =>\n      series.map((props, index) => {\n        const {\n          activeDot = {},\n          dataKey,\n          dimDot = {},\n          dimRadar = {},\n          dot = {},\n          ...computedProps\n        } = props\n        const color = getVar(`radar-${index}`)(theme)\n        const dimmed = shouldHighlight && highlightedArea !== dataKey\n        const computedDimRadar = { ...dimRadarProps, ...dimRadar }\n\n        const resolvedProps = {\n          ...radarProps,\n          ...computedProps,\n          ...(dimmed ? computedDimRadar : {}),\n        }\n        const rest = getComponentProps<Dict, string>(\n          [resolvedProps, radarProperties],\n          radarClassName,\n          dimmed ? dimRadarClassName : undefined,\n        )(theme, true)\n\n        let resolvedActiveDot: boolean | Recharts.DotProps\n\n        if (withActiveDots) {\n          const computedActiveDot = {\n            ...activeDotProps,\n            ...activeDot,\n          }\n\n          const [rest, className] = getComponentProps<Dict, string>(\n            [computedActiveDot, dotProperties],\n            activeDotClassName,\n          )(theme)\n\n          resolvedActiveDot = {\n            className: cx(\"ui-radar-chart__active-dot\", className),\n            fill: color,\n            r: 4,\n            stroke: color,\n            ...rest,\n          } as Recharts.DotProps\n        } else {\n          resolvedActiveDot = false\n        }\n\n        let resolvedDot: boolean | Recharts.DotProps\n\n        if (withDots) {\n          const computedDimDot = { ...dimDotProps, ...dimDot }\n          const computedDot = {\n            ...dotProps,\n            ...dot,\n            ...(dimmed ? computedDimDot : {}),\n          }\n\n          const [rest, className] = getComponentProps(\n            [computedDot, dotProperties],\n            dotClassName,\n            dimmed ? dimDotClassName : undefined,\n          )(theme)\n\n          resolvedDot = {\n            className: cx(\"ui-radar-chart__dot\", className),\n            fill: color,\n            r: 4,\n            ...rest,\n          } as Recharts.DotProps\n        } else {\n          resolvedDot = false\n        }\n\n        return {\n          ...rest,\n          activeDot: resolvedActiveDot,\n          color,\n          dataKey,\n          dot: resolvedDot,\n        }\n      }),\n    [\n      activeDotClassName,\n      activeDotProps,\n      dimDotClassName,\n      dimDotProps,\n      dimRadarClassName,\n      dimRadarProps,\n      dotClassName,\n      dotProps,\n      highlightedArea,\n      radarClassName,\n      radarProps,\n      series,\n      shouldHighlight,\n      theme,\n      withActiveDots,\n      withDots,\n    ],\n  )\n\n  const getRadarChartProps: PropGetter<\n    ComponentPropsWithoutRef<typeof Recharts.RadarChart>,\n    ComponentPropsWithoutRef<typeof Recharts.RadarChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, radarChartClassName),\n      data,\n      ...props,\n      ...chartProps,\n    }),\n    [data, radarChartClassName, chartProps],\n  )\n\n  const getRadarProps: RequiredPropGetter<\n    { index: number } & Partial<Recharts.RadarProps>,\n    Omit<Recharts.RadarProps, \"ref\">\n  > = useCallback(\n    ({ className: classNameProp, index, ...props }, ref = null) => {\n      const {\n        className,\n        activeDot,\n        color,\n        dataKey = \"\",\n        dot,\n        ...rest\n      } = radarPropList[index] ?? {}\n\n      return {\n        ref,\n        name: dataKey as string,\n        className: cx(classNameProp, className),\n        activeDot,\n        dataKey,\n        dot,\n        fill: color,\n        isAnimationActive: false,\n        stroke: color,\n        strokeWidth,\n        ...(props as Omit<Recharts.RadarProps, \"dataKey\">),\n        ...rest,\n      }\n    },\n    [radarPropList, strokeWidth],\n  )\n\n  const getPolarAngleAxisProps: PropGetter<\n    Recharts.PolarAngleAxisProps,\n    Omit<Recharts.PolarAngleAxisProps, \"ref\">\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, polarAngleAxisClassName),\n      dataKey,\n      tick: {\n        className: cx(\n          \"ui-radar-chart__polar-angle-axis-tick\",\n          polarAngleAxisTickClassName,\n        ),\n      },\n      tickFormatter: polarAngleAxisTickFormatter,\n      tickSize: 16,\n      ...props,\n      ...polarAngleAxisProps,\n    }),\n    [\n      dataKey,\n      polarAngleAxisClassName,\n      polarAngleAxisProps,\n      polarAngleAxisTickClassName,\n      polarAngleAxisTickFormatter,\n    ],\n  )\n\n  const getPolarRadiusAxisProps: PropGetter<\n    Recharts.PolarRadiusAxisProps,\n    Omit<Recharts.PolarRadiusAxisProps, \"ref\">\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, polarRadiusAxisClassName),\n      tick: {\n        className: cx(\n          \"ui-radar-chart__polar-radius-axis-tick\",\n          polarRadiusAxisTickClassName,\n        ),\n      },\n      tickFormatter: polarRadiusAxisTickFormatter,\n      ...props,\n      ...polarRadiusAxisProps,\n    }),\n    [\n      polarRadiusAxisClassName,\n      polarRadiusAxisProps,\n      polarRadiusAxisTickClassName,\n      polarRadiusAxisTickFormatter,\n    ],\n  )\n\n  return {\n    radarVars,\n    setHighlightedArea,\n    getPolarAngleAxisProps,\n    getPolarRadiusAxisProps,\n    getRadarChartProps,\n    getRadarProps,\n  }\n}\n\nexport type UseRadarChartReturn = ReturnType<typeof useRadarChart>\n"],"mappings":"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","names":["_a","activeDot","dataKey","dimDot","dimRadar","dot","rest"]}

package/dist/{chunk-VEFEKDMH.mjs → chunk-FDALM73K.mjs}

@@ -10,17 +10,17 @@ var pieChartLabel = ({
   className: cellClassName,
   cx: cxProp = 0,
   cy: cyProp = 0,
-  midAngle = 0,
   innerRadius = 0,
-  outerRadius = 0,
+  isPercent,
+  labelFormatter,
+  labelOffset: labelOffsetProp,
+  midAngle = 0,
   middleRadius = 0,
+  outerRadius = 0,
   percent = 0,
+  styles,
   value = 0,
-  labelOffset: labelOffsetProp,
-  isPercent,
-  labelProps,
-  labelFormatter,
-  styles
+  labelProps
 }) => {
   const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
   const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
@@ -39,10 +39,10 @@ var pieChartLabel = ({
     ui.text,
     {
       className: cx(cellClassName, "ui-chart__label"),
+      dominantBaseline: "central",
+      textAnchor,
       x,
       y,
-      textAnchor,
-      dominantBaseline: "central",
       __css: styles,
       ...labelProps,
       children: displayLabel()
@@ -54,18 +54,19 @@ var pieChartLabelLine = ({
   cx: cxProp = 0,
   cy: cyProp = 0,
   innerRadius = 0,
+  labelOffset: labelOffsetProp,
   midAngle = 0,
   middleRadius = 0,
   outerRadius = 0,
   points = [{ x: 0, y: 0 }],
-  labelOffset: labelOffsetProp,
-  labelLineProps,
-  styles
+  styles,
+  labelLineProps
 }) => {
+  var _a, _b;
   const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
   const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
   const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
-  const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
+  const d = `M ${(_a = points[0]) == null ? void 0 : _a.x} ${(_b = points[0]) == null ? void 0 : _b.y} L ${x} ${y}`;
   return /* @__PURE__ */ jsx(
     ui.path,
     {
@@ -81,4 +82,4 @@ export {
   pieChartLabel,
   pieChartLabelLine
 };
-//# sourceMappingURL=chunk-VEFEKDMH.mjs.map
+//# sourceMappingURL=chunk-FDALM73K.mjs.map

package/dist/chunk-FDALM73K.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pie-chart-label.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport { cx, isUndefined } from \"@yamada-ui/utils\"\n\nconst RADIAN = Math.PI / 180\nconst DEFAULT_LABEL_OFFSET = 22\n\nexport interface PieChartLabelProps {\n  styles: Dict<CSSUIObject | undefined>\n  className?: string\n  cx?: number\n  cy?: number\n  innerRadius?: number\n  isPercent?: boolean\n  labelFormatter?: (value: number) => string\n  labelOffset?: number\n  midAngle?: number\n  middleRadius?: number\n  outerRadius?: number\n  percent?: number\n  value?: number\n  labelProps?: HTMLUIProps<\"text\">\n}\n\nexport const pieChartLabel: (props: PieChartLabelProps) => ReactNode = ({\n  className: cellClassName,\n  cx: cxProp = 0,\n  cy: cyProp = 0,\n  innerRadius = 0,\n  isPercent,\n  labelFormatter,\n  labelOffset: labelOffsetProp,\n  midAngle = 0,\n  middleRadius = 0,\n  outerRadius = 0,\n  percent = 0,\n  styles,\n  value = 0,\n  labelProps,\n}) => {\n  const labelOffset =\n    labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n  const textAnchor = x > cxProp ? \"start\" : x < cxProp ? \"end\" : \"middle\"\n  const displayLabel = () => {\n    if (isPercent) {\n      return (\n        parseFloat((percent * 100).toFixed(0)) > 0 &&\n        `${(percent * 100).toFixed(0)}%`\n      )\n    } else if (!isUndefined(labelFormatter)) {\n      return labelFormatter(value)\n    } else {\n      return value\n    }\n  }\n\n  return (\n    <ui.text\n      className={cx(cellClassName, \"ui-chart__label\")}\n      dominantBaseline=\"central\"\n      textAnchor={textAnchor}\n      x={x}\n      y={y}\n      __css={styles}\n      {...labelProps}\n    >\n      {displayLabel()}\n    </ui.text>\n  )\n}\n\ninterface Point {\n  x: number\n  y: number\n}\n\nexport interface PieChartLabelLineProps {\n  styles: Dict<CSSUIObject | undefined>\n  className?: string\n  cx?: number\n  cy?: number\n  innerRadius?: number\n  labelOffset?: number\n  midAngle?: number\n  middleRadius?: number\n  outerRadius?: number\n  points?: Point[]\n  labelLineProps?: HTMLUIProps<\"path\">\n}\n\nexport const pieChartLabelLine: (\n  props: PieChartLabelLineProps,\n) => React.ReactElement<SVGElement> = ({\n  className: cellClassName,\n  cx: cxProp = 0,\n  cy: cyProp = 0,\n  innerRadius = 0,\n  labelOffset: labelOffsetProp,\n  midAngle = 0,\n  middleRadius = 0,\n  outerRadius = 0,\n  points = [{ x: 0, y: 0 }],\n  styles,\n  labelLineProps,\n}) => {\n  const labelOffset =\n    labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n  const d = `M ${points[0]?.x} ${points[0]?.y} L ${x} ${y}`\n\n  return (\n    <ui.path\n      className={cx(cellClassName, \"ui-chart__label-line\")}\n      d={d}\n      __css={styles}\n      {...labelLineProps}\n    />\n  )\n}\n"],"mappings":";;;AAGA,SAAS,UAAU;AACnB,SAAS,IAAI,mBAAmB;AA2D5B;AAzDJ,IAAM,SAAS,KAAK,KAAK;AACzB,IAAM,uBAAuB;AAmBtB,IAAM,gBAA0D,CAAC;AAAA,EACtE,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,aAAa,IAAI,SAAS,UAAU,IAAI,SAAS,QAAQ;AAC/D,QAAM,eAAe,MAAM;AACzB,QAAI,WAAW;AACb,aACE,YAAY,UAAU,KAAK,QAAQ,CAAC,CAAC,IAAI,KACzC,IAAI,UAAU,KAAK,QAAQ,CAAC,CAAC;AAAA,IAEjC,WAAW,CAAC,YAAY,cAAc,GAAG;AACvC,aAAO,eAAe,KAAK;AAAA,IAC7B,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,eAAe,iBAAiB;AAAA,MAC9C,kBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,uBAAa;AAAA;AAAA,EAChB;AAEJ;AAqBO,IAAM,oBAEyB,CAAC;AAAA,EACrC,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAAM;AA9GN;AA+GE,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,IAAI,MAAK,YAAO,CAAC,MAAR,mBAAW,CAAC,KAAI,YAAO,CAAC,MAAR,mBAAW,CAAC,MAAM,CAAC,IAAI,CAAC;AAEvD,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,eAAe,sBAAsB;AAAA,MACnD;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/{chunk-2GQHI23M.mjs → chunk-GU4SGNWX.mjs}

@@ -4,17 +4,17 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-chart-grid.ts
 import { useTheme } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { useCallback } from "react";
 var useChartGrid = ({
-  gridProps = {},
   gridAxis = "x",
   strokeDasharray = "5 5",
-  styles
+  styles,
+  gridProps = {}
 }) => {
   const { theme } = useTheme();
   const [reChartsProps, propClassName] = getComponentProps(
@@ -25,9 +25,9 @@ var useChartGrid = ({
     ({ className, ...props } = {}, ref = null) => ({
       ref,
       className: cx("ui-chart__grid", className, propClassName),
+      horizontal: gridAxis === "x" || gridAxis === "xy",
       strokeDasharray,
       vertical: gridAxis === "y" || gridAxis === "xy",
-      horizontal: gridAxis === "x" || gridAxis === "xy",
       ...props,
       ...reChartsProps
     }),
@@ -39,4 +39,4 @@ var useChartGrid = ({
 export {
   useChartGrid
 };
-//# sourceMappingURL=chunk-2GQHI23M.mjs.map
+//# sourceMappingURL=chunk-GU4SGNWX.mjs.map

package/dist/chunk-GU4SGNWX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-grid.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { CartesianGridProps } from \"recharts\"\nimport type { ChartAxisType, GridProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { gridProperties } from \"./rechart-properties\"\n\nexport interface UseChartGridOptions {\n  /**\n   * Specifies which lines should be displayed in the grid.\n   *\n   * @default 'x'\n   */\n  gridAxis?: ChartAxisType\n  /**\n   * Dash array for the grid lines and cursor. The first number is the length of the solid line section and the second number is the length of the interval.\n   *\n   * @default '5 5'\n   */\n  strokeDasharray?: number | string\n  /**\n   * Props passed down to recharts 'CartesianGrid' component.\n   */\n  gridProps?: GridProps\n}\n\ninterface UseChartGridProps extends UseChartGridOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartGrid = ({\n  gridAxis = \"x\",\n  strokeDasharray = \"5 5\",\n  styles,\n  gridProps = {},\n}: UseChartGridProps) => {\n  const { theme } = useTheme()\n  const [reChartsProps, propClassName] = getComponentProps(\n    [gridProps, gridProperties],\n    styles.grid,\n  )(theme)\n\n  const getGridProps: PropGetter<\n    Partial<CartesianGridProps>,\n    CartesianGridProps\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(\"ui-chart__grid\", className, propClassName),\n      horizontal: gridAxis === \"x\" || gridAxis === \"xy\",\n      strokeDasharray: strokeDasharray,\n      vertical: gridAxis === \"y\" || gridAxis === \"xy\",\n      ...props,\n      ...reChartsProps,\n    }),\n    [propClassName, strokeDasharray, gridAxis, reChartsProps],\n  )\n\n  return { getGridProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AA2BrB,IAAM,eAAe,CAAC;AAAA,EAC3B,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA,YAAY,CAAC;AACf,MAAyB;AACvB,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,eAAe,aAAa,IAAI;AAAA,IACrC,CAAC,WAAW,cAAc;AAAA,IAC1B,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,eAGF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,UAAU;AAAA,MAC7C;AAAA,MACA,WAAW,GAAG,kBAAkB,WAAW,aAAa;AAAA,MACxD,YAAY,aAAa,OAAO,aAAa;AAAA,MAC7C;AAAA,MACA,UAAU,aAAa,OAAO,aAAa;AAAA,MAC3C,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,iBAAiB,UAAU,aAAa;AAAA,EAC1D;AAEA,SAAO,EAAE,aAAa;AACxB;","names":[]}

package/dist/{chunk-MVRWZTQ5.mjs → chunk-NLXYCM5J.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-chart-label.ts
 import { useTheme } from "@yamada-ui/core";
@@ -34,4 +34,4 @@ var useChartLabel = ({ styles, ...rest }) => {
 export {
   useChartLabel
 };
-//# sourceMappingURL=chunk-MVRWZTQ5.mjs.map
+//# sourceMappingURL=chunk-NLXYCM5J.mjs.map

package/dist/chunk-NLXYCM5J.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-label.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { LabelProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { labelProperties } from \"./rechart-properties\"\n\nexport interface UseChartLabelOptions {\n  /**\n   * Props passed down to recharts 'Label' component.\n   */\n  labelProps?: LabelProps\n}\n\nexport interface UseChartLabelProps extends UseChartLabelOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartLabel = ({ styles, ...rest }: UseChartLabelProps) => {\n  const { theme } = useTheme()\n\n  const [labelProps, labelClassName] = getComponentProps<Dict, string>(\n    [rest.labelProps ?? {}, labelProperties],\n    styles.label,\n  )(theme)\n\n  const getLabelProps: PropGetter<\n    Omit<Recharts.LabelProps, \"ref\">,\n    Omit<Recharts.LabelProps, \"ref\">\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => {\n      return {\n        ref,\n        className: cx(className, labelClassName),\n        ...props,\n        ...labelProps,\n      }\n    },\n    [labelClassName, labelProps],\n  )\n\n  return { getLabelProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAerB,IAAM,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,MAA0B;AArB1E;AAsBE,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,QAAM,CAAC,YAAY,cAAc,IAAI;AAAA,IACnC,EAAC,UAAK,eAAL,YAAmB,CAAC,GAAG,eAAe;AAAA,IACvC,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,gBAGF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,SAAS;AAC5C,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,cAAc;AAAA,QACvC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,EAC7B;AAEA,SAAO,EAAE,cAAc;AACzB;","names":[]}

package/dist/{chunk-54WAXZP7.mjs → chunk-NMPNNSBN.mjs}

@@ -1,150 +1,150 @@
 "use client"
 import {
   useBarChart
-} from "./chunk-OPPMMNGP.mjs";
+} from "./chunk-UER5GW4M.mjs";
 import {
   useChartAxis
-} from "./chunk-3EHZJFIA.mjs";
+} from "./chunk-PKQB4BFG.mjs";
 import {
   useChartGrid
-} from "./chunk-2GQHI23M.mjs";
+} from "./chunk-GU4SGNWX.mjs";
 import {
   useChartReferenceLine
-} from "./chunk-FYAC4RRZ.mjs";
+} from "./chunk-UTD4XZDM.mjs";
 import {
   useChartTooltip
-} from "./chunk-OJ2MLZZ7.mjs";
+} from "./chunk-X6PIY2M3.mjs";
 import {
   useChartLegend
-} from "./chunk-IJRYXT4V.mjs";
+} from "./chunk-R2LOTDR3.mjs";
 import {
   ChartLegend
-} from "./chunk-X6CD7LHX.mjs";
+} from "./chunk-OUIKA4AX.mjs";
 import {
   ChartTooltip
-} from "./chunk-YSPGYMRF.mjs";
+} from "./chunk-5VLSGWQD.mjs";
 import {
   ChartProvider,
   useChart
-} from "./chunk-A3IWA366.mjs";
+} from "./chunk-VK65X6Q2.mjs";
 
 // src/bar-chart.tsx
 import {
-  ui,
   forwardRef,
-  useComponentMultiStyle,
-  omitThemeProps
+  omitThemeProps,
+  ui,
+  useComponentMultiStyle
 } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { useMemo } from "react";
 import {
+  CartesianGrid,
+  Label,
   Legend,
   BarChart as ReChartsBarChart,
-  CartesianGrid,
+  ReferenceLine,
+  ResponsiveContainer,
   Tooltip,
   XAxis,
-  YAxis,
-  ResponsiveContainer,
-  ReferenceLine,
-  Label
+  YAxis
 } from "recharts";
 import { jsx, jsxs } from "react/jsx-runtime";
 var BarChart = forwardRef((props, ref) => {
   const [styles, mergedProps] = useComponentMultiStyle("BarChart", props);
   const {
+    type = "default",
     className,
-    series,
+    cell,
+    data,
     dataKey,
+    fillOpacity,
+    gridAxis,
+    labelFormatter,
     layoutType,
+    series,
+    strokeDasharray,
+    syncId,
     tickLine,
-    gridAxis,
+    tooltipAnimationDuration,
+    unit,
+    valueFormatter,
+    withLegend = false,
+    withTooltip = true,
     withXAxis,
     withYAxis,
-    barProps,
-    xAxisProps,
-    yAxisProps,
     xAxisLabel,
+    xAxisTickFormatter,
     yAxisLabel,
-    xAxisLabelProps,
-    yAxisLabelProps,
-    type = "default",
-    withTooltip = true,
-    withLegend = false,
-    containerProps,
-    unit,
     yAxisTickFormatter,
-    xAxisTickFormatter,
-    valueFormatter,
-    labelFormatter,
-    tooltipProps,
-    tooltipAnimationDuration,
+    barProps,
+    chartProps,
+    containerProps,
+    gridProps,
     legendProps,
-    data,
     referenceLineProps = [],
-    gridProps,
-    strokeDasharray,
-    fillOpacity,
-    chartProps,
-    syncId,
-    cell,
+    tooltipProps,
+    xAxisLabelProps,
+    xAxisProps,
+    yAxisLabelProps,
+    yAxisProps,
     ...rest
   } = omitThemeProps(mergedProps);
-  const { bars, barVars, getBarChartProps, setHighlightedArea } = useBarChart({
-    data,
-    series,
-    cell,
+  const { bars, barVars, setHighlightedArea, getBarChartProps } = useBarChart({
     type,
-    layoutType,
-    chartProps,
-    barProps,
-    referenceLineProps,
+    cell,
+    data,
     fillOpacity,
+    layoutType,
+    series,
+    styles,
     syncId,
     xAxisLabel,
     yAxisLabel,
-    styles
+    barProps,
+    chartProps,
+    referenceLineProps
   });
   const { getContainerProps } = useChart({ containerProps });
   const {
-    getXAxisProps,
-    getYAxisProps,
     getXAxisLabelProps,
-    getYAxisLabelProps
+    getXAxisProps,
+    getYAxisLabelProps,
+    getYAxisProps
   } = useChartAxis({
-    dataKey,
     type,
+    dataKey,
+    gridAxis,
     layoutType,
+    styles,
     tickLine,
-    gridAxis,
+    unit,
     withXAxis,
     withYAxis,
-    xAxisProps,
-    yAxisProps,
     xAxisLabel,
+    xAxisTickFormatter,
     yAxisLabel,
+    yAxisTickFormatter,
     xAxisLabelProps,
+    xAxisProps,
     yAxisLabelProps,
-    unit,
-    yAxisTickFormatter,
-    xAxisTickFormatter,
-    styles
+    yAxisProps
   });
   const { getReferenceLineProps } = useChartReferenceLine({
-    referenceLineProps,
-    styles
+    styles,
+    referenceLineProps
   });
   const { getGridProps } = useChartGrid({
-    gridProps,
     gridAxis,
     strokeDasharray,
-    styles
+    styles,
+    gridProps
   });
-  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
-    tooltipProps,
+  const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
+    styles,
     tooltipAnimationDuration,
-    styles
+    tooltipProps
   });
-  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
     legendProps
   });
   const referenceLinesItems = useMemo(
@@ -152,8 +152,8 @@ var BarChart = forwardRef((props, ref) => {
       ReferenceLine,
       {
         ...getReferenceLineProps({
-          index,
-          className: "ui-bar-chart__reference-line"
+          className: "ui-bar-chart__reference-line",
+          index
         })
       },
       `referenceLine-${index}`
@@ -221,10 +221,10 @@ var BarChart = forwardRef((props, ref) => {
                       {
                         className: "ui-bar-chart__tooltip",
                         label,
-                        payload,
-                        valueFormatter,
                         labelFormatter,
+                        payload,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),
@@ -247,4 +247,4 @@ BarChart.__ui__ = "BarChart";
 export {
   BarChart
 };
-//# sourceMappingURL=chunk-54WAXZP7.mjs.map
+//# sourceMappingURL=chunk-NMPNNSBN.mjs.map

package/dist/chunk-NMPNNSBN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bar-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseBarChartOptions } from \"./use-bar-chart\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartAxisOptions } from \"./use-chart-axis\"\nimport type { UseChartGridOptions } from \"./use-chart-grid\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartReferenceLineOptions } from \"./use-chart-reference-line\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  CartesianGrid,\n  Label,\n  Legend,\n  BarChart as ReChartsBarChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { useBarChart } from \"./use-bar-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartAxis } from \"./use-chart-axis\"\nimport { useChartGrid } from \"./use-chart-grid\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartReferenceLine } from \"./use-chart-reference-line\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\n\ninterface BarChartOptions {\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n}\n\nexport type BarChartProps = BarChartOptions &\n  HTMLUIProps &\n  ThemeProps<\"BarChart\"> &\n  UseBarChartOptions &\n  UseChartAxisOptions &\n  UseChartGridOptions &\n  UseChartLegendProps &\n  UseChartProps &\n  UseChartReferenceLineOptions &\n  UseChartTooltipOptions\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/bar-chart\n */\nexport const BarChart = forwardRef<BarChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"BarChart\", props)\n  const {\n    type = \"default\",\n    className,\n    cell,\n    data,\n    dataKey,\n    fillOpacity,\n    gridAxis,\n    labelFormatter,\n    layoutType,\n    series,\n    strokeDasharray,\n    syncId,\n    tickLine,\n    tooltipAnimationDuration,\n    unit,\n    valueFormatter,\n    withLegend = false,\n    withTooltip = true,\n    withXAxis,\n    withYAxis,\n    xAxisLabel,\n    xAxisTickFormatter,\n    yAxisLabel,\n    yAxisTickFormatter,\n    barProps,\n    chartProps,\n    containerProps,\n    gridProps,\n    legendProps,\n    referenceLineProps = [],\n    tooltipProps,\n    xAxisLabelProps,\n    xAxisProps,\n    yAxisLabelProps,\n    yAxisProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const { bars, barVars, setHighlightedArea, getBarChartProps } = useBarChart({\n    type,\n    cell,\n    data,\n    fillOpacity,\n    layoutType,\n    series,\n    styles,\n    syncId,\n    xAxisLabel,\n    yAxisLabel,\n    barProps,\n    chartProps,\n    referenceLineProps,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const {\n    getXAxisLabelProps,\n    getXAxisProps,\n    getYAxisLabelProps,\n    getYAxisProps,\n  } = useChartAxis({\n    type,\n    dataKey,\n    gridAxis,\n    layoutType,\n    styles,\n    tickLine,\n    unit,\n    withXAxis,\n    withYAxis,\n    xAxisLabel,\n    xAxisTickFormatter,\n    yAxisLabel,\n    yAxisTickFormatter,\n    xAxisLabelProps,\n    xAxisProps,\n    yAxisLabelProps,\n    yAxisProps,\n  })\n  const { getReferenceLineProps } = useChartReferenceLine({\n    styles,\n    referenceLineProps,\n  })\n  const { getGridProps } = useChartGrid({\n    gridAxis,\n    strokeDasharray,\n    styles,\n    gridProps,\n  })\n  const { getTooltipProps, tooltipProps: computedTooltipProps } =\n    useChartTooltip({\n      styles,\n      tooltipAnimationDuration,\n      tooltipProps,\n    })\n  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n    legendProps,\n  })\n\n  const referenceLinesItems = useMemo(\n    () =>\n      referenceLineProps.map((_, index) => (\n        <ReferenceLine\n          key={`referenceLine-${index}`}\n          {...getReferenceLineProps({\n            className: \"ui-bar-chart__reference-line\",\n            index,\n          })}\n        />\n      )),\n    [getReferenceLineProps, referenceLineProps],\n  )\n\n  return (\n    <ChartProvider value={{ styles }}>\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-bar-chart\", className)}\n        __css={{ maxW: \"full\", vars: barVars, ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-bar-chart__container\" })}\n        >\n          <ReChartsBarChart\n            {...getBarChartProps({ className: \"ui-bar-chart__chart\" })}\n          >\n            <CartesianGrid\n              {...getGridProps({ className: \"ui-bar-chart__grid\" })}\n            />\n\n            <XAxis {...getXAxisProps({ className: \"ui-bar-chart__x-axis\" })}>\n              <Label\n                {...getXAxisLabelProps({\n                  className: \"ui-bar-chart__x-axis-label\",\n                })}\n              />\n            </XAxis>\n\n            <YAxis {...getYAxisProps({ className: \"ui-bar-chart__y-axis\" })}>\n              <Label\n                {...getYAxisLabelProps({\n                  className: \"ui-bar-chart__y-axis-label\",\n                })}\n              />\n            </YAxis>\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-bar-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-bar-chart__tooltip\"\n                    label={label}\n                    labelFormatter={labelFormatter}\n                    payload={payload}\n                    unit={unit}\n                    valueFormatter={valueFormatter}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n\n            {bars}\n            {referenceLinesItems}\n          </ReChartsBarChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n\nBarChart.displayName = \"BarChart\"\nBarChart.__ui__ = \"BarChart\"\n"],"mappings":"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","names":[]}