Spaces:
Sleeping
Sleeping
| import React, { useEffect, useState, useRef } from 'react'; | |
| import ReactEChartsCore from 'echarts-for-react'; | |
| import * as echarts from 'echarts'; | |
| import { useChart } from '../api/hooks'; | |
| import { useUIStore } from '../store/ui'; | |
| import { getChartType } from '../lib/chartTypes'; | |
| interface Props { | |
| cellId: string; | |
| config: Record<string, any>; | |
| } | |
| export function ChartCellView({ cellId, config }: Props) { | |
| const [chartSpec, setChartSpec] = useState<Record<string, any> | null>(null); | |
| const [chartType, setChartType] = useState<string>(config.chartType || ''); | |
| const { create, loading, error } = useChart(); | |
| const { addError } = useUIStore(); | |
| const containerRef = useRef<HTMLDivElement>(null); | |
| useEffect(() => { | |
| if (config.chartType && config.params) { | |
| loadChart(config.chartType, config.params); | |
| } | |
| }, [config]); | |
| const loadChart = async (type: string, params: Record<string, any>) => { | |
| const result = await create(type, params); | |
| if (result) { | |
| setChartSpec(result.spec); | |
| setChartType(result.chart_type); | |
| } else if (error) { | |
| addError(`Chart error: ${error}`); | |
| } | |
| }; | |
| if (!chartSpec && !loading) { | |
| const ct = getChartType(config.chartType || ''); | |
| return ( | |
| <div className="text-center py-8 text-gray-400"> | |
| <svg className="w-12 h-12 mx-auto mb-2 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /> | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" /> | |
| </svg> | |
| <p className="text-sm"> | |
| {ct ? `${ct.label} — use the Visualize tab to configure` : 'Use the Visualize tab to create charts'} | |
| </p> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div ref={containerRef} className="chart-cell-container"> | |
| {loading && ( | |
| <div className="flex items-center justify-center py-8"> | |
| <div className="animate-spin w-6 h-6 border-2 border-brand-500 border-t-transparent rounded-full mr-2" /> | |
| Computing chart... | |
| </div> | |
| )} | |
| {chartSpec && ( | |
| <div className="w-full min-w-0" style={{ minHeight: 350 }}> | |
| <ReactEChartsCore | |
| echarts={echarts} | |
| option={chartSpec} | |
| style={{ height: 350, width: '100%' }} | |
| notMerge={true} | |
| lazyUpdate={true} | |
| opts={{ renderer: 'canvas' }} | |
| /> | |
| </div> | |
| )} | |
| {error && <p className="text-red-500 text-sm mt-2">{error}</p>} | |
| </div> | |
| ); | |
| } | |