diff --git a/src/index.ts b/src/index.ts index 3fca300..f1e05fc 100755 --- a/src/index.ts +++ b/src/index.ts @@ -27,7 +27,7 @@ export class ChartwerkBarPod extends ChartwerkPod { this.renderNoDataPointsMessage(); return; } - + this.setBarPodScales(); this.setSeriesDataForRendering(); this.renderSerie(this._seriesDataForRendring); @@ -65,7 +65,6 @@ export class ChartwerkBarPod extends ChartwerkPod { .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 { }) .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 { 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 { 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 { 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 { } 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( diff --git a/yarn.lock b/yarn.lock index aa38611..5cda536 100644 --- a/yarn.lock +++ b/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