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

@@ -46,20 +46,6 @@ class Dashboard extends Component {
 
     static contextType = DevicesContext;
 
-    componentDidMount() {
-        this.context.addHandler(C.update_all_method_name, this.updateSeries);
-        this.context.addHandler(C.update_method_name, this.updateSeries);
-        this.updateSeries();
-        window.setInterval(() => {
-            this.updateDynamic();
-        }, 2000);
-    }
-
-    componentWillUnmount() {
-        this.context.removeHandler(C.update_all_method_name, this.updateSeries);
-        this.context.removeHandler(C.update_method_name, this.updateSeries);
-    }
-
     getItemsWithStatus(iterate, status) {
         const items = [];
 
@@ -105,73 +91,65 @@ class Dashboard extends Component {
     updateSeries() {
         this.setState({
             deviceSeries: this.getDeviceSeries(),
-            sensorSeries: this.getSensorSeries()
+            sensorSeries: this.getSensorSeries(),
+            heatmapSecondsSeries: this.getHeatmapSecondsSeries(),
+            heatmapMinutesSeries: this.getHeatmapMinutesSeries(),
+            barSeries: this.getBarSeries(),
+            barCategories: this.getBarCategories(),
+            lineSeries: this.getLineSeries(),
         });
-
-        this.updateDynamic();
     }
 
     updateDynamic() {
-        const secondAgo = new Date( Date.now() - 1000 * 1 );
+        this.setState({
-        const minuteAgo = new Date( Date.now() - 1000 * 60 );
+            heatmapSecondsSeries: this.getHeatmapSecondsSeries(),
-        const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
+            heatmapMinutesSeries: this.getHeatmapMinutesSeries(),
+            barSeries: this.getBarSeries(),
+            barCategories: this.getBarCategories(),
+            lineSeries: this.getLineSeries(),
+        });
+    }
 
-        const minuteDevicePoints = {};
+    componentDidMount() {
-        const hourDevicePoints = {};
+        this.context.addHandler(C.update_all_method_name, this.updateSeries);
-        const barDevicePoints = {};
+        this.context.addHandler(C.update_method_name, this.updateSeries);
-        const linePoints = {};
+        this.updateSeries();
+        window.setInterval(() => {
+            this.updateDynamic();
+        }, 1000);
+    }
+
+    componentWillUnmount() {
+        this.context.removeHandler(C.update_all_method_name, this.updateSeries);
+        this.context.removeHandler(C.update_method_name, this.updateSeries);
+    }
+
+    getHeatmapSecondsSeries() {
+        const minuteAgo = new Date( Date.now() - 1000 * 60 );
+
+        const devicePoints = {};
 
         for (var d of this.context.devices) {
-            minuteDevicePoints[d.id] = Array(60).fill(0);
+            devicePoints[d.id] = Array(60).fill(0);
-            hourDevicePoints[d.id] = Array(60).fill(0);
-            barDevicePoints[d.id] = Array(3).fill(0);
         }
 
         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];
+                var oldProb = devicePoints[p.deviceId][seconds];
                 if (oldProb < p.prob) {
-                    minuteDevicePoints[p.deviceId][seconds] = p.prob;
+                    devicePoints[p.deviceId][seconds] = p.prob;
-                }
-            }
-
-            if (p.date > hourAgo) {
-                var minutes = Math.floor((p.date.getTime() - hourAgo.getTime()) / (1000 * 60));
-                var oldProb = hourDevicePoints[p.deviceId][minutes];
-                if (oldProb < p.prob) {
-                    hourDevicePoints[p.deviceId][minutes] = p.prob;
-                }
-            }
-            
-            if (p.prob > 0.5 && p.prob <= 0.7) {
-                barDevicePoints[p.deviceId][0] += 1;
-            }
-            if (p.prob > 0.7 && p.prob <= 0.9) {
-                barDevicePoints[p.deviceId][1] += 1;
-            }
-            if (p.prob > 0.9) {
-                barDevicePoints[p.deviceId][2] += 1;
-            }
-
-            if (p.date < secondAgo) {
-                var shortDate = p.date.toUTCString();
-                var point = linePoints[shortDate];
-                if (point === undefined) {
-                    linePoints[shortDate] = 1;
-                } else {
-                    linePoints[shortDate] += 1;
                 }
             }
         }
 
-        const minuteHeatmapSeries = [];
+        const series = [];
 
         var i = 0;
-        for (var p in minuteDevicePoints) {
+        for (var p in devicePoints) {
-            minuteHeatmapSeries.push({
+            series.push({
                 name: "Device " + i,
-                data: minuteDevicePoints[p].map((value, index) => ({
+                data: devicePoints[p].map((value, index) => ({
                     x: new Date( Date.now() - (60 - index) * 1000 ).toLocaleTimeString('hu-HU'),
                     y: value
                 })),
@@ -179,13 +157,35 @@ class Dashboard extends Component {
             i++;
         };
 
-        const hourHeatmapSeries = [];
+        return series;
+    }
+
+    getHeatmapMinutesSeries() {
+        const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
+
+        const devicePoints = {};
+
+        for (var d of this.context.devices) {
+            devicePoints[d.id] = Array(60).fill(0);
+        }
+
+        for (var p of this.context.heatmapPoints) {
+            if (p.date > hourAgo) {
+                var minutes = Math.floor((p.date.getTime() - hourAgo.getTime()) / (1000 * 60));
+                var oldProb = devicePoints[p.deviceId][minutes];
+                if (oldProb < p.prob) {
+                    devicePoints[p.deviceId][minutes] = p.prob;
+                }
+            }
+        }
+
+        const series = [];
 
         var i = 0;
-        for (var p in hourDevicePoints) {
+        for (var p in devicePoints) {
-            hourHeatmapSeries.push({
+            series.push({
                 name: "Device " + i,
-                data: hourDevicePoints[p].map((value, index) => ({
+                data: devicePoints[p].map((value, index) => ({
                     x: new Date( Date.now() - (60 - index) * 1000 * 60 ).toLocaleTimeString('hu-HU').substring(0, 5),
                     y: value
                 })),
@@ -193,56 +193,88 @@ class Dashboard extends Component {
             i++;
         };
 
-        const barSeries = [];
+        return series;
+    }
 
+    getBarSeries() {
+        const devicePoints = {};
+        for (var d of this.context.devices) {
+            devicePoints[d.id] = Array(3).fill(0);
+        }
+        
+        for (var p of this.context.heatmapPoints) {
+            if (p.prob > 0.5 && p.prob <= 0.7) {
+                devicePoints[p.deviceId][0] += 1;
+            }
+            if (p.prob > 0.7 && p.prob <= 0.9) {
+                devicePoints[p.deviceId][1] += 1;
+            }
+            if (p.prob > 0.9) {
+                devicePoints[p.deviceId][2] += 1;
+            }
+        }
+        
+        const series = [];
         const getCount = column => {
             var counts = [];
 
-            for (var p in barDevicePoints) {
+            for (var p in devicePoints) {
-                counts.unshift(barDevicePoints[p][column]);
+                counts.unshift(devicePoints[p][column]);
             }
 
             return counts;
         };
 
-        barSeries.push({
+        series.push({
             name: "Prob > 0.5",
             data: getCount(0),
         });
-        barSeries.push({
+        series.push({
             name: "Prob > 0.7",
             data: getCount(1),
         });
-        barSeries.push({
+        series.push({
             name: "Prob > 0.9",
             data: getCount(2),
         });
 
-        const lineSeries = [{name: "message/sec", data: []}];
+        return series;
-        for (var m in linePoints) {
+    }
-            lineSeries[0].data.push({
+
+    getBarCategories() {
+        const categories = [];
+
+        for (var i = this.context.devices.length - 1; i >= 0; i--) {
+            categories.push("Device " + i)
+        }
+
+        return categories;
+    }
+
+    getLineSeries() {
+        const xSecondsAgo = new Date( Date.now() - 1000 * 2 );
+        const aSecondAgo = new Date( Date.now() - 1000 * 1);
+        const messages = {};
+
+        var counter = 0;
+        for (var p of this.context.heatmapPoints) {
+            var shortDate = p.date.toUTCString();
+            var message = messages[shortDate];
+            if (message === undefined) {
+                messages[shortDate] = 1;
+            } else {
+                messages[shortDate] += 1;
+            }
+        }
+
+        const series = [{data: []}];
+        for (var m in messages) {
+            series[0].data.push({
                 x: new Date(m).getTime(),
-                y: linePoints[m],
+                y: messages[m],
             })
         }
-
+        return series;
-        const getBarCategories = () => {
-            const categories = [];
-    
-            for (var i = this.context.devices.length - 1; i >= 0; i--) {
-                categories.push("Device " + i)
-            }
-    
-            return categories;
-        }
-
-        this.setState({
-            heatmapSecondsSeries: minuteHeatmapSeries,
-            heatmapMinutesSeries: hourHeatmapSeries,
-            barSeries: barSeries,
-            barCategories: getBarCategories(),
-            lineSeries: lineSeries,
-        });
     }
 
     render() {

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

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

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

@@ -9,6 +9,20 @@ export class DonutChart extends Component {
 
         this.state = {
             options: {
+                chart: {
+                    animations: {
+                        enabled: false,
+                        easing: 'linear',
+                        speed: 1000,
+                        animateGradually: {
+                            enabled: false,
+                        },
+                        dynamicAnimation: {
+                            enabled: true,
+                            speed: 500
+                        }
+                    }
+                },
                 legend: {
                     fontSize: '18px',
                 },

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

@@ -8,6 +8,20 @@ export class HeatmapChart extends Component {
     
         this.state = {
             options: {
+                chart: {
+                    animations: {
+                        enabled: false,
+                        easing: 'linear',
+                        speed: 1000,
+                        animateGradually: {
+                            enabled: false,
+                        },
+                        dynamicAnimation: {
+                            enabled: true,
+                            speed: 500
+                        }
+                    }
+                },
                 dataLabels: {
                   enabled: false
                 },

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

@@ -10,15 +10,15 @@ export class LineChart extends Component {
             options: {
                 chart: {
                     animations: {
-                        enabled: true,
+                        enabled: false,
                         easing: 'linear',
                         speed: 1000,
                         animateGradually: {
                             enabled: false,
                         },
                         dynamicAnimation: {
-                            enabled: false,
+                            enabled: true,
-                            speed: 1000
+                            speed: 500
                         }
                     },
                     zoom: {