Browse Source

onclick

pull/39/head
glitch4347 10 months ago
parent
commit
837004c2ad
  1. 6
      examples/mouse_click.html
  2. 13
      src/index.ts

6
examples/mouse.html → examples/mouse_click.html

@ -16,7 +16,11 @@
let options = {
renderLegend: false, usePanning: false,
axis: { y: { range: [0, 50] } },
eventsCallbacks: { mouseMove: console.log }
zoomEvents: { mouse: {
zoom: { isActive: false },
pan: { isActive: false },
} },
eventsCallbacks: { mouseClick: console.log }
}
var pod = new LinePod(
document.getElementById('chart'),

13
src/index.ts

@ -291,10 +291,12 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
}
getMouseObj(): MouseObj {
const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1];
const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
const yValue = this.state.yScale.invert(eventY);
this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
@ -309,20 +311,21 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
chartX: eventX,
chartWidth: this.width
};
}
override onMouseMove(): void {
const obj = this.getMouseObj();
this.moveCrosshairLine(obj.x, obj.y);
const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1];
this.moveCrosshairLine(eventX, eventY);
// TODO: is shift key pressed
// TODO: need to refactor this object
this.options.callbackMouseMove(obj);
}
// TODO: add override
onMouseClick(): void {
const obj = this.getMouseObj();
console.log(obj);
override onMouseClick(): void {
this.options.callbackMouseClick(this.getMouseObj());
}
findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {

Loading…
Cancel
Save