Misc cleanup

default-schemas.json

@@ -1,6 +1,6 @@
 {
   "endpoint": "",
   "schema": "",
-  "uischema": "uischema-00.06.json",
+  "uischema": "uischema-00.07.json",
   "config": ""
 }

package.json

@@ -88,6 +88,7 @@
     "jsonwebtoken": "^8.3.0",
     "jszip": "^3.1.5",
     "jszip-utils": "0.0.2",
+    "leaflet": "^1.4.0",
     "list-react-files": "^0.2.0",
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.11",
@@ -111,6 +112,7 @@
     "react-json-view": "^1.19.1",
     "react-jsonschema-form": "1.7.0",
     "react-jsonschema-form-pagination": "^0.3.12",
+    "react-leaflet": "^2.4.0",
     "react-onclickout": "^2.0.8",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

src/browser/index.html

@@ -10,6 +10,11 @@
       href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAdnJLH8AAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAATwAAAE8BY4r91wAABmZJREFUWMO1ln1sE+cdx393vvP59ezYjm2MHSdpErIYmgJNhiGL2m2VO61srSqjaW/qVKT1TZtAbdVNnQatWLtKBWna2qojtCCoWtLRNRsrTILxktShJAGSOCQOISQ+n40d2+c738Xnl7v9s0glZKljyvfP5/fy/TyPnt+jB4EKFGdF8oMA3U7gyPOCWHJJMhBKDA2XSvLuTQ3GwOZGk1huL3Sl5ux8ATt+Of4iO188muQLnyEo8gsCQ7fJstzN50tvDc2w/ko2Vbb2n5l9bE/PZHCcznoWx/56Ztb3xvFr4VQ2r7lrJyAWSz5eLO1vduiCi2Pr3WSASovBCJPz3jWAogQmQIBaKnZ/nZFFQGYZoWC6awC4AuHVuMK9VGwswjmVGOq0kQRVbj9spQCyDAdlgL09l2IDP1hvP/Pl2NmJpN9lUuub7LpAJD1P9k0yrpmkAA1WLTTZtWHPaj27uB+yUoBTwTkVlZp/fSLG/7jOqn6zc435Qw2Ocv1TjD8U4192W9S/1yoVUv8U86NwKucSiyVQ4wow65Xh762rPtxebzxm0imFigEWdHpsznNxmvlDZr7owlAElwHCm+qr3rkSzvin4sIjNWZ1oGW1/r3mVToIRbPkcJh7kGZyW806/PT3W23PfmuNib4jAACA2aRA0GnRVZRk3GEgwp9evvn29bjww47Gql/XWTXd7fVV2YXcNJ9XvX+e2joS4XbZSKL3IY/lhW+3WNg78b9F/x5J+LYfuJJ59z+zTy6X9/lkyvv0wZHMq59O7gCoYAr+b+NraT+BoRfcFvXflsvb3GgKWHTK7kJR2vm1AVyZZT00k/NuaTQN+dZVM1+V76giepJ8vhrgK8bw0kzGOxzm7tEqFV5AQFDh6Beb7jH2WfQE/eW8KJODFF8ATIEMlgOsxFAqzuWpJQE+GYzaZuZyj0/PCb/54/EppywDqHAUJFmG+bwE3Rej7MsfT5w06/C3HrvfPlRr0bAGDQZapQLyRclWDgACSLVJg99+AlNx3vn+eepIMMJ901GlStzrIv+swpFzq4wqEAsSpPmCLcUXfjKVEPxXo9IDfL50+B+Xbu4yqPGwUYOFZ5K5zdlc8S86FSYvB5DgxBaTDidvARilWPLYQGxnKMZ31lZrrltJ5TPfabGMt9UZZxZyktm89lRwblBDKPxX6eyO4TD7U1mG0a3rbQf2nbg+FqS5jvOhpBsAbiwHwAhFnwJF+28BODGc2HNxmnmuwabdt9FN7nq8zXHbjJp1Sh4AAgAQCMWyXe+dCx8NRriujy7QbFudYS/F5J7oDaXf6J1Ibe9YY7qt/ux4sjoU418duMFs8Dj02wD+NwUjYbZ9aCbzc7dZM/JAs3lJ88VqsuuCrTXkUxiKhPqvpXdE0iKsXa3fzQgF38nRxP7PJ1O+xRf63ETy8OCNzBN1Fs3OtnpjAAAAiaRzxkN91JGrdLbjIY9l28+2OE+Wc5EWdKiX+t3x4fgrnU2m7c9+t7br3Hiy45Ohm6/xYqnVZlCiab4wbNEpvbFMjtOrsIEtTaY/PbrB/veFeqxvMrU2GOFq7AYi0FpDBlZiDgDQXm/oPjGaeIURCl4A6OpsNvf2hlLbRii2dWA6Y0QQREszuX3NDh3nW1s97Fmtv2WEsQSX/4YkyR6PQ3/gXhe54re52aEff+noVUjxhcaFtY4mUxQAouXUY3QqhxQlQKq0eNmfiMUyanAoSfKmSmoxAkcBAYB8SarUH8SiBCVJrmgDqM1ACAgCYiwjOisFSHB5YOeLZT3DtwF4nPpBtRIdG6U4X8+lGLnSBn2h1JPRdA4seuWKLzAAANpg1VxrXqUPJLN5b4LLP7qS4ololvznlbgPw1CqWk/0VwRgN6gK/jb7a3aDSuoNpfd82B9pKbf4SCDy9EQ0u3Wj23Dolw/WVHYCAAD1Vi21oZbcPZ8vkWcnUgeODUQfXq7oZibnfPOz66+P0dnfNto0c+vd5L5KzAEW/Qk//oL291yO7y2UJOd9LvJfWhXWTeDoxVqLGtJ8ARi+aJ2e4zen+cJzNCPa1zn1p7wNVb965D7b2NcCAADw0QXaN50QdgyHWZ8kAYhFaUynwkAslgAAsZYk2eIyqagGm7ZrYy150Ntgmq7UfEmABd1ICM2DM5nOqbiwMcaIQGAouC2qbL1V29vqIk/bDETmTowX9F9WFdzMcTqI8QAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wOC0yMVQyMzo1MTo0NC0wNzowMF5dn44AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMDgtMjFUMjM6NTE6NDQtMDc6MDAvACcyAAAAAElFTkSuQmCC"
       type="image/x-icon"
     />
