feat: add option DASHDOT_NETWORK_SPEED_AS_BYTES to switch network spe…

…ed to bytes per second

fixes #930

apps/docs/docs/config/ui-features.mdx

@@ -62,6 +62,17 @@ Shows any units in the imperial system, instead of the default metric.
 | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
 | <img src="/img/cpu_view_temps.png" alt="CPU widget with temps in celsius" style={{maxHeight: "250px"}} /> | <img src="/img/cpu_view_temps_fahrenheit.png" alt="CPU widget with temps in fahrenheit" style={{maxHeight: "250px"}} /> |
 
+## `DASHDOT_NETWORK_SPEED_AS_BYTES`
+
+Shows the upload and download speed in bytes (e.g. Megabytes per second) instead of bits (e.g. Megabit per second).
+
+- type: `boolean`
+- default: `false`
+
+| `false`                                                                                                                        | `true`                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="/img/network_bits_per_second.png" alt="Network widget with speed in bits per second" style={{maxHeight: "250px"}} /> | <img src="/img/network_bytes_per_second.png" alt="Network widget with speed in bytes per second" style={{maxHeight: "250px"}} /> |
+
 ## `DASHDOT_ALWAYS_SHOW_PERCENTAGES`
 
 To always show the current percentage of each graph in the top-left corner. Without enabling this,

apps/server/src/config.ts

