Best optimization so far

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

@@ -3,6 +3,12 @@ import { withStyles } from '@material-ui/styles';
 import Services from './services/Services';
 import { blueGrey } from '@material-ui/core/colors';
 import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
+import DonutChart from './charts/DonutChart';
+import HeatmapChart from './charts/HeatmapChart';
+import BarChart from './charts/BarChart';
+import LineChart from './charts/LineChart';
+import DevicesContext from '../../contexts/DevicesContext';
+import C from '../../common/Constants';
 
 const styles = theme => ({
     root: {
@@ -10,27 +16,302 @@ const styles = theme => ({
         padding: '64px',
         backgroundColor: theme.palette.primary.dark,
     },
+    typo: {
+        fontSize: theme.typography.pxToRem(20),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
     paper: {
         backgroundColor: blueGrey[50],
-        height: '60px',
+        padding: '16px',
     }
 });
 
 class Dashboard extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            deviceSeries: [],
+            sensorSeries: [],
+            heatmapSecondsSeries: [],
+            heatmapMinutesSeries: [],
+            barSeries: [],
+            barCategories: [],
+            lineSeries: [],
+        };
+
+        this.updateSeries = this.updateSeries.bind(this);
+        this.updateDynamic = this.updateDynamic.bind(this);
+        this.performTask = this.performTask.bind(this);
+    }
+
+    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();
+        this.updateDynamic();
+    }
+
+    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 = [];
+
+        for (var d of iterate) {
+            if (d.status == status) {
+                items.push(d);
+            }
+        }
+
+        return items;
+    }
+
+    getDevicesWithStatus(status) {
+        return this.getItemsWithStatus(this.context.devices, status);
+    }
+
+    getSensorsWithStatus(status) {
+        const sensors = [];
+
+        for (var d of this.context.devices) {
+            sensors.push(...d.sensors)
+        }
+
+        return this.getItemsWithStatus(sensors, status);
+    }
+
+    getDeviceSeries() {
+        var online = this.getDevicesWithStatus("Online").length;
+        var offline = this.getDevicesWithStatus("Offline").length;
+        var error = this.getDevicesWithStatus("Error").length;
+
+        return [online, offline, error]
+    }
+
+    getSensorSeries() {
+        var online = this.getSensorsWithStatus("Online").length;
+        var offline = this.getSensorsWithStatus("Offline").length;
+        var unknown = this.getSensorsWithStatus("Unknown").length;
+
+        return [online, offline, unknown]
+    }
+
+    updateSeries() {
+        this.setState({
+            deviceSeries: this.getDeviceSeries(),
+            sensorSeries: this.getSensorSeries()
+        });
+    }
+
+    updateDynamic = () => {
+        const secondAgo = new Date();
+        secondAgo.setMilliseconds(0);
+        const minuteAgo = new Date( Date.now() - 1000 * 60 );
+        const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
+
+        const minuteDevicePoints = {};
+        const hourDevicePoints = {};
+        const barDevicePoints = {};
+        const linePoints = {};
+
+        for (var d of this.context.devices) {
+            minuteDevicePoints[d.id] = Array(60).fill(0);
+            hourDevicePoints[d.id] = Array(60).fill(0);
+            barDevicePoints[d.id] = Array(3).fill(0);
+        }
+
+        const processMethod = (items, index) => {
+            const p = items[index];
+            if (p.date > minuteAgo) {
+                var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
+                var oldProb = minuteDevicePoints[p.deviceId][seconds];
+                if (oldProb < p.prob) {
+                    minuteDevicePoints[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 finishMethod = () => {
+            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),
+            });
+    
+            const lineSeries = [{name: "message/sec", data: []}];
+            for (var m in linePoints) {
+                lineSeries[0].data.push({
+                    x: new Date(m).getTime(),
+                    y: linePoints[m],
+                })
+            }
+    
+            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,
+            });
+
+            setTimeout(this.updateDynamic, 1000);
+        }
+
+        const processHeatmapItem = processMethod.bind(this);
+        const onFinished = finishMethod.bind(this)
+
+        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);
+            }
+            // 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();
+        }
+        iteration();
+    }
+
     render() {
         const { classes } = this.props;
         return (
             <Box className={classes.root}>
                 <Grid container spacing={3}>
-                    <Grid item xs={8}>
+                    <Grid item xs={12}>
                         <Services isAdmin={this.props.isAdmin}/>
                     </Grid>
-                    <Grid item xs={4}>
-                        <Paper className={classes.paper} />
-                        <Paper className={classes.paper} />
+                    <Grid item xs={6}>
+                        <Paper className={classes.paper}>
+                            <DonutChart totalLabel="Devices" series={this.state.deviceSeries}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper className={classes.paper}>
+                            <DonutChart totalLabel="Sensors" series={this.state.sensorSeries}/>
+                        </Paper>
                     </Grid>
                     <Grid item xs={12}>
-                        <Paper className={classes.paper} />
+                        <Paper className={classes.paper}>
+                            <HeatmapChart label="Highest probability per second by devices" 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}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper className={classes.paper}>
+                            <BarChart label="# of messages by devices" 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}/>
+                        </Paper>
                     </Grid>
                 </Grid>
             </Box>

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

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red, orange, amber } from '@material-ui/core/colors';
+
+export class BarChart extends Component {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+            options: {},
+        };
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.categories !== this.props.categories) {
+            this.setState({options: {
+                chart: {
+                  stacked: true,
+                  animations: {
+                      enabled: true,
+                      easing: 'linear',
+                      speed: 250,
+                      animateGradually: {
+                          enabled: false,
+                      },
+                      dynamicAnimation: {
+                          enabled: true,
+                          speed: 250
+                      }
+                  },
+                },
+                plotOptions: {
+                  bar: {
+                    horizontal: true,
+                  },
+                },
+                colors: [blueGrey[500], blueGrey[700], blueGrey[900]],
+                stroke: {
+                  width: 1,
+                  colors: ['#fff']
+                },
+                title: {
+                  text: this.props.label,
+                  style: {
+                    fontSize: '22px',
+                    fontWeight: 600,
+                    fontFamily: 'Helvetica, Arial, sans-serif',
+                  },
+                },
+                xaxis: {
+                  categories: this.props.categories,
+                  labels: {
+                    formatter: function (val) {
+                      return val;
+                    }
+                  }
+                },
+                yaxis: {
+                  title: {
+                    text: undefined
+                  },
+                },
+                tooltip: {
+                  y: {
+                    formatter: function (val) {
+                      return val;
+                    }
+                  }
+                },
+                fill: {
+                  opacity: 1
+                },
+                legend: {
+                    position: 'top',
+                }
+            }});
+        }
+    }
+
+    render() {
+        return (
+            <Chart 
+                options={this.state.options} 
+                series={this.props.series} 
+                type="bar" 
+                height={600}
+            />
+        )
+    }
+}
+
+export default BarChart;

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

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+
+
+export class DonutChart extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            options: {
+                legend: {
+                    fontSize: '18px',
+                },
+                plotOptions: {
+                    pie: {
+                    startAngle: 0,
+                    expandOnClick: false,
+                    offsetX: 0,
+                    offsetY: 0,
+                    customScale: 1,
+                    dataLabels: {
+                        offset: 0,
+                        minAngleToShowLabel: 10
+                    }, 
+                    donut: {
+                        size: '65%',
+                        background: 'transparent',
+                        labels: {
+                            show: true,
+                            total: {
+                                show: true,
+                                showAlways: true,
+                                label: props.totalLabel,
+                                fontSize: '22px',
+                                fontFamily: 'Helvetica, Arial, sans-serif',
+                                fontWeight: 600,
+                                color: '#373d3f',
+                                formatter: function (w) {
+                                    return w.globals.seriesTotals.reduce((a, b) => {
+                                      return a + b
+                                    }, 0)
+                                }
+                            }
+                        }
+                    },      
+                    }
+                },
+                dataLabels: {
+                  enabled: false
+                },
+                colors: [green[500], blueGrey[500], red[500]],
+                labels: ['Online', 'Offline', 'Error / Unknown']},
+          }
+    }
+
+    render() {
+        return (
+            <Chart 
+            options={this.state.options} 
+            series={this.props.series} 
+            type="donut"/>
+        )
+    }
+}
+
+export default DonutChart;

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

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+
+export class HeatmapChart extends Component {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+            options: {
+                dataLabels: {
+                  enabled: false
+                },
+                colors: [blueGrey[900]],
+                title: {
+                  text: props.label,
+                  style: {
+                    fontSize: '22px',
+                    fontWeight: 600,
+                    fontFamily: 'Helvetica, Arial, sans-serif',
+                  },
+                },
+              },
+        }
+    }
+    
+
+    render() {
+        return (
+            <Chart
+                options={this.state.options} 
+                series={this.props.series} 
+                type="heatmap"
+                height={600}
+            />
+        )
+    }
+}
+
+export default HeatmapChart

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

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+
+export class LineChart extends Component {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+            options: {
+                chart: {
+                    animations: {
+                        enabled: true,
+                        easing: 'linear',
+                        speed: 250,
+                        animateGradually: {
+                            enabled: false,
+                        },
+                        dynamicAnimation: {
+                            enabled: true,
+                            speed: 250
+                        }
+                    },
+                    zoom: {
+                        enabled: false
+                    }
+                },
+                colors: [blueGrey[900]],
+                dataLabels: {
+                    enabled: false
+                },
+                stroke: {
+                    curve: 'straight'
+                },
+                title: {
+                    text: this.props.label,
+                    align: 'left',
+                    style: {
+                      fontSize: '22px',
+                      fontWeight: 600,
+                      fontFamily: 'Helvetica, Arial, sans-serif',
+                    },
+                },
+                grid: {
+                    row: {
+                        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+                        opacity: 0.5
+                    },
+                },
+                xaxis: {
+                    type: 'datetime',
+                    labels: {
+                      formatter: function (val) {
+                        return new Date(val).toLocaleTimeString('hu-HU');
+                      }
+                    }
+                }
+          },
+        }
+    }
+
+    render() {
+        return (
+            <Chart 
+                options={this.state.options} 
+                series={this.props.series} 
+                type="line" 
+                height={600}
+            />
+        )
+    }
+}
+
+export default LineChart

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

