markers++

src/components/markers.ts

@@ -5,17 +5,16 @@ import { LineTimeSerie, LineOptions } from "../types";
 import d3 from "d3";
 
 export class Markers {
+  // TODO: more sentic name
   private _d3Holder = null;
-  private _state: PodState<LineTimeSerie, LineOptions> = null;
 
-  constructor(private _markers: MarkerSerie[]) {
+  constructor(private _markers: MarkerSerie[], private _state: PodState<LineTimeSerie, LineOptions>) {
   }
 
-  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, state: PodState<LineTimeSerie, LineOptions>) {
+  render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) {
     if(this._d3Holder !== null) {
       this._d3Holder.remove();
     }
-    this._state = state;
     this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');
     for (const ms of this._markers) {
       this.renderMarkerSerie(ms);
@@ -34,7 +33,7 @@ export class Markers {
         .attr('x1', linePosition)
         .attr('x2', linePosition)
         .attr('y1', 0)
-        // @ts-ignore
+        // @ts-ignore // TODO: remove ignore but boxParams are protected
         .attr('y2', this._state.boxParams.height);
       this._d3Holder.append('circle')
         .attr('class', 'gap-circle')

src/index.ts

@@ -42,8 +42,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     for(const serie of this.series.visibleSeries) {
       this._renderMetric(serie);
     }
-    this._markersLayer = new Markers(this._markerSeries);
+    this._markersLayer = new Markers(this._markerSeries, this.state);
-    this._markersLayer.render(this.metricContainer, this.state);
+    this._markersLayer.render(this.metricContainer);
   }
 
   clearAllMetrics(): void {