@@ -45,6 +45,7 @@ export const CONFIG: Config = {
   custom_host: penv('CUSTOM_HOST'),
   page_title: penv('PAGE_TITLE') ?? 'dash.',
   use_imperial: penv('USE_IMPERIAL') === 'true',
+  network_speed_as_bytes: penv('NETWORK_SPEED_AS_BYTES') === 'true',
   always_show_percentages: penv('ALWAYS_SHOW_PERCENTAGES') === 'true',
 
   widget_list: lst(

apps/view/src/utils/calculations.ts

@@ -2,13 +2,21 @@ export const toCommas = (num: number, commas = 1): number => {
   return Math.round(num * Math.pow(10, commas)) / Math.pow(10, commas);
 };
 
-export const bpsPrettyPrint = (bits: number) => {
+export const bpsPrettyPrint = (bits: number, asBytes = false) => {
   return bits >= 1000 * 1000 * 1000
-    ? `${(bits / 1000 / 1000 / 1000).toFixed(1)} Gb/s`
+    ? asBytes
+      ? `${(bits / 1000 / 1000 / 1000 / 8).toFixed(1)} GB/s`
+      : `${(bits / 1000 / 1000 / 1000).toFixed(1)} Gb/s`
     : bits >= 1000 * 1000
-    ? `${(bits / 1000 / 1000).toFixed(1)} Mb/s`
+    ? asBytes
+      ? `${(bits / 1000 / 1000 / 8).toFixed(1)} MB/s`
+      : `${(bits / 1000 / 1000).toFixed(1)} Mb/s`
     : bits >= 1000
-    ? `${(bits / 1000).toFixed(1)} Kb/s`
+    ? asBytes
+      ? `${(bits / 1000 / 8).toFixed(1)} KB/s`
+      : `${(bits / 1000).toFixed(1)} Kb/s`
+    : asBytes
+    ? `${(bits / 8).toFixed(1)} B/s`
     : `${bits.toFixed(1)} b/s`;
 };
 

apps/view/src/widgets/gpu.tsx

@@ -44,53 +44,53 @@ export const GpuChart: FC<GpuChartProps> = ({
 
   const chartLoad = (
     <ChartContainer
-    contentLoaded={chartDataLoad.length > 1}
-    textLeft={
-      showPercentages
-        ? `%: ${(chartDataLoad.at(-1)?.y as number)?.toFixed(1)} (Load)`
-        : undefined
-    }
-    textOffset={textOffset}
-    textSize={textSize}
-    renderChart={size => (
-      <DefaultAreaChart
-        data={chartDataLoad}
-        height={size.height}
-        width={size.width}
-        color={theme.colors.gpuPrimary}
-        renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
-      >
-        <YAxis hide={true} type='number' domain={[-5, 105]} />
-      </DefaultAreaChart>
-    )}
-  ></ChartContainer>
+      contentLoaded={chartDataLoad.length > 1}
+      textLeft={
+        showPercentages
+          ? `%: ${(chartDataLoad.at(-1)?.y as number)?.toFixed(1)} (Load)`
+          : undefined
+      }
+      textOffset={textOffset}
+      textSize={textSize}
+      renderChart={size => (
+        <DefaultAreaChart
+          data={chartDataLoad}
+          height={size.height}
+          width={size.width}
+          color={theme.colors.gpuPrimary}
+          renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
+        >
+          <YAxis hide={true} type='number' domain={[-5, 105]} />
+        </DefaultAreaChart>
+      )}
+    ></ChartContainer>
   );
 
   const chartMemory = (
     <ChartContainer
-    contentLoaded={chartDataMemory.length > 1}
-    textLeft={`%: ${(chartDataMemory.at(-1)?.y as number)?.toFixed(
-      1
-    )} (Memory)`}
-    textOffset={textOffset}
-    textSize={textSize}
-    renderChart={size => (
-      <DefaultAreaChart
-        data={chartDataMemory}
-        height={size.height}
-        width={size.width}
-        color={theme.colors.gpuPrimary}
-        renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
-      >
-        <YAxis hide={true} type='number' domain={[-5, 105]} />
-      </DefaultAreaChart>
-    )}
-  ></ChartContainer>
+      contentLoaded={chartDataMemory.length > 1}
+      textLeft={`%: ${(chartDataMemory.at(-1)?.y as number)?.toFixed(
+        1
+      )} (Memory)`}
+      textOffset={textOffset}
+      textSize={textSize}
+      renderChart={size => (
+        <DefaultAreaChart
+          data={chartDataMemory}
+          height={size.height}
+          width={size.width}
+          color={theme.colors.gpuPrimary}
+          renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
+        >
+          <YAxis hide={true} type='number' domain={[-5, 105]} />
+        </DefaultAreaChart>
+      )}
+    ></ChartContainer>
   );
 
-  if (filter == "load")
+  if (filter === 'load')
     return <MultiChartContainer columns={1}>{chartLoad}</MultiChartContainer>;
-  else if (filter == "memory")
+  else if (filter === 'memory')
     return <MultiChartContainer columns={1}>{chartMemory}</MultiChartContainer>;
   else
     return (

apps/view/src/widgets/network.tsx

@@ -38,6 +38,7 @@ export const NetworkChart: FC<NetworkChartProps> = ({
   const override = config.override;
   const speedUp = override.network_speed_up ?? data.speedUp;
   const speedDown = override.network_speed_down ?? data.speedDown;
+  const asBytes = config.network_speed_as_bytes;
 
   const chartDataDown = load.map((load, i) => ({
     x: i,
@@ -63,8 +64,9 @@ export const NetworkChart: FC<NetworkChartProps> = ({
       textLeft={
         showPercentages
           ? `↑ ${bpsPrettyPrint(
-            ((chartDataUp.at(-1)?.y as number) ?? 0) * 8
-          )}`
+              ((chartDataUp.at(-1)?.y as number) ?? 0) * 8,
+              asBytes
+            )}`
           : '↑'
       }
       textOffset={textOffset}
@@ -76,7 +78,7 @@ export const NetworkChart: FC<NetworkChartProps> = ({
           width={size.width}
           color={theme.colors.networkPrimary}
           renderTooltip={val =>
-            bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8)
+            bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8, asBytes)
           }
         >
           <YAxis
@@ -95,8 +97,9 @@ export const NetworkChart: FC<NetworkChartProps> = ({
       textLeft={
         showPercentages
           ? `↓ ${bpsPrettyPrint(
-            ((chartDataDown.at(-1)?.y as number) ?? 0) * 8
-          )}`
+              ((chartDataDown.at(-1)?.y as number) ?? 0) * 8,
+              asBytes
+            )}`
           : '↓'
       }
       textOffset={textOffset}
@@ -108,7 +111,7 @@ export const NetworkChart: FC<NetworkChartProps> = ({
           width={size.width}
           color={theme.colors.networkPrimary}
           renderTooltip={val =>
-            bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8)
+            bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8, asBytes)
           }
         >
           <YAxis
@@ -121,9 +124,9 @@ export const NetworkChart: FC<NetworkChartProps> = ({
     ></ChartContainer>
   );
 
-  if (filter == "up")
+  if (filter === 'up')
     return <MultiChartContainer columns={1}>{chartUp}</MultiChartContainer>;
-  else if (filter == "down")
+  else if (filter === 'down')
     return <MultiChartContainer columns={1}>{chartDown}</MultiChartContainer>;
   else
     return (
@@ -155,6 +158,7 @@ export const NetworkWidget: FC<NetworkWidgetProps> = ({
   const interfaceSpeed =
     override.network_interface_speed ?? data.interfaceSpeed;
   const publicIp = override.network_public_ip ?? data.publicIp;
+  const asBytes = config.network_speed_as_bytes;
 
   return (
     <HardwareInfoContainer
@@ -164,11 +168,11 @@ export const NetworkWidget: FC<NetworkWidgetProps> = ({
         type: { label: 'Type', value: type },
         speed_up: {
           label: 'Speed (Up)',
-          value: speedUp ? bpsPrettyPrint(speedUp) : undefined,
+          value: speedUp ? bpsPrettyPrint(speedUp, asBytes) : undefined,
         },
         speed_down: {
           label: 'Speed (Down)',
-          value: speedDown ? bpsPrettyPrint(speedDown) : undefined,
+          value: speedDown ? bpsPrettyPrint(speedDown, asBytes) : undefined,
         },
         interface_speed: {
           label: 'Interface Speed',

libs/common/src/types.ts

@@ -105,6 +105,7 @@ export type Config = {
   custom_host?: string;
   page_title: string;
   use_imperial: boolean;
+  network_speed_as_bytes: boolean;
   enable_cpu_temps: boolean;
   always_show_percentages: boolean;