Settle on four fields with free size displayed as Available

src/components/services/widget/container.jsx

@@ -9,7 +9,18 @@ export default function Container({ error = false, children, service }) {
   const fields = service?.widget?.fields;
   const type = service?.widget?.type;
   if (fields && type) {
-    visibleChildren = children.filter(child => fields.some(field => `${type}.${field}` === child?.props?.label));
+    // if the field contains a "." then it most likely contains a common loc value
+    // logic now allows a fields array that can look like:
+    // fields: [ "resources.cpu", "resources.mem", "field"]
+    // or even
+    // fields: [ "resources.cpu", "widget_type.field" ]
+    visibleChildren = children.filter(child => fields.some(field => {
+      let fullField = field;
+      if (!field.includes(".")) {
+        fullField = `${type}.${field}`;
+      }
+      return fullField === child?.props?.label;
+    }));
   }
 
   return <div className="relative flex flex-row w-full">{visibleChildren}</div>;

src/widgets/diskstation/component.jsx

@@ -35,7 +35,9 @@ export default function Component({ service }) {
   // storage info
   // TODO: figure out how to display info for more than one volume
   const volume = storageData.data.vol_info?.[0];
-  const freeVolume = 100 - (100 * (parseFloat(volume?.used_size) / parseFloat(volume?.total_size)));
+  const usedBytes = parseFloat(volume?.used_size);
+  const totalBytes = parseFloat(volume?.total_size);
+  const freeBytes = totalBytes - usedBytes;
 
   // utilization info
   const { cpu, memory } = utilizationData.data;
@@ -45,7 +47,7 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="diskstation.uptime" value={ uptime } />
-      <Block label="diskstation.volumeAvailable" value={ t("common.percent", { value: freeVolume }) } />
+      <Block label="diskstation.volumeAvailable" value={ t("common.bbytes", { value: freeBytes, maximumFractionDigits: 1 }) } />
       <Block label="resources.cpu" value={ t("common.percent", { value: cpuLoad }) } />
       <Block label="resources.mem" value={ t("common.percent", { value: memoryUsage }) } />
     </Container>