import React from 'react' ; import * as _handlers from './utils/handlers' ; import * as _actions from './utils/actions' ; import * as _helpers from './utils/helpers' ; /**
 * Main Component
 */ const BaseLineChart = props => { const { height , width , data , margin , children } = props ; const chartRef = React . useRef < SVGSVGElement > ( null ) ; const [ needsRefresh , setNeedsRefresh ] = React . useState < boolean > ( false ) ; const [ isLoaded , setLoaded ] = React . useState < boolean > ( false ) ; const [ mouse , setMouseState ] = React . useState < NBaseLineChart . Mouse > ( { datum : null , } ) ; const [ dimensions , setDimensionsState ] = React . useState < NBaseLineChart . Dimensions > ( { height : 0 , width : 0 } ) ; const [ chart , setChartState ] = React . useState < NBaseLineChart . ChartValues > ( { x : undefined , y : undefined , line : undefined , domains : { x : [ 0 , 0 ] , y : [ 0 , 0 ] } , } ) ; const state = { dimensions , mouse , chart , chartRef : chartRef . current , } ; const actions = { setChart : ( _chart , cb ) => _actions . setChart ( setChartState ) ( _chart , cb ) , setDimensions : ( _dimensions , cb ) => _actions . setDimensions ( setDimensionsState ) ( _dimensions , cb ) , setMouse : ( _mouse , cb ) => _actions . setMouse ( setMouseState ) ( _mouse , cb ) , } ; const handlers = { onPointerEnter : _handlers . onMouseMove ( props , state , actions ) , onPointerMove : _handlers . onMouseMove ( props , state , actions ) , onPointerLeave : _handlers . onMouseLeave ( props , state , actions ) , onMouseLeave : _handlers . onMouseLeave ( props , state , actions ) , } ; const helpers = { getDimensions : ( ) => _helpers . getDimensions ( props , state ) , setDimensions : ( ) => _helpers . setDimensions ( props , state , actions ) , computeValues : ( cb ? ) => _helpers . computeValues ( props , state , actions , cb ) , } ; React . useEffect ( ( ) => { setLoaded ( true ) ; } , [ ] ) ; React . useEffect ( ( ) => { if ( isLoaded ) { helpers . setDimensions ( ) ; window . addEventListener ( 'resize' , helpers . setDimensions ) ; } return ( ) => { window . removeEventListener ( 'resize' , helpers . setDimensions ) ; } ; } , [ isLoaded ] ) ; React . useEffect ( ( ) => { if ( ! needsRefresh ) { setNeedsRefresh ( true ) ; } } , [ height , width , data . length , state . dimensions . height , state . dimensions . width , chart . domains . x , chart . domains . y , state . mouse . datum , ] ) ; React . useEffect ( ( ) => { if ( isLoaded && needsRefresh ) { helpers . computeValues ( helpers . setDimensions ) ; setNeedsRefresh ( false ) ; } } , [ needsRefresh ] ) ; const d = { width : width || state . dimensions . width , height : height || state . dimensions . height , } ; return ( < svg ref = { chartRef } viewBox = { `0 0 ${ d . width } ${ d . height }` } width = { d . width } height = { d . height } style = { { minWidth : '100%' , overflow : 'visible' } } { ... handlers } > < g transform = { `translate(${ margin ! . left },${ margin ! . top })` } > { children ( { state : { ... state , dimensions : d , margin } , actions , } ) } { } < rect className = "baselinechart-content-shield" width = { state . dimensions . width } height = { state . dimensions . height + 10 } fill = "transparent" transform = "translate(0, -5)" / > < /g> < /svg>); } ; BaseLineChart . defaultProps = { dataKeys : { x : 'x' , y : 'y' } , data : [ ] , margin : { top : 2 , right : 2 , bottom : 2 , left : 2 } , width : undefined , height : undefined , xAxis : false , domains : undefined , onMouseLeave : ( ) => undefined , onMouseMove : ( ) => undefined , onResize : ( ) => undefined , children : ( ) => null , } ; export default BaseLineChart ;