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,
          ...props.options,
          eventsCallbacks
        },
        props.markersConf,
        props.segments
      );