37 lines
1.3 KiB
React
37 lines
1.3 KiB
React
|
import { Box, Text, Switch } from "@chakra-ui/react";
|
||
|
|
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
|
||
|
|
|
||
|
|
export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
|
||
|
|
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||
|
|
|
||
|
|
// 1. Convert the saved string into a boolean for the toggle UI
|
||
|
|
const isSymlog = currentSettings?.yAxisScale === 'symlog';
|
||
|
|
|
||
|
|
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 ? 'symlog' : 'normal';
|
||
|
|
|
||
|
|
updateSettings(widgetId, { yAxisScale: newScale });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<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 Symlog Scale</Switch.Label>
|
||
|
|
</Switch.Root>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|