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

React-based Radar chart for D3

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

exports.default = RadarAxis;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var defaultRadarAxisStyle = {
  axisOverreach: 1.1,
  labelOverreach: 1.2,
  fontSize: 10,
  fontFamily: 'sans-serif',
  textFill: 'black',
  axisWidth: 2
};

var MAX_LINE_LENGTH = 10;

function RadarAxis(props) {
  var scale = props.scale,
      offsetAngle = props.offsetAngle,
      domainMax = props.domainMax,
      label = props.label,
      color = props.color,
      style = props.style;

  var _defaultRadarAxisStyl = _extends({}, defaultRadarAxisStyle, style),
      axisOverreach = _defaultRadarAxisStyl.axisOverreach,
      labelOverreach = _defaultRadarAxisStyl.labelOverreach,
      fontSize = _defaultRadarAxisStyl.fontSize,
      fontFamily = _defaultRadarAxisStyl.fontFamily,
      textFill = _defaultRadarAxisStyl.textFill,
      axisWidth = _defaultRadarAxisStyl.axisWidth;

  var xFactor = Math.cos(offsetAngle - Math.PI / 2);
  var yFactor = Math.sin(offsetAngle - Math.PI / 2);
  var x = scale(domainMax * labelOverreach) * xFactor;
  var words = label.split(' ');
  var parts = [];
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = words[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var word = _step.value;

      if (parts.length === 0 || parts[parts.length - 1].length + 1 + word.length > MAX_LINE_LENGTH) {
        parts.push(word);
      } else {
        parts[parts.length - 1] += ' ' + word;
      }
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  return _react2.default.createElement(
    'g',
    null,
    _react2.default.createElement('line', {
      x1: 0,
      y1: 0,
      x2: scale(domainMax * axisOverreach) * xFactor,
      y2: scale(domainMax * axisOverreach) * yFactor,
      stroke: color,
      strokeWidth: axisWidth
    }),
    _react2.default.createElement(
      'text',
      {
        x: x,
        y: scale(domainMax * labelOverreach) * yFactor,
        fontSize: fontSize,
        fontFamily: fontFamily,
        fill: textFill,
        textAnchor: 'middle',
        dy: '0.35em'
      },
      parts.map(function (part, i) {
        return _react2.default.createElement(
          'tspan',
          { key: i, x: x, dy: i ? '1.2em' : '0' },
          ' ',
          part,
          ' '
        );
      })
    )
  );
}