@smartive/react-d3-radar/lib/RadarSector.js

React-based Radar chart for D3

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = RadarSector;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _chromaJs = require('chroma-js');

var _chromaJs2 = _interopRequireDefault(_chromaJs);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function polarToCartesian(centerX, centerY, radius, angleInRadians) {
  return {
    x: centerX + radius * Math.cos(angleInRadians),
    y: centerY + radius * Math.sin(angleInRadians)
  };
}

function d(cx, cy, radius, startAngle, endAngle) {
  var start = polarToCartesian(cx, cy, radius, endAngle);
  var end = polarToCartesian(cx, cy, radius, startAngle);
  var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
  var d = 'M ' + start.x + ' ' + start.y + ' A ' + radius + ' ' + radius + ' 0 ' + largeArcFlag + ' 0 ' + end.x + ' ' + end.y + ' L ' + cx + ' ' + cy + ' Z';
  return d;
}

function RadarSector(_ref) {
  var color = _ref.color,
      offsetAngle = _ref.offsetAngle,
      endAngle = _ref.endAngle,
      domainMax = _ref.domainMax,
      scale = _ref.scale;

  return _react2.default.createElement('path', {
    fill: (0, _chromaJs2.default)(color).brighten(1.5),
    stroke: 'none',
    d: d(0, 0, scale(domainMax), offsetAngle, endAngle)
  });
}