Add translations for en & de in Dashdot; Fix PR comments

public/locales/da/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/de/modules/dashdot.json

@@ -4,23 +4,77 @@
     "description": "Zeigt die Graphen einer externen Dash.-Instanz innerhalb von Homarr an.",
     "settings": {
       "title": "Einstellungen für Dash. Widget",
-      "cpuMultiView": {
-        "label": "CPU Multi-Core View"
-      },
-      "storageMultiView": {
-        "label": "Speicher Multi-Drive View"
-      },
-      "useCompactView": {
-        "label": "Kompaktmodus verwenden"
-      },
-      "graphs": {
-        "label": "Graphen"
-      },
       "url": {
         "label": "Dash. URL"
       },
       "usePercentages": {
         "label": "Prozentangaben anzeigen"
+      },
+      "columns": {
+        "label": "Anzahl Spalten"
+      },
+      "graphHeight": {
+        "label": "Höhe der Graphen"
+      },
+      "graphsOrder": {
+        "label": "Graphen (Reihenfolge)",
+        "storage": {
+          "label": "Speicher",
+          "enabled": {
+            "label": "Im Widget anzeigen"
+          },
+          "span": {
+            "label": "Spaltenbreite"
+          },
+          "compactView": {
+            "label": "Als Text anzeigen (Kompakt)"
+          },
+          "multiView": {
+            "label": "Als Multi-Laufwerk anzeigen"
+          }
+        },
+        "network": {
+          "label": "Netzwerk",
+          "enabled": {
+            "label": "Im Widget anzeigen"
+          },
+          "span": {
+            "label": "Spaltenbreite"
+          },
+          "compactView": {
+            "label": "Als Text anzeigen (Kompakt)"
+          }
+        },
+        "cpu": {
+          "label": "CPU",
+          "enabled": {
+            "label": "Im Widget anzeigen"
+          },
+          "span": {
+            "label": "Spaltenbreite"
+          },
+          "multiView": {
+            "label": "Als Multi-Core anzeigen"
+          }
+        },
+        "ram": {
+          "label": "RAM",
+          "enabled": {
+            "label": "Im Widget anzeigen"
+          },
+          "span": {
+            "label": "Spaltenbreite"
+          }
+        },
+        "gpu": {
+          "label": "GPU",
+          "enabled": {
+            "label": "Im Widget anzeigen"
+          },
+          "span": {
+            "label": "Spaltenbreite"
+          }
+        }
       }
     }
   },
@@ -50,7 +104,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/el/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "Μνήμη RAM"
       },
       "gpu": {

public/locales/en/modules/dashdot.json

@@ -4,23 +4,77 @@
     "description": "Displays the graphs of an external Dash. instance inside of Homarr.",
     "settings": {
       "title": "Settings for Dash. widget",
-      "cpuMultiView": {
-        "label": "CPU Multi-Core View"
-      },
-      "storageMultiView": {
-        "label": "Storage Multi-Drive View"
-      },
-      "useCompactView": {
-        "label": "Use Compact View"
-      },
-      "graphs": {
-        "label": "Graphs"
-      },
       "url": {
         "label": "Dash. URL"
       },
       "usePercentages": {
         "label": "Display percentages"
+      },
+      "columns": {
+        "label": "Display columns"
+      },
+      "graphHeight": {
+        "label": "Height of graphs"
+      },
+      "graphsOrder": {
+        "label": "Graphs (Order)",
+        "storage": {
+          "label": "Storage",
+          "enabled": {
+            "label": "Show in widget"
+          },
+          "span": {
+            "label": "Column span"
+          },
+          "compactView": {
+            "label": "Show as text (compact)"
+          },
+          "multiView": {
+            "label": "Show as multi-drive-view"
+          }
+        },
+        "network": {
+          "label": "Network",
+          "enabled": {
+            "label": "Show in widget"
+          },
+          "span": {
+            "label": "Column span"
+          },
+          "compactView": {
+            "label": "Show as text (compact)"
+          }
+        },
+        "cpu": {
+          "label": "CPU",
+          "enabled": {
+            "label": "Show in widget"
+          },
+          "span": {
+            "label": "Column span"
+          },
+          "multiView": {
+            "label": "Show as multi-core-view"
+          }
+        },
+        "ram": {
+          "label": "RAM",
+          "enabled": {
+            "label": "Show in widget"
+          },
+          "span": {
+            "label": "Column span"
+          }
+        },
+        "gpu": {
+          "label": "GPU",
+          "enabled": {
+            "label": "Show in widget"
+          },
+          "span": {
+            "label": "Column span"
+          }
+        }
       }
     }
   },
@@ -50,7 +104,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/es/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/fr/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/he/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "מעבד"
       },
