birbnetes/birbmap
birbnetes/birbmap
4
0
Fork 0
Code Pull Requests Releases Activity

Added further optimazation

Browse Source
This commit is contained in:
kunkliricsi 2020-11-22 09:56:32 +01:00
parent 3cdaa2dc35
commit d75e9d378d
2 changed files with 70 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx
View File

@ -57,6 +57,9 @@ class Dashboard extends Component {
componentWillUnmount() { componentWillUnmount() {
this.context.removeHandler(C.update_all_method_name, this.updateSeries); this.context.removeHandler(C.update_all_method_name, this.updateSeries);
this.context.removeHandler(C.update_method_name, this.updateSeries); this.context.removeHandler(C.update_method_name, this.updateSeries);
if (this.updateTimer) {
clearTimeout(this.updateTimer);
}
} }
getItemsWithStatus(iterate, status) { getItemsWithStatus(iterate, status) {
@ -111,8 +114,8 @@ class Dashboard extends Component {
updateDynamic = () => { updateDynamic = () => {
const secondAgo = new Date(); const secondAgo = new Date();
secondAgo.setMilliseconds(0); secondAgo.setMilliseconds(0);
const minuteAgo = new Date( Date.now() - 1000 * 60 ); const minuteAgo = new Date(Date.now() - 1000 * 60);
const hourAgo = new Date( Date.now() - 1000 * 60 * 60 ); const hourAgo = new Date(Date.now() - 1000 * 60 * 60);
const minuteDevicePoints = {}; const minuteDevicePoints = {};
const hourDevicePoints = {}; const hourDevicePoints = {};
@ -125,7 +128,7 @@ class Dashboard extends Component {
barDevicePoints[d.id] = Array(3).fill(0); barDevicePoints[d.id] = Array(3).fill(0);
} }
const processMethod = (items, index) => { const processHeatmapItem = (items, index) => {
const p = items[index]; const p = items[index];
if (p.date > minuteAgo) { if (p.date > minuteAgo) {
var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000); var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
@ -164,7 +167,7 @@ class Dashboard extends Component {
} }
} }
const finishMethod = () => { const onFinished = () => {
const minuteHeatmapSeries = []; const minuteHeatmapSeries = [];
var i = 0; var i = 0;
@ -172,7 +175,7 @@ class Dashboard extends Component {
minuteHeatmapSeries.push({ minuteHeatmapSeries.push({
name: "Device " + i, name: "Device " + i,
data: minuteDevicePoints[p].map((value, index) => ({ data: minuteDevicePoints[p].map((value, index) => ({
x: new Date( Date.now() - (60 - index) * 1000 ).toLocaleTimeString('hu-HU'), x: new Date(Date.now() - (60 - index) * 1000).toLocaleTimeString('hu-HU'),
y: value y: value
})), })),
}); });
@ -186,7 +189,7 @@ class Dashboard extends Component {
hourHeatmapSeries.push({ hourHeatmapSeries.push({
name: "Device " + i, name: "Device " + i,
data: hourDevicePoints[p].map((value, index) => ({ data: hourDevicePoints[p].map((value, index) => ({
x: new Date( Date.now() - (60 - index) * 1000 * 60 ).toLocaleTimeString('hu-HU').substring(0, 5), x: new Date(Date.now() - (60 - index) * 1000 * 60).toLocaleTimeString('hu-HU').substring(0, 5),
y: value y: value
})), })),
}); });
@ -218,7 +221,7 @@ class Dashboard extends Component {
data: getCount(2), data: getCount(2),
}); });
const lineSeries = [{name: "message/sec", data: []}]; const lineSeries = [{ name: "message/sec", data: [] }];
for (var m in linePoints) { for (var m in linePoints) {
lineSeries[0].data.push({ lineSeries[0].data.push({
x: new Date(m).getTime(), x: new Date(m).getTime(),
@ -236,20 +239,23 @@ class Dashboard extends Component {
return categories; return categories;
} }
this.setState({ const toUpdate = [
heatmapSecondsSeries: minuteHeatmapSeries, { heatmapSecondsSeries: minuteHeatmapSeries },
heatmapMinutesSeries: hourHeatmapSeries, { heatmapMinutesSeries: hourHeatmapSeries },
barSeries: barSeries, { barSeries: barSeries },
barCategories: getBarCategories(), { barCategories: getBarCategories() },
lineSeries: lineSeries, { lineSeries: lineSeries }
];
//Set states must be done separately otherwise ApexChart's UI update freezes the page.
this.performTask(toUpdate, 2, 300, (list, index) => {
this.setState(list[index]);
},
() => {
this.updateTimer = setTimeout(this.updateDynamic, 1000);
}); });
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 / 50), 20, this.performTask(this.context.heatmapPoints, Math.ceil(this.context.heatmapPoints.length / 50), 20,
processHeatmapItem, onFinished); processHeatmapItem, onFinished);
} }
@ -281,36 +287,36 @@ class Dashboard extends Component {
<Box className={classes.root}> <Box className={classes.root}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12}> <Grid item xs={12}>
<Services isAdmin={this.props.isAdmin}/> <Services isAdmin={this.props.isAdmin} />
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<DonutChart totalLabel="Devices" series={this.state.deviceSeries}/> <DonutChart totalLabel="Devices" series={this.state.deviceSeries} />
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<DonutChart totalLabel="Sensors" series={this.state.sensorSeries}/> <DonutChart totalLabel="Sensors" series={this.state.sensorSeries} />
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<HeatmapChart label="Highest probability per second by devices" series={this.state.heatmapSecondsSeries}/> <HeatmapChart label="Highest probability per second by devices" series={this.state.heatmapSecondsSeries} />
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<HeatmapChart label="Highest probability per minute by devices" series={this.state.heatmapMinutesSeries}/> <HeatmapChart label="Highest probability per minute by devices" series={this.state.heatmapMinutesSeries} />
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<BarChart label="# of messages by devices" series={this.state.barSeries} categories={this.state.barCategories}/> <BarChart label="# of messages by devices" series={this.state.barSeries} categories={this.state.barCategories} />
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<LineChart label="# of messages per second" series={this.state.lineSeries}/> <LineChart label="# of messages per second" series={this.state.lineSeries} />
</Paper> </Paper>
</Grid> </Grid>
</Grid> </Grid>

35
Birdmap.API/ClientApp/src/components/dashboard/charts/HeatmapChart.jsx
View File

@ -8,19 +8,34 @@ export class HeatmapChart extends Component {
this.state = { this.state = {
options: { options: {
dataLabels: { chart: {
enabled: false animations: {
}, enabled: true,
colors: [blueGrey[900]], easing: 'linear',
title: { speed: 250,
text: props.label, animateGradually: {
style: { enabled: false,
fontSize: '22px', speed: 250,
fontWeight: 600,
fontFamily: 'Helvetica, Arial, sans-serif',
}, },
dynamicAnimation: {
enabled: true,
speed: 250
}
}
},
dataLabels: {
enabled: false
},
colors: [blueGrey[900]],
title: {
text: props.label,
style: {
fontSize: '22px',
fontWeight: 600,
fontFamily: 'Helvetica, Arial, sans-serif',
}, },
}, },
},
} }
} }