update

C-D-Lewis · Oct 18, 2024 · 33bd06a · 33bd06a
1 parent 4c17b11
commit 33bd06a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/dashboard2/src/components/AppArea.ts b/dashboard2/src/components/AppArea.ts
@@ -28,8 +28,9 @@ const NoDeviceLabel = () => fabricate('Text')
 const AppCardList = () => fabricate('Row')
   .setStyles({
     flexWrap: 'wrap',
-    padding: '15px',
+    padding: '0px 15px',
   })
+  .setNarrowStyles({ padding: '0px' })
   .onUpdate((el, state) => {
     el.setChildren(state.selectedDeviceApps.map((p) => AppCard({ app: p })));
   }, [fabricate.StateKeys.Created, 'selectedDeviceApps']);

diff --git a/dashboard2/src/components/AppCard.ts b/dashboard2/src/components/AppCard.ts
@@ -22,7 +22,7 @@ const AppControls = ({ app }: { app: DeviceApp }) => fabricate('Column')
 
   })
   .setChildren([
-    fabricate('Text').setText('Controls here'),
+    // fabricate('Text').setText('Controls here'),
   ]);
 
 /**

diff --git a/dashboard2/src/components/DeviceMetrics.ts b/dashboard2/src/components/DeviceMetrics.ts
@@ -10,9 +10,15 @@ declare const fabricate: Fabricate<AppState>;
 
 /** Plot point label offset */
 const LABEL_OFFSET = 3;
-
 /** Graph width based on length of a day */
 const GRAPH_WIDTH = Math.round(1440 / BUCKET_SIZE);
+/** Map of friendly metric names */
+const METRIC_NAME_MAP = {
+  cpu: 'CPU',
+  memoryPerc: 'Memory (%)',
+  tempRaw: 'Temperature',
+  freqPerc: 'CPU Frequency (%)',
+};
 
 /**
  * NoDeviceLabel component.
@@ -72,9 +78,9 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
     ctx.fillRect(0, 0, width, height);
 
     if (!buckets.length) {
-      ctx.font = '18px Arial';
+      ctx.font = '12px Arial';
       ctx.fillStyle = 'white';
-      ctx.fillText('No data', 15, 15);
+      ctx.fillText('No data', 25, 25);
       return;
     }
 
@@ -111,18 +117,22 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
   };
 
   return fabricate('div')
-    .setStyles(() => ({ width: '100%', height: '100%' }))
+    .setStyles(() => ({
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden',
+    }))
     .setChildren([canvas as unknown as FabricateComponent<AppState>])
     .onUpdate(async (el, state, keys) => {
+      canvas.width = el.offsetWidth - 1;
+      canvas.height = el.offsetHeight - 1;
+
       if (keys.includes(fabricate.StateKeys.Created)) {
         fetchMetric(state, name);
         return;
       }
 
       if (keys.includes(dataKey)) {
-        canvas.width = el.offsetWidth - 1;
-        canvas.height = el.offsetHeight;
-
         draw(state);
       }
     }, [fabricate.StateKeys.Created, dataKey]);
@@ -151,12 +161,12 @@ const MetricContainer = ({ name } : { name: MetricName }) => fabricate('Column')
       .setStyles(({ fonts, palette }) => ({
         color: 'white',
         fontSize: '0.9rem',
-        fontFamily: fonts.code,
-        margin: '5px 0px 0px 0px',
-        padding: '0px 5px',
+        fontFamily: fonts.body,
+        margin: '0px',
+        padding: '5px',
         borderBottom: `solid 2px ${palette.grey6}`,
       }))
-      .setText(name),
+      .setText(METRIC_NAME_MAP[name]),
     MetricGraph({ name }),
   ]);
 

diff --git a/dashboard2/src/components/StatRow.ts b/dashboard2/src/components/StatRow.ts
@@ -148,7 +148,7 @@ const StatRow = ({ device }: { device: Device }) => {
       }),
       StatView({
         iconSrc: 'assets/images/uptime.png',
-        text: `${uptimeDays || '-'} days`,
+        text: `${typeof uptimeDays === 'undefined' ? '-' : uptimeDays} days`,
         fontFamily: Theme.fonts.body,
       }),
       Toolbar({ device }),
-Original file line number
+Diff line change
@@ Expand Up @@
       })
       .setChildren([
-        fabricate('Text').setText('Controls here'),
+        // fabricate('Text').setText('Controls here'),
       ]);
     /**
@@ Expand Down @@