@@ -1,4 +1,4 @@
-import { Box, Grid, IconButton, Paper, Typography } from '@material-ui/core';
+import { 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';
@@ -108,7 +108,7 @@ class Services extends Component {
 
         const Skeletons = this.state.serviceCount.map((i, index) => (
             <ServiceInfoSkeleton key={index} />
-            ));
+        ));
 
         return (
             <React.Fragment>
@@ -134,7 +134,7 @@ class Services extends Component {
                                 <Refresh fontSize="large" />
                             </IconButton>
                         </Grid>
-                    <AddNewDialog open={this.state.isDialogOpen} handleClose={() => this.setState({ isDialogOpen: false })} handleAdd={this.addDevice}/>
+                        <AddNewDialog open={this.state.isDialogOpen} handleClose={() => this.setState({ isDialogOpen: false })} handleAdd={this.addDevice} />
                     </Grid>
                 </Paper>
                 {this.state.isLoading ? Skeletons : ServiceComponents}

Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx

@@ -63,8 +63,8 @@ class DeviceComponent extends Component {
         if (status == "Online") {
             return { color: green[600] };
         } else if (status == "Offline") {
-            return { color: orange[900] };
-        } else /* if (device.status == "unknown") */ {
+            return { color: blueGrey[500] };
+        } else /* if (device.status == "Unknown" || device.status == "Error") */ {
             return { color: red[800] };
         }
     }

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] };

Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js

@@ -60,6 +60,7 @@ export default class DevicesContextProvider extends Component {
         }
         service.getall().then(result => {
             this.setState({ devices: result });
+            this.invokeHandlers(C.update_all_method_name, null);
         }).catch(ex => {
             console.log(ex);
         });
@@ -101,7 +102,7 @@ export default class DevicesContextProvider extends Component {
                 newConnection.on(C.probability_method_name, (id, date, prob) => {
                     //console.log(method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
                     var device = this.state.devices.filter(function (x) { return x.id === id })[0]
-                    var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude, prob: prob, date: date };
+                    var newPoint = { deviceId: device.id, lat: device.coordinates.latitude, lng: device.coordinates.longitude, prob: prob, date: new Date(date) };
                     this.setState({
                         heatmapPoints: [...this.state.heatmapPoints, newPoint]
                     });
@@ -111,7 +112,6 @@ export default class DevicesContextProvider extends Component {
 
                 newConnection.on(C.update_all_method_name, () => {
                     this.updateAllDevicesInternal(service);
-                    this.invokeHandlers(C.update_all_method_name, null);
                 });
 
                 newConnection.on(C.update_method_name, (id) => this.updateDeviceInternal(id, service));