import React from 'react' ; import { connect } from 'react-redux' ; import { Line } from '../../../../geoms/types' ; import { getTooltipType } from '../../../../specs' ; import { TooltipType } from '../../../../specs/constants' ; import { GlobalChartState } from '../../../../state/chart_state' ; import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation' ; import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme' ; import { getInternalIsInitializedSelector , InitStatus } from '../../../../state/selectors/get_internal_is_intialized' ; import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs' ; import { Rotation } from '../../../../utils/common' ; import { LIGHT_THEME } from '../../../../utils/themes/light_theme' ; import { Theme } from '../../../../utils/themes/theme' ; import { getCursorBandPositionSelector } from '../../state/selectors/get_cursor_band' ; import { getCursorLinePositionSelector } from '../../state/selectors/get_cursor_line' ; interface CursorCrossLineProps { theme : Theme ; chartRotation : Rotation ; cursorCrossLinePosition ? : Line ; tooltipType : TooltipType ; } function canRenderHelpLine ( type , visible ) { return visible && type === TooltipType . Crosshairs ; } class CursorCrossLineComponent extends React . Component < CursorCrossLineProps > { static displayName = 'CursorCrossLine' ; render ( ) { const { theme : { crosshair : { crossLine } , } , cursorCrossLinePosition , tooltipType , } = this . props ; if ( ! cursorCrossLinePosition || ! canRenderHelpLine ( tooltipType , crossLine . visible ) ) { return null ; } const { strokeWidth , stroke , dash } = crossLine ; const style = { strokeWidth , stroke , strokeDasharray : ( dash ?? [ ] ) . join ( ' ' ) , } ; return ( < svg className = "echCrosshair__crossLine" width = "100%" height = "100%" > < line { ... cursorCrossLinePosition } { ... style } /> < /svg>); } } const mapStateToProps = ( state ) : CursorCrossLineProps => { if ( getInternalIsInitializedSelector ( state ) !== InitStatus . Initialized ) { return { theme : LIGHT_THEME , chartRotation : 0 , tooltipType : TooltipType . None , } ; } const settings = getSettingsSpecSelector ( state ) ; const cursorBandPosition = getCursorBandPositionSelector ( state ) ; const fromExternalEvent = cursorBandPosition ?. fromExternalEvent ; const tooltipType = getTooltipType ( settings , fromExternalEvent ) ; return { theme : getChartThemeSelector ( state ) , chartRotation : getChartRotationSelector ( state ) , cursorCrossLinePosition : getCursorLinePositionSelector ( state ) , tooltipType , } ; } ; internal export const CursorCrossLine = connect ( mapStateToProps ) ( CursorCrossLineComponent ) ;