import * as React from 'react' ; import { Template , Plugin , Getter , TemplatePlaceholder , TemplateConnector , withComponents , Getters , PluginComponents , } from '@devexpress/dx-react-core' ; import { findSeriesByName , addSeries , extendDomains , getValueDomainName , ARGUMENT_DOMAIN , } from '@devexpress/dx-chart-core' ; import { ExtraSeriesParameters , SeriesProps , PathComponentProps , Scales , } from '../types' ; internal export const declareSeries = < T extends SeriesProps > ( pluginName , { components , getPointTransformer , createHitTester } ) : React . ComponentType < T > => { class Component extends React . PureComponent < T > { static components : PluginComponents ; static defaultProps : Partial < SeriesProps > = { name : 'defaultSeriesName' , } ; render ( ) { const { name , argumentField , valueField , scaleName , seriesComponent , pointComponent , color , ... restProps } = this . props ; const symbolName = Symbol ( name ) ; const seriesItem = { getPointTransformer , createHitTester , ... this . props , symbolName , } ; const getSeries = ( { series , data , palette , } ) => addSeries ( series , data , palette , seriesItem , restProps ) ; const getDomains = ( { series , domains , } ) => extendDomains ( domains , findSeriesByName ( symbolName , series ) ) ; return ( < Plugin name = { pluginName } > < Getter name = "series" computed = { getSeries } / > < Getter name = "domains" computed = { getDomains } / > < Template name = "series" > < TemplatePlaceholder /> < TemplateConnector > { ( { series , scales , animation , rotated , layouts , clipPathId , readyToRenderSeries , } ) => { const { pane } = layouts ; const currentSeries = findSeriesByName ( symbolName , series ) ; const currentScales = { argScale : scales [ ARGUMENT_DOMAIN ] , valScale : scales [ getValueDomainName ( currentSeries ! . scaleName ) ] , } ; const Path = currentSeries . seriesComponent as any ; return ( < Path index = { currentSeries . index } pointComponent = { currentSeries . pointComponent } coordinates = { currentSeries . points as any } rotated = { rotated } state = { currentSeries . state } color = { currentSeries . color } scales = { currentScales } pane = { pane } clipPathId = { clipPathId } animation = { animation } readyToRenderSeries = { readyToRenderSeries } / > ) ; } } < /TemplateConnector> < /Template> < /Plugin>); } } Component . components = { } ; if ( components . Path ) { Component . components . seriesComponent = 'Path' ; } if ( components . Point ) { Component . components . pointComponent = 'Point' ; } return withComponents ( components ) ( Component ) ; } ;