Add options to sort and resize graphs in dash. widget

2025-11-09 23:15:46 +01:00 · 2023-02-10 18:20:28 +01:00
parent bb010ff54a
commit a05e80bf26
11 changed files with 436 additions and 220 deletions
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
    "dockerode": "^3.3.2",
    "embla-carousel-react": "^7.0.0",
    "fily-publish-gridstack": "^0.0.13",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^9.0.2",
    "i18next": "^21.9.1",
    "i18next-browser-languagedetector": "^6.1.5",
    "i18next-http-backend": "^1.4.1",
--- a/src/components/Dashboard/Tiles/Widgets/DraggableList.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/DraggableList.tsx
@@ -0,0 +1,119 @@
+import { Collapse, createStyles, Stack, Text } from '@mantine/core';
+import { IconChevronDown, IconGripVertical } from '@tabler/icons';
+import { Reorder, useDragControls } from 'framer-motion';
+import { FC, ReactNode, useState } from 'react';
+import { IDraggableListInputValue } from '../../../../widgets/widgets';
+
+const useStyles = createStyles((theme) => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.radius.md,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
+    }`,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
+    marginBottom: theme.spacing.xs,
+    gap: theme.spacing.xs,
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '12px 16px',
+    gap: theme.spacing.sm,
+  },
+  middle: {
+    flexGrow: 1,
+  },
+  symbol: {
+    fontSize: 16,
+  },
+  clickableIcons: {
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],
+    cursor: 'pointer',
+    userSelect: 'none',
+    transition: 'transform .3s ease-in-out',
+  },
+  rotate: {
+    transform: 'rotate(180deg)',
+  },
+  collapseContent: {
+    padding: '12px 16px',
+  },
+}));
+
+type DraggableListParams = {
+  value: IDraggableListInputValue['defaultValue'];
+  onChange: (value: IDraggableListInputValue['defaultValue']) => void;
+  labels: Record<string, string>;
+  children?: Record<string, ReactNode>;
+};
+
+export const DraggableList: FC<DraggableListParams> = (props) => {
+  const keys = props.value.map((v) => v.key);
+
+  return (
+    <div>
+      <Reorder.Group
+        axis="y"
+        values={keys}
+        onReorder={(order) =>
+          props.onChange(order.map((key) => props.value.find((v) => v.key === key)!))
+        }
+        as="div"
+      >
+        {props.value.map((item) => (
+          <ListItem key={item.key} item={item} label={props.labels[item.key]}>
+            {props.children?.[item.key]}
+          </ListItem>
+        ))}
+      </Reorder.Group>
+    </div>
+  );
+};
+
+const ListItem: FC<{
+  item: IDraggableListInputValue['defaultValue'][number];
+  label: string;
+}> = (props) => {
+  const { classes, cx } = useStyles();
+  const controls = useDragControls();
+
+  const [showContent, setShowContent] = useState(false);
+  const hasContent = props.children != null && Object.keys(props.children).length !== 0;
+
+  return (
+    <Reorder.Item value={props.item.key} dragListener={false} dragControls={controls} as="div">
+      <div className={classes.container}>
+        <div className={classes.row}>
+          <IconGripVertical
+            className={classes.clickableIcons}
+            onPointerDown={(e) => controls.start(e)}
+            size={18}
+            stroke={1.5}
+          />
+
+          <div className={classes.middle}>
+            <Text className={classes.symbol}>{props.label}</Text>
+          </div>
+
+          {hasContent && (
+            <IconChevronDown
+              className={cx(classes.clickableIcons, { [classes.rotate]: showContent })}
+              onClick={() => setShowContent(!showContent)}
+              size={18}
+              stroke={1.5}
+            />
+          )}
+        </div>
+
+        {hasContent && (
+          <Collapse in={showContent}>
+            <Stack className={classes.collapseContent}>{props.children}</Stack>
+          </Collapse>
+        )}
+      </div>
+    </Reorder.Item>
+  );
+};
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -3,24 +3,25 @@ import {
  Button,
  Group,
  MultiSelect,
+  NumberInput,
+  Select,
+  Slider,
  Stack,
  Switch,
-  TextInput,
  Text,
-  NumberInput,
-  Slider,
-  Select,
+  TextInput,
 } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { IconAlertTriangle } from '@tabler/icons';
 import { Trans, useTranslation } from 'next-i18next';
-import { useState } from 'react';
-import Widgets from '../../../../widgets';
-import type { IWidgetOptionValue } from '../../../../widgets/widgets';
+import { FC, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-import { IWidget } from '../../../../widgets/widgets';
 import { useColorTheme } from '../../../../tools/color';
+import Widgets from '../../../../widgets';
+import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets';
+import { IWidget } from '../../../../widgets/widgets';
+import { DraggableList } from './DraggableList';

 export type WidgetEditModalInnerProps = {
  widgetId: string;
@@ -93,7 +94,17 @@ export const WidgetsEditModal = ({
            </Alert>
          );
        }
-        return WidgetOptionTypeSwitch(option, index, t, key, value, handleChange);
+
+        return (
+          <WidgetOptionTypeSwitch
+            key={`${key}.${index}`}
+            option={option}
+            widgetId={innerProps.widgetId}
+            propName={key}
+            value={value}
+            handleChange={handleChange}
+          />
+        );
      })}
      <Group position="right">
        <Button onClick={() => context.closeModal(id)} variant="light">
@@ -108,20 +119,20 @@ export const WidgetsEditModal = ({
 // Widget switch
 // Widget options are computed based on their type.
 // here you can define new types for options (along with editing the widgets.d.ts file)
-function WidgetOptionTypeSwitch(
-  option: IWidgetOptionValue,
-  index: number,
-  t: any,
-  key: string,
-  value: string | number | boolean | string[],
-  handleChange: (key: string, value: IntegrationOptionsValueType) => void
-) {
-  const { primaryColor, secondaryColor } = useColorTheme();
+const WidgetOptionTypeSwitch: FC<{
+  option: IWidgetOptionValue;
+  widgetId: string;
+  propName: string;
+  value: any;
+  handleChange: (key: string, value: IntegrationOptionsValueType) => void;
+}> = ({ option, widgetId, propName: key, value, handleChange }) => {
+  const { t } = useTranslation([`modules/${widgetId}`, 'common']);
+  const { primaryColor } = useColorTheme();
+
  switch (option.type) {
    case 'switch':
      return (
        <Switch
-          key={`${option.type}-${index}`}
          label={t(`descriptor.settings.${key}.label`)}
          checked={value as boolean}
          onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
@@ -131,7 +142,6 @@ function WidgetOptionTypeSwitch(
      return (
        <TextInput
          color={primaryColor}
-          key={`${option.type}-${index}`}
          label={t(`descriptor.settings.${key}.label`)}
          value={value as string}
          onChange={(ev) => handleChange(key, ev.currentTarget.value)}
@@ -141,7 +151,6 @@ function WidgetOptionTypeSwitch(
      return (
        <MultiSelect
          color={primaryColor}
-          key={`${option.type}-${index}`}
          data={option.data}
          label={t(`descriptor.settings.${key}.label`)}
          value={value as string[]}
@@ -153,7 +162,6 @@ function WidgetOptionTypeSwitch(
      return (
        <Select
          color={primaryColor}
-          key={`${option.type}-${index}`}
          defaultValue={option.defaultValue}
          data={option.data}
          label={t(`descriptor.settings.${key}.label`)}
@@ -165,7 +173,6 @@ function WidgetOptionTypeSwitch(
      return (
        <NumberInput
          color={primaryColor}
-          key={`${option.type}-${index}`}
          label={t(`descriptor.settings.${key}.label`)}
          value={value as number}
          onChange={(v) => handleChange(key, v!)}
@@ -176,7 +183,6 @@ function WidgetOptionTypeSwitch(
        <Stack spacing="xs">
          <Slider
            color={primaryColor}
-            key={`${option.type}-${index}`}
            label={value}
            value={value as number}
            min={option.min}
@@ -186,7 +192,57 @@ function WidgetOptionTypeSwitch(
          />
        </Stack>
      );
+    case 'draggable-list':
+      // eslint-disable-next-line no-case-declarations
+      const typedVal = value as IDraggableListInputValue['defaultValue'];
+
+      return (
+        <Stack spacing="xs">
+          <Text>{t(`descriptor.settings.${key}.label`)}</Text>
+          <DraggableList
+            value={typedVal}
+            onChange={(v) => handleChange(key, v)}
+            labels={Object.fromEntries(
+              Object.entries(option.items).map(([graphName]) => [
+                graphName,
+                t(`descriptor.settings.${graphName}.label`),
+              ])
+            )}
+          >
+            {Object.fromEntries(
+              Object.entries(option.items).map(([graphName, graph]) => [
+                graphName,
+                Object.entries(graph).map(([subKey, setting], i) => (
+                  <WidgetOptionTypeSwitch
+                    key={`${graphName}.${subKey}.${i}`}
+                    option={setting as IWidgetOptionValue}
+                    widgetId={widgetId}
+                    propName={`${graphName}.${subKey}`}
+                    value={typedVal.find((v) => v.key === graphName)?.subValues?.[subKey]}
+                    handleChange={(_, newVal) =>
+                      handleChange(
+                        key,
+                        typedVal.map((oldVal) =>
+                          oldVal.key === graphName
+                            ? {
+                                ...oldVal,
+                                subValues: {
+                                  ...oldVal.subValues,
+                                  [subKey]: newVal,
+                                },
+                              }
+                            : oldVal
+                        )
+                      )
+                    }
+                  />
+                )),
+              ])
+            )}
+          </DraggableList>
+        </Stack>
+      );
    default:
      return null;
  }
-}
+};
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
@@ -83,6 +83,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
        inner: {
          position: 'sticky',
          top: 30,
+          maxHeight: '100%',
        },
      },
    });
--- a/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
+++ b/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
@@ -228,33 +228,37 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
            ...previous.apps.filter((x) => !isAppAffectedFilter(x)),
            ...previous.apps
              .filter((x) => isAppAffectedFilter(x))
-              .map((app): AppType => ({
-                ...app,
-                area: {
-                  ...app.area,
-                  type: 'wrapper',
-                  properties: {
-                    ...app.area.properties,
-                    id: mainWrapperId,
+              .map(
+                (app): AppType => ({
+                  ...app,
+                  area: {
+                    ...app.area,
+                    type: 'wrapper',
+                    properties: {
+                      ...app.area.properties,
+                      id: mainWrapperId,
+                    },
                  },
-                },
-              })),
+                })
+              ),
          ],
          widgets: [
            ...previous.widgets.filter((widget) => !isWidgetAffectedFilter(widget)),
            ...previous.widgets
              .filter((widget) => isWidgetAffectedFilter(widget))
-              .map((widget): IWidget<string, any> => ({
-                ...widget,
-                area: {
-                  ...widget.area,
-                  type: 'wrapper',
-                  properties: {
-                    ...widget.area.properties,
-                    id: mainWrapperId,
+              .map(
+                (widget): IWidget<string, any> => ({
+                  ...widget,
+                  area: {
+                    ...widget.area,
+                    type: 'wrapper',
+                    properties: {
+                      ...widget.area.properties,
+                      id: mainWrapperId,
+                    },
                  },
-                },
-              })),
+                })
+              ),
          ],
          categories: previous.categories.filter((x) => x.id !== category.id),
          wrappers: previous.wrappers.filter((x) => x.position !== currentItem.position),
--- a/src/widgets/dashDot/DashDotCompactNetwork.tsx
+++ b/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}>
--- a/src/widgets/dashDot/DashDotCompactStorage.tsx
+++ b/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">
--- a/src/widgets/dashDot/DashDotGraph.tsx
+++ b/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,
--- a/src/widgets/dashDot/DashDotTile.tsx
+++ b/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;
--- a/src/widgets/widgets.ts
+++ b/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;
--- a/yarn.lock
+++ b/yarn.lock
@@ -1274,7 +1274,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@motionone/animation@npm:^10.12.0":
+"@motionone/animation@npm:^10.15.1":
  version: 10.15.1
  resolution: "@motionone/animation@npm:10.15.1"
  dependencies:
@@ -1286,17 +1286,17 @@ __metadata:
  languageName: node
  linkType: hard

-"@motionone/dom@npm:10.12.0":
-  version: 10.12.0
-  resolution: "@motionone/dom@npm:10.12.0"
+"@motionone/dom@npm:^10.15.3":
+  version: 10.15.5
+  resolution: "@motionone/dom@npm:10.15.5"
  dependencies:
-    "@motionone/animation": ^10.12.0
-    "@motionone/generators": ^10.12.0
-    "@motionone/types": ^10.12.0
-    "@motionone/utils": ^10.12.0
+    "@motionone/animation": ^10.15.1
+    "@motionone/generators": ^10.15.1
+    "@motionone/types": ^10.15.1
+    "@motionone/utils": ^10.15.1
    hey-listen: ^1.0.8
    tslib: ^2.3.1
-  checksum: 123356f28e44362c4f081aae3df22e576f46bfcb07e01257b2ac64a115668448f29b8de67e4b6e692c5407cffb78ffe7cf9fa1bc064007482bab5dd23a69d380
+  checksum: 2453fe3df6a2b4b339d075bcd598bda1eee1926ba0ad881edfd154362b0992c91f31c08d83c469c7e8cb8bf8ebc0ed5530972673cf5c74d99e46e3772cf5f1cb
  languageName: node
  linkType: hard

@@ -1310,7 +1310,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@motionone/generators@npm:^10.12.0":
+"@motionone/generators@npm:^10.15.1":
  version: 10.15.1
  resolution: "@motionone/generators@npm:10.15.1"
  dependencies:
@@ -1321,14 +1321,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.15.1":
+"@motionone/types@npm:^10.15.1":
  version: 10.15.1
  resolution: "@motionone/types@npm:10.15.1"
  checksum: 98091f7dca257508d94d1080678c433da39a814e8e58aaa742212bf6c2a5b5e2120a6251a06e3ea522219ce6d1b6eb6aa2cab224b803fe52789033d8398ef0aa
  languageName: node
  linkType: hard

-"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.15.1":
+"@motionone/utils@npm:^10.15.1":
  version: 10.15.1
  resolution: "@motionone/utils@npm:10.15.1"
  dependencies:
@@ -4786,33 +4786,21 @@ __metadata:
  languageName: node
  linkType: hard

-"framer-motion@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "framer-motion@npm:6.5.1"
+"framer-motion@npm:^9.0.2":
+  version: 9.0.2
+  resolution: "framer-motion@npm:9.0.2"
  dependencies:
    "@emotion/is-prop-valid": ^0.8.2
-    "@motionone/dom": 10.12.0
-    framesync: 6.0.1
+    "@motionone/dom": ^10.15.3
    hey-listen: ^1.0.8
-    popmotion: 11.0.3
-    style-value-types: 5.0.0
-    tslib: ^2.1.0
+    tslib: ^2.4.0
  peerDependencies:
-    react: ">=16.8 || ^17.0.0 || ^18.0.0"
-    react-dom: ">=16.8 || ^17.0.0 || ^18.0.0"
+    react: ^18.0.0
+    react-dom: ^18.0.0
  dependenciesMeta:
    "@emotion/is-prop-valid":
      optional: true
-  checksum: 737959063137b4ccafe01e0ac0c9e5a9531bf3f729f62c34ca7a5d7955e6664f70affd22b044f7db51df41acb21d120a4f71a860e17a80c4db766ad66f2153a1
-  languageName: node
-  linkType: hard
-
-"framesync@npm:6.0.1":
-  version: 6.0.1
-  resolution: "framesync@npm:6.0.1"
-  dependencies:
-    tslib: ^2.1.0
-  checksum: a23ebe8f7e20a32c0b99c2f8175b6f07af3ec6316aad52a2316316a6d011d717af8d2175dcc2827031c59fabb30232ed3e19a720a373caba7f070e1eae436325
+  checksum: 5694d3a49acb9f753f0eed4a946c2b33efc237e0863b882cc4bed9a6022447ce2c9024134b5e9fd7b6f73602d9af046fa633c0f7235e8cbb24702b403299b55e
  languageName: node
  linkType: hard

@@ -5397,7 +5385,7 @@ __metadata:
    eslint-plugin-testing-library: ^5.5.1
    eslint-plugin-unused-imports: ^2.0.0
    fily-publish-gridstack: ^0.0.13
-    framer-motion: ^6.5.1
+    framer-motion: ^9.0.2
    i18next: ^21.9.1
    i18next-browser-languagedetector: ^6.1.5
    i18next-http-backend: ^1.4.1
@@ -7684,18 +7672,6 @@ __metadata:
  languageName: node
  linkType: hard

-"popmotion@npm:11.0.3":
-  version: 11.0.3
-  resolution: "popmotion@npm:11.0.3"
-  dependencies:
-    framesync: 6.0.1
-    hey-listen: ^1.0.8
-    style-value-types: 5.0.0
-    tslib: ^2.1.0
-  checksum: 9fe7d03b4ec0e85bfb9dadc23b745147bfe42e16f466ba06e6327197d0e38b72015afc2f918a8051dedc3680310417f346ffdc463be6518e2e92e98f48e30268
-  languageName: node
-  linkType: hard
-
 "postcss@npm:8.4.14":
  version: 8.4.14
  resolution: "postcss@npm:8.4.14"
@@ -8799,16 +8775,6 @@ __metadata:
  languageName: node
  linkType: hard

-"style-value-types@npm:5.0.0":
-  version: 5.0.0
-  resolution: "style-value-types@npm:5.0.0"
-  dependencies:
-    hey-listen: ^1.0.8
-    tslib: ^2.1.0
-  checksum: 16d198302cd102edf9dba94e7752a2364c93b1eaa5cc7c32b42b28eef4af4ccb5149a3f16bc2a256adc02616a2404f4612bd15f3081c1e8ca06132cae78be6c0
-  languageName: node
-  linkType: hard
-
 "styled-jsx@npm:5.1.1":
  version: 5.1.1
  resolution: "styled-jsx@npm:5.1.1"
@@ -9073,7 +9039,7 @@ __metadata:
  languageName: node
  linkType: hard

-"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
  version: 2.5.0
  resolution: "tslib@npm:2.5.0"
  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1