Live-update line charts with new data
This commit is contained in:
parent
de49743182
commit
1fc06cc7c6
3 changed files with 36 additions and 1 deletions
|
@ -11,6 +11,7 @@
|
|||
"document": false,
|
||||
"fetch": false,
|
||||
"Plotly": false,
|
||||
"WebSocket": false,
|
||||
"window": false
|
||||
},
|
||||
"settings": {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { withComponent, props } from 'skatejs';
|
||||
import { colors } from '../lib/colors';
|
||||
import { parseValue } from '../lib/values';
|
||||
import { subscribe } from '../lib/liveupdate';
|
||||
import injectCss from '../lib/plotly-shadowdom';
|
||||
|
||||
const Component = withComponent();
|
||||
|
@ -35,11 +36,13 @@ class LineChart extends Component {
|
|||
const days = this.days || 1;
|
||||
const endDate = new Date();
|
||||
const startDate = new Date();
|
||||
const series = this.timeseries.split(' ');
|
||||
startDate.setDate(startDate.getDate() - days);
|
||||
const promises = this.timeseries.split(' ').map(dataset => this.fetch(dataset, startDate, endDate));
|
||||
const promises = series.map(dataset => this.fetch(dataset, startDate, endDate));
|
||||
Promise.all(promises)
|
||||
.then((res) => {
|
||||
this.data = res;
|
||||
this.subscribe(series);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -49,8 +52,25 @@ class LineChart extends Component {
|
|||
.then(data => data.json());
|
||||
}
|
||||
|
||||
subscribe(timeseries) {
|
||||
subscribe(timeseries, (data) => {
|
||||
if (!this.el) {
|
||||
return;
|
||||
}
|
||||
const dataIdx = timeseries.indexOf(data.id);
|
||||
if (dataIdx === -1) {
|
||||
return;
|
||||
}
|
||||
Plotly.extendTraces(this.el, {
|
||||
y: [[parseValue(data.value)]],
|
||||
x: [[new Date(data.timestamp)]],
|
||||
}, [dataIdx]);
|
||||
});
|
||||
}
|
||||
|
||||
renderer(renderRoot, render) {
|
||||
const root = renderRoot;
|
||||
this.el = null;
|
||||
while (root.firstChild) {
|
||||
root.removeChild(root.firstChild);
|
||||
}
|
||||
|
@ -129,6 +149,7 @@ class LineChart extends Component {
|
|||
Plotly.newPlot(el, graphData, layout, {
|
||||
staticPlot: true,
|
||||
});
|
||||
this.el = el;
|
||||
return el;
|
||||
}
|
||||
}
|
||||
|
|
13
lib/liveupdate.js
Normal file
13
lib/liveupdate.js
Normal file
|
@ -0,0 +1,13 @@
|
|||
export function subscribe(timeseries, callback) {
|
||||
const socket = new WebSocket('ws://openmct.cbrp3.c-base.org:8082/');
|
||||
socket.addEventListener('open', () => {
|
||||
timeseries.forEach((series) => {
|
||||
socket.send(`subscribe ${series}`);
|
||||
});
|
||||
});
|
||||
socket.addEventListener('message', (msg) => {
|
||||
callback(JSON.parse(msg.data));
|
||||
});
|
||||
}
|
||||
|
||||
export default subscribe;
|
Loading…
Reference in a new issue