Fancy wifi Table and Camera Load widget (Challenge)

frontend/components/CommandWidgets.jsx

@@ -1,15 +1,25 @@
-import React from 'react';
+import { default as React, useEffect, useState } from 'react';
+import { exec } from '../util/exec';
 
-export function Command({ command, output, children }) {
+export function Command(props) {
   return (
     <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
-      $ {command} {`\n`} <PlainCommand children={children} output={output} />
+      $ {props.command} {`\n`} <PlainCommand {...props} />
     </pre>
   );
 }
 
-export function PlainCommand({ children, output }) {
-  if (!output) return null;
+export function PlainCommand({ command, interval, children }) {
+  const [output, setOutput] = useState('');
+  useEffect(() => {
+    const callback = () =>
+      exec(command)
+        .then(result => setOutput(result[0]))
+        .catch(err => setOutput(err[1]));
+    const interval_handle = setInterval(callback, interval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, [command]);
 
   if (children === undefined) {
     return <>{output}</>;

frontend/components/LoadGraph.jsx

@@ -0,0 +1,144 @@
+import Chart from 'chart.js';
+import React, { createRef, useEffect } from 'react';
+import 'chartjs-plugin-zoom';
+import { Button } from '@material-ui/core';
+import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import { blue, green, orange } from '@material-ui/core/colors';
+
+var chart = null;
+const update_interval = 1000;
+const command = 'uptime';
+const chart_title = 'Load Averages';
+
+const chart_config = {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [
+      {
+        label: '1 minute',
+        data: [],
+        backgroundColor: 'rgba(255, 100, 100, 0.1)',
+        borderColor: orange.A100,
+        borderWidth: 1.5,
+      },
+      {
+        label: '5 minute',
+        data: [],
+        backgroundColor: 'rgba(50, 255, 50, 0.1)',
+        borderColor: green.A200,
+        borderWidth: 1.5,
+      },
+      {
+        label: '15 minute',
+        data: [],
+        backgroundColor: 'rgba(100, 100, 255, 0.1)',
+        borderColor: blue.A100,
+        borderWidth: 1.5,
+      },
+    ],
+  },
+  options: {
+    title: {
+      display: true,
+      text: chart_title,
+      fontSize: 16,
+    },
+    hover: {
+      animationDuration: 0,
+    },
+    responsiveAnimationDuration: 0,
+    scales: {
+      y: {
+        beginAtZero: true,
+      },
+    },
+    elements: {
+      line: {
+        tension: 0,
+      },
+    },
+    tooltips: {
+      mode: 'x',
+    },
+    plugins: {
+      zoom: {
+        zoom: {
+          enabled: true,
+          mode: 'x',
+        },
+        pan: {
+          enabled: true,
+          mode: 'x',
+        },
+      },
+    },
+  },
+};
+
+export default function LoadGraph() {
+  const chartRef = createRef();
+
+  function updateData(obj) {
+    if (chart == null) return;
+    chart.data.labels.push(obj.x_value);
+    chart.data.datasets.forEach((dataset, idx) => {
+      dataset.data.push(obj.y_value[idx]);
+    });
+    chart.update();
+  }
+
+  function extractLoadFromString(str = '') {
+    const list = str.split(',');
+    const time_stamp = list[0].trim();
+    const one_min = parseFloat(list[2].split(':')[1]);
+    const five_min = parseFloat(list[3]);
+    const fifteen_min = parseFloat(list[4]);
+
+    return {
+      x_value: time_stamp,
+      y_value: [one_min, five_min, fifteen_min],
+      original_str: str,
+    };
+  }
+
+  useEffect(() => {
+    chart = new Chart(chartRef.current, chart_config);
+
+    const callback = () =>
+      exec(command)
+        .then(result => {
+          updateData(extractLoadFromString(result[0]));
+        })
+        .catch(err => console.log(err[1]));
+    const interval_handle = setInterval(callback, update_interval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, []);
+
+  function resetZoom() {
+    if (chart == null) {
+      console.log('Chart is not defined/initialized');
+      return;
+    }
+    chart.resetZoom();
+  }
+
+  return (
+    <div>
+      <Button
+        variant="outlined"
+        color="primary"
+        size="small"
+        onClick={resetZoom}
+        style={{
+          margin: '0.5rem',
+        }}
+        endIcon={<RotateLeftIcon />}
+      >
+        Reset Zoom
+      </Button>
+      <canvas ref={chartRef} id="myChart" width="400" height="200"></canvas>
+    </div>
+  );
+}