From b0a606ac9711fc29243eeffdd25dd2933dc28fa1 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Mon, 25 Sep 2023 11:58:36 -0700
Subject: [PATCH] feat(ui): min/max for graphs, cpu graph

---
 frontend/src/components/graph/LineGraph.css |  1 +
 frontend/src/components/graph/LineGraph.tsx | 11 ++++++++---
 frontend/src/pages/Home/index.tsx           | 21 ++++++++++++++++++++-
 frontend/src/style.css                      |  2 +-
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/graph/LineGraph.css b/frontend/src/components/graph/LineGraph.css
index 6ae355c..e79444e 100644
--- a/frontend/src/components/graph/LineGraph.css
+++ b/frontend/src/components/graph/LineGraph.css
@@ -1,4 +1,5 @@
 .graph-container {
   width: 100%;
+  height: 240px;
   margin: 24px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/graph/LineGraph.tsx b/frontend/src/components/graph/LineGraph.tsx
index 1115680..f236536 100644
--- a/frontend/src/components/graph/LineGraph.tsx
+++ b/frontend/src/components/graph/LineGraph.tsx
@@ -16,6 +16,8 @@ interface Props {
   }[],
   xLabel?: string
   yLabel?: string
+  min?: number
+  max?: number
 }
 
 export function LineGraph(props: Props) {
@@ -45,26 +47,29 @@ export function LineGraph(props: Props) {
         }
       })
     })
-  }, [])
+  }, [props.datasets])
 
   return (
     <div className="graph-container">
       <Line
         data={data}
         options={{
+          animation: false,
           maintainAspectRatio: false,
           scales: {
             x: {
               title: {
                 display: props.xLabel !== undefined,
                 text: props.xLabel
-              }
+              },
             },
             y: {
               title: {
                 display: props.yLabel !== undefined,
                 text: props.yLabel
-              }
+              },
+              suggestedMin: props.min || null,
+              suggestedMax: props.max || null
             }
           }
         }}
diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
index f1a3c24..ea69106 100644
--- a/frontend/src/pages/Home/index.tsx
+++ b/frontend/src/pages/Home/index.tsx
@@ -72,7 +72,7 @@ export function Home() {
               <LineGraph
                 labels={ memoryData.map((v) => new Date(v.timestamp * 1000).toLocaleTimeString()) }
                 xLabel='Time'
-                yLabel='Memory Usage'
+                yLabel='Memory Usage (MB)'
                 datasets={[
                   {
                     data: memoryData.map((v) => {
@@ -94,6 +94,25 @@ export function Home() {
                   }
                 ]}
               />
+
+              { /* CPU line */ }
+              <LineGraph
+                labels={ cpuData.map((v) => new Date(v.timestamp * 1000).toLocaleTimeString()) }
+                xLabel='Time'
+                yLabel='CPU Usage (%)'
+                min={0}
+                max={100}
+                datasets={[
+                  {
+                    data: cpuData.map((v) => {
+                      return v.used
+                    }),
+                    label: 'CPU Usage (%)',
+                    color: 'rgba(255, 99, 132, 0.6)',
+                    backgroundColor: 'rgb(255, 99, 132, 0.2)'
+                  }
+                ]}
+              />
             </div>
           </>
         ) : (
diff --git a/frontend/src/style.css b/frontend/src/style.css
index aff686a..f2414c0 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -2,7 +2,7 @@
   --background: #fbfefb;
   --text-primary: var(--background);
   --text-secondary: #092207;
-  --color-primary: #824f92;
+  --color-primary: rgba(255, 99, 132, 0.6);
   --color-secondary: #efc3ef;
   --color-accent: #c832c8;
 }