some commit

12 months ago · e46c7bdfb6
3 changed files with 60 additions and 8 deletions
--- a/examples/mouse_move.html
+++ b/examples/mouse_move.html
@ -0,0 +1,29 @@
+<!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] } },
+        eventsCallbacks: { mouseMove: console.log }
+      }
+      var pod = new LinePod(
+        document.getElementById('chart'),
+        [{ datapoints: data }],
+        options
+      );
+      pod.render();
+    </script>
+  </body>
+</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,18 +290,17 @@ 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
    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<LineTimeSerie, LineOptions> {
      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<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
+}