{"version":3,"sources":["../src/line-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\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 type { UseLineChartOptions } from \"./use-line-chart\"\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  Line,\n  LineChart as ReChartsLineChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\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\"\nimport { useLineChart } from \"./use-line-chart\"\n\ninterface LineChartOptions {\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 interface LineChartProps\n  extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeDasharray\" | \"strokeWidth\">,\n    ThemeProps<\"LineChart\">,\n    LineChartOptions,\n    UseChartProps,\n    UseChartAxisOptions,\n    UseChartReferenceLineOptions,\n    UseChartGridOptions,\n    UseChartTooltipOptions,\n    UseChartLegendProps,\n    UseLineChartOptions {}\n\n/**\n * `LineChart` is a component for drawing line charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/line-chart\n */\nexport const LineChart = forwardRef<LineChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"LineChart\", props)\n  const {\n    type,\n    className,\n    connectNulls,\n    curveType,\n    data,\n    dataKey,\n    fillOpacity,\n    gridAxis,\n    labelFormatter,\n    layoutType,\n    series,\n    strokeDasharray,\n    strokeWidth,\n    syncId,\n    tickLine,\n    tooltipAnimationDuration,\n    unit,\n    valueFormatter,\n    withActiveDots,\n    withDots,\n    withLegend = false,\n    withTooltip = true,\n    withXAxis,\n    withYAxis,\n    xAxisLabel,\n    xAxisTickFormatter,\n    yAxisLabel,\n    yAxisTickFormatter,\n    chartProps,\n    containerProps,\n    gridProps,\n    legendProps,\n    lineProps,\n    referenceLineProps,\n    tooltipProps,\n    xAxisLabelProps,\n    xAxisProps,\n    yAxisLabelProps,\n    yAxisProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const { lineVars, setHighlightedArea, getLineChartProps, getLineProps } =\n    useLineChart({\n      connectNulls,\n      curveType,\n      data,\n      fillOpacity,\n      layoutType,\n      series,\n      strokeWidth,\n      styles,\n      syncId,\n      withActiveDots,\n      withDots,\n      xAxisLabel,\n      yAxisLabel,\n      chartProps,\n      lineProps,\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 lines = useMemo(\n    () =>\n      series.map(({ dataKey }, index) => (\n        <Line\n          key={`line-${dataKey}`}\n          {...getLineProps({ className: \"ui-line-chart__line\", index })}\n        />\n      )),\n    [getLineProps, series],\n  )\n\n  const referenceLinesItems = useMemo(\n    () =>\n      referenceLineProps?.map((_, index) => (\n        <ReferenceLine\n          key={`referenceLine-${index}`}\n          {...getReferenceLineProps({\n            className: \"ui-line-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-line-chart\", className)}\n        __css={{ maxW: \"full\", vars: lineVars, ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-line-chart__container\" })}\n        >\n          <ReChartsLineChart\n            {...getLineChartProps({ className: \"ui-line-chart__chart\" })}\n          >\n            <CartesianGrid\n              {...getGridProps({ className: \"ui-line-chart__grid\" })}\n            />\n\n            <XAxis {...getXAxisProps({ className: \"ui-line-chart__x-axis\" })}>\n              <Label\n                {...getXAxisLabelProps({\n                  className: \"ui-line-chart__x-axis-label\",\n                })}\n              />\n            </XAxis>\n\n            <YAxis {...getYAxisProps({ className: \"ui-line-chart__y-axis\" })}>\n              <Label\n                {...getYAxisLabelProps({\n                  className: \"ui-line-chart__y-axis-label\",\n                })}\n              />\n            </YAxis>\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-line-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-line-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            {lines}\n            {referenceLinesItems}\n          </ReChartsLineChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n\nLineChart.displayName = \"LineChart\"\nLineChart.__ui__ = \"LineChart\"\n"],"mappings":"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","names":["dataKey"]}