packages/showcase/radar-chart/four-quadrant-radar-chart.js

// Copyright (c) 2016 - 2017 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import React from 'react';

import RadarChart from 'react-vis/radar-chart';

const RADAR_PROPS = {
  data: [
    {
      C: 30,
      VisualBasics: 60,
      Excel: 40,
      Access: 40
    }
  ],
  domains: [
    {name: 'C', domain: [0, 100]},
    {name: 'VisualBasics', domain: [0, 100]},
    {name: 'Excel', domain: [0, 100]},
    {name: 'Access', domain: [0, 100]}
  ],
  height: 300,
  width: 400
};

export default function FourQuadrantRadarChart() {
  return (
    <RadarChart
      data={RADAR_PROPS.data}
      domains={RADAR_PROPS.domains}
      height={RADAR_PROPS.height}
      width={RADAR_PROPS.width}
      startingAngle={Math.PI / 7}
      className="overflow-okay horizontally-centered"
      style={{
        labels: {
          fontSize: 13
        },
        polygons: {
          fillOpacity: 0.1,
          strokeOpacity: 1,
          strokeWidth: 0.5
        }
      }}
    />
  );
}