component refactorinmg begin

react/ChartwerkLinePod.tsx

@@ -1,11 +1,10 @@
-import type { LineTimeSerie, LineOptions } from '@chartwerk/line-pod';
+import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
-import { LinePod } from '@chartwerk/line-pod';
 
-import { useEffect, useRef, useState, PropsWithChildren, forwardRef } from 'react';
+import { AxisRange } from '@chartwerk/core/dist/types';
+
+import { useEffect, useRef, useState } from 'react';
 
-import * as _ from 'lodash';
 
-export type AxisRange = [number, number] | undefined;
 export type ChartwerkLinePodProps = {
   id: string;
   series: LineTimeSerie[];
@@ -25,7 +24,8 @@ export type ChartwerkLinePodProps = {
   onRenderEnd?: () => void,
 }
 
-export const ChartwerkLinePod = forwardRef<HTMLDivElement, PropsWithChildren<ChartwerkLinePodProps>>((props, ref) => {
+function ChartwerkLinePod(props: ChartwerkLinePodProps) {
+  
   const [pod, setPod] = useState<LinePod | null>(null);
   const [hack, setHack] = useState<number | null>(null);
 
@@ -35,55 +35,20 @@ export const ChartwerkLinePod = forwardRef<HTMLDivElement, PropsWithChildren<Cha
   useEffect(() => {
     // this function will be called on component unmount
     return () => {
-      if (pod === null) {
+      if(pod === null) {
         return;
       }
-
-      console.log('remove chart');
-
       // @ts-ignore
       pod.removeEventListeners();
     }
   }, []);
 
   useEffect(() => {
-    if (chart === null) {
+    if(chart === null) {
       return;
     }
 
-    let eventsCallbacks = _.cloneDeep(props.options.eventsCallbacks || {});
+    if(pod === null) {
-    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) {
       console.log('create chart');
 
       const newPod = new LinePod(
@@ -92,30 +57,34 @@ export const ChartwerkLinePod = forwardRef<HTMLDivElement, PropsWithChildren<Cha
         props.series,
         {
           ...props.options,
-          eventsCallbacks,
         }
       );
-      setPod(newPod);
+      setPod(
+        newPod
+      );
+      console.log('initial chart render');
       newPod.render();
     } else {
+      console.log('update chart');
       pod.updateData(props.series, {
         ...props.options,
-        eventsCallbacks,
       });
     }
-  }, [chart, pod, props.id, props.series, props.options]);
+  }, [chart, pod, props.id, props.options]);
 
   // TODO: it's a hack to render the LinePod right after the div appears in DOM
   setTimeout(() => {
-    if (hack === null) {
+    if(hack === null) {
       setHack(1);
     }
   }, 1);
 
+
   return (
-    <div ref={ref}>
+    <div id={props.id} className={props.className} ref={chartRef}></div>
-      <div id={props.id} className={props.className} ref={chartRef}></div>
-      {props.children}
-    </div>
   );
-});
+}
+
+export default ChartwerkLinePod;
+
+