@robdobsn/raftjs 1.1.1 → 1.3.2

package/dist/{main.d.ts → web/main.d.ts}

@@ -1,7 +1,8 @@
+declare const raftChannel: typeof import("./RaftChannelBLE.web").default;
+export { raftChannel as RaftChannelBLE };
 export { default as RaftCommsStats } from './RaftCommsStats';
 export { default as RaftConnector } from './RaftConnector';
 export { default as RaftChannel } from './RaftChannel';
-export { default as RaftChannelWebBLE } from './RaftChannelWebBLE';
 export { default as RaftChannelWebSocket } from './RaftChannelWebSocket';
 export { default as RaftFileHandler } from './RaftFileHandler';
 export { default as RaftLog } from './RaftLog';
@@ -10,9 +11,11 @@ export { default as RaftMsgHandler } from './RaftMsgHandler';
 export { default as RaftStreamHandler } from './RaftStreamHandler';
 export { default as RaftSystemUtils } from './RaftSystemUtils';
 export { default as RaftUtils } from './RaftUtils';
+export { DeviceManager as RaftDeviceManager } from './RaftDeviceManager';
 export * from './RaftTypes';
 export * from './RaftSystemType';
 export * from './RaftWifiTypes';
 export * from './RaftConnEvents';
 export * from './RaftUpdateEvents';
 export * from "./RaftProtocolDefs";
+export * from "./RaftDeviceStates";

package/dist/web/main.js

@@ -0,0 +1,46 @@
+"use strict";
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+// RaftJS
+// Commms library for the Raft ESP32 application framework supporting BLE, WebSockets and Serial
+//
+// Rob Dobson & Chris Greening 2020-2024
+// (C) 2020-2024 All rights reserved
+//
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RaftDeviceManager = exports.RaftUtils = exports.RaftSystemUtils = exports.RaftStreamHandler = exports.RaftMsgHandler = exports.RaftMiniHDLC = exports.RaftLog = exports.RaftFileHandler = exports.RaftChannelWebSocket = exports.RaftConnector = exports.RaftCommsStats = exports.RaftChannelBLE = void 0;
+const tslib_1 = require("tslib");
+const RaftChannelBLEFactory_1 = require("./RaftChannelBLEFactory");
+const raftChannel = (0, RaftChannelBLEFactory_1.createBLEChannel)();
+exports.RaftChannelBLE = raftChannel;
+var RaftCommsStats_1 = require("./RaftCommsStats");
+Object.defineProperty(exports, "RaftCommsStats", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftCommsStats_1).default; } });
+var RaftConnector_1 = require("./RaftConnector");
+Object.defineProperty(exports, "RaftConnector", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftConnector_1).default; } });
+var RaftChannelWebSocket_1 = require("./RaftChannelWebSocket");
+Object.defineProperty(exports, "RaftChannelWebSocket", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftChannelWebSocket_1).default; } });
+var RaftFileHandler_1 = require("./RaftFileHandler");
+Object.defineProperty(exports, "RaftFileHandler", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftFileHandler_1).default; } });
+var RaftLog_1 = require("./RaftLog");
+Object.defineProperty(exports, "RaftLog", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftLog_1).default; } });
+var RaftMiniHDLC_1 = require("./RaftMiniHDLC");
+Object.defineProperty(exports, "RaftMiniHDLC", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftMiniHDLC_1).default; } });
+var RaftMsgHandler_1 = require("./RaftMsgHandler");
+Object.defineProperty(exports, "RaftMsgHandler", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftMsgHandler_1).default; } });
+var RaftStreamHandler_1 = require("./RaftStreamHandler");
+Object.defineProperty(exports, "RaftStreamHandler", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftStreamHandler_1).default; } });
+var RaftSystemUtils_1 = require("./RaftSystemUtils");
+Object.defineProperty(exports, "RaftSystemUtils", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftSystemUtils_1).default; } });
+var RaftUtils_1 = require("./RaftUtils");
+Object.defineProperty(exports, "RaftUtils", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftUtils_1).default; } });
+var RaftDeviceManager_1 = require("./RaftDeviceManager");
+Object.defineProperty(exports, "RaftDeviceManager", { enumerable: true, get: function () { return RaftDeviceManager_1.DeviceManager; } });
+tslib_1.__exportStar(require("./RaftTypes"), exports);
+tslib_1.__exportStar(require("./RaftSystemType"), exports);
+tslib_1.__exportStar(require("./RaftWifiTypes"), exports);
+tslib_1.__exportStar(require("./RaftConnEvents"), exports);
+tslib_1.__exportStar(require("./RaftUpdateEvents"), exports);
+tslib_1.__exportStar(require("./RaftProtocolDefs"), exports);
+tslib_1.__exportStar(require("./RaftDeviceStates"), exports);
+//# sourceMappingURL=main.js.map

