{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"echart","type":"registry:ui","title":"EChart","description":"Generic chart wrapper.","package":"fancy-echarts","dependencies":["echarts"],"registryDependencies":["types"],"files":[{"path":"components\/fancy\/echart\/EChart.tsx","content":"import React, { forwardRef, useMemo } from \"react\";\r\nimport type { EChartsOption } from \"echarts\";\r\nimport { useECharts } from \"..\/hooks\/use-echarts\";\r\nimport type {\r\n  EChartComponentProps,\r\n  SeriesComponentProps,\r\n  ChartDivProps,\r\n} from \"..\/types\";\r\n\r\nconst DEFAULT_STYLE: React.CSSProperties = { width: \"100%\", height: 400 };\r\n\r\n\/** Base EChart component \u2014 accepts any ECharts option. *\/\r\nconst EChartBase = forwardRef<HTMLDivElement, EChartComponentProps>(\r\n  (\r\n    {\r\n      option,\r\n      theme,\r\n      renderer,\r\n      notMerge,\r\n      lazyUpdate,\r\n      showLoading,\r\n      loadingOption,\r\n      onEvents,\r\n      autoResize = true,\r\n      style,\r\n      className,\r\n      ...rest\r\n    },\r\n    _ref\r\n  ) => {\r\n    const { chartRef } = useECharts({\r\n      option,\r\n      theme,\r\n      renderer,\r\n      notMerge,\r\n      lazyUpdate,\r\n      showLoading,\r\n      loadingOption,\r\n      onEvents,\r\n      autoResize,\r\n    });\r\n\r\n    return (\r\n      <div\r\n        ref={chartRef}\r\n        style={{ ...DEFAULT_STYLE, ...style }}\r\n        className={className}\r\n        {...rest}\r\n      \/>\r\n    );\r\n  }\r\n);\r\n\r\nEChartBase.displayName = \"EChart\";\r\n\r\n\/\/ --- Helper to create typed series sub-components ---\r\n\r\nfunction createSeriesComponent(\r\n  seriesType: string,\r\n  displayName: string\r\n): React.FC<SeriesComponentProps & ChartDivProps> {\r\n  const Component: React.FC<SeriesComponentProps & ChartDivProps> = ({\r\n    data,\r\n    title,\r\n    xAxis,\r\n    yAxis,\r\n    tooltip = true,\r\n    legend = false,\r\n    grid,\r\n    seriesOptions = {},\r\n    option: extraOption = {},\r\n    style,\r\n    className,\r\n    ...rest\r\n  }) => {\r\n    const option = useMemo((): EChartsOption => {\r\n      const base: EChartsOption = {};\r\n\r\n      if (title) {\r\n        base.title = { text: title };\r\n      }\r\n\r\n      if (tooltip === true) {\r\n        base.tooltip = { trigger: \"axis\" };\r\n      } else if (tooltip && typeof tooltip === \"object\") {\r\n        base.tooltip = tooltip;\r\n      }\r\n\r\n      if (legend === true) {\r\n        base.legend = {};\r\n      } else if (legend && typeof legend === \"object\") {\r\n        base.legend = legend;\r\n      }\r\n\r\n      if (grid) {\r\n        base.grid = grid;\r\n      }\r\n\r\n      \/\/ Handle axis-based charts\r\n      const axisCharts = [\r\n        \"line\",\r\n        \"bar\",\r\n        \"scatter\",\r\n        \"candlestick\",\r\n        \"boxplot\",\r\n        \"heatmap\",\r\n        \"effectScatter\",\r\n        \"pictorialBar\",\r\n      ];\r\n      if (axisCharts.includes(seriesType)) {\r\n        base.xAxis = xAxis ?? { type: \"category\" };\r\n        base.yAxis = yAxis ?? { type: \"value\" };\r\n      }\r\n\r\n      \/\/ Handle data format\r\n      if (Array.isArray(data)) {\r\n        base.series = [{ type: seriesType, data, ...seriesOptions }] as any;\r\n      } else if (data && typeof data === \"object\" && \"series\" in data) {\r\n        \/\/ Multi-series: { categories: [...], series: [{ name, data }, ...] }\r\n        const multiData = data as {\r\n          categories?: string[];\r\n          series: Array<{ name?: string; data: any[]; [k: string]: any }>;\r\n        };\r\n        if (multiData.categories && axisCharts.includes(seriesType)) {\r\n          base.xAxis = xAxis ?? {\r\n            type: \"category\",\r\n            data: multiData.categories,\r\n          };\r\n        }\r\n        base.series = multiData.series.map((s) => ({\r\n          type: seriesType,\r\n          ...seriesOptions,\r\n          ...s,\r\n        })) as any;\r\n      } else {\r\n        base.series = [{ type: seriesType, data, ...seriesOptions }] as any;\r\n      }\r\n\r\n      return { ...base, ...extraOption };\r\n    }, [\r\n      data,\r\n      title,\r\n      xAxis,\r\n      yAxis,\r\n      tooltip,\r\n      legend,\r\n      grid,\r\n      seriesOptions,\r\n      extraOption,\r\n    ]);\r\n\r\n    return (\r\n      <EChartBase\r\n        option={option}\r\n        style={style}\r\n        className={className}\r\n        {...rest}\r\n      \/>\r\n    );\r\n  };\r\n\r\n  Component.displayName = displayName;\r\n  return Component;\r\n}\r\n\r\n\/\/ --- Compound component with all chart type sub-components ---\r\n\r\nexport const EChart = Object.assign(EChartBase, {\r\n  Line: createSeriesComponent(\"line\", \"EChart.Line\"),\r\n  Bar: createSeriesComponent(\"bar\", \"EChart.Bar\"),\r\n  Pie: createSeriesComponent(\"pie\", \"EChart.Pie\"),\r\n  Scatter: createSeriesComponent(\"scatter\", \"EChart.Scatter\"),\r\n  Radar: createSeriesComponent(\"radar\", \"EChart.Radar\"),\r\n  Heatmap: createSeriesComponent(\"heatmap\", \"EChart.Heatmap\"),\r\n  Gauge: createSeriesComponent(\"gauge\", \"EChart.Gauge\"),\r\n  Funnel: createSeriesComponent(\"funnel\", \"EChart.Funnel\"),\r\n  Treemap: createSeriesComponent(\"treemap\", \"EChart.Treemap\"),\r\n  Sunburst: createSeriesComponent(\"sunburst\", \"EChart.Sunburst\"),\r\n  Sankey: createSeriesComponent(\"sankey\", \"EChart.Sankey\"),\r\n  Graph: createSeriesComponent(\"graph\", \"EChart.Graph\"),\r\n  Candlestick: createSeriesComponent(\"candlestick\", \"EChart.Candlestick\"),\r\n  Boxplot: createSeriesComponent(\"boxplot\", \"EChart.Boxplot\"),\r\n  Parallel: createSeriesComponent(\"parallel\", \"EChart.Parallel\"),\r\n  ThemeRiver: createSeriesComponent(\"themeRiver\", \"EChart.ThemeRiver\"),\r\n  Map: createSeriesComponent(\"map\", \"EChart.Map\"),\r\n  Custom: createSeriesComponent(\"custom\", \"EChart.Custom\"),\r\n  EffectScatter: createSeriesComponent(\r\n    \"effectScatter\",\r\n    \"EChart.EffectScatter\"\r\n  ),\r\n  PictorialBar: createSeriesComponent(\"pictorialBar\", \"EChart.PictorialBar\"),\r\n});\r\n","type":"registry:ui","target":"components\/fancy\/echart\/EChart.tsx"}]}