|
|
|
@ -6,6 +6,8 @@ import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment';
|
|
|
|
|
|
|
|
|
|
import { useEffect, useRef, useState } from 'react'; |
|
|
|
|
|
|
|
|
|
import _ from 'lodash'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export type ChartwerkLinePodProps = { |
|
|
|
|
id?: string; |
|
|
|
@ -47,12 +49,48 @@ 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.markers, |
|
|
|
|
props.segments |
|
|
|
|
); |
|
|
|
|