Add Temporal Chart

Author: jason-fox

app/app.js

@@ -51,31 +51,29 @@ app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(flash());
 
-if (!sessionOff) {
-    if (process.env.NODE_ENV === 'production') {
-        // Use Mongo-DB to store session data.
-        app.use(
-            session({
-                resave: false,
-                saveUninitialized: true,
-                secret: SECRET,
-                store: MongoStore.create({
-                    mongoUrl: MONGO_DB + '/sessions',
-                    mongooseConnection: mongoose.connection,
-                    ttl: 14 * 24 * 60 * 60 // save session for 14 days
-                })
-            })
-        );
-    } else {
-        // Use Memstore for session data.
-        app.use(
-            session({
-                secret: SECRET,
-                resave: false,
-                saveUninitialized: true
+if (process.env.NODE_ENV === 'production' && !sessionOff) {
+    // Use Mongo-DB to store session data.
+    app.use(
+        session({
+            resave: false,
+            saveUninitialized: true,
+            secret: SECRET,
+            store: MongoStore.create({
+                mongoUrl: MONGO_DB + '/sessions',
+                mongooseConnection: mongoose.connection,
+                ttl: 14 * 24 * 60 * 60 // save session for 14 days
             })
-        );
-    }
+        })
+    );
+} else {
+    // Use Memstore for session data.
+    app.use(
+        session({
+            secret: SECRET,
+            resave: false,
+            saveUninitialized: true
+        })
+    );
 }
 
 app.use(express.static(path.join(__dirname, 'public')));

app/controllers/ngsi-ld/agri-device.js

@@ -18,7 +18,48 @@ async function displayAgriDevice(req, res) {
             { options: 'keyValues' },
             ngsiLD.setHeaders(req.session.access_token, LinkHeader)
         );
-        return res.render('agri-device', { title: device.name, device });
+
+        const controlledProperties = device.controlledProperty;
+        const chartData = {};
+        let timeseries = null;
+
+        try {
+            timeseries = await ngsiLD.readTemporalEntity(
+                req.params.id,
+                {
+                    options: 'temporalValues',
+                    attrs: device.controlledProperty.join(',')
+                },
+                ngsiLD.setHeaders(req.session.access_token, LinkHeader)
+            );
+
+            controlledProperties.forEach((key) => {
+                let addData = false;
+
+                if (Array.isArray(timeseries[key].values)) {
+                    addData = timeseries[key].values[0].length === 2;
+                }
+
+                if (addData) {
+                    const data = [];
+                    const labels = [];
+                    const color = [];
+
+                    const values = timeseries[key].values.reverse();
+                    values.forEach((element) => {
+                        const date = new Date(element[1]);
+                        data.push({ t: element[1], y: element[0] });
+                        labels.push(date.toISOString().slice(11, 16));
+                        color.push('#45d3dd');
+                    });
+
+                    chartData[key] = { data, labels, color };
+                }
+            });
+        } catch (e) {
+            debug(e);
+        }
+        return res.render('agri-device', { title: device.name, device, timeseries, chartData });
     } catch (error) {
         const errorDetail = error.error | error;
         debug(errorDetail);

app/lib/ngsi-ld.js

@@ -184,13 +184,28 @@ function listEntities(opts, headers = {}) {
         });
 }
 
+function readTemporalEntity(entityId, opts, headers = {}) {
+    return fetch(`${BASE_PATH}/temporal/entities/${entityId}/?${new URLSearchParams(opts)}`, {
+        method: 'GET',
+        headers
+    })
+        .then((r) => parse(r).then((data) => ({ status: r.status, body: data })))
+        .then((data) => {
+            if (data.status !== 200) {
+                throw new Error('', { cause: data.body });
+            }
+            return data.body;
+        });
+}
+
 module.exports = {
     createAttribute,
     readAttribute,
     updateAttribute,
     deleteAttribute,
     createEntity,
     readEntity,
+    readTemporalEntity,
     updateEntity,
     deleteEntity,
     listEntities,

app/views/agri-device.pug

@@ -3,6 +3,10 @@ extends layout
 block content
   h1= title
 
+  script(src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js')
+  script(src='https://cdn.jsdelivr.net/npm/chart.js@2.7.2/dist/Chart.min.js')
+  script(src='https://code.jquery.com/jquery-1.11.1.js')
+
   div.row
     div.col
       div(class="card m-2")
@@ -53,10 +57,88 @@ block content
                 dt.col-lg-3 Status: 
                 dd.col-lg-9 #{device.status}
 
+  - if (timeseries)
+    div()
+      - if (device.heartRate)
+        div(style="float: left;")
+          h2 Heart Rate
+          canvas(id="heartRate" width="800px" height="400px")
+      - if (device.humidity)
+        div(style="float: left;")
+          h2 Humidity
+          canvas(id="humidity" width="800px" height="400px")
+      - if (device.fillingLevel)
+        div(style="float: left;")
+          h2 Filling Level
+          canvas(id="fillingLevel" width="800px" height="400px")
+      - if (device.temperature)
+        div(style="float: left;")
+          h2 Temperature
+          canvas(id="temperature" width="800px" height="400px")
+      div(style="clear: both;")
+
   div.row
     div.col
       div(class="card m-2")
         div.card-body
-          summary.list-unstyled
+          summary.list-unstyled Entity
             details
-              pre #{JSON.stringify(device, null, 4)}
+              pre #{JSON.stringify(device, null, 4)}
+
+  - if (timeseries)
+    div.row
+      div.col
+        div(class="card m-2")
+          div.card-body
+            summary.list-unstyled Temporal Entity
+              details
+                pre #{JSON.stringify(timeseries, null, 4)}
+
+
+  - if (timeseries)
+    script(type='text/javascript').
+
+      var chartData =!{JSON.stringify(chartData)};
+
+      var text = {
+        heartRate : "bpm",
+        humidity: "%",
+        temperature: "C",
+        fillingLevel: '%'
+
+      }
+
+      Object.keys(chartData).forEach((key) => {
+        var values = chartData[key];
+        var ctx = document.getElementById(key);
+        var barChart = new Chart(ctx, {
+          type: "line",
+          data: {
+              labels: values.labels,
+              datasets: [{
+                  fill: false,
+                  label: text[key] || '%',
+                  data: values.data,
+                   backgroundColor : '#45d3dd',
+                  borderColor : '#45d3dd',
+                  pointRadius : 5
+              }]
+          },
+          options: {
+              responsive: false,
+              scales: {
+                  xAxes: [{
+                    ticks: {
+                      source: "labels"
+                    }
+                  }],
+                  yAxes: [{
+                      ticks: {
+                        beginAtZero: true
+                      }
+                  }]
+              }
+          }
+        });
+        var chart = new Chart(ctx, cfg);
+      });