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