Add device-dashboard

tutorials/device-dashboard/realtime-graph/web_root/main.js

@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+  const el = document.getElementById("graph");
+  const rect = el.getBoundingClientRect();
+
+  const options = {
+    width: rect.width,
+    height: rect.height,
+    tzDate: (ts) => uPlot.tzDate(new Date(ts * 1e3), "Europe/London"),
+    plugins: [],
+    legend: { show: false },
+    axes: [
+      { values: "{MMM} {DD}", size: 25 },
+      { size: 50, xvalues: (u, vals, space) => vals.map(v => (+v / 1000).toFixed(1) + 'k') },
+    ],
+    series: [
+      {},
+      {stroke: 'rgba(5, 141, 199, 1)', fill: 'rgba(5, 141, 199, 0.1)'},
+      {stroke: 'rgba(237, 126, 23, 1)', fill: 'rgba(237, 126, 23, 0.1)'},
+    ],
+  };
+
+  // Create chart instance
+  const chart = new uPlot(options, [], el);
+
+  // Intercept change notifications
+  Dashboard.on('change', function(args) {
+    const data = [
+      args.points.map(x => x[0]),
+      args.points.map(x => x[1]),
+      args.points.map(x => x[2]),
+    ];
+    //console.log(123, args.points);
+    chart.setData(data);
+  });
+});