|
|
@ -75,9 +75,9 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> { |
|
|
|
.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', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) |
|
|
|
.on('mouseover', this.redirectEventToOverlay.bind(this)) |
|
|
|
.on('mousemove', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) |
|
|
|
.on('mousemove', this.redirectEventToOverlay.bind(this)) |
|
|
|
.on('mouseout', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) |
|
|
|
.on('mouseout', this.redirectEventToOverlay.bind(this)) |
|
|
|
.on('mousedown', () => { d3.event.stopPropagation(); }); |
|
|
|
.on('mousedown', () => { d3.event.stopPropagation(); }); |
|
|
|
|
|
|
|
|
|
|
|
// render bar annotations, its all hardcoded
|
|
|
|
// render bar annotations, its all hardcoded
|
|
|
@ -105,13 +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', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) |
|
|
|
.on('mouseover', this.redirectEventToOverlay.bind(this)) |
|
|
|
.on('mousemove', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) |
|
|
|
.on('mousemove', this.redirectEventToOverlay.bind(this)) |
|
|
|
.on('mouseout', () => { this.overlay.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); }) |
|
|
|
.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; |
|
|
|