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() {
this.context.removeHandler(C.update_all_method_name, this.updateSeries);
this.context.removeHandler(C.update_method_name, this.updateSeries);
if (this.updateTimer) {
clearTimeout(this.updateTimer);
}
}
getItemsWithStatus(iterate, status) {
@ -111,8 +114,8 @@ class Dashboard extends Component {
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 minuteAgo = new Date(Date.now() - 1000 * 60);
const hourAgo = new Date(Date.now() - 1000 * 60 * 60);
const minuteDevicePoints = {};
const hourDevicePoints = {};
@ -125,7 +128,7 @@ class Dashboard extends Component {
barDevicePoints[d.id] = Array(3).fill(0);
}
const processMethod = (items, index) => {
const processHeatmapItem = (items, index) => {
const p = items[index];
if (p.date > minuteAgo) {
var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
@ -164,7 +167,7 @@ class Dashboard extends Component {
}
}
const finishMethod = () => {
const onFinished = () => {
const minuteHeatmapSeries = [];
var i = 0;
@ -172,7 +175,7 @@ class Dashboard extends Component {
minuteHeatmapSeries.push({
name: "Device " + i,
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
})),
});
@ -186,7 +189,7 @@ class Dashboard extends Component {
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),
x: new Date(Date.now() - (60 - index) * 1000 * 60).toLocaleTimeString('hu-HU').substring(0, 5),
y: value
})),
});
@ -218,7 +221,7 @@ class Dashboard extends Component {
data: getCount(2),
});
const lineSeries = [{name: "message/sec", data: []}];
const lineSeries = [{ name: "message/sec", data: [] }];
for (var m in linePoints) {
lineSeries[0].data.push({
x: new Date(m).getTime(),
@ -236,20 +239,23 @@ class Dashboard extends Component {
return categories;
}
this.setState({
heatmapSecondsSeries: minuteHeatmapSeries,
heatmapMinutesSeries: hourHeatmapSeries,
barSeries: barSeries,
barCategories: getBarCategories(),
lineSeries: lineSeries,
const toUpdate = [
{ heatmapSecondsSeries: minuteHeatmapSeries },
{ heatmapMinutesSeries: hourHeatmapSeries },
{ barSeries: barSeries },
{ barCategories: getBarCategories() },
{ 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,
processHeatmapItem, onFinished);
}
@ -281,36 +287,36 @@ class Dashboard extends Component {
<Box className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Services isAdmin={this.props.isAdmin}/>
<Services isAdmin={this.props.isAdmin} />
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>
<DonutChart totalLabel="Devices" series={this.state.deviceSeries}/>
<DonutChart totalLabel="Devices" series={this.state.deviceSeries} />
</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>
<DonutChart totalLabel="Sensors" series={this.state.sensorSeries}/>
<DonutChart totalLabel="Sensors" series={this.state.sensorSeries} />
</Paper>
</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 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}/>
<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}/>
<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}/>
<LineChart label="# of messages per second" series={this.state.lineSeries} />
</Paper>
</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 = {
options: {
dataLabels: {
enabled: false
},
colors: [blueGrey[900]],
title: {
text: props.label,
style: {
fontSize: '22px',
fontWeight: 600,
fontFamily: 'Helvetica, Arial, sans-serif',
chart: {
animations: {
enabled: true,
easing: 'linear',
speed: 250,
animateGradually: {
enabled: false,
speed: 250,
},
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',
},
},
},
}
}