Merge branch 'bars-handle-mouse-out-event' into 'main'

bars: handle `mouseout` event

See merge request chartwerk/bar-pod!9

src/index.ts

@@ -62,22 +62,23 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
       .each((d: RowValues, i: number, nodes: any) => {
         const container = d3.select(nodes[i]);
         container.selectAll('rect')
-        .data(d.values)
+          .data(d.values)
-        .enter().append('rect')
+          .enter().append('rect')
-        .style('fill', (val, i) => d.colors[i])
+          .style('fill', (val, i) => d.colors[i])
-        .attr('opacity', () => this.getBarOpacity(d))
+          .attr('opacity', () => this.getBarOpacity(d))
-        .attr('x', (val: number, idx: number) => {
+          .attr('x', (val: number, idx: number) => {
-          return this.getBarPositionX(d.key, idx);
+            return this.getBarPositionX(d.key, idx);
-        })
+          })
-        .attr('y', (val: number, idx: number) => {
+          .attr('y', (val: number, idx: number) => {
-          return this.getBarPositionY(val, idx, d.values);
+            return this.getBarPositionY(val, idx, d.values);
-        })
+          })
-        .attr('width', this.barWidth)
+          .attr('width', this.barWidth)
-        .attr('height', (val: number) => this.getBarHeight(val))
+          .attr('height', (val: number) => this.getBarHeight(val))
-        .on('contextmenu', this.contextMenu.bind(this))
+          .on('contextmenu', this.contextMenu.bind(this))
-        .on('mouseover', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mouseover', this.redirectEventToOverlay.bind(this))
-        .on('mousemove', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mousemove', this.redirectEventToOverlay.bind(this))
-        .on('mousedown', () => { d3.event.stopPropagation(); });
+          .on('mouseout', this.redirectEventToOverlay.bind(this))
+          .on('mousedown', () => { d3.event.stopPropagation(); });
 
         // render bar annotations, its all hardcoded
         if(_.isEmpty(this.options.barOptions.annotations)) {
@@ -104,12 +105,17 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
             return this.getTrianglePath(x, y, this.barWidth, options);
           })
           .attr('fill', annotation.color)
-          .on('mouseover', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mouseover', this.redirectEventToOverlay.bind(this))
-          .on('mousemove', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mousemove', this.redirectEventToOverlay.bind(this))
+          .on('mouseout', this.redirectEventToOverlay.bind(this))
           .on('mousedown', () => { d3.event.stopPropagation(); });
       });
   }
 
+  redirectEventToOverlay(): void {
+    this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
+  }
+
   getTrianglePath(x: number, y: number, length: number, options?: { max: number, min: number }): string {
     // (x, y) - top left corner of bar
     const minTriangleSize = options?.min || 6;