import * as React from 'react' ; import { TOP , BOTTOM , LEFT , RIGHT , } from '@devexpress/dx-chart-core' ; import { Plugin , Template , TemplatePlaceholder , Getter } from '@devexpress/dx-react-core' ; export class AxesLayout extends React . PureComponent { ref = React . createRef < HTMLDivElement > ( ) ; render ( ) { return ( < Plugin > < Getter name = "centerDivRef" value = { this . ref } / > < Template name = "canvas" > < div id = "center-center" ref = { this . ref } style = { { display : 'flex' , flexDirection : 'column' , flexGrow : 1 } } > < div id = { `${ TOP }-axis-container` } style = { { display : 'flex' , flexDirection : 'row' } } > < TemplatePlaceholder name = { `${ TOP }-${ LEFT }-axis` } /> < TemplatePlaceholder name = { `${ TOP }-axis` } /> < TemplatePlaceholder name = { `${ TOP }-${ RIGHT }-axis` } /> < /div> < div id = "center-axis-container" style = { { display : 'flex' , flexDirection : 'row' , flexGrow : 1 } } > < TemplatePlaceholder name = { `${ LEFT }-axis` } /> < TemplatePlaceholder / > < TemplatePlaceholder name = { `${ RIGHT }-axis` } /> < /div> < div id = { `${ BOTTOM }-axis-container` } style = { { display : 'flex' , flexDirection : 'row' } } > < TemplatePlaceholder name = { `${ BOTTOM }-${ LEFT }-axis` } /> < TemplatePlaceholder name = { `${ BOTTOM }-axis` } /> < TemplatePlaceholder name = { `${ BOTTOM }-${ RIGHT }-axis` } /> < /div> < /div> < /Template> < /Plugin>); } }