Updated UI for the widget settings menu
This commit is contained in:
@@ -1,28 +1,51 @@
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
|
||||
import VdapApi from "../../hooks/useVdapApi.js";
|
||||
import useBuildUrl from "../../hooks/useBuildUrl.js";
|
||||
import { Footprints, Plane, Sailboat, TrendingUp, TrendingDown } from 'lucide-react';
|
||||
import {Box, Collapsible, Flex, Spinner, Text, Timeline, Center} from "@chakra-ui/react";
|
||||
import {
|
||||
Footprints,
|
||||
Plane,
|
||||
Sailboat,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Box,
|
||||
Collapsible,
|
||||
Flex,
|
||||
Spinner,
|
||||
Text,
|
||||
Timeline,
|
||||
Center,
|
||||
} from "@chakra-ui/react";
|
||||
import { useMemo, useCallback } from "react";
|
||||
|
||||
export default function AlertChanges({ settings, widgetID }) {
|
||||
// 0) CREATE SELF AWARENESS, by finding this specific widgets object in the state-list of active/displayed widgets
|
||||
const thisWidget = useDashboardStore(
|
||||
useCallback(
|
||||
(state) => state.widgets.find((widget) => widget.id === widgetID),
|
||||
[widgetID],
|
||||
),
|
||||
);
|
||||
|
||||
export default function AlertChanges({ settings, widgetID}) {
|
||||
// Find this specific widgets object in the state list of active & displayed widgets
|
||||
const thisWidget = useDashboardStore(useCallback((state) =>
|
||||
state.widgets.find((widget) => widget.id === widgetID), [widgetID]
|
||||
));
|
||||
// 1) BUILD URL, default is 7 days past
|
||||
const url = useBuildUrl(
|
||||
"/api/v2/alert_changes",
|
||||
settings?.startDate,
|
||||
settings?.endDate,
|
||||
);
|
||||
|
||||
// build url, default is 7 days past
|
||||
const url = useBuildUrl('/api/v2/alert_changes', settings?.startDate, settings?.endDate);
|
||||
// 2) CALL API hook to retrieve data
|
||||
const { data: apiData, isLoading, error } = VdapApi(url);
|
||||
|
||||
// call api hook to retrieve data
|
||||
const {data: apiData, isLoading, error} = VdapApi(url);
|
||||
|
||||
const data = useMemo(() => {
|
||||
// 3) SORT the data by grouping into volcanoes and sorting form newest to oldest
|
||||
// doing this 1st bc the filters might change w/ user input but the sorts (currently) wont and thus will
|
||||
// only run when the api retrieves new data
|
||||
const sortedData = useMemo(() => {
|
||||
if (apiData.length === 0) return [];
|
||||
|
||||
// .reduce() is a built-in array method used to transform an entire array into a single value (like an object)
|
||||
// here it returns a single massive object w/ volcano names as keys
|
||||
// here we sort the data by volcano, and return it as a single massive object w/ volcano names as keys
|
||||
const grouped = apiData.reduce((accumulator, item) => {
|
||||
if (!accumulator[item.volcano]) accumulator[item.volcano] = [];
|
||||
accumulator[item.volcano].push(item);
|
||||
@@ -33,33 +56,97 @@ export default function AlertChanges({ settings, widgetID}) {
|
||||
const group_arr = Object.entries(grouped);
|
||||
|
||||
// sort data newest to oldest within each volcano
|
||||
const sorted = group_arr.map((item) =>
|
||||
[
|
||||
item[0], // volcano name
|
||||
[...(item[1])].sort((a, b) =>
|
||||
new Date(b.alert_start_date_local) - new Date(a.alert_start_date_local))
|
||||
]
|
||||
const sorted = group_arr.map((item) => [
|
||||
item[0], // volcano name
|
||||
[...item[1]].sort( // item[1] is the array of al changes for a volcano
|
||||
(a, b) =>
|
||||
new Date(b.alert_start_date_local) -
|
||||
new Date(a.alert_start_date_local),
|
||||
),
|
||||
]);
|
||||
|
||||
// the volcanoes with the most recent issued alert level change appear at the top of the list (newest -> oldest)
|
||||
const sorted_entries = [...sorted].sort(
|
||||
(a, b) =>
|
||||
new Date(b[1][0].alert_start_date_local) -
|
||||
new Date(a[1][0].alert_start_date_local),
|
||||
);
|
||||
|
||||
// volcano with most recent alert level change appears at top of list
|
||||
const sorted_entries = [...sorted].sort((a, b) => new Date(b[1][0].alert_start_date_local) - new Date(a[1][0].alert_start_date_local));
|
||||
|
||||
// additionally, seperates out data into domains within a volcano for sm widgets,
|
||||
// to list all most recent al changes w/in a volcano w/in a domain
|
||||
if (thisWidget?.size === "small") {
|
||||
return (sorted_entries.map((volcano) => {
|
||||
return sorted_entries.map((volcano) => {
|
||||
const domain = volcano[1].reduce((acc, curr) => {
|
||||
if (!acc[curr.alert_scheme_domain]) acc[curr.alert_scheme_domain] = [];
|
||||
if (!acc[curr.alert_scheme_domain])
|
||||
acc[curr.alert_scheme_domain] = [];
|
||||
acc[curr.alert_scheme_domain].push(curr);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const domain_arr = Object.entries(domain);
|
||||
console.log("sm data: ", [volcano[0], domain_arr]);
|
||||
return [volcano[0], domain_arr];
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
console.log("lg data: ", sorted_entries);
|
||||
return sorted_entries;
|
||||
}, [apiData, thisWidget]);
|
||||
|
||||
// 4) FILTER according to what is set in the widgets settings
|
||||
const filteredData = useMemo(() => {
|
||||
if (sortedData.length === 0) return [];
|
||||
let filtered_arr = [];
|
||||
|
||||
// must show at least one inc or dec alert levels, otherwise no data is displayed
|
||||
if (
|
||||
!settings?.filters?.levelIncreases &&
|
||||
!settings?.filters?.levelDecreases
|
||||
)
|
||||
return [];
|
||||
|
||||
// return all data
|
||||
if (
|
||||
settings?.filters?.levelIncreases &&
|
||||
settings?.filters?.levelDecreases &&
|
||||
!settings?.filters.elevatedLevels
|
||||
)
|
||||
return sortedData;
|
||||
|
||||
// only elevated alert levels
|
||||
filtered_arr = settings?.filters.elevatedLevels
|
||||
? sortedData.map((volcano) => [
|
||||
volcano[0],
|
||||
volcano[1].filter(
|
||||
(item) =>
|
||||
item.alert_scheme_highest - Number(item.alert_level_rank) <= 1,
|
||||
),
|
||||
])
|
||||
.filter((volcano) => volcano[1].length > 0)
|
||||
: sortedData;
|
||||
|
||||
// only decreases (rm inc)
|
||||
filtered_arr = !settings?.filters.levelIncreases
|
||||
? filtered_arr.map((volcano) => [
|
||||
volcano[0],
|
||||
volcano[1].filter((item) => !(item.change_type === "increase")),
|
||||
])
|
||||
.filter((volcano) => volcano[1].length > 0)
|
||||
: filtered_arr;
|
||||
|
||||
// only increases (rm dec)
|
||||
filtered_arr = !settings?.filters?.levelDecreases
|
||||
? filtered_arr.map((volcano) => [
|
||||
volcano[0],
|
||||
volcano[1].filter((item) => !(item.change_type === "decrease")),
|
||||
])
|
||||
.filter((volcano) => volcano[1].length > 0)
|
||||
: filtered_arr;
|
||||
|
||||
console.log("filtered_arr: ", filtered_arr);
|
||||
return filtered_arr;
|
||||
}, [sortedData, settings]);
|
||||
|
||||
// Alert colors are now light/dark mode responsive
|
||||
const alertColors = {
|
||||
Red: "alertRed",
|
||||
@@ -68,153 +155,285 @@ export default function AlertChanges({ settings, widgetID}) {
|
||||
Green: "alertGreen",
|
||||
};
|
||||
|
||||
if (isLoading) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px"/>
|
||||
</Flex>
|
||||
);
|
||||
const options = {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
timeZoneName: "short"
|
||||
};
|
||||
|
||||
if (error) return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
if (isLoading)
|
||||
return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Spinner size="xl" color="blue.400" thickness="4px" />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (data.length === 0) return (
|
||||
<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>
|
||||
);
|
||||
if (error)
|
||||
return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Text color="red.400">{error}</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
if (filteredData.length === 0)
|
||||
return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
<Text textAlign="center" color="widgetTextMuted">
|
||||
No alert level data available for the selected dates.
|
||||
</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
// 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%">
|
||||
<Collapsible.Context>
|
||||
{(collapsible) => (
|
||||
<>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={2}
|
||||
p={2}
|
||||
w="100%"
|
||||
h="100%"
|
||||
bg="transparent"
|
||||
overflowY="auto"
|
||||
>
|
||||
{filteredData.map((volcano, index) => {
|
||||
if (thisWidget?.size === "large")
|
||||
return (
|
||||
<Collapsible.Root key={index} w="100%">
|
||||
<Collapsible.Context>
|
||||
{(collapsible) => (
|
||||
<Collapsible.Trigger w="100%">
|
||||
<Flex direction="row"
|
||||
w="100%"
|
||||
justify="space-between" align="center"
|
||||
p={1} pl={3} pr={3}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="widgetItemBg"
|
||||
<Flex
|
||||
direction="row"
|
||||
w="100%"
|
||||
justify="space-between"
|
||||
align="center"
|
||||
p={1}
|
||||
pl={3}
|
||||
pr={3}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<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
|
||||
direction="column"
|
||||
w="100%"
|
||||
minW={0}
|
||||
textAlign="left"
|
||||
>
|
||||
<Text truncate color="text" fontWeight="medium">
|
||||
{volcano[0]}
|
||||
</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">
|
||||
{new Date(volcano[1][0]?.alert_start_date_local)
|
||||
.toLocaleString('en-US', options)
|
||||
}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right">
|
||||
<Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">
|
||||
<Flex w="100%" minW={0} justify="right" gap={2}>
|
||||
<Flex w="fit" color="iconColor">
|
||||
{volcano[1][0]?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Flex>
|
||||
<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.Context>
|
||||
|
||||
<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.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="widgetBadgeBg" color="iconColor" size="lg">
|
||||
{object?.change_type === "increase" ? <TrendingUp /> : <TrendingDown />}
|
||||
</Timeline.Indicator>
|
||||
</Timeline.Connector>
|
||||
<Timeline.Content w="100%" h="100%">
|
||||
<Timeline.Description w="100%" h="100%" gap={1}>
|
||||
<Flex direction="column" gap={1}>
|
||||
<Text w="100%" h="100%" color="widgetTextMuted">{object?.alert_start_date_local}</Text>
|
||||
<Text w="100%" h="100%"
|
||||
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="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="text"
|
||||
bg={num === Number(object?.alert_level_rank) ? "widgetBadgeBg" : "transparent"}
|
||||
borderRadius={num === Number(object?.alert_level_rank) ? "xl" : "none"}
|
||||
textAlign="center"
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{num}
|
||||
</Center>
|
||||
))
|
||||
<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.Indicator
|
||||
outline="none"
|
||||
bg="transparent"
|
||||
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="transparent"
|
||||
color="iconColor"
|
||||
size="lg"
|
||||
>
|
||||
{object?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Timeline.Indicator>
|
||||
</Timeline.Connector>
|
||||
<Timeline.Content w="100%" h="100%">
|
||||
<Timeline.Description w="100%" h="100%" gap={1}>
|
||||
<Flex direction="column" gap={1}>
|
||||
<Text
|
||||
w="100%"
|
||||
h="100%"
|
||||
color="widgetTextMuted"
|
||||
>
|
||||
{new Date(object?.alert_start_date_local)
|
||||
.toLocaleString('en-US', {...options, timeZone: 'UTC'})
|
||||
}
|
||||
</Text>
|
||||
<Text
|
||||
w="100%"
|
||||
h="100%"
|
||||
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="widgetTextMuted" mr={1}>
|
||||
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="text"
|
||||
bg={
|
||||
num === Number(object?.alert_level_rank)
|
||||
? "widgetInnerBadgeBg"
|
||||
: "transparent"
|
||||
}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Timeline.Description>
|
||||
</Timeline.Content>
|
||||
</Timeline.Item>
|
||||
))}
|
||||
</Timeline.Root>
|
||||
</Collapsible.Content>
|
||||
</>
|
||||
)}
|
||||
</Collapsible.Context>
|
||||
</Collapsible.Root>
|
||||
)
|
||||
else if (thisWidget?.size === "small") return (
|
||||
volcano[1]?.map((domain, index) => (
|
||||
borderRadius={
|
||||
num === Number(object?.alert_level_rank)
|
||||
? "xl"
|
||||
: "none"
|
||||
}
|
||||
textAlign="center"
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{num}
|
||||
</Center>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Timeline.Description>
|
||||
</Timeline.Content>
|
||||
</Timeline.Item>
|
||||
))}
|
||||
</Timeline.Root>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
else if (thisWidget?.size === "small")
|
||||
return volcano[1]?.map((domain, index) => (
|
||||
<Flex
|
||||
key={index}
|
||||
direction="row"
|
||||
w="100%"
|
||||
gap={2}
|
||||
justify="space-between" align="center"
|
||||
p={1} pl={3} pr={3}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
p={1}
|
||||
pl={3}
|
||||
pr={3}
|
||||
borderRadius="lg"
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
minW={0}
|
||||
textAlign="left"
|
||||
color="text"
|
||||
>
|
||||
<Flex direction="row" w="100%" gap={2} align="center">
|
||||
<Flex color="iconColor">
|
||||
{domain[0] === "aviation" && <Plane size={15}/>}
|
||||
{domain[0] === "terrestrial" && <Footprints size={15}/>}
|
||||
{domain[0] === "maritime" && <Sailboat size={15}/>}
|
||||
{domain[0] === "aviation" && <Plane size={15} />}
|
||||
{domain[0] === "terrestrial" && <Footprints size={15} />}
|
||||
{domain[0] === "maritime" && <Sailboat size={15} />}
|
||||
</Flex>
|
||||
<Text truncate fontWeight="medium">{volcano[0] || ""}</Text>
|
||||
<Text truncate fontWeight="medium">
|
||||
{volcano[0] || ""}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text truncate w="100%" fontSize="xs" color="widgetTextMuted">{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="text">
|
||||
<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/>}
|
||||
{domain[1]?.[0]?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Flex>
|
||||
<Text
|
||||
truncate
|
||||
pl={2} pr={2}
|
||||
pl={2}
|
||||
pr={2}
|
||||
borderRadius="lg"
|
||||
bg="widgetBadgeBg"
|
||||
color={alertColors[domain[1]?.[0]?.alert_level_name] || "text"}
|
||||
color={
|
||||
alertColors[domain[1]?.[0]?.alert_level_name] || "text"
|
||||
}
|
||||
fontWeight="semibold"
|
||||
>
|
||||
{domain[1]?.[0]?.alert_level_name}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
))
|
||||
);
|
||||
));
|
||||
})}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user