example with mouse over and refactor react component events

11 months ago · d9d1b5e501
2 changed files with 32 additions and 51 deletions
--- a/examples/mouse.html
+++ b/examples/mouse.html
@ -0,0 +1,31 @@
+<!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'),
+        [{ target: 'BASIC', datapoints: data, color: 'black' }],
+        options
+      );
+      pod.render();
+    </script>
+  </body>
+</html>
--- a/react/ChartwerkLinePod.tsx
+++ b/react/ChartwerkLinePod.tsx
@ -1,6 +1,4 @@
 import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
-
-import { AxisRange } from '@chartwerk/core/dist/types';
 import { MarkersConf } from '@chartwerk/line-pod/dist/models/marker';
 import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment';

@ -16,18 +14,6 @@ export type ChartwerkLinePodProps = {
  markersConf?: MarkersConf,
  segments?: SegmentSerie[],
  className?: string;
-  // TODO: callback types should be exported from chartwerk
-  onZoomIn?: (ranges: AxisRange[]) => void;
-  onZoomOut?: (centers: { x: number, y: number }) => void;
-  onMouseMove?: (event: any) => void;
-  onMouseOut?: () => void;
-  onLegendClick?: (idx: number) => void,
-  onPanning?: (event: { ranges: AxisRange[], d3Event: any }) => void;
-  onPanningEnd?: (ranges: AxisRange[]) => void;
-  onContextMenu?: (evt: any) => void;
-  onSharedCrosshairMove?: (evt: any) => void;
-  onRenderStart?: () => void,
-  onRenderEnd?: () => void,
 }

 export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
@ -49,48 +35,12 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) {

  useEffect(() => {
    if(chart === null) { return; }
-
-    let eventsCallbacks = _.cloneDeep(props.options?.eventsCallbacks || {});
-    if (props.onZoomIn) {
-      eventsCallbacks.zoomIn = props.onZoomIn;
-    }
-    if (props.onZoomOut) {
-      eventsCallbacks.zoomOut = props.onZoomOut;
-    }
-    if (props.onMouseMove) {
-      eventsCallbacks.mouseMove = props.onMouseMove;
-    }
-    if (props.onMouseOut) {
-      eventsCallbacks.mouseOut = props.onMouseOut;
-    }
-    if (props.onLegendClick) {
-      eventsCallbacks.onLegendClick = props.onLegendClick;
-    }
-    if (props.onPanning) {
-      eventsCallbacks.panning = props.onPanning;
-    }
-    if (props.onPanningEnd) {
-      eventsCallbacks.panningEnd = props.onPanningEnd;
-    }
-    if (props.onContextMenu) {
-      eventsCallbacks.contextMenu = props.onContextMenu;
-    }
-    if (props.onSharedCrosshairMove) {
-      eventsCallbacks.sharedCrosshairMove = props.onSharedCrosshairMove;
-    }
-    if (props.onRenderStart) {
-      eventsCallbacks.renderStart = props.onRenderStart;
-    }
-
    if(pod === null) {
      const newPod = new LinePod(
        // @ts-ignore
        chart,
        props.series,
-        {
-          ...props.options,
-          eventsCallbacks
-        },
+        props.options,
        props.markersConf,
        props.segments
      );