add alert-level-changes widget with working time range selector

This commit is contained in:
2026-08-18 21:20:49 +00:00
parent 7667235fdb
commit 7f92ddd62b
9 changed files with 318 additions and 86 deletions
@@ -2,7 +2,8 @@ import { useMemo } from 'react';
import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
import { useColorMode } from "@/components/ui/color-mode.jsx";
import Plot from 'react-plotly.js';
import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
import VdapApi from '../../hooks/useVdapApi.js';
import useBuildUrl from "@/hooks/useBuildUrl.js";
export default function ExplosionEvents({ settings, widgetID }) {
// Plotly expects 'linear' for normal axes
@@ -12,22 +13,8 @@ export default function ExplosionEvents({ settings, widgetID }) {
const { colorMode } = useColorMode();
const isDark = colorMode === 'dark';
// Generate url with input dates are default to 7 day range
const url = useMemo(() =>{
if (settings?.startDate && settings?.endDate)
return '/api/v2/explosion_events?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate;
else {
const base_url = '/api/v2/explosion_events';
let today = new Date();
let sevenDaysAgo = new Date(today);
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA');
today = today.toLocaleDateString('en-CA');
return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today;
}
}, [settings?.startDate, settings?.endDate]);
// Generate url with input dates, default to 7 day range
const url = useBuildUrl('/api/v2/explosion_events', settings?.startDate, settings?.endDate);
// Clean, single-line data fetching
const { data: apiData, isLoading, error } = VdapApi(url);