Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx

@@ -42,7 +42,6 @@ class Dashboard extends Component {
 
         this.updateSeries = this.updateSeries.bind(this);
         this.updateDynamic = this.updateDynamic.bind(this);
-        this.performTask = this.performTask.bind(this);
     }
 
     static contextType = DevicesContext;
@@ -51,7 +50,9 @@ class Dashboard extends Component {
         this.context.addHandler(C.update_all_method_name, this.updateSeries);
         this.context.addHandler(C.update_method_name, this.updateSeries);
         this.updateSeries();
-        this.updateDynamic();
+        window.setInterval(() => {
+            this.updateDynamic();
+        }, 2000);
     }
 
     componentWillUnmount() {
@@ -106,11 +107,12 @@ class Dashboard extends Component {
             deviceSeries: this.getDeviceSeries(),
             sensorSeries: this.getSensorSeries()
         });
+
+        this.updateDynamic();
     }
 
-    updateDynamic = () => {
-        const secondAgo = new Date();
-        secondAgo.setMilliseconds(0);
+    updateDynamic() {
+        const secondAgo = new Date( Date.now() - 1000 * 1 );
         const minuteAgo = new Date( Date.now() - 1000 * 60 );
         const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
 
@@ -125,8 +127,7 @@ class Dashboard extends Component {
             barDevicePoints[d.id] = Array(3).fill(0);
         }
 
-        const processMethod = (items, index) => {
-            const p = items[index];
+        for (var p of this.context.heatmapPoints) {
             if (p.date > minuteAgo) {
                 var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
                 var oldProb = minuteDevicePoints[p.deviceId][seconds];
@@ -164,115 +165,84 @@ class Dashboard extends Component {
             }
         }
 
-        const finishMethod = () => {
-            const minuteHeatmapSeries = [];
+        const minuteHeatmapSeries = [];
 
-            var i = 0;
-            for (var p in minuteDevicePoints) {
-                minuteHeatmapSeries.push({
-                    name: "Device " + i,
-                    data: minuteDevicePoints[p].map((value, index) => ({
-                        x: new Date( Date.now() - (60 - index) * 1000 ).toLocaleTimeString('hu-HU'),
-                        y: value
-                    })),
-                });
-                i++;
-            };
-    
-            const hourHeatmapSeries = [];
-    
-            var i = 0;
-            for (var p in hourDevicePoints) {
-                hourHeatmapSeries.push({
-                    name: "Device " + i,
-                    data: hourDevicePoints[p].map((value, index) => ({
-                        x: new Date( Date.now() - (60 - index) * 1000 * 60 ).toLocaleTimeString('hu-HU').substring(0, 5),
-                        y: value
-                    })),
-                });
-                i++;
-            };
-            
-            const barSeries = [];
-    
-            const getCount = column => {
-                var counts = [];
-    
-                for (var p in barDevicePoints) {
-                    counts.unshift(barDevicePoints[p][column]);
-                }
-    
-                return counts;
-            };
-    
-            barSeries.push({
-                name: "Prob > 0.5",
-                data: getCount(0),
-            });
-            barSeries.push({
-                name: "Prob > 0.7",
-                data: getCount(1),
-            });
-            barSeries.push({
-                name: "Prob > 0.9",
-                data: getCount(2),
+        var i = 0;
+        for (var p in minuteDevicePoints) {
+            minuteHeatmapSeries.push({
+                name: "Device " + i,
+                data: minuteDevicePoints[p].map((value, index) => ({
+                    x: new Date( Date.now() - (60 - index) * 1000 ).toLocaleTimeString('hu-HU'),
+                    y: value
+                })),
             });
+            i++;
+        };
 
-            const lineSeries = [{name: "message/sec", data: []}];
-            for (var m in linePoints) {
-                lineSeries[0].data.push({
-                    x: new Date(m).getTime(),
-                    y: linePoints[m],
-                })
+        const hourHeatmapSeries = [];
+
+        var i = 0;
+        for (var p in hourDevicePoints) {
+            hourHeatmapSeries.push({
+                name: "Device " + i,
+                data: hourDevicePoints[p].map((value, index) => ({
+                    x: new Date( Date.now() - (60 - index) * 1000 * 60 ).toLocaleTimeString('hu-HU').substring(0, 5),
+                    y: value
+                })),
+            });
+            i++;
+        };
+        
+        const barSeries = [];
+
+        const getCount = column => {
+            var counts = [];
+
+            for (var p in barDevicePoints) {
+                counts.unshift(barDevicePoints[p][column]);
             }
 
-            const getBarCategories = () => {
-                const categories = [];
+            return counts;
+        };
 
-                for (var i = this.context.devices.length - 1; i >= 0; i--) {
-                    categories.push("Device " + i)
-                }
+        barSeries.push({
+            name: "Prob > 0.5",
+            data: getCount(0),
+        });
+        barSeries.push({
+            name: "Prob > 0.7",
+            data: getCount(1),
+        });
+        barSeries.push({
+            name: "Prob > 0.9",
+            data: getCount(2),
+        });
 
-                return categories;
-            }
-    
-            this.setState({
-                heatmapSecondsSeries: minuteHeatmapSeries,
-                heatmapMinutesSeries: hourHeatmapSeries,
-                barSeries: barSeries,
-                barCategories: getBarCategories(),
-                lineSeries: lineSeries,
-            });
-
-            setTimeout(this.updateDynamic, 1000);
+        const lineSeries = [{name: "message/sec", data: []}];
+        for (var m in linePoints) {
+            lineSeries[0].data.push({
+                x: new Date(m).getTime(),
+                y: linePoints[m],
+            })
         }
 
-        const processHeatmapItem = processMethod.bind(this);
-        const onFinished = finishMethod.bind(this)
+        const getBarCategories = () => {
+            const categories = [];
     
-        this.performTask(this.context.heatmapPoints, Math.ceil(this.context.heatmapPoints.length / 100), 10,
-            processHeatmapItem, onFinished);
-    }
-    
-    performTask(items, numToProcess, wait, processItem, onFinished) {
-        var pos = 0;
-        // This is run once for every numToProcess items.
-        function iteration() {
-            // Calculate last position.
-            var j = Math.min(pos + numToProcess, items.length);
-            // Start at current position and loop to last position.
-            for (var i = pos; i < j; i++) {
-                processItem(items, i);
+            for (var i = this.context.devices.length - 1; i >= 0; i--) {
+                categories.push("Device " + i)
             }
-            // Increment current position.
-            pos += numToProcess;
-            // Only continue if there are more items to process.
-            if (pos < items.length)
-                setTimeout(iteration, wait); // Wait 10 ms to let the UI update.
-            else
-                onFinished();
+    
+            return categories;
         }
-        iteration();
+
+        this.setState({
+            heatmapSecondsSeries: minuteHeatmapSeries,
+            heatmapMinutesSeries: hourHeatmapSeries,
+            barSeries: barSeries,
+            barCategories: getBarCategories(),
+            lineSeries: lineSeries,
+        });
     }
 
     render() {
@@ -295,22 +265,22 @@ class Dashboard extends Component {
                     </Grid>
                     <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                            <HeatmapChart label="Highest probability per second by devices" series={this.state.heatmapSecondsSeries}/>
+                            <HeatmapChart label="Highest probability per devices by seconds" series={this.state.heatmapSecondsSeries}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                            <HeatmapChart label="Highest probability per minute by devices" series={this.state.heatmapMinutesSeries}/>
+                            <HeatmapChart label="Highest probability per devices by minutes" series={this.state.heatmapMinutesSeries}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={6}>
                         <Paper className={classes.paper}>
-                            <BarChart label="# of messages by devices" series={this.state.barSeries} categories={this.state.barCategories}/>
+                            <BarChart label="# of messages per device" series={this.state.barSeries} categories={this.state.barCategories}/>
                         </Paper>
                     </Grid>
                     <Grid item xs={6}>
                         <Paper className={classes.paper}>
-                            <LineChart label="# of messages per second" series={this.state.lineSeries}/>
+                            <LineChart label="# of messages by second" series={this.state.lineSeries}/>
                         </Paper>
                     </Grid>
                 </Grid>

Birdmap.API/ClientApp/src/components/dashboard/charts/BarChart.jsx

@@ -16,18 +16,6 @@ export class BarChart extends Component {
             this.setState({options: {
                 chart: {
                   stacked: true,
-                  animations: {
-                      enabled: true,
-                      easing: 'linear',
-                      speed: 250,
-                      animateGradually: {
-                          enabled: false,
-                      },
-                      dynamicAnimation: {
-                          enabled: true,
-                          speed: 250
-                      }
-                  },
                 },
                 plotOptions: {
                   bar: {

Birdmap.API/ClientApp/src/components/dashboard/charts/LineChart.jsx

@@ -12,13 +12,13 @@ export class LineChart extends Component {
                     animations: {
                         enabled: true,
                         easing: 'linear',
-                        speed: 250,
+                        speed: 1000,
                         animateGradually: {
                             enabled: false,
                         },
                         dynamicAnimation: {
-                            enabled: true,
-                            speed: 250
+                            enabled: false,
+                            speed: 1000
                         }
                     },
                     zoom: {

Birdmap.API/ClientApp/src/components/dashboard/services/Services.jsx

@@ -1,4 +1,4 @@
-import { Grid, IconButton, Paper, Typography } from '@material-ui/core';
+import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
 import { blueGrey } from '@material-ui/core/colors';
 import { AddBox, Refresh } from '@material-ui/icons/';
 import { withStyles } from '@material-ui/styles';

Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx

@@ -16,9 +16,9 @@ class DeviceMarker extends Component {
 
     getColor() {
         const { device } = this.props;
-        if (device.status === "Online") {
+        if (device.status == "Online") {
             return { color: blue[800] };
-        } else if (device.status === "Offline") {
+        } else if (device.status == "Offline") {
             return { color: yellow[800] };
         } else /* if (device.status == "unknown") */ {
             return { color: red[800] };