import * as React from 'react' ; import { HOVERED , SELECTED , dArea , dRotateArea , processAreaAnimation , getPathStart , isCoordinatesChanged , } from '@devexpress/dx-chart-core' ; import { withStates } from '../../utils/with-states' ; import { withPattern } from '../../utils/with-pattern' ; import { withAnimation } from '../../utils/with-animation' ; import { AreaSeries } from '../../types' ; class RawArea extends React . PureComponent < AreaSeries . SeriesProps > { render ( ) { const { path , coordinates , animation , index , state , pointComponent , color , clipPathId , pane , scales , rotated , ... restProps } = this . props ; const dPath = path === undefined ? ( rotated ? dRotateArea : dArea ) : path ; return ( < path clipPath = { `url(#${ clipPathId })` } d = { dPath ! ( coordinates ) } fill = { color } opacity = { 0.5 } { ... restProps } />); } } export const Area = withAnimation < any > ( processAreaAnimation , ( { coordinates } ) => ( { coordinates } ) , getPathStart , isCoordinatesChanged ) ( withStates ( { [ HOVERED ] : withPattern < any > ( ( { index } ) => `series-${ index }-hover` , { opacity : 0.75 } ) ( RawArea ) , [ SELECTED ] : withPattern < any > ( ( { index } ) => `series-${ index }-selection` , { opacity : 0.5 } ) ( RawArea ) , } ) ( RawArea ) ) ;