markers conf + events

examples/markers_select.html

@@ -34,7 +34,11 @@
         {
           series: [
             { data: markersData, color: 'red' },
-          ]
+          ],
+          events: {
+            onMouseMove: (el) => { console.log(el); },
+            onMouseOut: () => { console.log('mouse out'); }
+          }
         }
       );
       pod.render();

src/components/markers.ts

@@ -37,15 +37,22 @@ export class Markers {
         // @ts-ignore // TODO: remove ignore but boxParams are protected
         .attr('y2', this._state.boxParams.height)
         .attr('pointer-events', 'none');
-      this._d3Holder.append('circle')
+      let circle = this._d3Holder.append('circle')
         .attr('class', 'gap-circle')
         .attr('stroke', serie.color)
         .attr('stroke-width', '2px')
         .attr('r', 4)
         .attr('cx', linePosition)
         .attr('cy', 5)
-        .attr('pointer-events', 'none') // TODO: make all on implementation of Events
-        .style('cursor', 'pointer')
+
+      if(this._markerConf !== undefined) {
+        circle
+          .attr('pointer-events', 'all')
+          .style('cursor', 'pointer')
+          .on('mousemove', () => this._markerConf.events.onMouseMove(d))
+          .on('mouseout', () => this._markerConf.events.onMouseOut())
+      }
+
     });
 
   }

src/models/marker.ts

@@ -8,5 +8,8 @@ export type MarkerSerie = {
 
 export type MarkersConf = {
   series: MarkerSerie[],
-  onSelect?: (el: MarkerElem[]) => void;
-}
+  events?: {
+    onMouseMove?: (el: MarkerElem[]) => void;
+    onMouseOut?: () => void;
+  }
+}