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

84
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);
@ -142,7 +145,7 @@ class Dashboard extends Component {
hourDevicePoints[p.deviceId][minutes] = p.prob; hourDevicePoints[p.deviceId][minutes] = p.prob;
} }
} }
if (p.prob > 0.5 && p.prob <= 0.7) { if (p.prob > 0.5 && p.prob <= 0.7) {
barDevicePoints[p.deviceId][0] += 1; barDevicePoints[p.deviceId][0] += 1;
} }
@ -164,7 +167,7 @@ class Dashboard extends Component {
} }
} }
const finishMethod = () => { const onFinished = () => {
const minuteHeatmapSeries = []; const minuteHeatmapSeries = [];
var i = 0; var i = 0;
@ -172,39 +175,39 @@ 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
})), })),
}); });
i++; i++;
}; };
const hourHeatmapSeries = []; const hourHeatmapSeries = [];
var i = 0; var i = 0;
for (var p in hourDevicePoints) { for (var p in hourDevicePoints) {
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
})), })),
}); });
i++; i++;
}; };
const barSeries = []; const barSeries = [];
const getCount = column => { const getCount = column => {
var counts = []; var counts = [];
for (var p in barDevicePoints) { for (var p in barDevicePoints) {
counts.unshift(barDevicePoints[p][column]); counts.unshift(barDevicePoints[p][column]);
} }
return counts; return counts;
}; };
barSeries.push({ barSeries.push({
name: "Prob > 0.5", name: "Prob > 0.5",
data: getCount(0), data: getCount(0),
@ -217,43 +220,46 @@ class Dashboard extends Component {
name: "Prob > 0.9", name: "Prob > 0.9",
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(),
y: linePoints[m], y: linePoints[m],
}) })
} }
const getBarCategories = () => { const getBarCategories = () => {
const categories = []; const categories = [];
for (var i = this.context.devices.length - 1; i >= 0; i--) { for (var i = this.context.devices.length - 1; i >= 0; i--) {
categories.push("Device " + i) categories.push("Device " + i)
} }
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);
} }
performTask(items, numToProcess, wait, processItem, onFinished) { performTask(items, numToProcess, wait, processItem, onFinished) {
var pos = 0; var pos = 0;
// This is run once for every numToProcess items. // This is run once for every numToProcess items.
@ -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',
}, },
}, },
},
} }
} }