visualifyjs 2.5.3 → 3.0.0

package/src/core/components/LargeDatasetChart.js

@@ -0,0 +1,296 @@
+/**
+ * @fileoverview Large Dataset Chart Component
+ * @module core/components/LargeDatasetChart
+ *
+ * Optimized chart component for handling large datasets using Web Workers
+ * for data processing and sampling for preview rendering.
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import ReCharts from '../modules/echarts';
+import Loading from '../pages/loading';
+import {
+	getDataProcessor,
+	sampleData,
+	calculateStatistics,
+	filterData,
+} from '../data-processor';
+
+/**
+ * Default configuration for large dataset charts
+ */
+const DEFAULT_CONFIG = {
+	sampleSize: 10000,
+	progressiveThreshold: 50000,
+	progressiveChunkSize: 5000,
+	enableWorkerProcessing: true,
+	showDataSummary: true,
+};
+
+/**
+ * LargeDatasetChart Component
+ * Handles datasets with 100k+ rows efficiently using Web Workers
+ *
+ * @param {Object} props - Component props
+ * @param {Object} props.config - Chart configuration
+ * @param {Object} props.style - CSS styles
+ * @param {React.Ref} ref - Forwarded ref
+ */
+const LargeDatasetChart = React.forwardRef(({ config, style }, ref) => {
+	const {
+		data,
+		type = 'line',
+		sampleSize = DEFAULT_CONFIG.sampleSize,
+		progressiveThreshold = DEFAULT_CONFIG.progressiveThreshold,
+		enableWorkerProcessing = DEFAULT_CONFIG.enableWorkerProcessing,
+		showDataSummary = DEFAULT_CONFIG.showDataSummary,
+		...chartConfig
+	} = config;
+
+	const [processedData, setProcessedData] = useState(null);
+	const [loading, setLoading] = useState({
+		active: true,
+		message: 'Processing data...',
+		progress: 0,
+	});
+	const [dataSummary, setDataSummary] = useState(null);
+	const [error, setError] = useState(null);
+
+	const processorRef = useRef(null);
+	const abortControllerRef = useRef(null);
+
+	// Initialize data processor
+	useEffect(() => {
+		if (enableWorkerProcessing) {
+			processorRef.current = getDataProcessor();
+		}
+		return () => {
+			if (abortControllerRef.current) {
+				abortControllerRef.current.abort();
+			}
+		};
+	}, [enableWorkerProcessing]);
+
+	// Process data when it changes
+	useEffect(() => {
+		const processData = async () => {
+			if (!data || !Array.isArray(data)) {
+				setError('Invalid data provided');
+				return;
+			}
+
+			// Reset state
+			setError(null);
+			setLoading({
+				active: true,
+				message: `Processing ${data.length.toLocaleString()} data points...`,
+				progress: 0,
+			});
+
+			abortControllerRef.current = new AbortController();
+
+			try {
+				let displayData = data;
+				let summary = null;
+
+				// For very large datasets, use sampling
+				if (data.length > sampleSize) {
+					setLoading((prev) => ({
+						...prev,
+						message: `Sampling ${sampleSize.toLocaleString()} points from ${data.length.toLocaleString()}...`,
+					}));
+
+					if (enableWorkerProcessing && processorRef.current) {
+						displayData = await sampleData(data, sampleSize);
+					} else {
+						// Fallback to main thread sampling
+						const step = data.length / sampleSize;
+						displayData = [];
+						for (let i = 0; i < sampleSize; i++) {
+							displayData.push(data[Math.floor(i * step)]);
+						}
+					}
+
+					// Calculate summary statistics
+					if (showDataSummary && enableWorkerProcessing) {
+						const numericFields = Object.keys(data[0]).filter(
+							(key) => typeof data[0][key] === 'number'
+						);
+
+						if (numericFields.length > 0) {
+							summary = await calculateStatistics(data, numericFields[0]);
+						}
+					}
+				}
+
+				// Process data in chunks for progressive rendering
+				if (data.length > progressiveThreshold) {
+					setLoading((prev) => ({
+						...prev,
+						message: 'Preparing progressive rendering...',
+						progress: 50,
+					}));
+				}
+
+				setProcessedData(displayData);
+				setDataSummary(summary);
+				setLoading({ active: false, message: null, progress: 100 });
+			} catch (err) {
+				if (err.name !== 'AbortError') {
+					console.error('[LargeDatasetChart] Processing error:', err);
+					setError(err.message);
+					setLoading({ active: false, message: null, progress: 0 });
+				}
+			}
+		};
+
+		processData();
+	}, [data, sampleSize, progressiveThreshold, enableWorkerProcessing, showDataSummary]);
+
+	// Generate chart options
+	const chartOptions = useMemo(() => {
+		if (!processedData) return null;
+
+		return {
+			title: {
+				text: chartConfig.title || 'Large Dataset Chart',
+				subtext: data.length > sampleSize
+					? `Showing ${sampleSize.toLocaleString()} of ${data.length.toLocaleString()} points`
+					: `${data.length.toLocaleString()} points`,
+				left: 'center',
+			},
+			tooltip: {
+				trigger: 'axis',
+				...chartConfig.tooltip,
+			},
+			xAxis: {
+				type: 'category',
+				data: processedData.map((_, i) => i),
+				...chartConfig.xAxis,
+			},
+			yAxis: {
+				type: 'value',
+				...chartConfig.yAxis,
+			},
+			series: [
+				{
+					type,
+					data: processedData,
+					large: data.length > progressiveThreshold,
+					largeThreshold: progressiveThreshold,
+					progressive: 5000,
+					progressiveThreshold: progressiveThreshold,
+					...chartConfig.series,
+				},
+			],
+			dataZoom: data.length > sampleSize ? [
+				{ type: 'inside', start: 0, end: 100 },
+				{ type: 'slider', start: 0, end: 100 },
+			] : undefined,
+			toolbox: {
+				feature: {
+					dataZoom: { show: true },
+					restore: { show: true },
+					saveAsImage: { show: true },
+				},
+			},
+		};
+	}, [processedData, data.length, sampleSize, progressiveThreshold, type, chartConfig]);
+
+	// Handle data filtering
+	const handleFilter = useCallback(async (criteria) => {
+		if (!enableWorkerProcessing || !processorRef.current) {
+			console.warn('[LargeDatasetChart] Worker processing not enabled');
+			return;
+		}
+
+		setLoading({
+			active: true,
+			message: 'Filtering data...',
+			progress: 0,
+		});
+
+		try {
+			const filtered = await filterData(data, criteria);
+			setProcessedData(filtered);
+			setLoading({ active: false, message: null, progress: 100 });
+		} catch (err) {
+			setError(err.message);
+			setLoading({ active: false, message: null, progress: 0 });
+		}
+	}, [data, enableWorkerProcessing]);
+
+	// Render error state
+	if (error) {
+		return (
+			<div
+				style={{
+					...style,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					backgroundColor: '#f5f5f5',
+					border: '1px solid #ddd',
+					borderRadius: '4px',
+					padding: '20px',
+					textAlign: 'center',
+				}}
+			>
+				<div>
+					<h4>Error Processing Data</h4>
+					<p style={{ color: '#666', marginTop: '10px' }}>{error}</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div style={{ ...style, position: 'relative' }}>
+			{loading.active && (
+				<Loading
+					message={loading.message}
+					progress={loading.progress}
+					style={{ marginTop: '10px' }}
+				/>
+			)}
+
+			{showDataSummary && dataSummary && (
+				<div
+					style={{
+						position: 'absolute',
+						top: '10px',
+						right: '10px',
+						background: 'rgba(255,255,255,0.9)',
+						padding: '10px',
+						borderRadius: '4px',
+						boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+						fontSize: '12px',
+						zIndex: 10,
+					}}
+				>
+					<div><strong>Data Summary</strong></div>
+					<div>Count: {dataSummary.count?.toLocaleString()}</div>
+					<div>Mean: {dataSummary.mean?.toFixed(2)}</div>
+					<div>Min: {dataSummary.min?.toFixed(2)}</div>
+					<div>Max: {dataSummary.max?.toFixed(2)}</div>
+				</div>
+			)}
+
+			{chartOptions && (
+				<ReCharts
+					ref={ref}
+					options={chartOptions}
+					style={{
+						width: config.chartWidth || '100%',
+						height: config.chartHeight || '400px',
+						opacity: loading.active ? 0.5 : 1,
+					}}
+				/>
+			)}
+		</div>
+	);
+});
+
+LargeDatasetChart.displayName = 'LargeDatasetChart';
+
+export default LargeDatasetChart;

package/src/core/components/Line3D.js

@@ -0,0 +1,310 @@
+/**
+ * Line3D Component
+ * 3D line chart visualization using ECharts GL
+ * Supports trajectory visualization with multiple line series
+ * @module components/Line3D
+ */
+
+import React, { useState, useEffect, forwardRef, useCallback } from 'react';
+import ReCharts from '../modules/echarts';
+import {
+	loadEChartsGL,
+	isWebGLSupported,
+	display3DError,
+	cleanupWebGL,
+} from '../modules/echarts/gl';
+import Loading from '../pages/loading';
+
+/**
+ * Default configuration for 3D line charts
+ */
+const DEFAULT_CONFIG = {
+	lineStyle: {
+		width: 4,
+	},
+	symbolSize: 8,
+};
+
+/**
+ * Processes data for 3D line chart
+ * Supports multiple series and data formats
+ * @param {Array|Object} data - Input data
+ * @returns {Array} Processed series data
+ */
+const processLineData = (data) => {
+	if (!data) return [];
+
+	// Single series format: [[x, y, z], ...] or {x: [], y: [], z: []}
+	if (Array.isArray(data)) {
+		// Check if it's already in the correct format
+		if (data.length > 0 && Array.isArray(data[0]) && data[0].length === 3) {
+			return [{ data, name: 'Series 1' }];
+		}
+		// Array of series objects
+		if (data.length > 0 && data[0].data) {
+			return data;
+		}
+	}
+
+	// Object format: {x: [], y: [], z: []}
+	if (typeof data === 'object' && !Array.isArray(data)) {
+		const { x, y, z } = data;
+		if (Array.isArray(x) && Array.isArray(y) && Array.isArray(z)) {
+			const combined = x.map((xi, i) => [xi, y[i], z[i]]);
+			return [{ data: combined, name: 'Series 1' }];
+		}
+	}
+
+	return [];
+};
+
+/**
+ * Generates ECharts option for 3D line chart
+ * @param {Object} config - Component configuration
+ * @returns {Object} ECharts option object
+ */
+const getOptions = (config) => {
+	const {
+		title,
+		data,
+		xAxis3D,
+		yAxis3D,
+		zAxis3D,
+		grid3D,
+		visualMap,
+		series: seriesConfig,
+		backgroundColor,
+		color,
+		tooltip,
+		legend,
+		toolbox,
+	} = config;
+
+	// Process data into series
+	const seriesData = processLineData(data);
+
+	if (seriesData.length === 0) {
+		throw new Error('Line3D requires valid data');
+	}
+
+	// Build series array
+	const series = seriesData.map((s, index) => ({
+		type: 'line3D',
+		name: s.name || `Series ${index + 1}`,
+		data: s.data,
+		lineStyle: {
+			width: seriesConfig?.lineStyle?.width ?? DEFAULT_CONFIG.lineStyle.width,
+			color: seriesConfig?.lineStyle?.color || (color?.[index]),
+			...seriesConfig?.lineStyle,
+		},
+		symbolSize: seriesConfig?.symbolSize ?? DEFAULT_CONFIG.symbolSize,
+		symbol: seriesConfig?.symbol || 'circle',
+		emphasis: {
+			lineStyle: {
+				width: (seriesConfig?.lineStyle?.width ?? DEFAULT_CONFIG.lineStyle.width) + 2,
+			},
+		},
+		...seriesConfig,
+	}));
+
+	const options = {
+		title:
+			typeof title === 'string'
+				? { text: title }
+				: { left: 'center', top: 0, ...title },
+		tooltip: {
+			trigger: 'item',
+			formatter:
+				tooltip?.formatter ||
+				((params) => {
+					const [x, y, z] = params.value;
+					return `${params.seriesName}<br/>X: ${x}<br/>Y: ${y}<br/>Z: ${z}`;
+				}),
+			...tooltip,
+		},
+		legend: legend ?? {
+			show: series.length > 1,
+			data: series.map((s) => s.name),
+		},
+		visualMap: visualMap ?? undefined,
+		xAxis3D: {
+			name: xAxis3D?.name || 'X',
+			type: xAxis3D?.type || 'value',
+			nameGap: 25,
+			...xAxis3D,
+		},
+		yAxis3D: {
+			name: yAxis3D?.name || 'Y',
+			type: yAxis3D?.type || 'value',
+			nameGap: 25,
+			...yAxis3D,
+		},
+		zAxis3D: {
+			name: zAxis3D?.name || 'Z',
+			type: zAxis3D?.type || 'value',
+			nameGap: 25,
+			...zAxis3D,
+		},
+		grid3D: {
+			boxWidth: 100,
+			boxDepth: 80,
+			boxHeight: 60,
+			viewControl: {
+				autoRotate: false,
+				projection: 'perspective',
+				...grid3D?.viewControl,
+			},
+			light: {
+				main: {
+					intensity: 1.2,
+					shadow: true,
+				},
+				ambient: {
+					intensity: 0.3,
+				},
+			},
+			...grid3D,
+		},
+		series,
+	};
+
+	if (backgroundColor) {
+		options.backgroundColor = backgroundColor;
+	}
+
+	if (color) {
+		options.color = color;
+	}
+
+	if (toolbox) {
+		options.toolbox = {
+			feature: {
+				...toolbox,
+				saveAsImage: { show: toolbox.saveAsImage?.show ?? false },
+			},
+		};
+	}
+
+	return options;
+};
+
+/**
+ * Line3D Component - 3D line chart visualization
+ * @param {Object} props - Component props
+ * @param {Object} props.props - Configuration object
+ * @param {Object} props.style - CSS styles
+ * @param {React.Ref} ref - Forwarded ref
+ */
+const Line3D = forwardRef(({ props, style }, ref) => {
+	const { config = {} } = props;
+	const [options, setOptions] = useState(null);
+	const [loading, setLoading] = useState({
+		active: true,
+		message: 'Loading 3D library...',
+	});
+	const [error, setError] = useState(null);
+
+	/**
+	 * Initialize ECharts GL and set up chart options
+	 */
+	const initChart = useCallback(async () => {
+		try {
+			setLoading({ active: true, message: 'Loading 3D library...' });
+			setError(null);
+
+			// Check WebGL support
+			if (!isWebGLSupported()) {
+				throw new Error('WebGL not supported');
+			}
+
+			// Lazy load ECharts GL
+			await loadEChartsGL();
+
+			// Generate chart options
+			const chartOptions = getOptions(config);
+			setOptions(chartOptions);
+			setLoading({ active: false, message: null });
+		} catch (err) {
+			const errorMessage = display3DError(err, { useToast: true });
+			setError(errorMessage);
+			setLoading({ active: true, message: errorMessage });
+		}
+	}, [config]);
+
+	// Initialize chart on mount and config change
+	useEffect(() => {
+		initChart();
+	}, [initChart]);
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			if (ref?.current) {
+				cleanupWebGL(ref.current.getEchartsInstance?.());
+			}
+		};
+	}, [ref]);
+
+	// Handle resize
+	useEffect(() => {
+		const handleResize = () => {
+			if (ref?.current) {
+				const chart = ref.current.getEchartsInstance?.();
+				if (chart && !chart.isDisposed()) {
+					chart.resize();
+				}
+			}
+		};
+
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, [ref]);
+
+	// Render error state
+	if (error) {
+		return (
+			<div
+				id={props.id}
+				style={{
+					...style,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					backgroundColor: '#f5f5f5',
+					border: '1px solid #ddd',
+					borderRadius: '4px',
+					padding: '20px',
+					textAlign: 'center',
+				}}
+			>
+				<div>
+					<h4>3D Chart Unavailable</h4>
+					<p style={{ color: '#666', marginTop: '10px' }}>{error}</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div id={props.id} style={{ ...style, position: 'relative' }}>
+			{loading.active && (
+				<Loading message={loading.message} style={{ marginTop: '10px' }} />
+			)}
+			{options && (
+				<ReCharts
+					ref={ref}
+					options={options}
+					style={{
+						width: config.chartWidth || '100%',
+						height: config.chartHeight || '400px',
+						opacity: loading.active ? 0 : 1,
+					}}
+				/>
+			)}
+		</div>
+	);
+});
+
+Line3D.displayName = 'Line3D';
+
+export default Line3D;