Compare commits
3
Commits
bd5e02ac1b
...
0c178baa01
| Author | SHA1 | Date | |
|---|---|---|---|
 chight
|
0c178baa01 | ||
|
chight
|
0ec4f27640 | ||
|
chight
|
c027a30b3f |
@@ -60,38 +60,38 @@ export default function AlertChanges({ settings, widgetID}) {
|
||||
return sorted_entries;
|
||||
}, [apiData, thisWidget]);
|
||||
|
||||
// list of alert colors used for coloring text below
|
||||
// Alert colors are now light/dark mode responsive
|
||||
const alertColors = {
|
||||
Red: "red.400",
|
||||
Orange: "orange.400",
|
||||
Yellow: "yellow.400",
|
||||
Green: "green.400",
|
||||
Red: "alertRed",
|
||||
Orange: "alertOrange",
|
||||
Yellow: "alertYellow",
|
||||
Green: "alertGreen",
|
||||
};
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px"/>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (data.length === 0) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" borderRadius="lg" bg="gray.800" overflowY="auto">
|
||||
// bg="transparent" to let the glass panel show through
|
||||
<Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" bg="transparent" overflowY="auto">
|
||||
{data.map((volcano, index) => {
|
||||
if (thisWidget?.size === "large") return (
|
||||
<Collapsible.Root key={index} w="100%">
|
||||
{/* Using context to dynamically change the border radii of the triggers */}
|
||||
<Collapsible.Context>
|
||||
{(collapsible) => (
|
||||
<>
|
||||
@@ -102,57 +102,58 @@ export default function AlertChanges({ settings, widgetID}) {
|
||||
p={1} pl={3} pr={3}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="gray.600"
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Text truncate >{volcano[0]}</Text> {/* volcano name */}
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{volcano[1][0]?.alert_start_date_local}</Text>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left">
|
||||
<Text truncate color="text" fontWeight="medium">{volcano[0]}</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">{volcano[1][0]?.alert_start_date_local}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{volcano[1][0]?.alert_level_name}</Text>
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">
|
||||
{volcano[1][0]?.alert_level_name}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content w="100%" p={3} borderBottomRadius="lg" bg="gray.700">
|
||||
|
||||
<Collapsible.Content w="100%" p={3} borderBottomRadius="lg" bg="widgetItemExpandedBg">
|
||||
<Timeline.Root size="md" variant="subtle">
|
||||
{volcano[1]?.map((object, index) => (
|
||||
<Timeline.Item key={index} w="100%" h="100%">
|
||||
<Timeline.Connector >
|
||||
{/*<Timeline.Separator borderWidth="1px" borderColor="gray.600"/>*/}
|
||||
<Timeline.Indicator outline="none" bg="gray.200" color="gray.500" size="lg">
|
||||
<Timeline.Indicator outline="none" bg="widgetBadgeBg" color="iconColor" size="lg">
|
||||
{object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
|
||||
{object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
|
||||
{object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
|
||||
</Timeline.Indicator>
|
||||
<Timeline.Indicator h="50%" outline="none" bg="gray.700" color="gray.100" size="lg">
|
||||
<Timeline.Indicator h="50%" outline="none" bg="widgetBadgeBg" color="iconColor" size="lg">
|
||||
{object?.change_type === "increase" ? <TrendingUp /> : <TrendingDown />}
|
||||
</Timeline.Indicator>
|
||||
</Timeline.Connector>
|
||||
<Timeline.Content w="100%" h="100%">
|
||||
{/*<Timeline.Title>{object?.volcano}</Timeline.Title>*/}
|
||||
<Timeline.Description w="100%" h="100%" gap={1}>
|
||||
<Flex direction="column" gap={1}>
|
||||
<Text w="100%" h="100%" color="gray.200">{object?.alert_start_date_local}</Text>
|
||||
<Text w="100%" h="100%" color="widgetTextMuted">{object?.alert_start_date_local}</Text>
|
||||
<Text w="100%" h="100%"
|
||||
color={alertColors[object?.alert_level_name] || "gray.200"}
|
||||
color={alertColors[object?.alert_level_name] || "text"}
|
||||
fontSize="md"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
{object?.alert_level_name}
|
||||
</Text>
|
||||
<Flex w="100%" h="20px" direction="row" justify="left" align="center">
|
||||
<Text color="gray.300">Alert Scale: </Text>
|
||||
<Text color="widgetTextMuted">Alert Scale: </Text>
|
||||
{(Array.from({ length: Number(object?.alert_scheme_highest) - Number(object?.alert_scheme_lowest) + 1}, (v, i) => Number(object?.alert_scheme_lowest) + i))
|
||||
.map((num) => (
|
||||
<Center
|
||||
key={num}
|
||||
w="20px" h="100%"
|
||||
color="gray.300"
|
||||
bg={num === Number(object?.alert_level_rank) ? "gray.300/20" : null} // alert level rank is a string for some reason
|
||||
borderRadius={num === Number(object?.alert_level_rank) ? "xl" : null}
|
||||
color="text"
|
||||
bg={num === Number(object?.alert_level_rank) ? "widgetBadgeBg" : "transparent"}
|
||||
borderRadius={num === Number(object?.alert_level_rank) ? "xl" : "none"}
|
||||
textAlign="center"
|
||||
fontSize="sm"
|
||||
fontWeight="semibold"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{num}
|
||||
</Center>
|
||||
@@ -181,30 +182,30 @@ export default function AlertChanges({ settings, widgetID}) {
|
||||
justify="space-between" align="center"
|
||||
p={1} pl={3} pr={3}
|
||||
borderRadius="lg"
|
||||
bg="gray.600"
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
|
||||
<Flex direction="row" w="100%" gap={2} align="center">
|
||||
<Flex color="gray.300">
|
||||
<Flex color="iconColor">
|
||||
{domain[0] === "aviation" && <Plane size={15}/>}
|
||||
{domain[0] === "terrestrial" && <Footprints size={15}/>}
|
||||
{domain[0] === "maritime" && <Sailboat size={15}/>}
|
||||
</Flex>
|
||||
<Text truncate>{volcano[0] || ""}</Text> {/* volcano name */}
|
||||
<Text truncate fontWeight="medium">{volcano[0] || ""}</Text>
|
||||
</Flex>
|
||||
<Text truncate w="100%" fontSize="xs" color="gray.300/90">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
|
||||
<Text truncate w="100%" fontSize="xs" color="widgetTextMuted">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="gray.200">
|
||||
<Flex w="25px" justify="right">
|
||||
<Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="text">
|
||||
<Flex w="25px" justify="right" color="iconColor">
|
||||
{domain[1]?.[0]?.change_type === "increase" ? <TrendingUp/> : <TrendingDown/>}
|
||||
</Flex>
|
||||
<Text
|
||||
truncate
|
||||
pl={2} pr={2}
|
||||
borderRadius="lg"
|
||||
bg="gray.800/50"
|
||||
color={alertColors[domain[1]?.[0]?.alert_level_name] || "gray.100"}
|
||||
bg="widgetBadgeBg"
|
||||
color={alertColors[domain[1]?.[0]?.alert_level_name] || "text"}
|
||||
fontWeight="semibold"
|
||||
>
|
||||
{domain[1]?.[0]?.alert_level_name}
|
||||
|
||||
@@ -5,13 +5,17 @@ import Plot from 'react-plotly.js';
|
||||
import VdapApi from '../../hooks/useVdapApi.js';
|
||||
import useBuildUrl from "@/hooks/useBuildUrl.js";
|
||||
|
||||
// 1. Import your central color dictionary
|
||||
import { rawWidgetColors } from '../../theme.js';
|
||||
|
||||
export default function ExplosionEvents({ settings, widgetID }) {
|
||||
// Plotly expects 'linear' for normal axes
|
||||
const plotYAxisType = settings?.yAxisScale === 'log' ? 'log' : 'linear';
|
||||
|
||||
// 🎨 Let's check color mode so we can make people happy with light and dark
|
||||
const { colorMode } = useColorMode();
|
||||
const isDark = colorMode === 'dark';
|
||||
// Assign the active palette based on the current mode
|
||||
const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
|
||||
|
||||
// Generate url with input dates, default to 7 day range
|
||||
const url = useBuildUrl('/api/v2/explosion_events', settings?.startDate, settings?.endDate);
|
||||
@@ -53,7 +57,7 @@ export default function ExplosionEvents({ settings, widgetID }) {
|
||||
mode: 'markers',
|
||||
marker: {
|
||||
size: 7,
|
||||
line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
|
||||
line: { width: .5, color: plotColors.text },
|
||||
symbol: Symbolway[index % Symbolway.length],
|
||||
},
|
||||
// Replicating the clean D3/Observable tooltip
|
||||
@@ -62,49 +66,37 @@ export default function ExplosionEvents({ settings, widgetID }) {
|
||||
'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
|
||||
'Number of Explosions: %{y}<extra></extra>'
|
||||
}));
|
||||
}, [apiData]);
|
||||
}, [apiData, plotColors]);
|
||||
|
||||
// 2. Build the Layout (Styling and Grid)
|
||||
const layout = useMemo(() => {
|
||||
|
||||
return {
|
||||
autosize: true,
|
||||
paper_bgcolor: 'transparent', // Let Chakra UI background show through
|
||||
paper_bgcolor: 'transparent',
|
||||
plot_bgcolor: 'transparent',
|
||||
font: { color: '#d1d5db' }, // gray.300
|
||||
font: { color: plotColors.muted },
|
||||
margin: { t: 40, r: 20, l: 20, b: 20 },
|
||||
// title: {
|
||||
// text: '7 Day Consolidated Flight Levels',
|
||||
// font: { size: 16, color: 'white' },
|
||||
// x: 0.05
|
||||
// },
|
||||
xaxis: {
|
||||
title: {
|
||||
text: 'Date (UTC)',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: 'date',
|
||||
tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#4b5563',
|
||||
tickformat: '%b %d<br>%Y',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.grid,
|
||||
automargin: true,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Number of Explosions',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: plotYAxisType,
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#ffffff',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.text,
|
||||
automargin: true,
|
||||
},
|
||||
// legend: {
|
||||
// orientation: 'h',
|
||||
// y: -0.2,
|
||||
// x: 0.5,
|
||||
// xanchor: 'center'
|
||||
// },
|
||||
hovermode: 'closest',
|
||||
shapes: [
|
||||
{
|
||||
@@ -115,37 +107,37 @@ export default function ExplosionEvents({ settings, widgetID }) {
|
||||
y0: 0,
|
||||
y1: 0,
|
||||
yref: 'y',
|
||||
line: { color: 'white', width: 1 }
|
||||
line: { color: plotColors.text, width: 1 }
|
||||
}
|
||||
],
|
||||
};
|
||||
}, [apiData, plotYAxisType]);
|
||||
}, [plotYAxisType, plotColors]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px" />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (plotTraces.length === 0) return (
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
|
||||
<Text color="gray.400">No data available for current filter.</Text>
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="var(--chakra-colors-widgetTextMuted)">No data available for current filter.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
|
||||
<Box height="100%" width="100%" bg="transparent" overflow="hidden">
|
||||
<Plot
|
||||
key={plotYAxisType}
|
||||
key={`${plotYAxisType}-${colorMode}`}
|
||||
data={plotTraces}
|
||||
layout={layout}
|
||||
useResizeHandler={true} // Essential for dashboard grid resizing!
|
||||
useResizeHandler={true}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
config={{ responsive: true, displayModeBar: true, displaylogo: false }}
|
||||
/>
|
||||
|
||||
@@ -52,21 +52,22 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
}
|
||||
}, [settings, some_data, widgetID, updateSettings]);
|
||||
|
||||
// Cleaned hardcoded grays for transparent so glass shell shows through
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px"/>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (some_data.length === 0) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
|
||||
<Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
|
||||
<Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -78,7 +79,7 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
p={2} gap={2}
|
||||
overflow="auto"
|
||||
borderRadius="xl"
|
||||
bg="gray.800"
|
||||
bg="transparent" // Let the global widgetRecipe glass shell show through
|
||||
>
|
||||
{some_data.map((item, index) => {
|
||||
if (thisWidget?.size === "large") return (
|
||||
@@ -96,31 +97,31 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
gap={2}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="gray.600"
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
|
||||
<Text truncate>{item.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content w="100%" h="auto">
|
||||
{/* This box needs to be at h="100%" for the pdf toolbar to appear */}
|
||||
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
|
||||
<Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
|
||||
<Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
|
||||
<Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Preparer: {item?.preparer}</Text>
|
||||
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
|
||||
<Flex direction="column" gap={2} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
|
||||
<Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
|
||||
<Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
|
||||
</Flex>
|
||||
{item?.files?.map((file, index) => {
|
||||
return (
|
||||
<Box w="100%" h="100%" key={index} p={1}>
|
||||
<br />
|
||||
<Flex mb={2} justify="space-between">
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
|
||||
<Box borderRadius="lg" bg="gray.700" color="gray.300" pl={1} pr={1} fontSize={13} asChild>
|
||||
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
|
||||
<Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
|
||||
<a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">
|
||||
Open
|
||||
</a>
|
||||
@@ -131,8 +132,8 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
type="application/pdf"
|
||||
style={{ width: '100%', height: '100%', display: 'block' }}
|
||||
>
|
||||
<Flex w="100%" h="100%" p={4} color="gray.400">
|
||||
<Text mb={2} color="fg.muted">
|
||||
<Flex w="100%" h="100%" p={4} color="widgetTextMuted">
|
||||
<Text mb={2}>
|
||||
Your browser cannot display this PDF directly.
|
||||
</Text>
|
||||
<a href={file?.url} target="_blank">
|
||||
@@ -151,19 +152,20 @@ export default function IvansAlerts({ settings, widgetID }) {
|
||||
)
|
||||
else if (thisWidget?.size === "small") return (
|
||||
<Flex direction="row"
|
||||
key={index} // Added missing map key
|
||||
w="100%"
|
||||
justify="space-between" align="center"
|
||||
p={1} pl={3} pr={3}
|
||||
gap={2}
|
||||
borderRadius="lg"
|
||||
bg="gray.600"
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
|
||||
<Text truncate>{item.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
)
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
import VdapApi from '../../hooks/useVdapApi.js';
|
||||
import { useMemo } from 'react';
|
||||
import Plot from 'react-plotly.js';
|
||||
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';
|
||||
import useBuildUrl from "@/hooks/useBuildUrl.js";
|
||||
|
||||
// 1. Import your central color dictionary
|
||||
import { rawWidgetColors } from '../../theme.js';
|
||||
|
||||
export default function PlumeEvents({ settings, widgetID}) {
|
||||
const { colorMode } = useColorMode();
|
||||
// 2. Assign the active palette based on the current mode
|
||||
const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
|
||||
|
||||
// Build url, defaults to 7 days past
|
||||
const url = useBuildUrl('/api/v2/plume_events', settings?.startDate, settings?.endDate);
|
||||
|
||||
@@ -44,7 +52,7 @@ export default function PlumeEvents({ settings, widgetID}) {
|
||||
mode: 'markers',
|
||||
marker: {
|
||||
size: 7,
|
||||
line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
|
||||
line: { width: .5, color: plotColors.text },
|
||||
symbol: Symbolway[index % Symbolway.length],
|
||||
},
|
||||
// Replicating the clean D3/Observable tooltip
|
||||
@@ -53,88 +61,77 @@ export default function PlumeEvents({ settings, widgetID}) {
|
||||
'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
|
||||
'Plume Height (m): %{y}<extra></extra>'
|
||||
}));
|
||||
}, [apiData]);
|
||||
}, [apiData, plotColors]);
|
||||
|
||||
const layout = useMemo(() => {
|
||||
|
||||
return {
|
||||
autosize: true,
|
||||
paper_bgcolor: 'transparent', // Let Chakra UI background show through
|
||||
plot_bgcolor: 'transparent',
|
||||
font: { color: '#d1d5db' }, // gray.300
|
||||
font: { color: plotColors.muted },
|
||||
margin: { t: 40, r: 20, l: 20, b: 20 },
|
||||
// title: {
|
||||
// text: '7 Day Consolidated Flight Levels',
|
||||
// font: { size: 16, color: 'white' },
|
||||
// x: 0.05
|
||||
// },
|
||||
xaxis: {
|
||||
title: {
|
||||
text: 'Date (UTC)',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: 'date',
|
||||
tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#4b5563',
|
||||
tickformat: '%b %d<br>%Y',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.grid,
|
||||
automargin: true,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Plume Height',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: 'linear',
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#ffffff',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.text,
|
||||
automargin: true,
|
||||
},
|
||||
// legend: {
|
||||
// orientation: 'h',
|
||||
// y: -0.2,
|
||||
// x: 0.5,
|
||||
// xanchor: 'center'
|
||||
// },
|
||||
hovermode: 'closest',
|
||||
shapes: [
|
||||
{
|
||||
type: 'line',
|
||||
x0: 0,
|
||||
x1: 1,
|
||||
xref: 'paper', // Spans entire chart width
|
||||
xref: 'paper',
|
||||
y0: 0,
|
||||
y1: 0,
|
||||
yref: 'y',
|
||||
line: { color: 'white', width: 1 }
|
||||
line: { color: plotColors.text, width: 1 }
|
||||
}
|
||||
],
|
||||
};
|
||||
}, []);
|
||||
}, [plotColors]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px" />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (plotTraces.length === 0) return (
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
|
||||
<Text color="gray.400">No data available for current filter.</Text>
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="widgetTextMuted">No data available for current filter.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
|
||||
<Box height="100%" width="100%" bg="transparent" overflow="hidden">
|
||||
<Plot
|
||||
key={colorMode}
|
||||
data={plotTraces}
|
||||
layout={layout}
|
||||
useResizeHandler={true} // Essential for dashboard grid resizing!
|
||||
useResizeHandler={true}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
config={{ responsive: true, displayModeBar: true, displaylogo: false }}
|
||||
/>
|
||||
|
||||
@@ -52,25 +52,25 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
}, [settings, data, widgetID, updateSettings]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800">
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px"/>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" p={4} borderRadius="md" bg="gray.800">
|
||||
<Flex w="100%" h="100%" align="center" justify="center" p={4} bg="transparent">
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (data.length === 0) return (
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
|
||||
<Text color="gray.400">No Remote Sensing data available this week.</Text>
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="widgetTextMuted">No Remote Sensing data available this week.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" borderRadius="xl" bg="gray.800">
|
||||
<Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" bg="transparent">
|
||||
{data.map((item, index) => {
|
||||
if (thisWidget?.size === "large" || thisWidget?.size === "medium") return (
|
||||
<Collapsible.Root key={index} w="100%">
|
||||
@@ -80,14 +80,14 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
<>
|
||||
<Collapsible.Trigger w="100%" overflow="hidden">
|
||||
<Flex direction="row" w="100%" h="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3}
|
||||
borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="gray.600"
|
||||
borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="widgetItemBg"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
|
||||
<Text truncate>{item?.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">{item?.country}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm" fontWeight="semibold">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontSize="sm" fontWeight="semibold">
|
||||
{item?.report_time}
|
||||
</Text>
|
||||
</Flex>
|
||||
@@ -95,10 +95,10 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content w="100%" h="auto">
|
||||
{/* This box needs to be at h="100%" for the pdf toolbar to appear */}
|
||||
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
|
||||
<Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
|
||||
<Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
|
||||
<Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Source: {item?.sender}</Text>
|
||||
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
|
||||
<Flex direction="column" gap={2} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
|
||||
<Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
|
||||
<Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Source: {item?.sender}</Text>
|
||||
</Flex>
|
||||
{item?.files?.map((file, index) => {
|
||||
|
||||
@@ -107,15 +107,15 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
<Box w="100%" h="100%" key={index} p={1}>
|
||||
<br />
|
||||
<Flex dir="row" justify="space-between" align="center" mb={2}>
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PDF</Text>
|
||||
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
|
||||
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="widgetTextMuted">PDF</Text>
|
||||
</Flex>
|
||||
<object
|
||||
data={`${file?.url}#view=FitH&toolbar=1`}
|
||||
type="application/pdf"
|
||||
style={{width: '100%', height: '100%', display: 'block'}}
|
||||
>
|
||||
<Flex w="100%" h="100%" p={4} color="gray.400">
|
||||
<Flex w="100%" h="100%" p={4} color="widgetTextMuted">
|
||||
<Text mb={2} color="fg.muted">
|
||||
Your browser cannot display this PDF directly.
|
||||
</Text>
|
||||
@@ -132,8 +132,8 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
<Box key={index} w="100%" h="100%" p={1}>
|
||||
<br />
|
||||
<Flex dir="row" justify="space-between" align="center" mb={2}>
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PNG</Text>
|
||||
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
|
||||
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="widgetTextMuted">PNG</Text>
|
||||
</Flex>
|
||||
<a href={file?.url} target="_blank" rel="noopener noreferrer">
|
||||
<img src={file?.url} alt={file?.name} />
|
||||
@@ -146,7 +146,7 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
<>
|
||||
<br />
|
||||
<Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
|
||||
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
|
||||
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
|
||||
<Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
|
||||
<a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
|
||||
</Button>
|
||||
@@ -162,17 +162,17 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
</Collapsible.Root>
|
||||
)
|
||||
else if (thisWidget?.size === "small") return (
|
||||
<Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="gray.600">
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
|
||||
<Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="widgetItemBg">
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
|
||||
<Text truncate>{item?.volcano_name}</Text>
|
||||
<Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">{item?.country}</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text
|
||||
truncate
|
||||
pl={2} pr={2}
|
||||
borderRadius="lg"
|
||||
bg="gray.800/50" color="gray.100"
|
||||
bg="widgetBadgeBg" color="text"
|
||||
fontSize="sm" fontWeight="semibold"
|
||||
>
|
||||
{item?.report_time}
|
||||
@@ -185,7 +185,6 @@ export default function RemoteSensing({ settings, widgetID }) {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function ascTimeVolcanoSort(a, b) {
|
||||
if (a.volcano_name < b.volcano_name) return -1
|
||||
else if (a.volcano_name > b.volcano_name) return 1
|
||||
|
||||
@@ -4,7 +4,15 @@ import Plot from 'react-plotly.js';
|
||||
import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
|
||||
import useBuildUrl from "@/hooks/useBuildUrl.js";
|
||||
|
||||
// 1. Import Chakra color mode and your central color dictionary
|
||||
import { useColorMode } from "@/components/ui/color-mode.jsx";
|
||||
import { rawWidgetColors } from '../../theme.js';
|
||||
|
||||
export default function SeismicEvents({ settings, widgetID}) {
|
||||
const { colorMode } = useColorMode();
|
||||
// 2. Assign the active palette based on the current mode
|
||||
const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
|
||||
|
||||
// build url, defaults to 7 days past
|
||||
const url = useBuildUrl('/api/v2/seismic_events', settings?.startDate, settings?.endDate);
|
||||
|
||||
@@ -44,7 +52,7 @@ export default function SeismicEvents({ settings, widgetID}) {
|
||||
mode: 'markers',
|
||||
marker: {
|
||||
size: 7,
|
||||
line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
|
||||
line: { width: .5, color: plotColors.text },
|
||||
symbol: Symbolway[index % Symbolway.length],
|
||||
},
|
||||
// Replicating the clean D3/Observable tooltip
|
||||
@@ -53,48 +61,36 @@ export default function SeismicEvents({ settings, widgetID}) {
|
||||
'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
|
||||
'Number of Seismic Events: %{y}<extra></extra>'
|
||||
}));
|
||||
}, [apiData]);
|
||||
}, [apiData, plotColors]);
|
||||
|
||||
const layout = useMemo(() => {
|
||||
|
||||
return {
|
||||
autosize: true,
|
||||
paper_bgcolor: 'transparent', // Let Chakra UI background show through
|
||||
plot_bgcolor: 'transparent',
|
||||
font: { color: '#d1d5db' }, // gray.300
|
||||
font: { color: plotColors.muted },
|
||||
margin: { t: 40, r: 20, l: 20, b: 20 },
|
||||
// title: {
|
||||
// text: '',
|
||||
// font: { size: 16, color: 'white' },
|
||||
// x: 0.05
|
||||
// },
|
||||
xaxis: {
|
||||
title: {
|
||||
text: 'Date (UTC)',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: 'date',
|
||||
tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#4b5563',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.grid,
|
||||
automargin: true,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Seismic Count',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: 'linear',
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#ffffff',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.text,
|
||||
automargin: true,
|
||||
},
|
||||
// legend: {
|
||||
// orientation: 'h',
|
||||
// y: -0.2,
|
||||
// x: 0.5,
|
||||
// xanchor: 'center'
|
||||
// },
|
||||
hovermode: 'closest',
|
||||
shapes: [
|
||||
{
|
||||
@@ -105,33 +101,34 @@ export default function SeismicEvents({ settings, widgetID}) {
|
||||
y0: 0,
|
||||
y1: 0,
|
||||
yref: 'y',
|
||||
line: { color: 'white', width: 1 }
|
||||
line: { color: plotColors.text, width: 1 }
|
||||
}
|
||||
],
|
||||
};
|
||||
}, []);
|
||||
}, [plotColors]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px" />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (plotTraces.length === 0) return (
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
|
||||
<Text color="gray.400">No data available for current filter.</Text>
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="var(--chakra-colors-widgetTextMuted)">No data available for current filter.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
|
||||
<Box height="100%" width="100%" bg="transparent" overflow="hidden">
|
||||
<Plot
|
||||
key={colorMode}
|
||||
data={plotTraces}
|
||||
layout={layout}
|
||||
useResizeHandler={true} // Essential for dashboard grid resizing!
|
||||
|
||||
@@ -1,11 +1,18 @@
|
||||
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
|
||||
import VdapApi from '../../hooks/useVdapApi.js';
|
||||
import { useColorMode } from "@/components/ui/color-mode.jsx";
|
||||
|
||||
// Import central color dictionary
|
||||
import { rawWidgetColors } from '../../theme.js'; // Adjust path if needed
|
||||
|
||||
export default function VaaActivity7Day({ settings, widgetID }) {
|
||||
console.log("3. Chart received settings:", settings);
|
||||
// Plotly expects 'linear' for normal axes
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
// 2. Assign the active palette based on the current mode
|
||||
const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
|
||||
|
||||
const plotYAxisType = settings?.yAxisScale === 'symlog' ? 'symlog' : 'linear';
|
||||
|
||||
// Clean, single-line data fetching
|
||||
@@ -17,13 +24,10 @@ export default function VaaActivity7Day({ settings, widgetID }) {
|
||||
|
||||
// Array of distinct Plotly shapes
|
||||
const Symbolway = [
|
||||
'circle', 'square', 'diamond',
|
||||
'triangle-up', 'triangle-down',
|
||||
'star', 'hexagram', 'pentagon',
|
||||
'hexagon', 'octagon', 'cross', 'x'
|
||||
'circle', 'square', 'diamond', 'triangle-up', 'triangle-down',
|
||||
'star', 'hexagram', 'pentagon', 'hexagon', 'octagon', 'cross', 'x'
|
||||
];
|
||||
|
||||
// Sort data descending by flight level (matching Observable behavior)
|
||||
const sortedData = [...apiData].sort((a, b) => b.obs_fl - a.obs_fl);
|
||||
|
||||
// Efficiently group into Plotly traces by volcano
|
||||
@@ -44,7 +48,7 @@ export default function VaaActivity7Day({ settings, widgetID }) {
|
||||
mode: 'markers',
|
||||
marker: {
|
||||
size: 7,
|
||||
line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
|
||||
line: { width: 0.5, color: plotColors.text },
|
||||
symbol: Symbolway[index % Symbolway.length],
|
||||
},
|
||||
// Replicating the clean Observable tooltip
|
||||
@@ -53,90 +57,78 @@ export default function VaaActivity7Day({ settings, widgetID }) {
|
||||
'Date: %{x|%b %d %Y %H:%M}<br>' +
|
||||
'Flight Level: %{y}<extra></extra>'
|
||||
}));
|
||||
}, [apiData]);
|
||||
}, [apiData, plotColors]);
|
||||
|
||||
// 2. Build the Layout (Styling and Grid)
|
||||
const layout = useMemo(() => {
|
||||
|
||||
return {
|
||||
autosize: true,
|
||||
paper_bgcolor: 'transparent', // Let Chakra UI background show through
|
||||
paper_bgcolor: 'transparent',
|
||||
plot_bgcolor: 'transparent',
|
||||
font: { color: '#d1d5db' }, // gray.300
|
||||
font: { color: plotColors.muted },
|
||||
margin: { t: 40, r: 20, l: 20, b: 20 },
|
||||
// title: {
|
||||
// text: '7 Day Consolidated Flight Levels',
|
||||
// font: { size: 16, color: 'white' },
|
||||
// x: 0.05
|
||||
// },
|
||||
xaxis: {
|
||||
title: {
|
||||
text: 'Date (UTC)',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: 'date',
|
||||
tickformat: '%b %d<br>%Y %H:%M', // Multiline ticks from Observable
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#4b5563',
|
||||
tickformat: '%b %d<br>%Y %H:%M',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.grid,
|
||||
automargin: true,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Flight Level',
|
||||
font: { color: 'white', size: 12 }
|
||||
font: { color: plotColors.text, size: 12 }
|
||||
},
|
||||
type: plotYAxisType,
|
||||
gridcolor: '#4b5563',
|
||||
zerolinecolor: '#ffffff',
|
||||
gridcolor: plotColors.grid,
|
||||
zerolinecolor: plotColors.text,
|
||||
automargin: true,
|
||||
},
|
||||
// legend: {
|
||||
// orientation: 'h',
|
||||
// y: -0.2,
|
||||
// x: 0.5,
|
||||
// xanchor: 'center'
|
||||
// },
|
||||
hovermode: 'closest',
|
||||
shapes: [
|
||||
{
|
||||
type: 'line',
|
||||
x0: 0,
|
||||
x1: 1,
|
||||
xref: 'paper', // Spans entire chart width
|
||||
xref: 'paper',
|
||||
y0: 0,
|
||||
y1: 0,
|
||||
yref: 'y',
|
||||
line: { color: 'white', width: 1 }
|
||||
line: { color: plotColors.text, width: 1 }
|
||||
}
|
||||
],
|
||||
};
|
||||
}, [apiData, plotYAxisType]);
|
||||
}, [plotYAxisType, plotColors]);
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px" />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
|
||||
<Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (plotTraces.length === 0) return (
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
|
||||
<Text color="gray.400">No flight level data available.</Text>
|
||||
<Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="widgetTextMuted">No flight level data available.</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box height="100%" width="100%" bg="gray.800" borderRadius="md" p={2} overflow="hidden">
|
||||
<Box height="100%" width="100%" bg="transparent" overflow="hidden">
|
||||
<Plot
|
||||
key={plotYAxisType}
|
||||
key={`${plotYAxisType}-${colorMode}`}
|
||||
data={plotTraces}
|
||||
layout={layout}
|
||||
useResizeHandler={true} // Essential for dashboard grid resizing!
|
||||
useResizeHandler={true}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
config={{ responsive: true, displayModeBar: true, displaylogo: false }}
|
||||
/>
|
||||
|
||||
@@ -509,6 +509,22 @@ const glassTabRecipe = defineRecipe({
|
||||
},
|
||||
});
|
||||
|
||||
/* ==========================================================================
|
||||
RAW WIDGET COLORS (For Canvas/Plotly libraries that reject CSS variables)
|
||||
========================================================================== */
|
||||
export const rawWidgetColors = {
|
||||
light: {
|
||||
text: "#000000",
|
||||
muted: "#4A5568", // gray.600
|
||||
grid: "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
dark: {
|
||||
text: "#FFFFFF",
|
||||
muted: "#A0AEC0", // gray.400
|
||||
grid: "rgba(255, 255, 255, 0.15)",
|
||||
}
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
CONFIG & SYSTEM
|
||||
========================================================================== */
|
||||
@@ -572,6 +588,18 @@ const config = defineConfig({
|
||||
iconColor: { value: { base: "gray.600", _dark: "gray.300" } }, // Fixed: Visible in dark mode
|
||||
glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
|
||||
gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
|
||||
|
||||
// WIDGET SPECIFIC VALUES
|
||||
widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } },
|
||||
widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
|
||||
widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
|
||||
widgetTextMuted: { value: { base: "gray.600", _dark: "gray.400" } },
|
||||
|
||||
// ALERT COLORS
|
||||
alertRed: { value: { base: "red.600", _dark: "red.400" } },
|
||||
alertOrange: { value: { base: "orange.600", _dark: "orange.400" } },
|
||||
alertYellow: { value: { base: "yellow.600", _dark: "yellow.400" } },
|
||||
alertGreen: { value: { base: "green.600", _dark: "green.400" } },
|
||||
},
|
||||
},
|
||||
tokens: {
|
||||
|
||||
Reference in New Issue
Block a user