markers hotfix

src/components/markers.ts

@@ -1,7 +1,7 @@
 import { MarkerElem, MarkersConf, MarkerSerie } from '../models/marker';
 import { LineTimeSerie, LineOptions } from '../types';
 
-import { PodState } from '@chartwerk/core';
+import { Margin, PodState } from '@chartwerk/core';
 
 import d3 from 'd3';
 
@@ -12,7 +12,8 @@ export class Markers {
   constructor(
     private _chartContainer: d3.Selection<HTMLElement, unknown, null, undefined>,
     private _markerConf: MarkersConf,
-    private _state: PodState<LineTimeSerie, LineOptions>
+    private _state: PodState<LineTimeSerie, LineOptions>,
+    private _margin: Margin,
   ) { }
 
   clear() {
@@ -106,11 +107,10 @@ export class Markers {
 
     this._chartContainer
       .append('div')
-      .attr('class', 'marker-content')
-      .attr('class', `marker-content-${marker.x}`)
+      .attr('class', `marker-content marker-content-${marker.x}`)
       // @ts-ignore // TODO: remove ignore but boxParams are protected
       .style('top', `${this._state.boxParams.height - this._chartHeight}px`)
-      .style('left', `${linePosition + 50}px`)
+      .style('left', `${linePosition + this._margin.left + 10}px`)
       .style('visibility', marker.alwaysDisplay ? 'visible' : 'hidden')
       .style('position', 'absolute')
       .style('border', '1px solid black')

src/index.ts

@@ -51,7 +51,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       this._renderMetric(serie);
     }
     if(this._markersConf !== undefined) {
-      this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state);
+      this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state, this.margin);
       this._markersLayer.render(this.metricContainer, this.height);
     }