|
|
@ -67,8 +67,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
|
|
|
|
|
|
|
|
initLineGenerator(): void { |
|
|
|
initLineGenerator(): void { |
|
|
|
this.lineGenerator = this.d3.line() |
|
|
|
this.lineGenerator = this.d3.line() |
|
|
|
.x(d => this.xScale(d[1])) |
|
|
|
.x(d => this.xScale(d[0])) |
|
|
|
.y(d => this.yScale(d[0])); |
|
|
|
.y(d => this.yScale(d[1])); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
public appendData(data: [number, number][]): void { |
|
|
|
public appendData(data: [number, number][]): void { |
|
|
@ -178,52 +178,6 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
if(metricOptions.renderDots === true) { |
|
|
|
if(metricOptions.renderDots === true) { |
|
|
|
this._renderDots(datapoints, metricOptions.serieIdx); |
|
|
|
this._renderDots(datapoints, metricOptions.serieIdx); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let upperBoundDatapoints = []; |
|
|
|
|
|
|
|
let lowerBoundDatapoints = []; |
|
|
|
|
|
|
|
if( |
|
|
|
|
|
|
|
this.options.bounds !== undefined && |
|
|
|
|
|
|
|
this.options.bounds.upper !== undefined && |
|
|
|
|
|
|
|
this.options.bounds.lower !== undefined |
|
|
|
|
|
|
|
) { |
|
|
|
|
|
|
|
this.series.forEach(serie => { |
|
|
|
|
|
|
|
if(serie.target === this.formatedBound(this.options.bounds.upper, metricOptions.target)) { |
|
|
|
|
|
|
|
upperBoundDatapoints = serie.datapoints; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(serie.target === this.formatedBound(this.options.bounds.lower, metricOptions.target)) { |
|
|
|
|
|
|
|
lowerBoundDatapoints = serie.datapoints; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(upperBoundDatapoints.length > 0 && lowerBoundDatapoints.length > 0) { |
|
|
|
|
|
|
|
const zip = (arr1, arr2) => arr1.map((k, i) => [k[0], k[1], arr2[i][1]]); |
|
|
|
|
|
|
|
const data = zip(upperBoundDatapoints, lowerBoundDatapoints); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.metricContainer.append('path') |
|
|
|
|
|
|
|
.datum(data) |
|
|
|
|
|
|
|
.attr('fill', metricOptions.color) |
|
|
|
|
|
|
|
.attr('stroke', 'none') |
|
|
|
|
|
|
|
.attr('opacity', '0.3') |
|
|
|
|
|
|
|
.attr('d', this.d3.area() |
|
|
|
|
|
|
|
.x((d: number[]) => this.xScale(d[0])) |
|
|
|
|
|
|
|
.y0((d: number[]) => this.yScale(d[1])) |
|
|
|
|
|
|
|
.y1((d: number[]) => this.yScale(d[2])) |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(metricOptions.confidence > 0) { |
|
|
|
|
|
|
|
this.metricContainer.append('path') |
|
|
|
|
|
|
|
.datum(datapoints) |
|
|
|
|
|
|
|
.attr('fill', metricOptions.color) |
|
|
|
|
|
|
|
.attr('stroke', 'none') |
|
|
|
|
|
|
|
.attr('opacity', '0.3') |
|
|
|
|
|
|
|
.attr('d', this.d3.area() |
|
|
|
|
|
|
|
.x((d: [number, number]) => this.xScale(d[0])) |
|
|
|
|
|
|
|
.y0((d: [number, number]) => this.yScale(d[1] + metricOptions.confidence)) |
|
|
|
|
|
|
|
.y1((d: [number, number]) => this.yScale(d[1] - metricOptions.confidence)) |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
updateCrosshair(): void { |
|
|
|
updateCrosshair(): void { |
|
|
|