|
|
|
@ -452,12 +452,45 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
|
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// override parent updateData method to provide markers and segments
|
|
|
|
|
protected updateLineData( |
|
|
|
|
series?: LineTimeSerie[], |
|
|
|
|
options?: LineOptions, |
|
|
|
|
markersConf?: MarkersConf, |
|
|
|
|
segments?: SegmentSerie[], |
|
|
|
|
shouldRerender = true |
|
|
|
|
): void { |
|
|
|
|
this.updateMarkers(markersConf); |
|
|
|
|
this.updateSegments(segments); |
|
|
|
|
this.updateData(series, options, shouldRerender); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// TODO: it should be moved to VUE folder
|
|
|
|
|
// 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" />'`
|
|
|
|
|
props: { |
|
|
|
|
markersConf: { |
|
|
|
|
type: Object, |
|
|
|
|
required: false, |
|
|
|
|
default: function() { return {}; } |
|
|
|
|
}, |
|
|
|
|
segments: { |
|
|
|
|
type: Array, |
|
|
|
|
required: false, |
|
|
|
|
default: function() { return []; } |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
markersConf() { |
|
|
|
|
this.renderChart(); |
|
|
|
|
}, |
|
|
|
|
segments() { |
|
|
|
|
this.renderChart(); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
render(createElement) { |
|
|
|
|
return createElement( |
|
|
|
|
'div', |
|
|
|
@ -471,10 +504,10 @@ export const VueChartwerkLinePod = {
|
|
|
|
|
methods: { |
|
|
|
|
render() { |
|
|
|
|
if(this.pod === undefined) { |
|
|
|
|
this.pod = new LinePod(document.getElementById(this.id), this.series, this.options); |
|
|
|
|
this.pod = new LinePod(document.getElementById(this.id), this.series, this.options, this.markersConf, this.segments); |
|
|
|
|
this.pod.render(); |
|
|
|
|
} else { |
|
|
|
|
this.pod.updateData(this.series, this.options); |
|
|
|
|
this.pod.updateLineData(this.series, this.options, this.markersConf, this.segments); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
renderSharedCrosshair(values) { |
|
|
|
@ -486,4 +519,4 @@ export const VueChartwerkLinePod = {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export { LineTimeSerie, LineOptions, TimeFormat, LinePod, AreaType }; |
|
|
|
|
export { LineTimeSerie, LineOptions, TimeFormat, LinePod, AreaType, MarkersConf, SegmentSerie }; |
|
|
|
|