From a533aad7b95335d3a36b8341925ad6ac619b5b77 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Tue, 31 Jan 2023 20:12:03 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20switch=20for=20percentages=20?=
 =?UTF-8?q?in=20dash.=20widget=20#641?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/modules/dashdot.json |  3 +++
 src/widgets/dashDot/DashDotGraph.tsx   | 20 ++++++++++++++++----
 src/widgets/dashDot/DashDotTile.tsx    |  7 +++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/public/locales/en/modules/dashdot.json b/public/locales/en/modules/dashdot.json
index 9268364f7..5d1e3e623 100644
--- a/public/locales/en/modules/dashdot.json
+++ b/public/locales/en/modules/dashdot.json
@@ -18,6 +18,9 @@
       },
       "url": {
         "label": "Dash. URL"
+      },
+      "usePercentages": {
+        "label": "Display percentages"
       }
     }
   },
diff --git a/src/widgets/dashDot/DashDotGraph.tsx b/src/widgets/dashDot/DashDotGraph.tsx
index 571a021c7..f64ba8140 100644
--- a/src/widgets/dashDot/DashDotGraph.tsx
+++ b/src/widgets/dashDot/DashDotGraph.tsx
@@ -5,9 +5,15 @@ interface DashDotGraphProps {
   graph: GraphType;
   isCompact: boolean;
   dashDotUrl: string;
+  usePercentages: boolean;
 }
 
-export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps) => {
+export const DashDotGraph = ({
+  graph,
+  isCompact,
+  dashDotUrl,
+  usePercentages,
+}: DashDotGraphProps) => {
   const { classes } = useStyles();
   return (
     <Stack
@@ -25,13 +31,18 @@ export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps
         className={classes.iframe}
         key={graph.name}
         title={graph.name}
-        src={useIframeSrc(dashDotUrl, graph, isCompact)}
+        src={useIframeSrc(dashDotUrl, graph, isCompact, usePercentages)}
       />
     </Stack>
   );
 };
 
-const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean) => {
+const useIframeSrc = (
+  dashDotUrl: string,
+  graph: GraphType,
+  isCompact: boolean,
+  usePercentages: boolean
+) => {
   const { colorScheme, colors, radius } = useMantineTheme();
   const surface = (colorScheme === 'dark' ? colors.dark[7] : colors.gray[0]).substring(1); // removes # from hex value
 
@@ -45,7 +56,8 @@ const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean)
     `&surface=${surface}` +
     `&gap=${isCompact ? 10 : 5}` +
     `&innerRadius=${radius.lg}` +
-    `&multiView=${graph.isMultiView}`
+    `&multiView=${graph.isMultiView}` +
+    `&showPercentage=${usePercentages ? 'true' : 'false'}`
   );
 };
 
diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx
index 89f83d353..07ff508fc 100644
--- a/src/widgets/dashDot/DashDotTile.tsx
+++ b/src/widgets/dashDot/DashDotTile.tsx
@@ -25,6 +25,10 @@ const definition = defineWidget({
       type: 'switch',
       defaultValue: true,
     },
+    usePercentages: {
+      type: 'switch',
+      defaultValue: false,
+    },
     graphs: {
       type: 'multi-select',
       defaultValue: ['cpu', 'memory'],
@@ -88,6 +92,8 @@ function DashDotTile({ widget }: DashDotTileProps) {
 
   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)
   );
@@ -109,6 +115,7 @@ function DashDotTile({ widget }: DashDotTileProps) {
                 graph={graph}
                 dashDotUrl={dashDotUrl}
                 isCompact={isCompact}
+                usePercentages={usePercentages}
               />
             ))}
           </Group>