package/dist/web/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":";AAAA,iHAAiH;AACjH,EAAE;AACF,SAAS;AACT,gGAAgG;AAChG,EAAE;AACF,wCAAwC;AACxC,oCAAoC;AACpC,EAAE;AACF,iHAAiH;;;;AAEjH,mEAA2D;AAC3D,MAAM,WAAW,GAAG,IAAA,wCAAgB,GAAE,CAAC;AACf,qCAAc;AAEtC,mDAA6D;AAApD,yIAAA,OAAO,OAAkB;AAClC,iDAA2D;AAAlD,uIAAA,OAAO,OAAiB;AAEjC,+DAAyE;AAAhE,qJAAA,OAAO,OAAwB;AACxC,qDAA+D;AAAtD,2IAAA,OAAO,OAAmB;AACnC,qCAA+C;AAAtC,2HAAA,OAAO,OAAW;AAC3B,+CAAyD;AAAhD,qIAAA,OAAO,OAAgB;AAChC,mDAA4D;AAAnD,yIAAA,OAAO,OAAkB;AAClC,yDAAmE;AAA1D,+IAAA,OAAO,OAAqB;AACrC,qDAA+D;AAAtD,2IAAA,OAAO,OAAmB;AACnC,yCAAmD;AAA1C,+HAAA,OAAO,OAAa;AAC7B,yDAAyE;AAAhE,sHAAA,aAAa,OAAqB;AAG3C,sDAA4B;AAC5B,2DAAiC;AACjC,0DAAgC;AAChC,2DAAiC;AACjC,6DAAmC;AACnC,6DAAmC;AACnC,6DAAmC"}

package/examples/dashboard/package.json

@@ -16,6 +16,7 @@
     "@types/node": "^20.12.7",
     "@types/python-struct": "^1.0.4",
     "@types/react": "^18.2.48",
+    "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.2.18",
     "assert": "^2.1.0",
     "buffer": "^6.0.3",
@@ -28,7 +29,10 @@
     "util": "^0.12.5"
   },
   "dependencies": {
+    "chart.js": "^4.4.4",
+    "python-struct": "^1.1.3",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0"
   },

