import React, { useRef, useEffect, useState } from 'react'; import { useDimensions } from './useDimensions'; import { createChart } from './chart/chart'; import './styles.css'; const App = () => { const containerRef = useRef(null); const [state, setState] = useState({ selectedMetric: 'bat_speed_mph_contact_x', isLoading: true, error: null, data: null }); const dimensions = useDimensions(containerRef); useEffect(() => { if (!containerRef.current || !dimensions) return; const cleanup = createChart(containerRef.current, { dimensions, selectedMetric: state.selectedMetric, onDataLoad: (data) => { setState(prev => ({ ...prev, data, isLoading: false })); }, onError: (error) => { setState(prev => ({ ...prev, error, isLoading: false })); } }); return cleanup; }, [dimensions, state.selectedMetric]); const handleMetricChange = (metric) => { setState(prev => ({ ...prev, selectedMetric: metric })); }; if (state.error) { return (

Error loading data

{state.error.message}

); } return (

X-Axis Metric:

{state.isLoading && (

)}

); }; export default App;

Fork of Hello VizHub

Nita