chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add filtering on dates to all widgets, defualt is past 7 days

Browse Source
This commit is contained in:
vkuchenik
2026-08-10 16:22:34 -07:00
parent 520731aa47
commit d9bdb17217
10 changed files with 495 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/settings/ExplosionEventsSettings.jsx
+73 -15
View File
@@ -1,8 +1,11 @@
import { Box, Text, Switch } from "@chakra-ui/react";
import {Box, Text, Switch, Flex, Field, Input} from "@chakra-ui/react";
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
import {useState} from "react";
export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
const [startError, setStartError] = useState(null);
const [endError, setEndError] = useState(null);
// 1. Convert the saved string into a boolean for the toggle UI
const isSymlog = currentSettings?.yAxisScale === 'log';
@@ -18,20 +21,75 @@ export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
};
return (
<Box>
<Text fontWeight="bold" mb={3} fontSize="sm">Y-Axis Settings</Text>
<Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
{/* Y-AXIS SETTING*/}
<Text fontWeight="bold" mb={3} fontSize="sm">Y-Axis Settings</Text>
<Switch.Root
checked={isSymlog}
onCheckedChange={handleToggle}
colorPalette="blue"
>
<Switch.HiddenInput />
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
<Switch.Label>Use Log Scale</Switch.Label>
</Switch.Root>
</Box>
<Switch.Root
checked={isSymlog}
onCheckedChange={handleToggle}
colorPalette="blue"
>
<Switch.HiddenInput />
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
<Switch.Label>Use Log Scale</Switch.Label>
</Switch.Root>
{/* DATE RANGE SELECTION */}
<Field.Root invalid={!!startError}>
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
Start Date
</Text>
<Flex direction="column" w="100%">
<Input
w="100%"
type="date"
value={currentSettings?.startDate || ""}
onChange={(e) => {
const value = e.target.value;
updateSettings(widgetId, {...currentSettings, startDate: value});
const dateSelected = new Date(value);
const today = new Date();
today.setHours(0, 0, 0, 0);
if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
else setStartError("");
}}
/>
{startError && <Field.ErrorText>{startError}</Field.ErrorText>}
</Flex>
</Flex>
</Field.Root>
<Field.Root invalid={!!endError}>
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
End Date
</Text>
<Flex direction="column" w="100%">
<Input
w="100%"
type="date"
value={currentSettings?.endDate || ""}
onChange={(e) => {
const value = e.target.value;
updateSettings(widgetId, {...currentSettings, endDate: value});
const dateSelected = new Date(value);
const today = new Date();
today.setHours(0, 0, 0, 0);
if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
else setEndError("");
}}
/>
{endError && <Field.ErrorText>{endError}</Field.ErrorText>}
</Flex>
</Flex>
</Field.Root>
</Flex>
);
}