{
// Configuration for AboutHubOverlay based on viewType
const aboutHubConfig = {
- 'covid_projs': {
+ 'covid_forecasts': {
title: (
{
if (selectedDates.length === 0) return null;
- // Find the latest date
return selectedDates.slice().sort().pop();
}, [selectedDates]);
@@ -61,7 +60,7 @@ const FluView = ({ data, metadata, selectedDates, selectedModels, models, setSel
}, []);
const projectionsData = useMemo(() => {
- const targetForProjections = (viewType === 'flu' || viewType === 'flu_projs')
+ const targetForProjections = (viewType === 'flu' || viewType === 'flu_forecasts')
? selectedTarget
: 'wk inc flu hosp';
@@ -81,7 +80,8 @@ const FluView = ({ data, metadata, selectedDates, selectedModels, models, setSel
type: 'scatter',
mode: 'lines+markers',
line: { color: 'black', width: 2, dash: 'dash' },
- marker: { size: 4, color: 'black' }
+ marker: { size: 4, color: 'black' },
+ hovertemplate: 'Observed Data
Date: %{x}
Value: %{y}
` +
+ `Date: ${pointDate}
` +
+ `Median: ${formattedMedian}
` +
+ `50% CI: [${formatted50}]
` +
+ `95% CI: [${formatted95}]
` +
+ `predicted as of ${date}` +
+ `
'),
value: (horizon0.probabilities[horizon0.categories.indexOf(cat)] || 0) * 100
}));
- return { name: `${model} (${lastSelectedDate})`, y: orderedData.map(d => d.category), x: orderedData.map(d => d.value), type: 'bar', orientation: 'h', marker: { color: modelColor }, showlegend: true, legendgroup: 'histogram', xaxis: 'x2', yaxis: 'y2' };
+ return {
+ name: `${model} (${lastSelectedDate})`,
+ y: orderedData.map(d => d.category),
+ x: orderedData.map(d => d.value),
+ type: 'bar',
+ orientation: 'h',
+ marker: { color: modelColor },
+ showlegend: true,
+ legendgroup: 'histogram',
+ xaxis: 'x2',
+ yaxis: 'y2',
+ hovertemplate: '%{fullData.name}
%{y}: %{x:.1f}%
{
- const [yAxisRange, setYAxisRange] = useState(null);
- const [xAxisRange, setXAxisRange] = useState(null);
- const plotRef = useRef(null);
- const isResettingRef = useRef(false);
-
- const getDefaultRangeRef = useRef(getDefaultRange);
- const projectionsDataRef = useRef([]);
+const METRO_STATE_MAP = {
+ 'Colorado': 'CO', 'Georgia': 'GA', 'Indiana': 'IN', 'Maine': 'ME',
+ 'Maryland': 'MD', 'Massachusetts': 'MA', 'Minnesota': 'MN',
+ 'South Carolina': 'SC', 'Texas': 'TX', 'Utah': 'UT',
+ 'Virginia': 'VA', 'North Carolina': 'NC', 'Oregon': 'OR'
+};
- const { colorScheme } = useMantineColorScheme();
- const groundTruth = data?.ground_truth;
- const forecasts = data?.forecasts;
+const MetroPlotCard = ({
+ locationData,
+ title,
+ isSmall = false,
+ colorScheme,
+ selectedTarget,
+ selectedModels,
+ selectedDates,
+ getDefaultRange,
+ xAxisRange,
+ setXAxisRange
+}) => {
+ const [yAxisRange, setYAxisRange] = useState(null);
+ const groundTruth = locationData?.ground_truth;
+ const forecasts = locationData?.forecasts;
const calculateYRange = useCallback((plotData, xRange) => {
- if (!plotData || !xRange || !Array.isArray(plotData) || plotData.length === 0 || !selectedTarget) return null;
- let minY = Infinity;
- let maxY = -Infinity;
+ if (!plotData?.length || !xRange || !selectedTarget) return null;
+ let minY = Infinity, maxY = -Infinity;
const [startX, endX] = xRange;
- const startDate = new Date(startX);
- const endDate = new Date(endX);
+ const start = new Date(startX), end = new Date(endX);
plotData.forEach(trace => {
if (!trace.x || !trace.y) return;
for (let i = 0; i < trace.x.length; i++) {
- const pointDate = new Date(trace.x[i]);
- if (pointDate >= startDate && pointDate <= endDate) {
- const value = Number(trace.y[i]);
- if (!isNaN(value)) {
- minY = Math.min(minY, value);
- maxY = Math.max(maxY, value);
- }
+ const d = new Date(trace.x[i]);
+ if (d >= start && d <= end) {
+ const v = Number(trace.y[i]);
+ if (!isNaN(v)) { minY = Math.min(minY, v); maxY = Math.max(maxY, v); }
}
}
});
-
- if (minY !== Infinity && maxY !== -Infinity) {
- const padding = maxY * (CHART_CONSTANTS.Y_AXIS_PADDING_PERCENT / 100);
- return [Math.max(0, minY - padding), maxY + padding];
- }
- return null;
+ if (minY === Infinity) return null;
+ const pad = maxY * (CHART_CONSTANTS.Y_AXIS_PADDING_PERCENT / 100);
+ return [Math.max(0, minY - pad), maxY + pad];
}, [selectedTarget]);
const projectionsData = useMemo(() => {
- if (!groundTruth || !forecasts || selectedDates.length === 0 || !selectedTarget) return [];
-
- const groundTruthValues = groundTruth[selectedTarget];
- if (!groundTruthValues) return [];
-
- const groundTruthTrace = {
- x: groundTruth.dates || [],
- y: groundTruthValues,
- name: 'Observed',
- type: 'scatter',
- mode: 'lines+markers',
- line: { color: 'black', width: 2, dash: 'dash' },
- marker: { size: 4, color: 'black' }
- };
+ if (!groundTruth || !forecasts || !selectedTarget) return [];
+ const gtValues = groundTruth[selectedTarget];
+ if (!gtValues) return [];
- const modelTraces = selectedModels.flatMap(model =>
- selectedDates.flatMap((date, dateIndex) => {
- const forecastsForDate = forecasts[date] || {};
- const forecast = forecastsForDate[selectedTarget]?.[model];
- if (!forecast || forecast.type !== 'quantile') return [];
-
- const forecastDates = [], medianValues = [], ci95Upper = [], ci95Lower = [], ci50Upper = [], ci50Lower = [];
- const sortedHorizons = Object.keys(forecast.predictions || {}).sort((a, b) => Number(a) - Number(b));
-
- sortedHorizons.forEach((h) => {
- const pred = forecast.predictions[h];
- forecastDates.push(pred.date);
- const { quantiles = [], values = [] } = pred;
-
- const findValue = (q) => {
- const idx = quantiles.indexOf(q);
- return idx !== -1 ? values[idx] : null;
- };
+ const traces = [{
+ x: groundTruth.dates || [], y: gtValues, name: 'Observed', type: 'scatter',
+ mode: 'lines+markers', line: { color: 'black', width: isSmall ? 1 : 2, dash: 'dash' },
+ marker: { size: isSmall ? 2 : 4, color: 'black' },
+ hovertemplate: 'Ground Truth Data
+ {stateCode && (
+
Note that forecasts should be interpreted with great caution and may not reliably predict rapid changes in disease trends.
Date: %{x}
Value: %{y:.2f}%
` +
+ `Date: ${pointDate}
` +
+ `Median: ${formattedMedian}%
` +
+ `50% CI: [${formatted50}%]
` +
+ `95% CI: [${formatted95}%]
` +
+ `predicted as of ${date}` +
+ `
Date: %{x}
Value: %{y:.2f}
` +
+ `Date: ${pointDate}
` +
+ `Median: ${formattedMedian}
` +
+ `50% CI: [${formatted50}]
` +
+ `95% CI: [${formatted95}]
` +
+ `predicted as of ${date}` +
+ `