diff --git a/examples/mouse_click.html b/examples/mouse_click.html new file mode 100755 index 0000000..e1d9c43 --- /dev/null +++ b/examples/mouse_click.html @@ -0,0 +1,33 @@ + + + + + + + + +
+ + + diff --git a/examples/mouse.html b/examples/mouse_move.html similarity index 100% rename from examples/mouse.html rename to examples/mouse_move.html diff --git a/src/index.ts b/src/index.ts index f186d0f..edba9fd 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,7 +290,8 @@ 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 @@ -299,9 +300,9 @@ class LinePod extends ChartwerkPod { 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 +310,22 @@ class LinePod extends ChartwerkPod { series: datapoints, chartX: eventX, chartWidth: this.width - }); + }; + + } + + override onMouseMove(): void { + const obj = this.getMouseObj(); + 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); + } + + override onMouseClick(): void { + this.options.callbackMouseClick(this.getMouseObj()); } findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] { @@ -341,14 +357,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