package/examples/dashboard/src/CommandPanel.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import ConnManager from './ConnManager';
+
+const connManager = ConnManager.getInstance();
+
+const examplesJson = {
+  "sections": [
+    {
+      "name": "LEDs (ind,ring,button)",
+      "examples": [
+        { "label": "Button red", "api": "/led/button/set/0/#ff0000" },
+        { "label": "Ring pattern RainbowSnake", "api": "/led/ring/pattern/RainbowSnake" },
+        { "label": "Ring pattern clear", "api": "/led/ring/pattern" }
+      ]
+    },
+    {
+      "name": "Audio",
+      "examples": [
+        { "label": "Play Halloween", "api": "/audio/rtttl/Entertainer:d=4,o=5,b=140:8d,8d#,8e,c6,8e,c6,8e,2c.6,8c6,8d6,8d#6,8e6,8c6,8d6,e6,8b,d6,2c6,p,8d,8d#,8e,c6,8e,c6,8e,2c.6,8p,8a,8g,8f#,8a,8c6,e6,8d6,8c6,8a,2d6" },
+        { "label": "Stop", "api": "/audio/stop" },
+        { "label": "Volume 50%", "api": "/audio/vol/50" }
+      ]
+    }
+  ]
+};
+
+export default function CommandPanel() {
+  const [command, setCommand] = useState('');
+  const [commandHistory, setCommandHistory] = useState<string[]>([]); // Command history state
+  const [historyIndex, setHistoryIndex] = useState<number>(-1); // Track position in history
+  const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({});
+
+  // Handler to send command when button is clicked or Enter is pressed
+  const handleSendCommand = (cmd: string) => {
+    if (cmd) {
+      connManager.getConnector().sendRICRESTMsg(cmd, {}).then(response => {
+        console.log(`Command sent: ${cmd}, Response:`, response);
+
+        // Update history only if the command is not the same as the last one
+        if (commandHistory.length === 0 || commandHistory[commandHistory.length - 1] !== cmd) {
+          setCommandHistory((prevHistory) => [...prevHistory, cmd]);
+        }
+
+        // Reset the history index and clear the command
+        setHistoryIndex(-1);
+        setCommand('');
+      }).catch(error => {
+        console.error(`Error sending command: ${cmd}`, error);
+      });
+    } else {
+      console.error("Command is empty.");
+    }
+  };
+
+  // Handler for key press events in the input box
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSendCommand(command);
+    } else if (e.key === 'ArrowUp') {
+      // Navigate to previous command in history
+      if (historyIndex < commandHistory.length - 1) {
+        const newIndex = historyIndex + 1;
+        setHistoryIndex(newIndex);
+        setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
+      }
+    } else if (e.key === 'ArrowDown') {
+      // Navigate to next command in history
+      if (historyIndex > 0) {
+        const newIndex = historyIndex - 1;
+        setHistoryIndex(newIndex);
+        setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
+      } else if (historyIndex === 0) {
+        // Clear the command input when navigating past the most recent command
+        setHistoryIndex(-1);
+        setCommand('');
+      }
+    }
+  };
+
+  // Handler to set the command in the input box
+  const handleLoadCommand = (api: string) => {
+    setCommand(api);
+  };
+
+  // Toggle the open/close state of a section
+  const toggleSection = (sectionName: string) => {
+    setOpenSections((prevOpenSections) => ({
+      ...prevOpenSections,
+      [sectionName]: !prevOpenSections[sectionName]
+    }));
+  };
+
+  return (
+    <div className="info-boxes">
+      <div className="info-box">
+        <div className="info-columns">
+          {/* Command Input and Button in Left Column */}
+          <div className="info-column command-input-column">
+            <h3>Command Panel</h3>
+            <input
+              type="text"
+              className="command-input"
+              value={command}
+              placeholder="Enter Command"
+              onChange={(e) => setCommand(e.target.value)}
+              onKeyDown={handleKeyDown} // Add onKeyDown event handler
+            />
+            <button className="send-command-button" onClick={() => handleSendCommand(command)}>
+              Send Command
+            </button>
+          </div>
+
+          {/* Example Commands in Right Column */}
+          <div className="info-column example-commands-column">
+            <h4>Example Commands</h4>
+
+            {examplesJson.sections.map((section) => (
+              <div className="collapsible-section" key={section.name}>
+                <button
+                  className="collapsible-header"
+                  onClick={() => toggleSection(section.name)}
+                >
+                  {section.name} {openSections[section.name] ? "▲" : "▼"}
+                </button>
+                {openSections[section.name] && (
+                  <div className="collapsible-content">
+                    {section.examples.map((example, index) => (
+                      <div className="example-command" key={index} title={example.api}>
+                        {example.label}
+                        <button
+                          className="example-load-button"
+                          onClick={() => handleLoadCommand(example.api)}
+                        >
+                          Load
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/dashboard/src/ConnManager.ts

@@ -1,4 +1,4 @@
-import { RaftChannelWebBLE, RaftConnector, RaftEventFn, RaftLog, RaftSystemUtils } from "../../../src/main";
+import { RaftChannelBLE, RaftConnector, RaftEventFn, RaftLog, RaftSystemUtils } from "../../../src/main";
 import SystemTypeCog from "./SystemTypeCog/SystemTypeCog";
 import SystemTypeMarty from "./SystemTypeMarty/SystemTypeMarty";
 
@@ -46,12 +46,12 @@ export default class ConnManager {
     return this._connector;
   }
 
-  private async getBleDevice(): Promise<BluetoothDevice | null> {
+  private async getBleDevice(uuid?: string): Promise<BluetoothDevice | null> {
+    const uuids = uuid ? [uuid] : [RaftChannelBLE.RICServiceUUID, RaftChannelBLE.CogServiceUUID];
+    const filtersArray = uuids.map((uuid) => ({ services: [uuid] }));
     try {
       const dev = await navigator.bluetooth.requestDevice({
-        filters: [
-          { services: [RaftChannelWebBLE.ServiceUUID] }
-        ],
+        filters: filtersArray,
         optionalServices: []
       });
       return dev;
@@ -62,21 +62,20 @@ export default class ConnManager {
   }
 
   // Connect
-  public async connect(method: string, locator: string | object): Promise<boolean> {
-
-    // Hook up the connector
+  public async connect(method: string, locator: string | object, uuid: string): Promise<boolean> {
     this._connector.setEventListener((evtType, eventEnum, eventName, eventData) => {
-      RaftLog.info(`ConnManager - event ${eventName}`);
+      RaftLog.verbose(`ConnManager - event ${eventName}`);
       if (this._onConnectionEvent) {
         this._onConnectionEvent(evtType, eventEnum, eventName, eventData);
       }
     });
+    await this._connector.initializeChannel(method);
     // Set the connector websocket suffix
     if (method === "WebBLE") {
-      const dev = await this.getBleDevice();
-      return this._connector.connect(method, dev as object);
+      const dev = await this.getBleDevice(uuid);
+      return this._connector.connect(dev as object);
     }
-    return this._connector.connect(method, locator);
+    return this._connector.connect(locator);
   }
 
   // Disconnect

package/examples/dashboard/src/DeviceActionsForm.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ConnManager from './ConnManager';
+import { DeviceTypeAction } from '../../../src/RaftDeviceInfo';
+import DispLEDGrid from './DispLedGrid';
+
+const connManager = ConnManager.getInstance();
+
+type DeviceActionsTableProps = {
+    deviceKey: string;
+};
+
+interface InputValues {
+    [key: string]: number;
+}
+
+const DeviceActionsForm: React.FC<DeviceActionsTableProps> = ({ deviceKey }) => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const [deviceActions, setDeviceActions] = useState<DeviceTypeAction[]>([]);
+    const [inputValues, setInputValues] = useState<InputValues>({});
+    const [lastSentValues, setLastSentValues] = useState<InputValues>({});
+    const sendTimer = useRef<NodeJS.Timeout | null>(null);
+    
+    useEffect(() => {
+        if (!deviceManager) {
+            return;
+        }
+        const deviceState = deviceManager.getDeviceState(deviceKey);
+        const { deviceTypeInfo } = deviceState;
+        const actions: DeviceTypeAction[] = deviceTypeInfo?.actions || [];
+        setDeviceActions(actions);
+        // Initialize input values
+        const initialValues: InputValues = actions.reduce((acc, action) => {
+            acc = { ...acc, [action.n]: action.d ? action.d : (action.r ? action.r[0] | 0 : 0) };
+            return acc;
+        }, {});
+        setInputValues(initialValues);
+        queueSendAction(initialValues);
+    }, [deviceKey]);
+
+    const handleInputChange = (name: string, value: number) => {
+        const newValues = { ...inputValues, [name]: value };
+        setInputValues(newValues);
+        queueSendAction(newValues);
+    };
+
+    const queueSendAction = (newValues: InputValues) => {
+        if (sendTimer.current) {
+            clearTimeout(sendTimer.current);
+        }
+        // console.log(`queueSendAction new values ${JSON.stringify(newValues)}`);
+        sendTimer.current = setTimeout(() => {
+            deviceActions.forEach(action => {
+                const currentValue = newValues[action.n];
+                const lastSentValue = lastSentValues[action.n];
+                if (currentValue !== lastSentValue) {
+                    // console.log(`queueSendAction timeout ${action.n} ${currentValue}`);
+                    handleSendAction(action, currentValue);
+                    setLastSentValues(prev => ({ ...prev, [action.n]: currentValue }));
+                }
+            });
+        }, 300);
+    };
+    
+    const handleSendAction = (action: DeviceTypeAction, value: number) => {
+        // Send action to device
+        if (!deviceManager) {
+            return;
+        }
+        deviceManager.sendAction(deviceKey, action, [value]);
+    };
+
+    if (deviceActions.length === 0) {
+        return <></>;
+    }
+
+    return (
+        <div className="device-actions-form">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                        <th>Send</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {deviceActions.map((action) => {
+                        if (action.f === "LEDPIX") {
+                            return (
+                                <tr key={action.n}>
+                                    <td>{action.n}</td>
+                                    <td colSpan={2}>
+                                        <DispLEDGrid
+                                            rows={action.NY || 1}
+                                            cols={action.NX || 1}
+                                            deviceKey={deviceKey}
+                                            deviceAction={action}
+                                        />
+                                    </td>
+                                </tr>
+                            );
+                        } else {
+                            return (
+                                <tr key={action.n}>
+                                    <td>{action.n}</td> 
+                                    <td>
+                                        {action.t ? 
+                                            <input type="number" 
+                                                min={action.r?.[0] ?? 0} 
+                                                max={action.r?.[1] ?? 100} 
+                                                value={inputValues[action.n]} 
+                                                onChange={e => {
+                                                        console.log(`input change ${action.n} ${e.target.value}`)
+                                                        handleInputChange(action.n, parseInt(e.target.value));
+                                                    }}
+                                            />
+                                            : <></>
+                                        }
+                                    </td>
+                                    <td>
+                                        <button onClick={() => handleSendAction(action, inputValues[action.n])}>Send</button>
+                                    </td>
+                                </tr>
+                            );
+                        }
+                    })}                        
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default DeviceActionsForm;

package/examples/dashboard/src/DeviceAttrsForm.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { deviceAttrGetLatestFormatted, DeviceState } from '../../../src/RaftDeviceStates';
+import ConnManager from './ConnManager';
+
+const connManager = ConnManager.getInstance();
+
+type DeviceAttributesTableProps = {
+    deviceKey: string;
+    lastUpdated: number;
+};
+
+const DeviceAttrsForm: React.FC<DeviceAttributesTableProps> = ({ deviceKey, lastUpdated }) => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const deviceState: DeviceState | undefined = deviceManager?.getDeviceState(deviceKey);
+
+    if (!deviceState || Object.keys(deviceState.deviceAttributes).length === 0) {
+        return <></>;
+    }
+
+    return (
+        <div className="device-attrs-form">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                        <th>Units</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {Object.entries(deviceState.deviceAttributes)
+                        .filter(([attributeName, attributeDetails]) => attributeDetails.visibleForm !== false)
+                        .map(([attributeName, attributeDetails]) => {
+                            const valStr = deviceAttrGetLatestFormatted(attributeDetails)
+                            return (
+                                <tr key={attributeName}>
+                                    <td>{attributeName}</td>
+                                    <td>{valStr}</td>
+                                    <td>{attributeDetails.units}</td>
+                                </tr>
+                            );
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default DeviceAttrsForm;

package/examples/dashboard/src/DeviceLineChart.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState, memo, useRef } from "react";
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Tooltip, Legend } from 'chart.js';
+import { Line } from "react-chartjs-2";
+import ConnManager from "./ConnManager";
+import { DeviceState } from "../../../src/RaftDeviceStates";
+
+const connManager = ConnManager.getInstance();
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    ArcElement,
+    Tooltip,
+    Legend
+);
+
+export interface DeviceLineChartProps {
+    deviceKey: string;
+    lastUpdated: number;
+}
+
+interface ChartJSData {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        fill: boolean;
+        borderColor: string;
+        backgroundColor: string;
+        yAxisID: string;
+    }[];
+}
+
+const DeviceLineChart: React.FC<DeviceLineChartProps> = memo(({ deviceKey, lastUpdated }) => {
+
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const deviceState: DeviceState | undefined = deviceManager?.getDeviceState(deviceKey);
+    // const { deviceAttributes, deviceTimeline } = deviceState;
+    const [chartData, setChartData] = useState<ChartJSData>({
+        labels: [],
+        datasets: []
+    });
+
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: {
+            duration: 1, // default is 1000ms
+        },
+        scales: {}
+    };
+
+    const colourMapRef = useRef<{ [key: string]: string }>({
+        prox: "hsl(60, 70%, 60%)",
+        als: "hsl(0, 70%, 60%)",
+        white: "hsl(120, 70%, 60%)",
+        x: "hsl(240, 70%, 60%)",
+        y: "hsl(300, 70%, 60%)",
+        z: "hsl(0, 70%, 60%)",
+        dist: "hsl(60, 70%, 60%)",
+        temperature: "hsl(360, 70%, 60%)",
+        humidity: "hsl(200, 70%, 60%)",
+        Red: "hsl(0, 70%, 60%)",
+        Green: "hsl(120, 70%, 60%)",
+        Blue: "hsl(240, 70%, 60%)",
+        IR: "hsl(300, 70%, 60%)",
+    });
+
+    useEffect(() => {
+        if (!deviceState)
+            return;
+        const maxChartDataPoints = 50;
+        const labels = deviceState.deviceTimeline.timestampsUs.slice(maxChartDataPoints).map(time => {
+            const seconds = time / 1e6; // Convert microseconds to seconds
+            const secondsStr = seconds.toFixed(3); // Format decimal places
+            return secondsStr;
+        });
+
+        const uniqueAxes = new Map<string, { range: [number, number], units: string }>();
+        const datasets = Object.entries(deviceState.deviceAttributes)
+            .filter(([attributeName, attributeDetails]) => attributeDetails.visibleSeries !== false)
+            .map(([attributeName, attributeDetails]) => {
+                const data = attributeDetails.values.slice(maxChartDataPoints);
+                let colour = colourMapRef.current[attributeName];
+                if (!colour) {
+                    colour = `hsl(${Math.random() * 360}, 70%, 60%)`;
+                    colourMapRef.current[attributeName] = colour;
+                }
+                let rangeEnds: [number,number] = [Math.min(...attributeDetails.range), Math.max(...attributeDetails.range)];
+                const axisKey = `${rangeEnds[0]}-${rangeEnds[1]}-${attributeDetails.units}`;
+                if (!uniqueAxes.has(axisKey)) {
+                    uniqueAxes.set(axisKey, { range: rangeEnds, units: attributeDetails.units });
+                }
+                return {
+                    label: attributeName,
+                    data: data,
+                    fill: false,
+                    borderColor: colour,
+                    backgroundColor: colour,
+                    yAxisID: axisKey
+                };
+            });
+
+        const scales: { [key: string]: any } = {};
+        uniqueAxes.forEach((axis, key) => {
+            scales[key] = {
+                type: 'linear',
+                display: true,
+                position: 'left',
+                scaleLabel: {
+                    display: true,
+                    labelString: axis.units
+                },
+                ticks: {
+                    min: axis.range[0],
+                    max: axis.range[1]
+                }
+            };
+        }
+        );
+        options.scales = scales;
+        setChartData({ labels, datasets });
+    }
+        , [lastUpdated]);
+
+    if (!deviceState || Object.keys(deviceState.deviceAttributes).length === 0) {
+        return <></>;
+    }
+
+    return (
+        <div className="device-line-chart">
+            <Line data={chartData} options={options} />
+        </div>
+    );
+});
+
+export default DeviceLineChart;