From 3e7158b3d45f4b9f30e0d2f51ee6943b105bd81f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 4 Apr 2024 14:09:19 -0600
Subject: [PATCH] Cleanup spacing

---
 web/src/components/graph/SystemGraph.tsx |  1 +
 web/src/views/system/CameraMetrics.tsx   | 70 +++++++++++++-----------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 870f73ddc..f44844fed 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -293,6 +293,7 @@ export function CameraLineGraph({
   );
 
   const options = useMemo(() => {
+    console.log(`new options`);
     return {
       chart: {
         id: graphId,
diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
index 295c90e56..b553ecdae 100644
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@@ -148,45 +148,49 @@ export default function CameraMetrics({
 
   return (
     <div className="size-full mt-4 flex flex-col overflow-y-auto">
-      <div className="mb-5">Cameras</div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {config &&
           Object.values(config.cameras).map((camera) => {
             if (camera.enabled) {
               return (
-                <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
-                  {Object.keys(cameraCpuSeries).includes(camera.name) ? (
-                    <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                      <div className="mb-5 capitalize">
-                        {camera.name.replaceAll("_", " ")} CPU
+                <div className="w-full flex flex-col">
+                  <div className="mb-6 capitalize">
+                    {camera.name.replaceAll("_", " ")}
+                  </div>
+                  <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
+                    {Object.keys(cameraCpuSeries).includes(camera.name) ? (
+                      <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                        <div className="mb-5">CPU</div>
+                        <CameraLineGraph
+                          graphId={`${camera.name}-cpu`}
+                          unit="%"
+                          dataLabels={["ffmpeg", "capture", "detect"]}
+                          updateTimes={updateTimes}
+                          data={Object.values(
+                            cameraCpuSeries[camera.name] || {},
+                          )}
+                        />
                       </div>
-                      <CameraLineGraph
-                        graphId={`${camera.name}-cpu`}
-                        unit="%"
-                        dataLabels={["ffmpeg", "capture", "detect"]}
-                        updateTimes={updateTimes}
-                        data={Object.values(cameraCpuSeries[camera.name] || {})}
-                      />
-                    </div>
-                  ) : (
-                    <Skeleton className="size-full aspect-video" />
-                  )}
-                  {Object.keys(cameraFpsSeries).includes(camera.name) ? (
-                    <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                      <div className="mb-5 capitalize">
-                        {camera.name.replaceAll("_", " ")} DPS
+                    ) : (
+                      <Skeleton className="size-full aspect-video" />
+                    )}
+                    {Object.keys(cameraFpsSeries).includes(camera.name) ? (
+                      <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                        <div className="mb-5">DPS</div>
+                        <CameraLineGraph
+                          graphId={`${camera.name}-dps`}
+                          unit=" DPS"
+                          dataLabels={["detect", "skipped"]}
+                          updateTimes={updateTimes}
+                          data={Object.values(
+                            cameraFpsSeries[camera.name] || {},
+                          )}
+                        />
                       </div>
-                      <CameraLineGraph
-                        graphId={`${camera.name}-dps`}
-                        unit=" DPS"
-                        dataLabels={["detect", "skipped"]}
-                        updateTimes={updateTimes}
-                        data={Object.values(cameraFpsSeries[camera.name] || {})}
-                      />
-                    </div>
-                  ) : (
-                    <Skeleton className="size-full aspect-video" />
-                  )}
+                    ) : (
+                      <Skeleton className="size-full aspect-video" />
+                    )}
+                  </div>
                 </div>
               );
             }