From 70b077286b6932a3087cc8d502cd590633593598 Mon Sep 17 00:00:00 2001 From: rozetko Date: Thu, 28 Jul 2022 14:25:10 +0300 Subject: [PATCH 1/4] bars: handle `mouseout` event --- src/index.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/index.ts b/src/index.ts index f1e05fc..1fcb196 100755 --- a/src/index.ts +++ b/src/index.ts @@ -75,8 +75,9 @@ export class ChartwerkBarPod extends ChartwerkPod { .attr('width', this.barWidth) .attr('height', (val: number) => this.getBarHeight(val)) .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('mouseover', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) + .on('mousemove', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) + .on('mouseout', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) .on('mousedown', () => { d3.event.stopPropagation(); }); // render bar annotations, its all hardcoded @@ -104,8 +105,9 @@ export class ChartwerkBarPod extends ChartwerkPod { 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('mousemove', (e) => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) + .on('mouseover', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) + .on('mousemove', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) + .on('mouseout', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) .on('mousedown', () => { d3.event.stopPropagation(); }); }); } From 790b9671f761f640ab290378c843c51158c11f8e Mon Sep 17 00:00:00 2001 From: rozetko Date: Thu, 28 Jul 2022 14:28:29 +0300 Subject: [PATCH 2/4] minor refactoring --- src/index.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/index.ts b/src/index.ts index 1fcb196..d83cfee 100755 --- a/src/index.ts +++ b/src/index.ts @@ -75,9 +75,9 @@ export class ChartwerkBarPod extends ChartwerkPod { .attr('width', this.barWidth) .attr('height', (val: number) => this.getBarHeight(val)) .on('contextmenu', this.contextMenu.bind(this)) - .on('mouseover', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) - .on('mousemove', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) - .on('mouseout', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) + .on('mouseover', this.redirectEventToOverlay.bind(this)) + .on('mousemove', this.redirectEventToOverlay.bind(this)) + .on('mouseout', this.redirectEventToOverlay.bind(this)) .on('mousedown', () => { d3.event.stopPropagation(); }); // render bar annotations, its all hardcoded @@ -105,13 +105,17 @@ export class ChartwerkBarPod extends ChartwerkPod { return this.getTrianglePath(x, y, this.barWidth, options); }) .attr('fill', annotation.color) - .on('mouseover', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) - .on('mousemove', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) - .on('mouseout', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) + .on('mouseover', this.redirectEventToOverlay.bind(this)) + .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; From f597a2ac47390484c82185e43b3b2ec0aa1bea40 Mon Sep 17 00:00:00 2001 From: rozetko Date: Thu, 28 Jul 2022 14:28:38 +0300 Subject: [PATCH 3/4] fix indentation --- src/index.ts | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/index.ts b/src/index.ts index d83cfee..b7b6e31 100755 --- a/src/index.ts +++ b/src/index.ts @@ -62,23 +62,23 @@ export class ChartwerkBarPod extends ChartwerkPod { .each((d: RowValues, i: number, nodes: any) => { const container = d3.select(nodes[i]); container.selectAll('rect') - .data(d.values) - .enter().append('rect') - .style('fill', (val, i) => d.colors[i]) - .attr('opacity', () => this.getBarOpacity(d)) - .attr('x', (val: number, idx: number) => { - return this.getBarPositionX(d.key, idx); - }) - .attr('y', (val: number, idx: number) => { - return this.getBarPositionY(val, idx, d.values); - }) - .attr('width', this.barWidth) - .attr('height', (val: number) => this.getBarHeight(val)) - .on('contextmenu', this.contextMenu.bind(this)) - .on('mouseover', this.redirectEventToOverlay.bind(this)) - .on('mousemove', this.redirectEventToOverlay.bind(this)) - .on('mouseout', this.redirectEventToOverlay.bind(this)) - .on('mousedown', () => { d3.event.stopPropagation(); }); + .data(d.values) + .enter().append('rect') + .style('fill', (val, i) => d.colors[i]) + .attr('opacity', () => this.getBarOpacity(d)) + .attr('x', (val: number, idx: number) => { + return this.getBarPositionX(d.key, idx); + }) + .attr('y', (val: number, idx: number) => { + return this.getBarPositionY(val, idx, d.values); + }) + .attr('width', this.barWidth) + .attr('height', (val: number) => this.getBarHeight(val)) + .on('contextmenu', this.contextMenu.bind(this)) + .on('mouseover', this.redirectEventToOverlay.bind(this)) + .on('mousemove', this.redirectEventToOverlay.bind(this)) + .on('mouseout', this.redirectEventToOverlay.bind(this)) + .on('mousedown', () => { d3.event.stopPropagation(); }); // render bar annotations, its all hardcoded if(_.isEmpty(this.options.barOptions.annotations)) { From f7a5ccfff9bd7d658a013241678fb129dafc7f1d Mon Sep 17 00:00:00 2001 From: rozetko Date: Thu, 28 Jul 2022 14:30:26 +0300 Subject: [PATCH 4/4] handle non-existing `this.overlay` case --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index b7b6e31..e3cf379 100755 --- a/src/index.ts +++ b/src/index.ts @@ -113,7 +113,7 @@ export class ChartwerkBarPod extends ChartwerkPod { } redirectEventToOverlay(): void { - this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); + this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); } getTrianglePath(x: number, y: number, length: number, options?: { max: number, min: number }): string {