import React from 'react' ; import { connect } from 'react-redux' ; import { RenderChangeListener } from '../specs' ; import { GlobalChartState } from '../state/chart_state' ; import { globalSelectorCache } from '../state/create_selector' ; import { getDebugStateSelector } from '../state/selectors/get_debug_state' ; import { getSettingsSpecSelector } from '../state/selectors/get_settings_specs' ; import { DebugState } from '../state/types' ; interface ChartStatusStateProps { chartId : string ; rendered : boolean ; renderedCount : number ; onRenderChange ? : RenderChangeListener ; debugState : DebugState | null ; } class ChartStatusComponent extends React . Component < ChartStatusStateProps > { componentDidMount ( ) { this . dispatchRenderChange ( ) ; } componentDidUpdate ( ) { this . dispatchRenderChange ( ) ; } componentWillUnmount ( ) { globalSelectorCache . removeKeyFromAll ( this . props . chartId ) ; } dispatchRenderChange = ( ) => { const { onRenderChange , rendered } = this . props ; if ( onRenderChange ) { window . requestAnimationFrame ( ( ) => { onRenderChange ( rendered ) ; } ) ; } } ; render ( ) { const { rendered , renderedCount , debugState } = this . props ; const debugStateString = debugState && JSON . stringify ( debugState ) ; return ( < div className = "echChartStatus" data - ech - render - complete = { rendered } data - ech - render - count = { renderedCount } data - ech - debug - state = { debugStateString } />); } } const mapStateToProps = ( state ) : ChartStatusStateProps => { const { onRenderChange , debugState } = getSettingsSpecSelector ( state ) ; return { chartId : state . chartId , rendered : state . chartRendered , renderedCount : state . chartRenderedCount , onRenderChange , debugState : debugState ? getDebugStateSelector ( state ) : null , } ; } ; internal export const ChartStatus = connect ( mapStateToProps ) ( ChartStatusComponent ) ;