{"version":3,"file":"index.mjs","names":["ReChartsComposedChart","Tooltip"],"sources":["../../src/ComposedChart/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 { forwardRef, useMemo, useState } from 'react';\nimport {\n  Bar,\n  CartesianGrid,\n  Label,\n  Legend,\n  Line,\n  ComposedChart as ReChartsComposedChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport ChartLegend from '@/common/ChartLegend';\nimport ChartTooltip from '@/common/ChartTooltip';\nimport CustomYAxisTick from '@/common/CustomYAxisTick';\nimport NoData from '@/common/NoData';\nimport { useThemeColorRange } from '@/hooks/useThemeColorRange';\nimport { defaultValueFormatter } from '@/utils';\nimport { getMaxLabelLength } from '@/utils/getMaxLabelLength';\n\nimport { styles } from './styles';\nimport type { ComposedChartProps } from './types';\n\nexport type { ComposedChartProps, SeriesItem, YAxisConfig } from './types';\n\nconst ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref) => {\n  const themeColorRange = useThemeColorRange();\n  const {\n    data = [],\n    index,\n    series = [],\n    yAxisLeft,\n    yAxisRight,\n    colors = themeColorRange,\n    xAxisLabelFormatter = defaultValueFormatter,\n    startEndOnly = false,\n    animationDuration = 900,\n    showAnimation = false,\n    showXAxis = true,\n    showYAxis = true,\n    intervalType = 'equidistantPreserveStart',\n    showTooltip = true,\n    showLegend = true,\n    showGridLines = true,\n    allowDecimals = true,\n    noDataText,\n    enableLegendSlider = false,\n    rotateLabelX,\n    tickGap = 5,\n    loading,\n    xAxisLabel,\n    className,\n    width = '100%',\n    height = 280,\n    style,\n    ...rest\n  } = props;\n\n  const [legendHeight, setLegendHeight] = useState(60);\n\n  const seriesColorMap = useMemo(() => {\n    const map = new Map<string, string>();\n    series.forEach((s, i) => {\n      map.set(s.key, s.color ?? colors[i % colors.length]);\n    });\n    return map;\n  }, [series, colors]);\n\n  const categoryColors = seriesColorMap;\n  const customCategories = useMemo(() => {\n    return series.reduce<Record<string, string>>((acc, item) => {\n      if (item.name) acc[item.key] = item.name;\n      return acc;\n    }, {});\n  }, [series]);\n\n  const hasRightAxis = series.some((s) => s.axis === 'right');\n\n  const leftYAxisWidth = useMemo(() => {\n    if (yAxisLeft?.width) return yAxisLeft.width;\n    const leftFormatter = yAxisLeft?.valueFormatter ?? defaultValueFormatter;\n    return getMaxLabelLength({ data, index, layout: 'horizontal', valueFormatter: leftFormatter });\n  }, [yAxisLeft, data, index]);\n\n  const rightYAxisWidth = useMemo(() => {\n    if (yAxisRight?.width) return yAxisRight.width;\n    const rightFormatter = yAxisRight?.valueFormatter ?? defaultValueFormatter;\n    return getMaxLabelLength({ data, index, layout: 'horizontal', valueFormatter: rightFormatter });\n  }, [yAxisRight, data, index]);\n\n  if (loading || !data) return <Skeleton height={height} width={width} />;\n\n  const paddingValue = !showXAxis && !showYAxis ? 0 : 20;\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          <ReChartsComposedChart\n            data={data}\n            margin={{\n              bottom: xAxisLabel ? 30 : undefined,\n              left: yAxisLeft?.label ? 20 : undefined,\n              right: hasRightAxis ? (yAxisRight?.label ? 20 : 5) : undefined,\n              top: 5,\n            }}\n          >\n            {showGridLines && (\n              <CartesianGrid className={styles.gridLines} horizontal vertical={false} />\n            )}\n\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                  style={{\n                    fill: cssVar.colorTextSecondary,\n                    fontWeight: 500,\n                    textAnchor: 'middle',\n                  }}\n                >\n                  {xAxisLabel}\n                </Label>\n              )}\n            </XAxis>\n\n            {/* Left Y Axis */}\n            <YAxis\n              allowDecimals={allowDecimals}\n              axisLine={false}\n              className={styles.label}\n              domain={yAxisLeft?.domain}\n              fill=\"\"\n              hide={!showYAxis}\n              orientation=\"left\"\n              stroke=\"\"\n              tick={(tickProps) => (\n                <CustomYAxisTick\n                  {...tickProps}\n                  align=\"left\"\n                  formatter={yAxisLeft?.valueFormatter ?? defaultValueFormatter}\n                  yAxisLabel={Boolean(yAxisLeft?.label)}\n                />\n              )}\n              tickFormatter={yAxisLeft?.valueFormatter ?? defaultValueFormatter}\n              tickLine={false}\n              type=\"number\"\n              width={leftYAxisWidth}\n              yAxisId=\"left\"\n            >\n              {yAxisLeft?.label && (\n                <Label\n                  angle={-90}\n                  className={styles.emphasis}\n                  offset={-15}\n                  position=\"insideLeft\"\n                  style={{\n                    fill: cssVar.colorTextSecondary,\n                    fontWeight: 500,\n                    textAnchor: 'middle',\n                  }}\n                >\n                  {yAxisLeft.label}\n                </Label>\n              )}\n            </YAxis>\n\n            {/* Right Y Axis */}\n            {hasRightAxis && (\n              <YAxis\n                allowDecimals={allowDecimals}\n                axisLine={false}\n                className={styles.label}\n                domain={yAxisRight?.domain}\n                fill=\"\"\n                hide={!showYAxis}\n                orientation=\"right\"\n                stroke=\"\"\n                tick={(tickProps) => (\n                  <CustomYAxisTick\n                    {...tickProps}\n                    align=\"right\"\n                    anchor=\"start\"\n                    formatter={yAxisRight?.valueFormatter ?? defaultValueFormatter}\n                    yAxisLabel={Boolean(yAxisRight?.label)}\n                  />\n                )}\n                tickFormatter={yAxisRight?.valueFormatter ?? defaultValueFormatter}\n                tickLine={false}\n                type=\"number\"\n                width={rightYAxisWidth}\n                yAxisId=\"right\"\n              >\n                {yAxisRight?.label && (\n                  <Label\n                    angle={90}\n                    className={styles.emphasis}\n                    offset={-15}\n                    position=\"insideRight\"\n                    style={{\n                      fill: cssVar.colorTextSecondary,\n                      fontWeight: 500,\n                      textAnchor: 'middle',\n                    }}\n                  >\n                    {yAxisRight.label}\n                  </Label>\n                )}\n              </YAxis>\n            )}\n\n            {showLegend && (\n              <Legend\n                content={({ payload }) =>\n                  ChartLegend(\n                    { payload },\n                    categoryColors,\n                    setLegendHeight,\n                    undefined,\n                    undefined,\n                    enableLegendSlider,\n                    customCategories,\n                  )\n                }\n                height={legendHeight}\n                verticalAlign=\"top\"\n              />\n            )}\n\n            {series.map((s) => {\n              const color = seriesColorMap.get(s.key) ?? cssVar.colorPrimary;\n              const axisId = s.axis ?? 'left';\n\n              if (s.type === 'bar') {\n                return (\n                  <Bar\n                    animationDuration={animationDuration}\n                    className={cx(css`\n                      fill: ${color};\n                    `)}\n                    dataKey={s.key}\n                    fill=\"\"\n                    isAnimationActive={showAnimation}\n                    key={s.key}\n                    name={s.key}\n                    yAxisId={axisId}\n                  />\n                );\n              }\n\n              if (s.type === 'line') {\n                return (\n                  <Line\n                    animationDuration={animationDuration}\n                    className={cx(css`\n                      stroke: ${color};\n                    `)}\n                    dataKey={s.key}\n                    dot={false}\n                    isAnimationActive={showAnimation}\n                    key={s.key}\n                    name={s.key}\n                    stroke=\"\"\n                    strokeWidth={2}\n                    type=\"monotone\"\n                    yAxisId={axisId}\n                  />\n                );\n              }\n\n              return null;\n            })}\n\n            {showTooltip && (\n              <Tooltip\n                content={({ active, payload, label }) => (\n                  <ChartTooltip\n                    active={active}\n                    categoryColors={categoryColors}\n                    customCategories={customCategories}\n                    label={label}\n                    payload={payload}\n                    valueFormatter={(value, name) => {\n                      const currentSeries = series.find((item) => item.key === name);\n                      const formatter =\n                        currentSeries?.valueFormatter ??\n                        (currentSeries?.axis === 'right'\n                          ? yAxisRight?.valueFormatter\n                          : yAxisLeft?.valueFormatter) ??\n                        defaultValueFormatter;\n\n                      return formatter(value);\n                    }}\n                  />\n                )}\n                cursor={{ stroke: cssVar.colorTextSecondary, strokeWidth: 1 }}\n                isAnimationActive={false}\n                position={{ y: 0 }}\n                wrapperStyle={{ outline: 'none' }}\n              />\n            )}\n          </ReChartsComposedChart>\n        ) : (\n          <NoData noDataText={noDataText} />\n        )}\n      </ResponsiveContainer>\n    </Flexbox>\n  );\n});\n\nComposedChart.displayName = 'ComposedChart';\n\nexport default ComposedChart;\n"],"mappings":"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"}