fix(view): cap storage graphs at 100% (visually)

MauriceNino · Jan 3, 2023 · 453a94b · 453a94b
1 parent 5b375c0
commit 453a94b
Showing 1 changed file with 63 additions and 61 deletions.
diff --git a/apps/view/src/widgets/storage.tsx b/apps/view/src/widgets/storage.tsx
@@ -116,65 +116,65 @@ export const StorageChart: FC<StorageChartProps> = ({
   const layout = useStorageLayout(data, config);
   const layoutNoVirtual = layout.filter(l => !l.virtual);
 
-  const totalSize = Math.max(
-    layoutNoVirtual.reduce((acc, s) => (acc = acc + s.size), 0),
-    1
-  );
-  const totalAvailable = Math.max(
-    totalSize -
-      (load?.layout
-        .slice(0, layoutNoVirtual.length)
-        .reduce((acc, { load }) => acc + load, 0) ?? 0),
-    1
-  );
-  const totalUsed = totalSize - totalAvailable;
+  const totalSize = layoutNoVirtual.reduce((acc, s) => (acc = acc + s.size), 0);
+  const totalUsed =
+    load?.layout
+      .slice(0, layoutNoVirtual.length)
+      .reduce((acc, { load }) => acc + load, 0) ?? 0;
+  const totalAvailable = Math.max(0, totalSize - totalUsed);
+
+  const usageArr = useMemo(() => {
+    if (!multiView) return [];
 
-  let alreadyAdded = 0;
-  const usageArr = layout
-    .reduce(
-      (acc, curr) => {
-        const diskLoad = curr.brands.reduce(
-          (acc, _, i) =>
-            acc === 0 ? load?.layout[alreadyAdded + i]?.load ?? 0 : acc,
-          0
-        );
-        const diskSize = curr.size;
+    let alreadyAdded = 0;
+    return layout
+      .reduce(
+        (acc, curr) => {
+          const diskLoad = curr.brands.reduce(
+            (acc, _, i) =>
+              acc === 0 ? load?.layout[alreadyAdded + i]?.load ?? 0 : acc,
+            0
+          );
+          const diskSize = curr.size;
 
-        const existing = acc.find(
-          o =>
-            curr.raidGroup != null &&
-            curr.raidGroup !== '' &&
-            o.raidGroup === curr.raidGroup
-        );
+          const existing = acc.find(
+            o =>
+              curr.raidGroup != null &&
+              curr.raidGroup !== '' &&
+              o.raidGroup === curr.raidGroup
+          );
 
-        if (existing) {
-          existing.used = existing.used + diskLoad;
-        } else {
-          acc.push({
-            used: diskLoad,
-            available: diskSize - diskLoad,
-          });
-        }
+          if (existing) {
+            existing.used = existing.used + diskLoad;
+          } else {
+            acc.push({
+              used: diskLoad,
+              available: diskSize - diskLoad,
+            });
+          }
 
-        alreadyAdded += curr.brands.length;
-        return acc;
-      },
-      [] as {
-        raidGroup?: string;
-        used: number;
-        available: number;
-      }[]
-    )
-    .map(({ used, available }) => {
-      const usedPercent = Math.min(used / (used + available), 100);
+          alreadyAdded += curr.brands.length;
+          return acc;
+        },
+        [] as {
+          raidGroup?: string;
+          used: number;
+          available: number;
+        }[]
+      )
+      .map(({ used, available }) => {
+        const realPercent = used / (used + available),
+          usedPercent = Math.min(realPercent, 1);
 
-      return {
-        used,
-        available,
-        usedPercent: usedPercent,
-        availablePercent: 1 - usedPercent,
-      };
-    });
+        return {
+          used,
+          available,
+          realPercent,
+          usedPercent,
+          availablePercent: 1 - usedPercent,
+        };
+      });
+  }, [layout, load?.layout, multiView]);
 
   return (
     <MultiChartContainer layout>
@@ -200,17 +200,19 @@ export const StorageChart: FC<StorageChartProps> = ({
                   | typeof usageArr[0]
                   | undefined;
 
+                if (!value) {
+                  return <ThemedText>? % Used</ThemedText>;
+                }
+
                 return (
                   <>
                     <ThemedText>
-                      {value ? (value.usedPercent * 100).toFixed(1) : 0} % Used
+                      {(value.realPercent * 100).toFixed(1)} % Used
                     </ThemedText>
 
                     <ThemedText>
-                      {bytePrettyPrint(value?.used ?? 0)} /{' '}
-                      {bytePrettyPrint(
-                        (value?.available ?? 0) + (value?.used ?? 0)
-                      )}
+                      {bytePrettyPrint(value.used)} /{' '}
+                      {bytePrettyPrint(value.available + value.used)}
                     </ThemedText>
                   </>
                 );
@@ -228,7 +230,7 @@ export const StorageChart: FC<StorageChartProps> = ({
                   <LabelList
                     position='insideLeft'
                     offset={15}
-                    dataKey='usedPercent'
+                    dataKey='realPercent'
                     content={
                       <VertBarStartLabel
                         labelRenderer={value =>
@@ -254,7 +256,7 @@ export const StorageChart: FC<StorageChartProps> = ({
         <ChartContainer
           textLeft={
             showPercentages
-              ? `%: ${(((totalUsed ?? 1) / (totalSize ?? 1)) * 100).toFixed(1)}`
+              ? `%: ${((totalUsed / totalSize) * 100).toFixed(1)}`
               : undefined
           }
           variants={itemVariants}