95 lines
3.6 KiB
React
95 lines
3.6 KiB
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';
|
|
|
|
const handleToggle = (details) => {
|
|
// 2. Chakra v3 passes { checked: boolean } in the details object.
|
|
// Convert it back to the string Plotly expects.
|
|
console.log("1. Toggle Clicked! Raw details from Chakra:", details);
|
|
|
|
const newScale = details.checked ? 'log' : 'normal';
|
|
|
|
updateSettings(widgetId, { yAxisScale: newScale });
|
|
};
|
|
|
|
return (
|
|
<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>
|
|
|
|
{/* 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>
|
|
);
|
|
} |