From 630e52359016c0dac8f9cfef239fa3cce88dea74 Mon Sep 17 00:00:00 2001
From: RawToast <146118920+RawToast225@users.noreply.github.com>
Date: Wed, 22 Nov 2023 04:19:59 -0700
Subject: [PATCH] [UI] Improve download speed chart (#3244)

* update the amount of data points that avgdownloadspeed uses to represent the graph in downloads to be a higher number, changed the numbers to not jump around so much on the same row

* style change to be compliant
---
 .../DownloadManager/components/ProgressHeader/index.css  | 3 ++-
 .../DownloadManager/components/ProgressHeader/index.tsx  | 9 ++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/frontend/screens/DownloadManager/components/ProgressHeader/index.css b/src/frontend/screens/DownloadManager/components/ProgressHeader/index.css
index d810ec8f40..7e1fceb481 100644
--- a/src/frontend/screens/DownloadManager/components/ProgressHeader/index.css
+++ b/src/frontend/screens/DownloadManager/components/ProgressHeader/index.css
@@ -54,6 +54,8 @@
 .realtimeDownloadStat {
   white-space: nowrap;
   margin: 0px;
+  width: 6em;
+  text-align: start;
 }
 
 .realtimeDownloadStatLabel {
@@ -66,7 +68,6 @@
 .realtimeDownloadStatContainer {
   align-self: center;
   margin: 1em;
-  box-sizing: border-box;
 }
 
 .downloadRateChart {
diff --git a/src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx b/src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx
index 1ab81b20e0..a4ae1d7c48 100644
--- a/src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx
+++ b/src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx
@@ -20,19 +20,22 @@ export default function ProgressHeader(props: {
   appName: string
   state: DownloadManagerState
 }) {
+  const sampleSize = 100
   const { t } = useTranslation()
   const [progress] = hasProgress(props.appName)
   const [avgSpeed, setAvgDownloadSpeed] = useState<Point[]>(
-    Array<Point>(20).fill({ download: 0, disk: 0 })
+    Array<Point>(sampleSize).fill({ download: 0, disk: 0 })
   )
 
   useEffect(() => {
     if (props.state === 'idle') {
-      setAvgDownloadSpeed(Array<Point>(20).fill({ download: 0, disk: 0 }))
+      setAvgDownloadSpeed(
+        Array<Point>(sampleSize).fill({ download: 0, disk: 0 })
+      )
       return
     }
 
-    if (avgSpeed.length > 19) {
+    if (avgSpeed.length > sampleSize - 1) {
       avgSpeed.shift()
     }