From e46c7bdfb645142bdc278d05649726a393935226 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Tue, 9 Jan 2024 23:50:25 +0100 Subject: [PATCH 1/2] some commit --- examples/mouse_move.html | 29 +++++++++++++++++++++++++++++ src/index.ts | 29 +++++++++++++++++++++-------- src/types.ts | 10 ++++++++++ 3 files changed, 60 insertions(+), 8 deletions(-) create mode 100755 examples/mouse_move.html diff --git a/examples/mouse_move.html b/examples/mouse_move.html new file mode 100755 index 0000000..74ccd21 --- /dev/null +++ b/examples/mouse_move.html @@ -0,0 +1,29 @@ + + + + + + + + +
+ + + diff --git a/src/index.ts b/src/index.ts index f186d0f..a8552d0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; -import { LineTimeSerie, LineOptions } from './types'; +import { LineTimeSerie, LineOptions, MouseObj } from './types'; import { Markers } from './components/markers'; import { Segments } from './components/segments'; @@ -290,18 +290,17 @@ class LinePod extends ChartwerkPod { return _.max(intervals); } - onMouseMove(): void { + 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); - // TDOO: is shift key pressed + // TODO: is shift key pressed // TODO: need to refactor this object - this.options.callbackMouseMove({ + return { x: d3.event.pageX, y: d3.event.pageY, xVal: xValue, @@ -309,7 +308,21 @@ class LinePod extends ChartwerkPod { series: datapoints, chartX: eventX, chartWidth: this.width - }); + }; + } + + override onMouseMove(): void { + const obj = this.getMouseObj(); + this.moveCrosshairLine(obj.x, obj.y); + // 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); } findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] { @@ -341,14 +354,14 @@ class LinePod extends ChartwerkPod { return points; } - onMouseOver(): void { + override onMouseOver(): void { this.onMouseMove(); this.crosshair.style('display', null); this.crosshair.selectAll('.crosshair-circle') .style('display', null); } - onMouseOut(): void { + override onMouseOut(): void { this.options.callbackMouseOut(); this.crosshair.style('display', 'none'); } diff --git a/src/types.ts b/src/types.ts index 5924894..379763f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,3 +11,13 @@ type LineTimeSerieParams = { export type LineTimeSerie = Serie & Partial; export type LineOptions = Options; + +export type MouseObj = { + x: number, + y: number, + xVal: number, + yVal: number, + series: { value: [number, number], color: string, label: string }[], + chartX: number, + chartWidth: number +} \ No newline at end of file From 837004c2ad7fac41b1f1109269c04aeac194e033 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Wed, 10 Jan 2024 00:25:08 +0100 Subject: [PATCH 2/2] onclick --- examples/{mouse.html => mouse_click.html} | 6 +++++- src/index.ts | 13 ++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) rename examples/{mouse.html => mouse_click.html} (82%) diff --git a/examples/mouse.html b/examples/mouse_click.html similarity index 82% rename from examples/mouse.html rename to examples/mouse_click.html index 74ccd21..e1d9c43 100755 --- a/examples/mouse.html +++ b/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'), diff --git a/src/index.ts b/src/index.ts index a8552d0..edba9fd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -291,10 +291,12 @@ class LinePod extends ChartwerkPod { } 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 { 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 }[] {