From 326c666435fa083269253d30f5f206295e15c6b6 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Sun, 10 Dec 2023 10:13:21 +0100 Subject: [PATCH] component refactorinmg begin --- react/ChartwerkLinePod.tsx | 77 ++++++++++++-------------------------- 1 file changed, 23 insertions(+), 54 deletions(-) diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx index b8431e2..b907e9d 100644 --- a/react/ChartwerkLinePod.tsx +++ b/react/ChartwerkLinePod.tsx @@ -1,11 +1,10 @@ -import type { LineTimeSerie, LineOptions } from '@chartwerk/line-pod'; -import { LinePod } from '@chartwerk/line-pod'; +import { LineTimeSerie, LineOptions, 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>((props, ref) => { +function ChartwerkLinePod(props: ChartwerkLinePodProps) { + const [pod, setPod] = useState(null); const [hack, setHack] = useState(null); @@ -35,55 +35,20 @@ export const ChartwerkLinePod = forwardRef { // 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 (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) { + if(pod === null) { console.log('create chart'); const newPod = new LinePod( @@ -92,30 +57,34 @@ export const ChartwerkLinePod = forwardRef { - if (hack === null) { + if(hack === null) { setHack(1); } }, 1); + return ( -
-
- {props.children} -
+
); -}); \ No newline at end of file +} + +export default ChartwerkLinePod; + +