🎉 🔧 improve y axis maximum input and styling, added locale

kunkoala · kunkoala · commit 919af352cab7 · 2025-08-21T14:26:00.000+02:00
diff --git a/locales/de-settings.json5 b/locales/de-settings.json5
@@ -3,6 +3,8 @@
 
 {
   title: 'Liniendiagramm Einstellungen',
+  yAxisMaxValue: 'Y-Achse Maximum',
+  yAxisMaxValueDescription: 'Setzen Sie den Maximalwert für die Y-Achse',
   manageGroups: 'Filter',
   manageGroupsDescription: 'Verwalten Sie Filtergruppen, um spezifische Daten im Diagramm anzuzeigen oder auszublenden.',
   manageThreshold: 'Schwellwerte',
@@ -14,6 +16,18 @@
     threshold: 'Schwellwert',
     noThresholds: 'Keine Schwellwerte festgelegt.',
   },
+  'y-axis-settings': {
+    title: 'Y-Achse Maximum',
+    editTooltip: 'Y-Achse Maximum bearbeiten',
+    resetTooltip: 'Y-Achse Maximum auf aktuellen Daten-Maximalwert zurücksetzen',
+    messages: {
+      success: 'Y-Achse Maximum erfolgreich aktualisiert.',
+      error: 'Ungültige Eingabe. Bitte überprüfen Sie den Wert.',
+    },
+    validation: {
+      positiveNumber: 'Wert muss eine positive Zahl sein',
+    },
+  },
   'group-filters': {
     title: 'Gruppen verwalten',
     'nothing-selected': 'Wählen Sie eine Gruppe aus um diese zu bearbeiten oder erstellen Sie eine neue Gruppe.',
diff --git a/locales/en-settings.json5 b/locales/en-settings.json5
@@ -3,6 +3,8 @@
 
 {
   title: 'Line Chart Settings',
+  yAxisMaxValue: 'Y-Axis Maximum',
+  yAxisMaxValueDescription: 'Set the maximum value for the Y-axis',
   manageGroups: 'Filters',
   manageGroupsDescription: 'Set the group filters for each scenario',
   manageThreshold: 'Thresholds',
@@ -14,6 +16,18 @@
     threshold: 'Threshold',
     noThresholds: 'No thresholds set.',
   },
+  'y-axis-settings': {
+    title: 'Y-Axis Maximum',
+    editTooltip: 'Edit Y-Axis Maximum',
+    resetTooltip: 'Reset Y-Axis maximum value to current data maximum value',
+    messages: {
+      success: 'Y-Axis Maximum value updated successfully.',
+      error: 'Invalid input. Please check the value.',
+    },
+    validation: {
+      positiveNumber: 'Value must be a positive number',
+    },
+  },
   'group-filters': {
     title: 'Manage Groups',
     'nothing-selected': 'Select a group to edit or create a new one.',
diff --git a/src/components/LineChartComponents/LineChartSettingsComponents/LineChartSettings.tsx b/src/components/LineChartComponents/LineChartSettingsComponents/LineChartSettings.tsx
@@ -93,7 +93,6 @@ export default function LineChartSettings({
   const {i18n} = useTranslation();
   const {formatNumber} = NumberFormatter(i18n.language, 1, 0);
 
-
   const [currentView, setCurrentView] = useState<SettingsView>('settingsMenu');
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [showPopover, setShowPopover] = useState<boolean>(false);
@@ -107,8 +106,9 @@ export default function LineChartSettings({
 
   /**
    * The settings menu for the line chart. Each item in the menu has a label, a view, and an icon.
+   * kind: 'inline' - the item is displayed inline
+   * kind: 'navigate' - the item is displayed as a button that navigates to a new view
    */
-
   const settingsMenu: SettingsItem[] = [
     {
       kind: 'inline',
diff --git a/src/components/LineChartComponents/LineChartSettingsComponents/yAxisValueSettings/yAxisValueSettings.tsx b/src/components/LineChartComponents/LineChartSettingsComponents/yAxisValueSettings/yAxisValueSettings.tsx
@@ -4,18 +4,31 @@
 import React, {useState} from 'react';
 import Box from '@mui/material/Box';
 import {Localization} from 'types/localization';
-import {TextField, Typography, useTheme} from '@mui/material';
+import {Button, useTheme} from '@mui/material';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import CheckIcon from '@mui/icons-material/Check';
 import CancelIcon from '@mui/icons-material/Cancel';
 import EditIcon from '@mui/icons-material/Edit';
 import RefreshIcon from '@mui/icons-material/Refresh';
-
+import Divider from '@mui/material/Divider';
+import Portal from '@mui/material/Portal';
+import Alert from '@mui/material/Alert';
+import {useTranslation} from 'react-i18next';
 interface YAxisValueSettingsProps {
+  /** The maximum value for the Y-axis */
   yAxisMaxValue: number | undefined;
+
+  /** The actual maximum value of the currently displayed data on the chart*/
   maxDataValue: number;
+
+  /** The function to update the Y-axis maximum value */
   updateYAxisMaxValue: (newYAxisMaxValue: number) => void;
+
+  /** The localization object */
   localization: Localization;
 }
 
@@ -30,20 +43,53 @@ export default function YAxisValueSettings({
   },
 }: YAxisValueSettingsProps) {
   const theme = useTheme();
+  const {t} = useTranslation('settings');
   const [localYAxisMaxValue, setLocalYAxisMaxValue] = useState<number | null>(yAxisMaxValue ?? maxDataValue);
   const [editing, setEditing] = useState<boolean>(false);
-  const isValid = localYAxisMaxValue !== null && localYAxisMaxValue > 0;
+  const [snackbarOpen, setSnackbarOpen] = useState<boolean>(false);
+  const [snackbarMessage, setSnackbarMessage] = useState<string>('');
+  const [snackbarSeverity, setSnackbarSeverity] = useState<'success' | 'info' | 'warning' | 'error'>('info');
+  const [errors, setErrors] = useState<string[]>([]);
 
   const getFormattedAndTranslatedValues = (filteredValues: number): string => {
     return localization.formatNumber ? localization.formatNumber(filteredValues) : filteredValues.toString();
   };
 
-  const handleSave = () => {
-    if (localYAxisMaxValue === null || localYAxisMaxValue < 0) return;
-    console.log('localYAxisMaxValue', localYAxisMaxValue);
-    updateYAxisMaxValue(localYAxisMaxValue);
-    setEditing(false);
-    console.log('UPDATE Y-AXIS MAX VALUE');
+  const validateInput = (newYValue: number | null): boolean => {
+    const errors: string[] = [];
+    if (newYValue === null || newYValue < 0) {
+      errors.push(t('y-axis-settings.validation.positiveNumber'));
+    }
+
+    setErrors(errors);
+    return errors.length === 0;
+  };
+
+  const handleSnackbarOpen = (message: string, severity: 'success' | 'info' | 'warning' | 'error' = 'info') => {
+    setSnackbarMessage(message);
+    setSnackbarSeverity(severity);
+    setSnackbarOpen(true);
+  };
+
+  const handleSave = (newYValue: number | null) => {
+    if (newYValue === null) {
+      updateYAxisMaxValue(maxDataValue);
+      setLocalYAxisMaxValue(maxDataValue);
+      setEditing(false);
+      return;
+    }
+
+    if (validateInput(newYValue)) {
+      if (newYValue === yAxisMaxValue) {
+        setEditing(false);
+        return;
+      }
+
+      updateYAxisMaxValue(newYValue);
+      setLocalYAxisMaxValue(newYValue);
+      setEditing(false);
+      handleSnackbarOpen(t('y-axis-settings.messages.success'), 'success');
+    }
   };
 
   const handleCancel = () => {
@@ -57,33 +103,74 @@ export default function YAxisValueSettings({
   };
 
   return (
-    <Box sx={{width: '100%', marginLeft: 4}}>
-      {editing ? (
-        <Box
+    <Box
+      sx={{
+        width: '100%',
+        marginLeft: 4,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+      }}
+    >
+      <Portal>
+        <Snackbar
+          open={snackbarOpen}
+          autoHideDuration={4000}
+          onClose={() => setSnackbarOpen(false)}
+          anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
+        >
+          <Alert severity={snackbarSeverity}>{snackbarMessage}</Alert>
+        </Snackbar>
+      </Portal>
+      <Box sx={{display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2}}>
+        <Typography
+          variant='h2'
           sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 1,
-            alignItems: 'center',
-            justifyContent: 'space-between',
+            color: theme.palette.primary.main,
+            textTransform: 'uppercase',
+            paddingRight: 2,
           }}
         >
-          <Typography variant='h2' sx={{color: 'black'}}>
-            Y-Axis Maximum
-          </Typography>
-          <Box sx={{display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center'}}>
+          {t('y-axis-settings.title')}
+        </Typography>
+      </Box>
+      <Divider orientation='vertical' flexItem />
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: 1,
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        {editing ? (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 3,
+              alignItems: 'center',
+              width: '100%',
+              justifyContent: 'space-between',
+            }}
+          >
             <TextField
-              label='Y-Axis Max Value'
               id='y-axis-max-value'
               value={localYAxisMaxValue}
               placeholder={getFormattedAndTranslatedValues(yAxisMaxValue ?? maxDataValue)}
-              error={!isValid}
+              error={errors.length > 0}
+              helperText={errors.join(', ')}
               onChange={(e) => {
+                setErrors([]);
                 const value = e.target.value === '' ? null : Number(e.target.value);
                 setLocalYAxisMaxValue(value);
               }}
               size='small'
               variant='outlined'
+              sx={{width: '100%'}}
             />
             <Box
               sx={{
@@ -97,9 +184,9 @@ export default function YAxisValueSettings({
                 data-testid='save-threshold'
                 onClick={(e) => {
                   e.stopPropagation();
-                  handleSave();
+                  handleSave(localYAxisMaxValue);
                 }}
-                disabled={!isValid}
+                disabled={errors.length > 0}
                 sx={{color: theme.palette.success.main}}
               >
                 <CheckIcon />
@@ -117,49 +204,54 @@ export default function YAxisValueSettings({
               </IconButton>
             </Box>
           </Box>
-        </Box>
-      ) : (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start'}}>
-            <Typography variant='h2' sx={{color: 'black'}}>
-              Y-Axis Maximum
-            </Typography>
-            <Typography variant='caption' sx={{color: 'gray'}}>
-              Global maximum value of the y-axis.
-            </Typography>
-          </Box>
-          <Box sx={{display: 'flex', flexDirection: 'row', gap: 2, alignItems: 'center'}}>
-            <Typography variant='h2' sx={{marginRight: '1rem'}}>
-              {getFormattedAndTranslatedValues(yAxisMaxValue ?? maxDataValue)}
-            </Typography>
+        ) : (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 3,
+              alignItems: 'center',
+              width: '100%',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Button
+              variant='text'
+              onClick={() => setEditing(true)}
+              sx={{
+                cursor: 'text',
+              }}
+            >
+              <Typography
+                variant='body1'
+                sx={{
+                  color: 'black',
+                }}
+              >
+                {getFormattedAndTranslatedValues(yAxisMaxValue ?? maxDataValue)}
+              </Typography>
+            </Button>
             <Box sx={{display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center'}}>
-              <Tooltip title='Edit Y-Axis Maximum'>
+              <Tooltip title={t('y-axis-settings.editTooltip')}>
                 <IconButton onClick={() => setEditing(true)}>
                   <EditIcon />
                 </IconButton>
               </Tooltip>
-              <Tooltip title='Reset to current data maximum value'>
+              <Tooltip title={t('y-axis-settings.resetTooltip')}>
                 <IconButton
                   onClick={(e) => {
                     e.stopPropagation();
                     handleReset();
                   }}
+                  disabled={localYAxisMaxValue === maxDataValue}
                 >
                   <RefreshIcon />
                 </IconButton>
               </Tooltip>
             </Box>
           </Box>
-        </Box>
-      )}
+        )}
+      </Box>
     </Box>
   );
 }