+
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+    crossorigin=""/>
+
     <style>
 
            /* You can edit the below classes to customize the color scheme of the sidebar.

src/browser/js/browser/DeviceMetaHeaderContainer.js

@@ -121,7 +121,7 @@ export class DeviceMetaHeaderContainer extends Component {
     const { bucket } = pathSlice(history.location.pathname);
     return (
       <div>
-        {serverConfig.devicemeta ? (
+        {serverConfig.devicemeta && serverConfig.devicemeta.devices ? (
           <DeviceMetaHeader
             serverConfig={serverConfig}
             currentBucket={bucket}

src/browser/js/browser/SideBar.js

@@ -42,11 +42,9 @@ export const SideBar = ({
         })}
       >
         <div className="fes-header clearfix hidden-sm hidden-xs">
-          <br />
-          <img src={logo} style={{ width: "75%", maxHeight: "70px" }} />
-
+          <img src={logo} style={{ width: "65%", maxHeight: "70px" }} />
           <div className="version-text sb-custom-version">
-            &nbsp;&nbsp;version 02.06.03
+            v03.00.01
           </div>
         </div>
         <div className="fes-list">

src/browser/js/charts/BaseChart.js

@@ -0,0 +1,183 @@
+import React from "react";
+import _ from "lodash";
+import hexToRgba from "hex-to-rgba";
+import { HorizontalBar, Bar, Line, Doughnut } from "react-chartjs-2";
+
+const BaseChart = props => {
+  const { datasets, chColors, aspectRatio, chHeight, chartType } = props;
+
+  let chColorsTrans = chColors.map(color =>
+    hexToRgba(color, "0.1")
+  );
+
+  if (datasets.length == 0) {
+    return (
+      <div>
+        <p className="widget-no-data">
+          The widget configuration did not yield any data
+        </p>
+      </div>
+    );
+  }
+
+
+  // set the header labels for use in indexing object properties
+  const device_serialno = datasets[0].label;
+  const time_stamp = datasets[1].label;
+  const parameter = datasets[2].label; // could be extended for multiple parameters
+  const datasetsRestructured = [];
+
+  // set chart specific options
+  const lineOptions = {
+    maintainAspectRatio: aspectRatio,
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            display: false
+          },
+          type: "time",
+          time: {
+            unit: "minute",
+            unitStepSize: 1,
+            displayFormats: {
+              second: "MM/DD h:mm:ss",
+              minute: "MM/DD h:mm"
+            }
+          }
+        }
+      ]
+    }
+  };
+
+  const pieOptions = {
+    maintainAspectRatio: aspectRatio,
+    tooltips: {
+      callbacks: {
+        label: function(item, data) {
+          return (
+            data.datasets[item.datasetIndex].label +
+            ": " +
+            data.datasets[item.datasetIndex].data[item.index]
+          );
+        }
+      }
+    }
+  };
+
+  const barOptions = {
+    maintainAspectRatio: aspectRatio,
+    scales: {
+      yAxes: [
+        {
+          gridLines: { display: false },
+          ticks: {
+            beginAtZero: true
+          }
+        }
+      ]
+    }
+  };
+
+  // restructure the dataset to be suitable for the chart types
+  datasets.map(element =>
+    element.data.map(
+      (e, i) =>
+        (datasetsRestructured[i] = {
+          [element.label]: e,
+          ...datasetsRestructured[i]
+        })
+    )
+  );
+
+  // get unique set of device IDs available in the data
+  const deviceIds = [
+    ...new Set(datasetsRestructured.map(x => x[device_serialno]))
+  ];
+
+  // construct array of the data, separated by device (and add labels/colors for each)
+  let datasetsAllDevices = [];
+  let datasetsDevice = [];
+  let pieLabels = [];
+
+  for (let i = 0; i < deviceIds.length; i++) {
+    let datasetsDeviceFiltered = datasetsRestructured.filter(
+      e => e[device_serialno] == deviceIds[i]
+    );
+
+    if (chartType == "line") {
+      datasetsDevice = datasetsDeviceFiltered.map(e => {
+        const x = e[time_stamp];
+        const y = e[parameter];
+        return { x, y };
+      });
+    } else {
+      datasetsDevice = datasetsDeviceFiltered.map(e => {
+        const parameters = _.omit(e, time_stamp, device_serialno);
+        return { parameters };
+      })[0].parameters; // note: If multiple entries for one device, the top one is selected
+      pieLabels = Object.keys(datasetsDevice);
+    }
+
+    datasetsAllDevices[i] = {
+      label: deviceIds[i],
+      data:
+        chartType == "line" ? datasetsDevice : Object.values(datasetsDevice),
+      borderColor: chartType == "line" ? chColors[i] : "#ffffff",
+      backgroundColor:
+        chartType == "line"
+          ? chColorsTrans[i]
+          : (chartType == "bar" || chartType == "horizontal-bar")
+          ? chColors[i]
+          : chColors,
+      hoverBorderColor: chColorsTrans
+    };
+  }
+
+
+
+  return (
+    <div>
+      {datasets ? (
+        chartType == "line" ? (
+          <Line
+            data={{
+              datasets: datasetsAllDevices
+            }}
+            height={chHeight ? chHeight : null}
+            options={lineOptions}
+          />
+        ) : chartType == "pie" ? (
+          <Doughnut
+            data={{
+              datasets: datasetsAllDevices,
+              labels: pieLabels
+            }}
+            height={chHeight ? chHeight : null}
+            options={pieOptions}
+          />
+        ) : chartType == "horizontal-bar" ? (
+          <HorizontalBar
+            data={{
+              datasets: datasetsAllDevices,
+              labels: pieLabels
+            }}
+            height={chHeight ? chHeight : null}
+            options={barOptions}
+          />
+        ) : chartType == "bar" ? (
+          <Bar
+            data={{
+              datasets: datasetsAllDevices,
+              labels: pieLabels
+            }}
+            height={chHeight ? chHeight : null}
+            options={barOptions}
+          />
+        ) : null
+      ) : null}
+    </div>
+  );
+};
+
+export default BaseChart;