zhixing-system/zhixing-web/src/features/selection/components/selection-chart.tsx

import { useEffect, useRef } from "react"
import { BarChart, CandlestickChart, LineChart } from "echarts/charts"
import {
  AxisPointerComponent,
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from "echarts/components"
import * as echarts from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"

import { cn } from "@/shared/ui/utils"

import type { SelectionChart as SelectionChartData } from "../api/selection.types"
import { buildSelectionChartOption } from "./selection-chart-option"

echarts.use([
  AxisPointerComponent,
  BarChart,
  CanvasRenderer,
  CandlestickChart,
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  TitleComponent,
  TooltipComponent,
])

interface SelectionChartProps {
  chart: SelectionChartData
  className?: string
}

export function SelectionChart({ chart, className }: SelectionChartProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const instanceRef = useRef<echarts.EChartsType | null>(null)

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    const instance = echarts.init(container, undefined, {
      renderer: "canvas",
    })
    instanceRef.current = instance
    const observer = new ResizeObserver(() => instance.resize())
    observer.observe(container)

    return () => {
      observer.disconnect()
      instance.dispose()
      instanceRef.current = null
    }
  }, [])

  useEffect(() => {
    instanceRef.current?.setOption(buildSelectionChartOption(chart.points), {
      notMerge: true,
    })
  }, [chart.points])

  return (
    <div
      aria-label={`${chart.name} 日线、知行黄白线、成交量和 KDJ 图表`}
      className={cn("h-full min-h-70 w-full", className)}
      ref={containerRef}
      role="img"
    />
  )
}