import { useMemo } from 'react';
import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
import Plot from 'react-plotly.js';
import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
export default function VaaActivity7Day() {
// ONE LINE to handle all fetching, loading, and error states!
const { data: apiData, isLoading, error } = VdapApi('/api/v2/comm_coor_vaa');
const plotTraces = useMemo(() => {
if (!apiData || apiData.length === 0) return [];
const groupedData = apiData.reduce((acc, curr) => {
const name = curr.volc_name || 'Unknown';
if (!acc[name]) acc[name] = { x: [], y: [], text: [] };
acc[name].x.push(new Date(curr.obs_va_epoch));
acc[name].y.push(curr.obs_fl);
acc[name].text.push(`Volcano: ${name}
Flight Level: ${curr.obs_fl}`);
return acc;
}, {});
return Object.keys(groupedData).map((volcanoName) => ({
name: volcanoName,
x: groupedData[volcanoName].x,
y: groupedData[volcanoName].y,
text: groupedData[volcanoName].text,
type: 'scatter',
mode: 'markers',
hoverinfo: 'text',
marker: { size: 8, line: { width: 1, color: 'white' } }
}));
}, [apiData]);
if (isLoading) return (
);
if (error) return (
{error}
);
if (plotTraces.length === 0) return (
No flight level data available.
);
return (
);
}