Merge branch 'bar-events-fixes' into 'main'

bar events fixes

See merge request chartwerk/bar-pod!8

src/index.ts

@@ -27,7 +27,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
       this.renderNoDataPointsMessage();
       return;
     }
-  
+
     this.setBarPodScales();
     this.setSeriesDataForRendering();
     this.renderSerie(this._seriesDataForRendring);
@@ -65,7 +65,6 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
         .data(d.values)
         .enter().append('rect')
         .style('fill', (val, i) => d.colors[i])
-        .style('pointer-events', this.options.contextMenu ? 'all' : 'none')
         .attr('opacity', () => this.getBarOpacity(d))
         .attr('x', (val: number, idx: number) => {
           return this.getBarPositionX(d.key, idx);
@@ -75,7 +74,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
         })
         .attr('width', this.barWidth)
         .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('mousemove', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+        .on('mousedown', () => { d3.event.stopPropagation(); });
 
         // render bar annotations, its all hardcoded
         if(_.isEmpty(this.options.barOptions.annotations)) {
@@ -85,13 +87,13 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
         const series = _.filter(this.series.visibleSeries, serie => _.includes(d.serieTarget, serie.target));
         const matchedKeys = _.map(series, serie => serie.matchedKey); // here matchedKeys should be equal
         const key = matchedKeys[0];
-        
+
         const lastRect = _.last(container.selectAll('rect')?.nodes());
         const annotation = _.find(this.options.barOptions.annotations, a => a.key === key);
         if(!lastRect || !key || !annotation) {
           return;
         }
-        
+
         const rectSelection = d3.select(lastRect);
         // render triangle
         container.append('path')
@@ -101,7 +103,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
             const options = { max: this.options.barOptions.maxAnnotationSize, min: this.options.barOptions.minAnnotationSize };
             return this.getTrianglePath(x, y, this.barWidth, options);
           })
-          .attr('fill', annotation.color);
+          .attr('fill', annotation.color)
+          .on('mouseover', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mousemove', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); })
+          .on('mousedown', () => { d3.event.stopPropagation(); });
       });
   }
 
@@ -112,8 +117,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
     const yOffset = 4; // offset between triangle and bar
     const centerX = x + length / 2;
     const correctedLength = _.clamp(length, minTriangleSize, maxTriagleSize);
-  
-    const topY = Math.max(y - correctedLength - yOffset, 4); 
+
+    const topY = Math.max(y - correctedLength - yOffset, 4);
     const topLeftCorner = {
       x: centerX - correctedLength / 2,
       y: topY,
@@ -349,7 +354,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
       } else {
         const valuesColumns = _.map(this.series.visibleSeries, serie => _.map(serie.datapoints, row => row[1]));
         const zippedValuesColumn = _.zip(...valuesColumns);
-        maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row))); 
+        maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
       }
     } else {
       maxValue = _.max(

yarn.lock

@@ -20,12 +20,12 @@ __metadata:
   linkType: soft
 
 "@chartwerk/core@npm:latest":
-  version: 0.6.9
-  resolution: "@chartwerk/core@npm:0.6.9"
+  version: 0.6.10
+  resolution: "@chartwerk/core@npm:0.6.10"
   dependencies:
     d3: ^5.7.2
     lodash: ^4.14.149
-  checksum: c7649ac10ff5edd4a6e4697334e93e72329fef1bb487f61693b70a1a7b4e65137bbcf1c4d690a9e0b7c2de01a34fbd983dfde9e3f9eab44bc5e32645e808a3b6
+  checksum: 6a7f187b77878f20ba696a2bbd843bb57d8891efd69e578c946f56f501f679531efa42a33aa243b7fb5e52f6ca06a49a357fb37bcf99d8c32c1c46e4d27fcb2d
   languageName: node
   linkType: hard