{"version":3,"file":"index.mjs","names":["ReChartsLineChart","Tooltip"],"sources":["../../src/LineChart/index.tsx"],"sourcesContent":["'use client';\n\nimport { Flexbox } from '@lobehub/ui';\nimport { Skeleton } from '@lobehub/ui/base-ui';\nimport { css, cssVar, cx } from 'antd-style';\nimport { Fragment, MouseEvent, forwardRef, useMemo, useState } from 'react';\nimport {\n  CartesianGrid,\n  Dot,\n  Label,\n  Legend,\n  Line,\n  LineChart as ReChartsLineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport { AxisDomain } from 'recharts/types/util/types';\n\nimport BaseChartProps from '@/common/BaseChartProps';\nimport ChartLegend from '@/common/ChartLegend';\nimport ChartTooltip from '@/common/ChartTooltip';\nimport CustomYAxisTick from '@/common/CustomYAxisTick';\nimport NoData from '@/common/NoData';\nimport { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from '@/common/utils';\nimport { useThemeColorRange } from '@/hooks/useThemeColorRange';\nimport { CurveType } from '@/types/charts';\nimport { defaultValueFormatter } from '@/utils';\nimport { getMaxLabelLength } from '@/utils/getMaxLabelLength';\n\nimport { styles } from './styles';\n\nexport interface LineChartProps extends BaseChartProps {\n  connectNulls?: boolean;\n  curveType?: CurveType;\n}\n\ninterface ActiveDot {\n  dataKey?: string;\n  index?: number;\n}\n\nconst LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {\n  const themeColorRange = useThemeColorRange();\n  const {\n    data = [],\n    categories = [],\n    index,\n    colors = themeColorRange,\n    valueFormatter = defaultValueFormatter,\n    xAxisLabelFormatter = defaultValueFormatter,\n    startEndOnly = false,\n    showXAxis = true,\n    showYAxis = true,\n    yAxisWidth,\n    intervalType = 'equidistantPreserveStart',\n    animationDuration = 900,\n    showAnimation = false,\n    yAxisAlign = 'left',\n    showTooltip = true,\n    showLegend = true,\n    showGridLines = true,\n    autoMinValue = false,\n    curveType = 'linear',\n    minValue,\n    maxValue,\n    connectNulls = false,\n    allowDecimals = true,\n    noDataText,\n    className,\n    onValueChange,\n    enableLegendSlider = false,\n    customTooltip,\n    rotateLabelX,\n    tickGap = 5,\n    xAxisLabel,\n    yAxisLabel,\n    yAxisDomain: yAxisDomainOverride,\n    width = '100%',\n    height = 280,\n    style,\n    customCategories,\n    loading,\n    ...rest\n  } = props;\n  const [legendHeight, setLegendHeight] = useState(60);\n  const [activeDot, setActiveDot] = useState<ActiveDot | undefined>();\n  const [activeLegend, setActiveLegend] = useState<string | undefined>();\n  const calculatedYAxisWidth: number | string = useMemo(() => {\n    if (yAxisWidth) return yAxisWidth;\n    return getMaxLabelLength({ data, index, margin: 16, valueFormatter });\n  }, [yAxisWidth, data, valueFormatter, index]);\n\n  if (loading || !data) return <Skeleton height={height} width={width} />;\n\n  const CustomTooltip = customTooltip;\n  const paddingValue = !showXAxis && !showYAxis ? 0 : 20;\n  const categoryColors = constructCategoryColors(categories, colors);\n  const yAxisDomain = (yAxisDomainOverride ??\n    getYAxisDomain(autoMinValue, minValue, maxValue)) as AxisDomain;\n  const hasOnValueChange = !!onValueChange;\n\n  const onDotClick = (itemData: any, event: MouseEvent) => {\n    event.stopPropagation();\n\n    if (!hasOnValueChange) return;\n    if (\n      (itemData.index === activeDot?.index && itemData.dataKey === activeDot?.dataKey) ||\n      (hasOnlyOneValueForThisKey(data, itemData.dataKey) &&\n        activeLegend &&\n        activeLegend === itemData.dataKey)\n    ) {\n      setActiveLegend(undefined);\n      setActiveDot(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(itemData.dataKey);\n      setActiveDot({\n        dataKey: itemData.dataKey,\n        index: itemData.index,\n      });\n      onValueChange?.({\n        categoryClicked: itemData.dataKey,\n        eventType: 'dot',\n        ...itemData.payload,\n      });\n    }\n  };\n\n  const onCategoryClick = (dataKey: string) => {\n    if (!hasOnValueChange) return;\n    if (\n      (dataKey === activeLegend && !activeDot) ||\n      (hasOnlyOneValueForThisKey(data, dataKey) && activeDot && activeDot.dataKey === dataKey)\n    ) {\n      setActiveLegend(undefined);\n      onValueChange?.(null);\n    } else {\n      setActiveLegend(dataKey);\n      onValueChange?.({\n        categoryClicked: dataKey,\n        eventType: 'category',\n      });\n    }\n    setActiveDot(undefined);\n  };\n\n  return (\n    <Flexbox\n      className={className}\n      height={height}\n      ref={ref}\n      style={{ position: 'relative', ...style }}\n      width={width}\n      {...rest}\n    >\n      <ResponsiveContainer>\n        {data?.length ? (\n          <ReChartsLineChart\n            data={data}\n            margin={{\n              bottom: xAxisLabel ? 30 : undefined,\n              left: yAxisLabel ? 20 : undefined,\n              right: yAxisLabel ? 5 : undefined,\n              top: 5,\n            }}\n            onClick={\n              hasOnValueChange && (activeLegend || activeDot)\n                ? () => {\n                    setActiveDot(undefined);\n                    setActiveLegend(undefined);\n                    onValueChange?.(null);\n                  }\n                : undefined\n            }\n          >\n            {showGridLines ? (\n              <CartesianGrid className={styles.gridLines} horizontal={true} vertical={false} />\n            ) : undefined}\n            <XAxis\n              angle={rotateLabelX?.angle}\n              axisLine={false}\n              className={styles.label}\n              dataKey={index}\n              dy={rotateLabelX?.verticalShift}\n              fill=\"\"\n              hide={!showXAxis}\n              interval={startEndOnly ? 'preserveStartEnd' : intervalType}\n              minTickGap={tickGap}\n              padding={{ left: paddingValue, right: paddingValue }}\n              stroke=\"\"\n              tick={{ transform: 'translate(0, 6)' }}\n              tickFormatter={xAxisLabelFormatter}\n              tickLine={false}\n              ticks={startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined}\n            >\n              {xAxisLabel && (\n                <Label\n                  className={cx(styles.strongLabel, styles.emphasis)}\n                  offset={-20}\n                  position=\"insideBottom\"\n                >\n                  {xAxisLabel}\n                </Label>\n              )}\n            </XAxis>\n            <YAxis\n              allowDecimals={allowDecimals}\n              axisLine={false}\n              className={styles.label}\n              domain={yAxisDomain as AxisDomain}\n              fill=\"\"\n              hide={!showYAxis}\n              stroke=\"\"\n              tick={(props) => (\n                <CustomYAxisTick\n                  {...props}\n                  align={yAxisAlign}\n                  formatter={valueFormatter}\n                  textAnchor={yAxisAlign === 'left' ? 'start' : 'end'}\n                  yAxisLabel={Boolean(yAxisLabel)}\n                />\n              )}\n              tickFormatter={valueFormatter}\n              tickLine={false}\n              type=\"number\"\n              width={calculatedYAxisWidth}\n            >\n              {yAxisLabel && (\n                <Label\n                  angle={-90}\n                  className={cx(styles.strongLabel, styles.emphasis)}\n                  offset={-15}\n                  position=\"insideLeft\"\n                  style={{ textAnchor: 'middle' }}\n                >\n                  {yAxisLabel}\n                </Label>\n              )}\n            </YAxis>\n            <Tooltip\n              content={\n                showTooltip\n                  ? ({ active, payload, label }) =>\n                      CustomTooltip ? (\n                        <CustomTooltip\n                          active={active}\n                          customCategories={customCategories}\n                          label={label}\n                          payload={payload?.map((payloadItem: any) => ({\n                            ...payloadItem,\n                            color: categoryColors.get(payloadItem.dataKey) ?? cssVar.colorPrimary,\n                          }))}\n                          valueFormatter={valueFormatter}\n                        />\n                      ) : (\n                        <ChartTooltip\n                          active={active}\n                          categoryColors={categoryColors}\n                          customCategories={customCategories}\n                          label={label}\n                          payload={payload}\n                          valueFormatter={valueFormatter}\n                        />\n                      )\n                  : undefined\n              }\n              cursor={{ stroke: cssVar.colorTextSecondary, strokeWidth: 1 }}\n              isAnimationActive={false}\n              position={{ y: 0 }}\n              wrapperStyle={{ outline: 'none' }}\n            />\n\n            {showLegend ? (\n              <Legend\n                content={({ payload }) =>\n                  ChartLegend(\n                    { payload },\n                    categoryColors,\n                    setLegendHeight,\n                    activeLegend,\n                    hasOnValueChange\n                      ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)\n                      : undefined,\n                    enableLegendSlider,\n                    customCategories,\n                  )\n                }\n                height={legendHeight}\n                verticalAlign=\"top\"\n              />\n            ) : undefined}\n            {categories.map((category) => (\n              <Line\n                activeDot={(props: any) => {\n                  const {\n                    dotCx,\n                    dotCy,\n                    stroke,\n                    strokeLinecap,\n                    strokeLinejoin,\n                    strokeWidth,\n                    dataKey,\n                  } = props;\n                  return (\n                    <Dot\n                      className={cx(css`\n                        fill: ${categoryColors.get(dataKey) ?? cssVar.colorPrimary};\n                      `)}\n                      cx={dotCx}\n                      cy={dotCy}\n                      fill=\"\"\n                      onClick={(dotProps: any, event) => onDotClick(props, event)}\n                      r={5}\n                      stroke={stroke}\n                      strokeLinecap={strokeLinecap}\n                      strokeLinejoin={strokeLinejoin}\n                      strokeWidth={strokeWidth}\n                    />\n                  );\n                }}\n                animationDuration={animationDuration}\n                className={cx(css`\n                  stroke: ${categoryColors.get(category) ?? cssVar.colorPrimary};\n                `)}\n                connectNulls={connectNulls}\n                dataKey={category}\n                dot={(props: any) => {\n                  const {\n                    stroke,\n                    strokeLinecap,\n                    strokeLinejoin,\n                    strokeWidth,\n                    cx: dotCx,\n                    cy: dotCy,\n                    dataKey,\n                    index,\n                  } = props;\n\n                  if (\n                    (hasOnlyOneValueForThisKey(data, category) &&\n                      !(activeDot || (activeLegend && activeLegend !== category))) ||\n                    (activeDot?.index === index && activeDot?.dataKey === category)\n                  ) {\n                    return (\n                      <Dot\n                        className={cx(css`\n                          fill: ${categoryColors.get(dataKey) ?? cssVar.colorPrimary};\n                        `)}\n                        cx={dotCx}\n                        cy={dotCy}\n                        fill=\"\"\n                        key={index}\n                        r={5}\n                        stroke={stroke}\n                        strokeLinecap={strokeLinecap}\n                        strokeLinejoin={strokeLinejoin}\n                        strokeWidth={strokeWidth}\n                      />\n                    );\n                  }\n                  return <Fragment key={index} />;\n                }}\n                isAnimationActive={showAnimation}\n                key={category}\n                name={category}\n                stroke=\"\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeOpacity={activeDot || (activeLegend && activeLegend !== category) ? 0.3 : 1}\n                strokeWidth={2}\n                type={curveType}\n              />\n            ))}\n            {onValueChange\n              ? categories.map((category) => (\n                  <Line\n                    connectNulls={connectNulls}\n                    dataKey={category}\n                    fill=\"transparent\"\n                    key={category}\n                    legendType=\"none\"\n                    name={category}\n                    onClick={(props: any, event) => {\n                      event.stopPropagation();\n                      const { name } = props;\n                      onCategoryClick(name);\n                    }}\n                    stroke=\"transparent\"\n                    strokeOpacity={0}\n                    strokeWidth={12}\n                    style={{\n                      cursor: 'pointer',\n                    }}\n                    tooltipType=\"none\"\n                    type={curveType}\n                  />\n                ))\n              : undefined}\n          </ReChartsLineChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </Flexbox>\n  );\n});\n\nLineChart.displayName = 'LineChart';\n\nexport default LineChart;\n"],"mappings":"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"}