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

React-based Radar chart for D3

// @flow
import React from "react";
import reverse from "lodash/reverse";
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: "black"
};

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={ringOpacity}
            fill={color}
            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>
  );
}