Add options to sort and resize graphs in dash. widget

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -24,7 +24,7 @@ export const DashDotCompactNetwork = ({ info }: DashDotCompactNetworkProps) => {
   const downSpeed = bytes.toPerSecondString(info?.network?.speedDown);
 
   return (
-    <Group noWrap align="start" position="apart" w="100%" maw="251px">
+    <Group noWrap align="start" position="apart" w="100%">
       <Text weight={500}>{t('card.graphs.network.label')}</Text>
       <Stack align="end" spacing={0}>
         <Group spacing={0}>

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -25,7 +25,7 @@ export const DashDotCompactStorage = ({ info }: DashDotCompactStorageProps) => {
   });
 
   return (
-    <Group noWrap align="start" position="apart" w="100%" maw="251px">
+    <Group noWrap align="start" position="apart" w="100%">
       <Text weight={500}>{t('card.graphs.storage.label')}</Text>
       <Stack align="end" spacing={0}>
         <Text color="dimmed" size="xs">

src/widgets/dashDot/DashDotGraph.tsx

@@ -1,63 +1,71 @@
-import { createStyles, Stack, Title, useMantineTheme } from '@mantine/core';
-import { DashDotGraph as GraphType } from './types';
+import { createStyles, Title, useMantineTheme } from '@mantine/core';
+import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
+import { DashDotCompactStorage } from './DashDotCompactStorage';
 
 interface DashDotGraphProps {
-  graph: GraphType;
+  graph: string;
+  graphHeight: number;
   isCompact: boolean;
+  multiView: boolean;
   dashDotUrl: string;
   usePercentages: boolean;
+  info: DashDotInfo;
 }
 
 export const DashDotGraph = ({
   graph,
+  graphHeight,
   isCompact,
+  multiView,
   dashDotUrl,
   usePercentages,
+  info,
 }: DashDotGraphProps) => {
   const { classes } = useStyles();
-  return (
-    <Stack
-      className={classes.graphStack}
-      w="100%"
-      maw="251px"
-      style={{
-        width: isCompact ? (graph.twoSpan ? '100%' : 'calc(50% - 10px)') : undefined,
-      }}
-    >
+
+  return graph === 'storage' && isCompact ? (
+    <DashDotCompactStorage info={info} />
+  ) : graph === 'network' && isCompact ? (
+    <DashDotCompactNetwork info={info} />
+  ) : (
+    <div className={classes.graphContainer}>
       <Title className={classes.graphTitle} order={4}>
-        {graph.name}
+        {graph}
       </Title>
       <iframe
         className={classes.iframe}
-        key={graph.name}
-        title={graph.name}
-        src={useIframeSrc(dashDotUrl, graph, isCompact, usePercentages)}
+        key={graph}
+        title={graph}
+        src={useIframeSrc(dashDotUrl, graph, multiView, usePercentages)}
+        style={{
+          height: `${graphHeight}px`,
+        }}
       />
-    </Stack>
+    </div>
   );
 };
 
 const useIframeSrc = (
   dashDotUrl: string,
-  graph: GraphType,
-  isCompact: boolean,
+  graph: string,
+  multiView: boolean,
   usePercentages: boolean
 ) => {
   const { colorScheme, colors, radius } = useMantineTheme();
   const surface = (colorScheme === 'dark' ? colors.dark[7] : colors.gray[0]).substring(1); // removes # from hex value
 
-  const graphId = graph.id === 'memory' ? 'ram' : graph.id;
-
   return (
     `${dashDotUrl}` +
-    '?singleGraphMode=true' +
-    `&graph=${graphId}` +
+    '?singleGraphMode=true' + // obsolete in newer versions
+    `&graph=${graph}` +
     `&theme=${colorScheme}` +
     `&surface=${surface}` +
-    `&gap=${isCompact ? 10 : 5}` +
+    '&gap=5' +
     `&innerRadius=${radius.lg}` +
-    `&multiView=${graph.isMultiView}` +
-    `&showPercentage=${usePercentages ? 'true' : 'false'}`
+    `&multiView=${multiView}` +
+    `&showPercentage=${usePercentages.toString()}` +
+    '&textOffset=16' +
+    '&textSize=12'
   );
 };
 
@@ -65,7 +73,7 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
   iframe: {
     flex: '1 0 auto',
     maxWidth: '100%',
-    height: '140px',
+    width: '100%',
     borderRadius: theme.radius.lg,
     border: 'none',
     colorScheme: 'light', // fixes white borders around iframe
@@ -74,13 +82,14 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
     ref: getRef('graphTitle'),
     position: 'absolute',
     right: 0,
+    bottom: 0,
     opacity: 0,
     transition: 'opacity .1s ease-in-out',
     pointerEvents: 'none',
-    marginTop: 10,
-    marginRight: 25,
+    marginBottom: 12,
+    marginRight: 12,
   },
-  graphStack: {
+  graphContainer: {
     position: 'relative',
     [`&:hover .${getRef('graphTitle')}`]: {
       opacity: 0.5,

src/widgets/dashDot/DashDotTile.tsx

@@ -1,4 +1,4 @@
-import { Center, createStyles, Group, Stack, Text, Title } from '@mantine/core';
+import { Center, createStyles, Grid, Stack, Text, Title } from '@mantine/core';
 import { IconUnlink } from '@tabler/icons';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
@@ -6,45 +6,126 @@ import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../config/provider';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
-import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
-import { DashDotCompactStorage } from './DashDotCompactStorage';
+import { DashDotInfo } from './DashDotCompactNetwork';
 import { DashDotGraph } from './DashDotGraph';
 
 const definition = defineWidget({
   id: 'dashdot',
   icon: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/dashdot.png',
   options: {
-    cpuMultiView: {
-      type: 'switch',
-      defaultValue: false,
-    },
-    storageMultiView: {
-      type: 'switch',
-      defaultValue: false,
-    },
-    useCompactView: {
-      type: 'switch',
-      defaultValue: true,
+    url: {
+      type: 'text',
+      defaultValue: '',
     },
     usePercentages: {
       type: 'switch',
       defaultValue: false,
     },
-    graphs: {
-      type: 'multi-select',
-      defaultValue: ['cpu', 'memory'],
-      data: [
-        // ['cpu', 'memory', 'storage', 'network', 'gpu'], into { label, value }
-        { label: 'CPU', value: 'cpu' },
-        { label: 'Memory', value: 'memory' },
-        { label: 'Storage', value: 'storage' },
-        { label: 'Network', value: 'network' },
-        { label: 'GPU', value: 'gpu' },
-      ],
+    columns: {
+      type: 'number',
+      defaultValue: 2,
     },
-    url: {
-      type: 'text',
-      defaultValue: '',
+    graphHeight: {
+      type: 'number',
+      defaultValue: 115,
+    },
+    graphsOrder: {
+      type: 'draggable-list',
+      defaultValue: [
+        {
+          key: 'storage',
+          subValues: {
+            enabled: true,
+            compactView: true,
+            span: 2,
+            multiView: false,
+          },
+        },
+        {
+          key: 'network',
+          subValues: {
+            enabled: true,
+            compactView: true,
+            span: 2,
+          },
+        },
+        {
+          key: 'cpu',
+          subValues: {
+            enabled: true,
+            multiView: false,
+            span: 1,
+          },
+        },
+        {
+          key: 'ram',
+          subValues: {
+            enabled: true,
+            span: 1,
+          },
+        },
+        {
+          key: 'gpu',
+          subValues: {
+            enabled: false,
+            span: 1,
+          },
+        },
+      ],
+      items: {
+        cpu: {
+          enabled: {
+            type: 'switch',
+          },
+          span: {
+            type: 'number',
+          },
+          multiView: {
+            type: 'switch',
+          },
+        },
+        storage: {
+          enabled: {
+            type: 'switch',
+          },
+          span: {
+            type: 'number',
+          },
+          compactView: {
+            type: 'switch',
+          },
+          multiView: {
+            type: 'switch',
+          },
+        },
+        ram: {
+          enabled: {
+            type: 'switch',
+          },
+          span: {
+            type: 'number',
+          },
+        },
+        network: {
+          enabled: {
+            type: 'switch',
+          },
+          span: {
+            type: 'number',
+          },
+          compactView: {
+            type: 'switch',
+          },
+        },
+        gpu: {
+          enabled: {
+            type: 'switch',
+          },
+          span: {
+            type: 'number',
+          },
+        },
+      },
     },
   },
   gridstack: {
@@ -83,60 +164,41 @@ function DashDotTile({ widget }: DashDotTileProps) {
           <IconUnlink size={40} strokeWidth={1.2} />
           <Title order={5}>{t('card.errors.protocolDowngrade.title')}</Title>
           <Text align="center" size="sm">
-          {t('card.errors.protocolDowngrade.text')}
+            {t('card.errors.protocolDowngrade.text')}
           </Text>
         </Stack>
       </Center>
     );
   }
 
-  const graphs = widget?.properties.graphs.map((graph) => ({
-    id: graph,
-    name: t(`card.graphs.${graph}.title`),
-    twoSpan: ['network', 'gpu'].includes(graph),
-    isMultiView:
-      (graph === 'cpu' && widget.properties.cpuMultiView) ||
-      (graph === 'storage' && widget.properties.storageMultiView),
-  }));
-
-  const isCompact = widget?.properties.useCompactView ?? false;
-
-  const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact);
-
-  const isCompactNetworkVisible = graphs?.some((g) => g.id === 'network' && isCompact);
-
-  const usePercentages = widget?.properties.usePercentages ?? false;
-
-  const displayedGraphs = graphs?.filter(
-    (g) => !isCompact || !['network', 'storage'].includes(g.id)
-  );
+  const { graphsOrder, usePercentages, columns, graphHeight } = widget.properties;
 
   return (
-    <>
-      <Title order={3} mb="xs">
-        {t('card.title')}
-      </Title>
+    <Stack spacing="xs">
+      <Title order={3}>{t('card.title')}</Title>
       {!info && <p>{t('card.errors.noInformation')}</p>}
       {info && (
         <div className={classes.graphsContainer}>
-          <Group position="apart" w="100%">
-            {isCompactStorageVisible && <DashDotCompactStorage info={info} />}
-            {isCompactNetworkVisible && <DashDotCompactNetwork info={info} />}
-          </Group>
-          <Group position="center" w="100%" className={classes.graphsWrapper}>
-            {displayedGraphs?.map((graph) => (
-              <DashDotGraph
-                key={graph.id}
-                graph={graph}
-                dashDotUrl={dashDotUrl}
-                isCompact={isCompact}
-                usePercentages={usePercentages}
-              />
-            ))}
-          </Group>
+          <Grid grow gutter="sm" w="100%" columns={columns}>
+            {graphsOrder
+              .filter((g) => g.subValues.enabled)
+              .map((g) => (
+                <Grid.Col span={Math.min(columns, g.subValues.span)}>
+                  <DashDotGraph
+                    dashDotUrl={dashDotUrl}
+                    info={info}
+                    graph={g.key as any}
+                    graphHeight={graphHeight}
+                    isCompact={g.subValues.compactView ?? false}
+                    multiView={g.subValues.multiView ?? false}
+                    usePercentages={usePercentages}
+                  />
+                </Grid.Col>
+              ))}
+          </Grid>
         </div>
       )}
-    </>
+    </Stack>
   );
 }
 
@@ -171,12 +233,6 @@ export const useDashDotTileStyles = createStyles(() => ({
     rowGap: 10,
     columnGap: 10,
   },
-  graphsWrapper: {
-    '& > *:nth-child(odd):last-child': {
-      width: '100% !important',
-      maxWidth: '100% !important',
-    },
-  },
 }));
 
 export default definition;

src/widgets/widgets.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { AreaType } from '../types/area';
 import { ShapeType } from '../types/shape';
 
-// Type of widgets which are safed to config
+// Type of widgets which are saved to config
 export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {
   id: TKey;
   properties: {
@@ -18,15 +18,7 @@ export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition>
 // Makes the type less specific
 // For example when the type true is used as input the result is boolean
 // By not using this type the definition would always be { property: true }
-type MakeLessSpecific<TInput extends IWidgetOptionValue['defaultValue']> = TInput extends boolean
-  ? boolean
-  : TInput extends number
-  ? number
-  : TInput extends string[]
-  ? string[]
-  : TInput extends string
-  ? string
-  : never;
+type MakeLessSpecific<T> = T extends boolean ? boolean : T;
 
 // Types of options that can be specified for the widget edit modal
 export type IWidgetOptionValue =
@@ -35,7 +27,8 @@ export type IWidgetOptionValue =
   | ITextInputOptionValue
   | ISliderInputOptionValue
   | ISelectOptionValue
-  | INumberInputOptionValue;
+  | INumberInputOptionValue
+  | IDraggableListInputValue;
 
 // Interface for data type
 interface DataType {
@@ -84,6 +77,18 @@ export type ISliderInputOptionValue = {
   step: number;
 };
 
+export type IDraggableListInputValue = {
+  type: 'draggable-list';
+  defaultValue: {
+    key: string;
+    subValues?: Record<string, any>;
+  }[];
+  items: Record<
+    string,
+    Record<string, Omit<Exclude<IWidgetOptionValue, IDraggableListInputValue>, 'defaultValue'>>
+  >;
+};
+
 // is used to type the widget definitions which will be used to display all widgets
 export type IWidgetDefinition<TKey extends string = string> = {
   id: TKey;