crypto-gawds-react-d3-radar/lib/RadarRings.js.flow

React-based Radar chart for D3

// @flow
import React from 'react';
import _ from 'lodash';
import type {TickScale} from './types';

type RadarRingsProps = {
  ticks: Array<number>,
  scale: TickScale,
  color: string,
  format(number): string,
  style?: {},
};

const defaultRadarRingsStyle = {
  fontFamily: 'sans-serif',
  fontSize: 10,
  ringOpacity: 0.1,
  textFill: 'white',
};

export default function RadarRings(props: RadarRingsProps) {
  const {ticks, scale, color, format, style} = props;
  const {fontFamily, fontSize, ringOpacity, textFill} = {
    ...defaultRadarRingsStyle,
    ...style,
  };
  const outerFirst = _.reverse(ticks);
  return (
    <g>
      {outerFirst.map(tickValue => {
        return (
          <circle
            key={`${tickValue}`}
            fillOpacity={0}
            fill={'#000000'}
            stroke={color}
            r={scale(tickValue)}
          />
        );
      })}
      {/* {outerFirst.map(tickValue => { */}
      {/*   return ( */}
      {/*     <text */}
      {/*       key={`${tickValue}-tick`} */}
      {/*       x={0} */}
      {/*       y={-scale(tickValue)} */}
      {/*       dx={'0.4em'} */}
      {/*       dy={'0.4em'} */}
      {/*       fontFamily={fontFamily} */}
      {/*       fontSize={fontSize} */}
      {/*       textAnchor={'left'} */}
      {/*       fill={textFill} */}
      {/*     > */}
      {/*       {format(tickValue)} */}
      {/*     </text> */}
      {/*   ); */}
      {/* })} */}
    </g>
  );
}