{"version":3,"sources":["../src/use-line-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  ChartCurveType,\n  ChartLayoutType,\n  LineChartProps,\n  LineProps,\n  ReferenceLineProps,\n} from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport {\n  dotProperties,\n  lineChartProperties,\n  lineProperties,\n} from \"./rechart-properties\"\n\nexport interface UseLineChartOptions {\n  /**\n   * Chart data.\n   */\n  data: Dict[]\n  /**\n   * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.\n   */\n  series: LineProps[]\n  /**\n   * Determines whether points with `null` values should be connected.\n   *\n   * @default true\n   */\n  connectNulls?: boolean\n  /**\n   * Type of the curve.\n   *\n   * @default `monotone`\n   */\n  curveType?: ChartCurveType\n  /**\n   * Controls fill opacity of all lines.\n   *\n   * @default 1\n   */\n  fillOpacity?: [number, number] | number\n  /**\n   * Chart orientation.\n   *\n   * @default 'horizontal'\n   */\n  layoutType?: ChartLayoutType\n  /**\n   * Stroke width for the chart lines.\n   *\n   * @default 2\n   */\n  strokeWidth?: number\n  /**\n   * If any two categorical charts have the same syncId,\n   * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.\n   */\n  syncId?: number | string\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 true\n   */\n  withDots?: boolean\n  /**\n   * A label to display below the X axis.\n   */\n  xAxisLabel?: string\n  /**\n   * A label to display below the Y axis.\n   */\n  yAxisLabel?: string\n  /**\n   * Props passed down to recharts `LineChart` component.\n   */\n  chartProps?: LineChartProps\n  /**\n   * Props for the lines.\n   */\n  lineProps?: Partial<LineProps>\n  /**\n   * Reference lines that should be displayed on the chart.\n   */\n  referenceLineProps?: ReferenceLineProps[]\n}\n\ninterface UseLineChartProps extends UseLineChartOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useLineChart = ({\n  connectNulls = true,\n  curveType = \"monotone\",\n  data,\n  fillOpacity = 1,\n  layoutType = \"horizontal\",\n  series,\n  strokeWidth = 2,\n  styles,\n  syncId,\n  withActiveDots = true,\n  withDots = true,\n  xAxisLabel,\n  yAxisLabel,\n  referenceLineProps,\n  ...rest\n}: UseLineChartProps) => {\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n  const shouldHighlight = highlightedArea !== null\n  const {\n    activeDot = {},\n    dimDot,\n    dimLine,\n    dot = {},\n    ...computedLineProps\n  } = rest.lineProps ?? {}\n\n  const lineColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      series.map(({ color }, index) => ({\n        name: `line-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [series],\n  )\n\n  const referenceLineColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      referenceLineProps\n        ? referenceLineProps.map(({ color }, index) => ({\n            name: `reference-line-${index}`,\n            token: \"colors\",\n            value: color ?? \"transparent\",\n          }))\n        : [],\n    [referenceLineProps],\n  )\n\n  const lineVars: CSSUIProps[\"vars\"] = useMemo(\n    () => [\n      ...lineColors,\n      ...referenceLineColors,\n      { name: \"fill-opacity\", value: fillOpacity },\n    ],\n    [fillOpacity, lineColors, referenceLineColors],\n  )\n\n  const [chartProps, lineChartClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.chartProps ?? {}, lineChartProperties],\n        styles.chart,\n      )(theme),\n    [rest.chartProps, styles.chart, theme],\n  )\n\n  const [lineProps, lineClassName] = useMemo(() => {\n    const resolvedLineProps = {\n      fillOpacity: \"$fill-opacity\",\n      strokeOpacity: \"$fill-opacity\",\n      ...computedLineProps,\n    }\n\n    return getComponentProps<Dict, string>(\n      [resolvedLineProps, lineProperties],\n      styles.line,\n    )(theme)\n  }, [computedLineProps, styles.line, theme])\n\n  const [dimLineProps, dimLineClassName] = useMemo(() => {\n    const resolvedDimLine = { fillOpacity: 0, strokeOpacity: 0.3, ...dimLine }\n\n    return getComponentProps<Dict, string>([resolvedDimLine, lineProperties])(\n      theme,\n    )\n  }, [dimLine, theme])\n\n  const [dotProps, dotClassName] = useMemo(() => {\n    const resolvedDot = { fillOpacity: 1, strokeOpacity: 1, ...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 = {\n      fillOpacity: 0,\n      strokeOpacity: 0,\n      ...dimDot,\n    }\n\n    return getComponentProps<Dict, string>([resolvedDimDot, dotProperties])(\n      theme,\n    )\n  }, [dimDot, theme])\n\n  const linePropList = useMemo(\n    () =>\n      series.map((props, index) => {\n        const {\n          activeDot = {},\n          dataKey,\n          dimDot = {},\n          dimLine = {},\n          dot = {},\n          ...computedProps\n        } = props\n        const color = getVar(`line-${index}`)(theme)\n        const dimmed = shouldHighlight && highlightedArea !== dataKey\n        const computedDimLine = { ...dimLineProps, ...dimLine }\n        const resolvedProps = {\n          ...lineProps,\n          ...computedProps,\n          ...(dimmed ? computedDimLine : {}),\n        }\n\n        const rest = getComponentProps<Dict, string>(\n          [resolvedProps, lineProperties],\n          lineClassName,\n          dimmed ? dimLineClassName : undefined,\n        )(theme, true)\n\n        let resolvedActiveDot: boolean | Recharts.DotProps\n\n        if (withActiveDots) {\n          const computedActiveDot = { ...activeDotProps, ...activeDot }\n\n          const [rest, className] = getComponentProps(\n            [computedActiveDot, dotProperties],\n            activeDotClassName,\n          )(theme)\n\n          resolvedActiveDot = {\n            className: cx(\"ui-line-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-line-chart__dot\", className),\n            fill: color,\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      series,\n      shouldHighlight,\n      highlightedArea,\n      dimLineProps,\n      lineProps,\n      lineClassName,\n      dimLineClassName,\n      theme,\n      withActiveDots,\n      withDots,\n      activeDotProps,\n      activeDotClassName,\n      dimDotProps,\n      dotProps,\n      dotClassName,\n      dimDotClassName,\n    ],\n  )\n\n  const getLineChartProps: PropGetter<\n    ComponentPropsWithoutRef<typeof Recharts.LineChart>,\n    ComponentPropsWithoutRef<typeof Recharts.LineChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, lineChartClassName),\n      data,\n      layout: layoutType,\n      margin: {\n        bottom: xAxisLabel ? 30 : undefined,\n        left: yAxisLabel ? 10 : undefined,\n        right: yAxisLabel ? 5 : undefined,\n      },\n      syncId,\n      ...props,\n      ...chartProps,\n    }),\n    [\n      lineChartClassName,\n      data,\n      layoutType,\n      syncId,\n      xAxisLabel,\n      yAxisLabel,\n      chartProps,\n    ],\n  )\n\n  const getLineProps: RequiredPropGetter<\n    { index: number } & Partial<Recharts.LineProps>,\n    Omit<Recharts.LineProps, \"ref\">\n  > = useCallback(\n    ({ className: classNameProp, index, ...props }) => {\n      const { className, activeDot, color, dataKey, dot, ...rest } =\n        linePropList[index] ?? {}\n\n      return {\n        type: curveType,\n        name: runIfFunc(dataKey, {}),\n        className: cx(classNameProp, className),\n        activeDot,\n        connectNulls,\n        dataKey,\n        dot,\n        fill: color,\n        isAnimationActive: false,\n        stroke: color,\n        strokeWidth,\n        ...(props as Omit<Recharts.LineProps, \"dataKey\">),\n        ...rest,\n      }\n    },\n    [connectNulls, curveType, linePropList, strokeWidth],\n  )\n\n  return {\n    lineVars,\n    setHighlightedArea,\n    getLineChartProps,\n    getLineProps,\n  }\n}\n\nexport type UseLineChartReturn = ReturnType<typeof useLineChart>\n"],"mappings":"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","names":["_a","activeDot","dimDot","dimLine","dot","rest"]}