Merge pull request 'click-event' (#39) from click-event into main

Reviewed-on: #39
10 months ago · 88d6b2b24a
4 changed files with 66 additions and 7 deletions
--- a/examples/mouse_click.html
+++ b/examples/mouse_click.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <script src="../dist/index.dev.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="chart" style="width: 50%; height: 500px;"></div>
+    <script type="text/javascript">
+      const startTime = 1590590148;
+      const data = Array.from(
+        { length: 20 },
+        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
+      );
+      let options = {
+        renderLegend: false, usePanning: false,
+        axis: { y: { range: [0, 50] } },
+        zoomEvents: { mouse: { 
+          zoom: { isActive: false },
+          pan: { isActive: false },
+        } },
+        eventsCallbacks: { mouseClick: console.log }
+      }
+      var pod = new LinePod(
+        document.getElementById('chart'),
+        [{ datapoints: data }],
+        options
+      );
+      pod.render();
+    </script>
+  </body>
+</html>
--- a/examples/mouse_move.html
+++ b/examples/mouse_move.html
--- 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<LineTimeSerie, LineOptions> {
    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<LineTimeSerie, LineOptions> {

    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<LineTimeSerie, LineOptions> {
      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<LineTimeSerie, LineOptions> {
    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');
  }
--- a/src/types.ts
+++ b/src/types.ts
@ -11,3 +11,13 @@ type LineTimeSerieParams = {

 export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;
 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
+}