From 04c27560eafab10eac62959c3e2bcdd10fbc7dec Mon Sep 17 00:00:00 2001 From: kunkliricsi Date: Sat, 21 Nov 2020 19:18:29 +0100 Subject: [PATCH] Added timeout processing --- .../src/components/dashboard/Dashboard.jsx | 184 ++++++++++-------- .../components/dashboard/charts/BarChart.jsx | 12 ++ .../components/dashboard/charts/LineChart.jsx | 6 +- .../dashboard/services/Services.jsx | 2 +- .../src/components/heatmap/DeviceMarker.jsx | 4 +- 5 files changed, 126 insertions(+), 82 deletions(-) diff --git a/Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx b/Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx index 9e23f63..10a6905 100644 --- a/Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx +++ b/Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx @@ -42,6 +42,7 @@ class Dashboard extends Component { this.updateSeries = this.updateSeries.bind(this); this.updateDynamic = this.updateDynamic.bind(this); + this.performTask = this.performTask.bind(this); } static contextType = DevicesContext; @@ -112,7 +113,8 @@ class Dashboard extends Component { } updateDynamic() { - const secondAgo = new Date( Date.now() - 1000 * 1 ); + const secondAgo = new Date(); + secondAgo.setMilliseconds(0); const minuteAgo = new Date( Date.now() - 1000 * 60 ); const hourAgo = new Date( Date.now() - 1000 * 60 * 60 ); @@ -127,7 +129,8 @@ class Dashboard extends Component { barDevicePoints[d.id] = Array(3).fill(0); } - for (var p of this.context.heatmapPoints) { + 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]; @@ -165,84 +168,113 @@ class Dashboard extends Component { } } - const minuteHeatmapSeries = []; + 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 - })), + 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), }); - 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 - })), + barSeries.push({ + name: "Prob > 0.7", + data: getCount(1), }); - i++; - }; + 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 = []; - 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) + for (var i = this.context.devices.length - 1; i >= 0; i--) { + categories.push("Device " + i) + } + + return categories; } - return categories; + this.setState({ + heatmapSecondsSeries: minuteHeatmapSeries, + heatmapMinutesSeries: hourHeatmapSeries, + barSeries: barSeries, + barCategories: getBarCategories(), + lineSeries: lineSeries, + }); } - this.setState({ - heatmapSecondsSeries: minuteHeatmapSeries, - heatmapMinutesSeries: hourHeatmapSeries, - barSeries: barSeries, - barCategories: getBarCategories(), - lineSeries: lineSeries, - }); + const processHeatmapItem = processMethod.bind(this); + const onFinished = finishMethod.bind(this) + + this.performTask(this.context.heatmapPoints, 10, 150, + 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() { @@ -265,22 +297,22 @@ class Dashboard extends Component { - + - + - + - + diff --git a/Birdmap.API/ClientApp/src/components/dashboard/charts/BarChart.jsx b/Birdmap.API/ClientApp/src/components/dashboard/charts/BarChart.jsx index 1d081cf..2f56b32 100644 --- a/Birdmap.API/ClientApp/src/components/dashboard/charts/BarChart.jsx +++ b/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: true, + easing: 'linear', + speed: 250, + animateGradually: { + enabled: false, + }, + dynamicAnimation: { + enabled: true, + speed: 250 + } + }, }, plotOptions: { bar: { diff --git a/Birdmap.API/ClientApp/src/components/dashboard/charts/LineChart.jsx b/Birdmap.API/ClientApp/src/components/dashboard/charts/LineChart.jsx index 7dbf6c2..0512408 100644 --- a/Birdmap.API/ClientApp/src/components/dashboard/charts/LineChart.jsx +++ b/Birdmap.API/ClientApp/src/components/dashboard/charts/LineChart.jsx @@ -12,13 +12,13 @@ export class LineChart extends Component { animations: { enabled: true, easing: 'linear', - speed: 1000, + speed: 250, animateGradually: { enabled: false, }, dynamicAnimation: { - enabled: false, - speed: 1000 + enabled: true, + speed: 250 } }, zoom: { diff --git a/Birdmap.API/ClientApp/src/components/dashboard/services/Services.jsx b/Birdmap.API/ClientApp/src/components/dashboard/services/Services.jsx index 523577c..d09ded3 100644 --- a/Birdmap.API/ClientApp/src/components/dashboard/services/Services.jsx +++ b/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'; diff --git a/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx b/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx index fc4f5b3..d31c525 100644 --- a/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx +++ b/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] };