Browse Source

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

bars: handle `mouseout` event

See merge request chartwerk/bar-pod!9
pull/1/head
rozetko 2 years ago
parent
commit
b75ae144f6
  1. 42
      src/index.ts

42
src/index.ts

@ -62,22 +62,23 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
.each((d: RowValues, i: number, nodes: any) => { .each((d: RowValues, i: number, nodes: any) => {
const container = d3.select(nodes[i]); const container = d3.select(nodes[i]);
container.selectAll('rect') 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 // render bar annotations, its all hardcoded
if(_.isEmpty(this.options.barOptions.annotations)) { 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); 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('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(); }); .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 { getTrianglePath(x: number, y: number, length: number, options?: { max: number, min: number }): string {
// (x, y) - top left corner of bar // (x, y) - top left corner of bar
const minTriangleSize = options?.min || 6; const minTriangleSize = options?.min || 6;

Loading…
Cancel
Save