-      "memory": {
+      "ram": {
         "title": "זיכרון פנימי"
       },
       "gpu": {

public/locales/it/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/ja/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "ラム"
       },
       "gpu": {

public/locales/ko/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/lol/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/nl/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/no/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/pl/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/pt/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/ru/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "ЦП"
       },
-      "memory": {
+      "ram": {
         "title": "ОЗУ"
       },
       "gpu": {

public/locales/sk/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/sl/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/sv/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/uk/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "Процесор"
       },
-      "memory": {
+      "ram": {
         "title": "Оперативна пам'ять"
       },
       "gpu": {

public/locales/vi/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "RAM"
       },
       "gpu": {

public/locales/zh/modules/dashdot.json

@@ -50,7 +50,7 @@
       "cpu": {
         "title": "CPU"
       },
-      "memory": {
+      "ram": {
         "title": "内存"
       },
       "gpu": {

src/components/Dashboard/Tiles/Widgets/DraggableList.tsx

@@ -1,7 +1,8 @@
 import { Collapse, createStyles, Stack, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { IconChevronDown, IconGripVertical } from '@tabler/icons';
 import { Reorder, useDragControls } from 'framer-motion';
-import { FC, ReactNode, useState } from 'react';
+import { FC, ReactNode } from 'react';
 import { IDraggableListInputValue } from '../../../../widgets/widgets';
 
 const useStyles = createStyles((theme) => ({
@@ -14,7 +15,6 @@ const useStyles = createStyles((theme) => ({
     }`,
     backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
     marginBottom: theme.spacing.xs,
-    gap: theme.spacing.xs,
   },
   row: {
     display: 'flex',
@@ -80,7 +80,7 @@ const ListItem: FC<{
   const { classes, cx } = useStyles();
   const controls = useDragControls();
 
-  const [showContent, setShowContent] = useState(false);
+  const [opened, handlers] = useDisclosure(false);
   const hasContent = props.children != null && Object.keys(props.children).length !== 0;
 
   return (
@@ -100,8 +100,8 @@ const ListItem: FC<{
 
           {hasContent && (
             <IconChevronDown
-              className={cx(classes.clickableIcons, { [classes.rotate]: showContent })}
+              className={cx(classes.clickableIcons, { [classes.rotate]: opened })}
-              onClick={() => setShowContent(!showContent)}
+              onClick={() => handlers.toggle()}
               size={18}
               stroke={1.5}
             />
@@ -109,7 +109,7 @@ const ListItem: FC<{
         </div>
 
         {hasContent && (
-          <Collapse in={showContent}>
+          <Collapse in={opened}>
             <Stack className={classes.collapseContent}>{props.children}</Stack>
           </Collapse>
         )}

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -205,7 +205,7 @@ const WidgetOptionTypeSwitch: FC<{
             labels={Object.fromEntries(
               Object.entries(option.items).map(([graphName]) => [
                 graphName,
-                t(`descriptor.settings.${graphName}.label`),
+                t(`descriptor.settings.${key}.${graphName}.label`),
               ])
             )}
           >
@@ -217,7 +217,7 @@ const WidgetOptionTypeSwitch: FC<{
                     key={`${graphName}.${subKey}.${i}`}
                     option={setting as IWidgetOptionValue}
                     widgetId={widgetId}
-                    propName={`${graphName}.${subKey}`}
+                    propName={`${key}.${graphName}.${subKey}`}
                     value={typedVal.find((v) => v.key === graphName)?.subValues?.[subKey]}
                     handleChange={(_, newVal) =>
                       handleChange(

src/widgets/dashDot/DashDotGraph.tsx

@@ -1,4 +1,5 @@
 import { createStyles, Title, useMantineTheme } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
 import { DashDotCompactStorage } from './DashDotCompactStorage';
 
@@ -21,21 +22,28 @@ export const DashDotGraph = ({
   usePercentages,
   info,
 }: DashDotGraphProps) => {
+  const { t } = useTranslation('modules/dashdot');
   const { classes } = useStyles();
 
-  return graph === 'storage' && isCompact ? (
+  if (graph === 'storage' && isCompact) {
-    <DashDotCompactStorage info={info} />
+    return <DashDotCompactStorage info={info} />;
-  ) : graph === 'network' && isCompact ? (
+  }
-    <DashDotCompactNetwork info={info} />
+
-  ) : (
+  if (graph === 'network' && isCompact) {
+    return <DashDotCompactNetwork info={info} />;
+  }
+
+  const title = t(`card.graphs.${graph}.title`);
+
+  return (
     <div className={classes.graphContainer}>
       <Title className={classes.graphTitle} order={4}>
-        {graph}
+        {title}
       </Title>
       <iframe
         className={classes.iframe}
         key={graph}
-        title={graph}
+        title={title}
         src={useIframeSrc(dashDotUrl, graph, multiView, usePercentages)}
         style={{
           height: `${graphHeight}px`,