|
|
|
@ -11,6 +11,7 @@ const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
|
|
|
|
|
|
|
|
|
|
export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { |
|
|
|
|
lineGenerator = null; |
|
|
|
|
areaGenerator = null; |
|
|
|
|
|
|
|
|
|
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { |
|
|
|
|
super(d3, _el, _series, _options); |
|
|
|
@ -21,6 +22,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
|
|
|
|
|
this.updateCrosshair(); |
|
|
|
|
this.initLineGenerator(); |
|
|
|
|
this.initAreaGenerator(); |
|
|
|
|
|
|
|
|
|
// TODO: seems that renderMetrics is not correct name
|
|
|
|
|
if(this.series.length === 0) { |
|
|
|
@ -65,6 +67,21 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
.y(d => this.yScale(d[1])); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
initAreaGenerator(): void { |
|
|
|
|
this.areaGenerator = this.d3.area() |
|
|
|
|
.x(d => this.xScale(d[0])) |
|
|
|
|
.y1(d => this.yScale(d[1])) |
|
|
|
|
.y0(d => this.height); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getRenderGenerator(serieIdx: number): any { |
|
|
|
|
const renderArea = this.series[serieIdx].renderArea; |
|
|
|
|
if(renderArea) { |
|
|
|
|
return this.areaGenerator; |
|
|
|
|
} |
|
|
|
|
return this.lineGenerator; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
public appendData(data: [number, number][], shouldRerender = true): void { |
|
|
|
|
for(let idx = 0; idx < this.series.length; ++idx) { |
|
|
|
|
if(this.series[idx].visible === false) { |
|
|
|
@ -80,7 +97,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
for(let idx = 0; idx < this.series.length; ++idx) { |
|
|
|
|
this.metricContainer.select(`.metric-path-${idx}`) |
|
|
|
|
.datum(this.series[idx].datapoints) |
|
|
|
|
.attr('d', this.lineGenerator); |
|
|
|
|
.attr('d', this.getRenderGenerator(idx)); |
|
|
|
|
|
|
|
|
|
if(this.series[idx].renderDots === true) { |
|
|
|
|
this.metricContainer.selectAll(`.metric-circle-${idx}`) |
|
|
|
@ -117,19 +134,22 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
|
|
|
|
|
_renderLines(datapoints: number[][], serieIdx: number): void { |
|
|
|
|
const dashArray = this.series[serieIdx].dashArray !== undefined ? this.series[serieIdx].dashArray : '0'; |
|
|
|
|
const customClass = this.series[serieIdx].class || '' |
|
|
|
|
const customClass = this.series[serieIdx].class || ''; |
|
|
|
|
const fillColor = this.series[serieIdx].renderArea ? this.getSerieColor(serieIdx) : 'none'; |
|
|
|
|
const fillOpacity = this.series[serieIdx].renderArea ? 0.5 : 'none'; |
|
|
|
|
|
|
|
|
|
this.metricContainer |
|
|
|
|
.append('path') |
|
|
|
|
.datum(datapoints) |
|
|
|
|
.attr('class', `metric-path-${serieIdx} metric-el ${customClass}`) |
|
|
|
|
.attr('fill', 'none') |
|
|
|
|
.attr('fill', fillColor) |
|
|
|
|
.attr('fill-opacity', fillOpacity) |
|
|
|
|
.attr('stroke', this.getSerieColor(serieIdx)) |
|
|
|
|
.attr('stroke-width', 1) |
|
|
|
|
.attr('stroke-opacity', 0.7) |
|
|
|
|
.attr('pointer-events', 'none') |
|
|
|
|
.style('stroke-dasharray', dashArray) |
|
|
|
|
.attr('d', this.lineGenerator); |
|
|
|
|
.attr('d', this.getRenderGenerator(serieIdx)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_renderMetric( |
|
|
|
|