fileOverview import React , { PureComponent , SVGProps } from 'react' ; import { polarToCartesian } from '../util/PolarUtils' ; import { filterProps } from '../util/types' ; interface PolarGridProps { cx ? : number ; cy ? : number ; innerRadius ? : number ; outerRadius ? : number ; polarAngles ? : number [ ] ; polarRadius ? : number [ ] ; gridType ? : 'polygon' | 'circle' ; radialLines : boolean ; } export type Props = SVGProps < SVGPathElement > & PolarGridProps ; export class PolarGrid extends PureComponent < Props > { static displayName = 'PolarGrid' ; static defaultProps = { cx : 0 , cy : 0 , innerRadius : 0 , outerRadius : 0 , gridType : 'polygon' , radialLines : true , } ; getPolygonPath ( radius ) { const { cx , cy , polarAngles } = this . props ; let path = '' ; polarAngles . forEach ( ( angle , i ) => { const point = polarToCartesian ( cx , cy , radius , angle ) ; if ( i ) { path += `L ${ point . x },${ point . y }` ; } else { path += `M ${ point . x },${ point . y }` ; } } ) ; path += 'Z' ; return path ; } return { [ type ] } renderPolarAngles ( ) { const { cx , cy , innerRadius , outerRadius , polarAngles , radialLines } = this . props ; if ( ! polarAngles || ! polarAngles . length || ! radialLines ) { return null ; } const props = { stroke : '#ccc' , ... filterProps ( this . props ) , } ; return ( < g className = "recharts-polar-grid-angle" > { polarAngles . map ( ( entry , i ) => { const start = polarToCartesian ( cx , cy , innerRadius , entry ) ; const end = polarToCartesian ( cx , cy , outerRadius , entry ) ; return ( < line { ... props } key = { `line-${ i }` } x1 = { start . x } y1 = { start . y } x2 = { end . x } y2 = { end . y } / > ) ; } ) } < /g>); } param { Number } radius param { Number } index param { Object } extraProps return { ReactElement } renderConcentricCircle ( radius , index , extraProps ? ) { const { cx , cy } = this . props ; const props = { stroke : '#ccc' , ... filterProps ( this . props ) , fill : 'none' , ... extraProps , } ; return ( < circle { ... props } className = "recharts-polar-grid-concentric-circle" key = { `circle-${ index }` } cx = { cx } cy = { cy } r = { radius } / > ) ; } param { Number } radius param { Number } index param { Object } extraProps return { ReactElement } renderConcentricPolygon ( radius , index , extraProps ? ) { const props = { stroke : '#ccc' , ... filterProps ( this . props ) , fill : 'none' , ... extraProps , } ; return ( < path { ... props } className = "recharts-polar-grid-concentric-polygon" key = { `path-${ index }` } d = { this . getPolygonPath ( radius ) } / > ) ; } return { ReactElement } todo renderConcentricPath ( ) { const { polarRadius , gridType } = this . props ; if ( ! polarRadius || ! polarRadius . length ) { return null ; } return ( < g className = "recharts-polar-grid-concentric" > { polarRadius . map ( ( entry , i ) => gridType === 'circle' ? this . renderConcentricCircle ( entry , i ) : this . renderConcentricPolygon ( entry , i ) ) } < /g>); } render ( ) { const { outerRadius } = this . props ; if ( outerRadius <= 0 ) { return null ; } return ( < g className = "recharts-polar-grid" > { this . renderPolarAngles ( ) } { this . renderConcentricPath ( ) } < /g>); } }