Spaces:
Sleeping
Sleeping
File size: 2,646 Bytes
8ac8526 c21180c 8ac8526 c21180c 8ac8526 c21180c 8ac8526 c21180c 8ac8526 c21180c 8ac8526 c21180c 8ac8526 c21180c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 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>
);
}
|