Optimized chart update (did not achieve much)
This commit is contained in:
@@ -46,6 +46,20 @@ class Dashboard extends Component {
|
||||
|
||||
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();
|
||||
window.setInterval(() => {
|
||||
this.updateDynamic();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
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 = [];
|
||||
|
||||
@@ -91,65 +105,73 @@ class Dashboard extends Component {
|
||||
updateSeries() {
|
||||
this.setState({
|
||||
deviceSeries: this.getDeviceSeries(),
|
||||
sensorSeries: this.getSensorSeries(),
|
||||
heatmapSecondsSeries: this.getHeatmapSecondsSeries(),
|
||||
heatmapMinutesSeries: this.getHeatmapMinutesSeries(),
|
||||
barSeries: this.getBarSeries(),
|
||||
barCategories: this.getBarCategories(),
|
||||
lineSeries: this.getLineSeries(),
|
||||
sensorSeries: this.getSensorSeries()
|
||||
});
|
||||
|
||||
this.updateDynamic();
|
||||
}
|
||||
|
||||
updateDynamic() {
|
||||
this.setState({
|
||||
heatmapSecondsSeries: this.getHeatmapSecondsSeries(),
|
||||
heatmapMinutesSeries: this.getHeatmapMinutesSeries(),
|
||||
barSeries: this.getBarSeries(),
|
||||
barCategories: this.getBarCategories(),
|
||||
lineSeries: this.getLineSeries(),
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.context.addHandler(C.update_all_method_name, this.updateSeries);
|
||||
this.context.addHandler(C.update_method_name, this.updateSeries);
|
||||
this.updateSeries();
|
||||
window.setInterval(() => {
|
||||
this.updateDynamic();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.context.removeHandler(C.update_all_method_name, this.updateSeries);
|
||||
this.context.removeHandler(C.update_method_name, this.updateSeries);
|
||||
}
|
||||
|
||||
getHeatmapSecondsSeries() {
|
||||
const secondAgo = new Date( Date.now() - 1000 * 1 );
|
||||
const minuteAgo = new Date( Date.now() - 1000 * 60 );
|
||||
const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
|
||||
|
||||
const devicePoints = {};
|
||||
const minuteDevicePoints = {};
|
||||
const hourDevicePoints = {};
|
||||
const barDevicePoints = {};
|
||||
const linePoints = {};
|
||||
|
||||
for (var d of this.context.devices) {
|
||||
devicePoints[d.id] = Array(60).fill(0);
|
||||
minuteDevicePoints[d.id] = Array(60).fill(0);
|
||||
hourDevicePoints[d.id] = Array(60).fill(0);
|
||||
barDevicePoints[d.id] = Array(3).fill(0);
|
||||
}
|
||||
|
||||
for (var p of this.context.heatmapPoints) {
|
||||
if (p.date > minuteAgo) {
|
||||
var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
|
||||
var oldProb = devicePoints[p.deviceId][seconds];
|
||||
var oldProb = minuteDevicePoints[p.deviceId][seconds];
|
||||
if (oldProb < p.prob) {
|
||||
devicePoints[p.deviceId][seconds] = 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 series = [];
|
||||
const minuteHeatmapSeries = [];
|
||||
|
||||
var i = 0;
|
||||
for (var p in devicePoints) {
|
||||
series.push({
|
||||
for (var p in minuteDevicePoints) {
|
||||
minuteHeatmapSeries.push({
|
||||
name: "Device " + i,
|
||||
data: devicePoints[p].map((value, index) => ({
|
||||
data: minuteDevicePoints[p].map((value, index) => ({
|
||||
x: new Date( Date.now() - (60 - index) * 1000 ).toLocaleTimeString('hu-HU'),
|
||||
y: value
|
||||
})),
|
||||
@@ -157,35 +179,13 @@ class Dashboard extends Component {
|
||||
i++;
|
||||
};
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
getHeatmapMinutesSeries() {
|
||||
const hourAgo = new Date( Date.now() - 1000 * 60 * 60 );
|
||||
|
||||
const devicePoints = {};
|
||||
|
||||
for (var d of this.context.devices) {
|
||||
devicePoints[d.id] = Array(60).fill(0);
|
||||
}
|
||||
|
||||
for (var p of this.context.heatmapPoints) {
|
||||
if (p.date > hourAgo) {
|
||||
var minutes = Math.floor((p.date.getTime() - hourAgo.getTime()) / (1000 * 60));
|
||||
var oldProb = devicePoints[p.deviceId][minutes];
|
||||
if (oldProb < p.prob) {
|
||||
devicePoints[p.deviceId][minutes] = p.prob;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const series = [];
|
||||
const hourHeatmapSeries = [];
|
||||
|
||||
var i = 0;
|
||||
for (var p in devicePoints) {
|
||||
series.push({
|
||||
for (var p in hourDevicePoints) {
|
||||
hourHeatmapSeries.push({
|
||||
name: "Device " + i,
|
||||
data: devicePoints[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),
|
||||
y: value
|
||||
})),
|
||||
@@ -193,55 +193,40 @@ class Dashboard extends Component {
|
||||
i++;
|
||||
};
|
||||
|
||||
return series;
|
||||
}
|
||||
const barSeries = [];
|
||||
|
||||
getBarSeries() {
|
||||
const devicePoints = {};
|
||||
for (var d of this.context.devices) {
|
||||
devicePoints[d.id] = Array(3).fill(0);
|
||||
}
|
||||
|
||||
for (var p of this.context.heatmapPoints) {
|
||||
if (p.prob > 0.5 && p.prob <= 0.7) {
|
||||
devicePoints[p.deviceId][0] += 1;
|
||||
}
|
||||
if (p.prob > 0.7 && p.prob <= 0.9) {
|
||||
devicePoints[p.deviceId][1] += 1;
|
||||
}
|
||||
if (p.prob > 0.9) {
|
||||
devicePoints[p.deviceId][2] += 1;
|
||||
}
|
||||
}
|
||||
|
||||
const series = [];
|
||||
const getCount = column => {
|
||||
var counts = [];
|
||||
|
||||
for (var p in devicePoints) {
|
||||
counts.unshift(devicePoints[p][column]);
|
||||
for (var p in barDevicePoints) {
|
||||
counts.unshift(barDevicePoints[p][column]);
|
||||
}
|
||||
|
||||
return counts;
|
||||
};
|
||||
|
||||
series.push({
|
||||
barSeries.push({
|
||||
name: "Prob > 0.5",
|
||||
data: getCount(0),
|
||||
});
|
||||
series.push({
|
||||
barSeries.push({
|
||||
name: "Prob > 0.7",
|
||||
data: getCount(1),
|
||||
});
|
||||
series.push({
|
||||
barSeries.push({
|
||||
name: "Prob > 0.9",
|
||||
data: getCount(2),
|
||||
});
|
||||
|
||||
return series;
|
||||
const lineSeries = [{name: "message/sec", data: []}];
|
||||
for (var m in linePoints) {
|
||||
lineSeries[0].data.push({
|
||||
x: new Date(m).getTime(),
|
||||
y: linePoints[m],
|
||||
})
|
||||
}
|
||||
|
||||
getBarCategories() {
|
||||
const getBarCategories = () => {
|
||||
const categories = [];
|
||||
|
||||
for (var i = this.context.devices.length - 1; i >= 0; i--) {
|
||||
@@ -251,28 +236,13 @@ class Dashboard extends Component {
|
||||
return categories;
|
||||
}
|
||||
|
||||
getLineSeries() {
|
||||
const messages = {};
|
||||
|
||||
for (var p of this.context.heatmapPoints) {
|
||||
var shortDate = p.date.toUTCString();
|
||||
var message = messages[shortDate];
|
||||
if (message === undefined) {
|
||||
messages[shortDate] = 1;
|
||||
} else {
|
||||
messages[shortDate] += 1;
|
||||
}
|
||||
}
|
||||
|
||||
const series = [{name: "message/sec", data: []}];
|
||||
for (var m in messages) {
|
||||
series[0].data.push({
|
||||
x: new Date(m).getTime(),
|
||||
y: messages[m],
|
||||
})
|
||||
}
|
||||
|
||||
return series;
|
||||
this.setState({
|
||||
heatmapSecondsSeries: minuteHeatmapSeries,
|
||||
heatmapMinutesSeries: hourHeatmapSeries,
|
||||
barSeries: barSeries,
|
||||
barCategories: getBarCategories(),
|
||||
lineSeries: lineSeries,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
Reference in New Issue
Block a user