|
|
|
@ -56,7 +56,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
|
|
|
|
|
clearAllMetrics(): void { |
|
|
|
|
// TODO: temporary hack before it will be implemented in core.
|
|
|
|
|
this.d3.selectAll('.metric-el').remove(); |
|
|
|
|
this.chartContainer.selectAll('.metric-el').remove(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
initLineGenerator(): void { |
|
|
|
@ -101,11 +101,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_renderDots(datapoints: number[][], serieIdx: number): void { |
|
|
|
|
const customClass = this.series[serieIdx].class || ''; |
|
|
|
|
|
|
|
|
|
this.metricContainer.selectAll(null) |
|
|
|
|
.data(datapoints) |
|
|
|
|
.enter() |
|
|
|
|
.append('circle') |
|
|
|
|
.attr('class', `metric-circle-${serieIdx} metric-el`) |
|
|
|
|
.attr('class', `metric-circle-${serieIdx} metric-el ${customClass}`) |
|
|
|
|
.attr('fill', this.getSerieColor(serieIdx)) |
|
|
|
|
.attr('r', METRIC_CIRCLE_RADIUS) |
|
|
|
|
.style('pointer-events', 'none') |
|
|
|
@ -114,15 +116,19 @@ 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 || '' |
|
|
|
|
|
|
|
|
|
this.metricContainer |
|
|
|
|
.append('path') |
|
|
|
|
.datum(datapoints) |
|
|
|
|
.attr('class', `metric-path-${serieIdx} metric-el`) |
|
|
|
|
.attr('class', `metric-path-${serieIdx} metric-el ${customClass}`) |
|
|
|
|
.attr('fill', 'none') |
|
|
|
|
.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); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -490,14 +496,14 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLineChartObject)
|
|
|
|
|
export const VueChartwerkLineChartObject = { |
|
|
|
|
// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod)
|
|
|
|
|
export const VueChartwerkLinePod = { |
|
|
|
|
// alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'`
|
|
|
|
|
render(createElement) { |
|
|
|
|
return createElement( |
|
|
|
|
'div', |
|
|
|
|
{ |
|
|
|
|
class: { 'chartwerk-line-chart': true }, |
|
|
|
|
class: { 'chartwerk-line-pod': true }, |
|
|
|
|
attrs: { id: this.id } |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|