Browse Source

fix live demo

merge-requests/24/head
vargburz 2 years ago
parent
commit
70966b323f
  1. 16
      examples/demo_live.html
  2. 32
      src/index.ts

16
examples/demo_live.html

@ -15,9 +15,9 @@
const startTime = 1590590148;
const arrayLength = 100;
this.isZoomed = false; // TODO: temporary hack to have zoomin|zoomout with `appendData`. It will be moved to Pod.
const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
const data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
const data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
var data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
var data2 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 100)]);
var data3 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 20) + 90]);
const zoomIn = (ranges) => { const xRange = ranges[0]; options.axis.x.range = xRange; pod.updateData(undefined, options); this.isZoomed = true }
const zoomOut = (ranges) => { options.axis.x.range = undefined; pod.updateData(undefined, options); this.isZoomed = false }
let options = { renderLegend: false, axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } }, eventsCallbacks: { zoomIn: zoomIn, zoomOut } };
@ -37,9 +37,17 @@
const d1 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
const d2 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 100)];
const d3 = [startTime + rerenderIdx * 10000, Math.floor(Math.random() * 20) + 90];
console.log('d1', data1)
const shouldRerender = !this.isZoomed;
console.time('rerender');
pod.appendData([d1, d2, d3], shouldRerender);
data1.push(d1);
data2.push(d2);
data3.push(d3);
pod.updateData([
{ target: 'test1', datapoints: data1, color: 'green', maxLength: arrayLength + 30, renderDots: false },
{ target: 'test2', datapoints: data2, color: 'blue', maxLength: arrayLength + 30, renderDots: false },
{ target: 'test3', datapoints: data3, color: 'orange', maxLength: arrayLength + 30, renderDots: false },
]);
console.timeEnd('rerender');
if(rerenderIdx > arrayLength + 100) {
clearInterval(test);

32
src/index.ts

@ -62,38 +62,6 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
return this.lineGenerator;
}
public appendData(data: [number, number][], shouldRerender = true): void {
for(const serie of this.coreSeries.visibleSeries) {
serie.datapoints.push(data[serie.idx]);
const maxLength = serie.maxLength;
if(maxLength !== undefined && serie.datapoints.length > maxLength) {
serie.datapoints.shift();
}
}
for(const serie of this.coreSeries.visibleSeries) {
this.metricContainer.select(`.metric-path-${serie.idx}`)
.datum(serie.datapoints)
.attr('d', this.getRenderGenerator(serie.renderArea));
if(serie.renderDots === true) {
this.metricContainer.selectAll(`.metric-circle-${serie.idx}`)
.data(serie.datapoints)
.attr('cx', d => this.state.xScale(d[0]))
.attr('cy', d => this.state.yScale(d[1]));
this._renderDots(serie);
}
}
if(shouldRerender) {
const rightBorder = _.last(data)[0];
this.state.xValueRange = [this.state.getMinValueX(), rightBorder];
this.renderXAxis();
this.renderYAxis();
this.renderGrid();
}
}
_renderDots(serie: LineTimeSerie): void {
this.metricContainer.selectAll(null)
.data(serie.datapoints)

Loading…
Cancel
Save