Fancy wifi Table and Camera Load widget (Challenge)

frontend/components/CommandWidgets.jsx

@@ -9,12 +9,54 @@ export function Command(props) {
   );
 }
 
-export function PlainCommand({ command, interval, children }) {
+function extractLoadFromString(str = '') {
+  let list = str.split(',').map(ele => {
+    return ele.trim();
+  });
+  let one_min = list[2].split(':')[1];
+  let five_min = list[3];
+  let fifteen_min = list[4];
+
+  return [
+    {
+      label: 'One Minute Load',
+      data: [
+        {
+          primary: new Date(),
+          secondary: parseFloat(one_min),
+        },
+      ],
+    },
+    {
+      label: 'Five Minute Load',
+      data: [
+        {
+          primary: new Date(),
+          secondary: parseFloat(five_min),
+        },
+      ],
+    },
+    {
+      label: 'Fifteen Minute Load',
+      data: [
+        {
+          primary: new Date(),
+          secondary: parseFloat(fifteen_min),
+        },
+      ],
+    },
+  ];
+}
+
+export function PlainCommand({ command, interval, children, updateData }) {
   const [output, setOutput] = useState('');
   useEffect(() => {
     const callback = () =>
       exec(command)
-        .then(result => setOutput(result[0]))
+        .then(result => {
+          setOutput(result[0]);
+          if (updateData !== undefined) updateData(extractLoadFromString(result[0]));
+        })
         .catch(err => setOutput(err[1]));
     const interval_handle = setInterval(callback, interval);
     callback();

frontend/components/GraphUtils/ResizableBox.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ResizableBox as ReactResizableBox } from 'react-resizable';
+
+import 'react-resizable/css/styles.css';
+
+export default function ResizableBox({
+  children,
+  width = 500,
+  height = 300,
+  resizable = true,
+  style = {},
+  className,
+}) {
+  return (
+    <div>
+      {resizable ? (
+        <ReactResizableBox width={width} height={height}>
+          <div
+            style={{
+              ...style,
+              width: '100%',
+              height: '100%',
+            }}
+            className={className}
+          >
+            {children}
+          </div>
+        </ReactResizableBox>
+      ) : (
+        <div
+          style={{
+            width: `${width}px`,
+            height: `${height}px`,
+            ...style,
+          }}
+          className={className}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/GraphUtils/useDevConfig.js

@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from 'react';
+
+const options = {
+  elementType: ['line', 'area', 'bar', 'bubble'],
+  primaryAxisType: ['linear', 'time', 'log', 'ordinal'],
+  secondaryAxisType: ['linear', 'time', 'log', 'ordinal'],
+  primaryAxisPosition: ['top', 'left', 'right', 'bottom'],
+  secondaryAxisPosition: ['top', 'left', 'right', 'bottom'],
+  secondaryAxisStack: [true, false],
+  primaryAxisShow: [true, false],
+  secondaryAxisShow: [true, false],
+  grouping: ['single', 'series', 'primary', 'secondary'],
+  tooltipAnchor: [
+    'closest',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'center',
+    'gridTop',
+    'gridBottom',
+    'gridLeft',
+    'gridRight',
+    'gridCenter',
+    'pointer',
+  ],
+  tooltipAlign: [
+    'auto',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'topLeft',
+    'topRight',
+    'bottomLeft',
+    'bottomRight',
+    'center',
+  ],
+  snapCursor: [true, false],
+};
+
+const optionKeys = Object.keys(options);
+
+export default function useChartConfig({
+  series,
+  useR,
+  show = [],
+  count = 1,
+  resizable = true,
+  canRandomize = false,
+  dataType = 'time',
+  elementType = 'line',
+  primaryAxisType = 'time',
+  secondaryAxisType = 'linear',
+  primaryAxisPosition = 'bottom',
+  secondaryAxisPosition = 'left',
+  primaryAxisStack = false,
+  secondaryAxisStack = true,
+  primaryAxisShow = true,
+  secondaryAxisShow = true,
+  tooltipAnchor = 'closest',
+  tooltipAlign = 'auto',
+  grouping = 'primary',
+  snapCursor = true,
+  datums = 10,
+}) {
+  const [state, setState] = useState({
+    count,
+    resizable,
+    canRandomize,
+    dataType,
+    elementType,
+    primaryAxisType,
+    secondaryAxisType,
+    primaryAxisPosition,
+    secondaryAxisPosition,
+    primaryAxisStack,
+    secondaryAxisStack,
+    primaryAxisShow,
+    secondaryAxisShow,
+    tooltipAnchor,
+    tooltipAlign,
+    grouping,
+    snapCursor,
+    datums,
+    data: [
+      {
+        label: 'One Minute Load',
+        data: [],
+      },
+      {
+        label: 'Five Minute Load',
+        data: [],
+      },
+      {
+        label: 'Fifteen Minute Load',
+        data: [],
+      },
+    ],
+  });
+
+  useEffect(() => {
+    setState(old => ({
+      ...old,
+      data: state.data,
+    }));
+  }, [count, dataType, datums, series, useR]);
+
+  const updateData = new_data => {
+    if (new_data === undefined) return null;
+
+    const temp_data = state;
+    temp_data.data = temp_data.data.map((ele, i) => {
+      return {
+        label: new_data[i].label,
+        data: ele.data.concat(new_data[i].data),
+      };
+    });
+
+    setState(old => ({
+      ...old,
+      data: temp_data.data,
+    }));
+  };
+
+  const Options = optionKeys
+    .filter(option => show.indexOf(option) > -1)
+    .map(option => (
+      <div key={option}>
+        {option}: &nbsp;
+        <select
+          value={state[option]}
+          onChange={({ target: { value } }) =>
+            setState(old => ({
+              ...old,
+              [option]: typeof options[option][0] === 'boolean' ? value === 'true' : value,
+            }))
+          }
+        >
+          {options[option].map(d => (
+            <option value={d} key={d.toString()}>
+              {d.toString()}
+            </option>
+          ))}
+        </select>
+        <br />
+      </div>
+    ));
+
+  return {
+    ...state,
+    updateData,
+    Options,
+  };
+}

frontend/components/LoadGraph.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Chart } from 'react-charts';
+
+import useDemoConfig from './GraphUtils/useDevConfig';
+import ResizableBox from './GraphUtils/ResizableBox';
+import { Command } from './CommandWidgets';
+import { Box, Typography } from '@material-ui/core';
+
+export default function LoadGraph() {
+  const datasets = {
+    labels: [],
+    data: [{}],
+  };
+
+  const { data, updateData } = useDemoConfig({
+    series: 3,
+  });
+
+  const series = React.useMemo(
+    () => ({
+      showPoints: true,
+    }),
+    []
+  );
+
+  const axes = React.useMemo(
+    () => [
+      {
+        primary: true,
+        type: 'time',
+        position: 'bottom',
+      },
+      { type: 'linear', position: 'left' },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <Box
+        style={{
+          padding: '0.5rem',
+        }}
+      >
+        <br />
+        <Typography variant="overline" display="block" gutterBottom>
+          Camera Load averages
+        </Typography>
+        <br />
+
+        <ResizableBox
+          style={{
+            background: 'rgba(0, 27, 45, 0.9)',
+            borderRadius: '5px',
+            padding: '0.1rem',
+          }}
+        >
+          <Chart data={data} series={series} axes={axes} tooltip dark />
+        </ResizableBox>
+      </Box>
+      <Command command="uptime" interval={2000} updateData={updateData} />
+    </>
+  );
+}

frontend/index.jsx

@@ -10,7 +10,7 @@ const theme = createMuiTheme({
   palette: {
     primary: {
       main: '#FA8756',
-      contrastText: 'white',
+      contrastText: '#ffffff',
     },
     secondary: green,
   },

frontend/routes/SystemInformation.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Command } from '../components/CommandWidgets';
+import LoadGraph from '../components/LoadGraph';
 
 export const title = 'System Information';
 export const route = '/system_information';
@@ -9,8 +10,8 @@ export const explanation = `Get an overview of whats going on in the linux side
 export function Component(props) {
   return (
     <div>
+      <LoadGraph />
       <Command command="date" interval={1000} />
-      <Command command="uptime" interval={1000} />
       <Command command="free -h" interval={1000} />
       <Command command="ip a" interval={1000} />
       <Command command="uname -a" interval={10000} />