react-d3-radar/lib/Radar.js

React-based Radar chart for D3

"use strict";

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

var _react = _interopRequireDefault(require("react"));

var _d3ScaleChromatic = require("d3-scale-chromatic");

var _d3Voronoi = require("d3-voronoi");

var _partition3 = _interopRequireDefault(require("lodash/partition"));

var _utils = require("./utils");

var _RadarWrapper = _interopRequireDefault(require("./RadarWrapper"));

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function convertData(props) {
  var data = props.data,
      width = props.width,
      height = props.height,
      padding = props.padding,
      domainMax = props.domainMax;
  var innerHeight = height - padding * 2;
  var innerWidth = width - padding * 2;

  if (innerHeight <= 0 || innerWidth <= 0) {
    return null;
  }

  var radius = Math.min(innerWidth / 2, innerHeight / 2);
  var scales = (0, _utils.radiusScales)(data.variables, domainMax, radius);
  var angleSliceRadians = Math.PI * 2 / data.variables.length;
  var offsetAngles = {};
  (0, _utils.forEachArray)(data.variables, function (_ref, i) {
    var key = _ref.key;
    offsetAngles[key] = angleSliceRadians * i;
  });
  var allPoints = (0, _utils.radarPoints)(data, scales, offsetAngles);
  var flatPointList = (0, _utils.flatMapDeepArray)(allPoints, function (_ref2) {
    var points = _ref2.points;
    return points;
  });
  var voronoiDiagram = (0, _d3Voronoi.voronoi)().x(function (d) {
    return d.x + radius + (Math.random() - 0.5);
  }).y(function (d) {
    return d.y + radius + (Math.random() - 0.5);
  }).size([radius * 2, radius * 2])(flatPointList);
  return {
    allPoints: allPoints,
    scales: scales,
    offsetAngles: offsetAngles,
    voronoiDiagram: voronoiDiagram,
    radius: radius
  };
}

function Radar(props) {
  var data = props.data,
      width = props.width,
      height = props.height,
      padding = props.padding,
      domainMax = props.domainMax,
      style = props.style,
      onHover = props.onHover,
      highlighted = props.highlighted,
      onAxisLabelClick = props.onAxisLabelClick,
      onAxisLabelMouseover = props.onAxisLabelMouseover,
      axisLabelTextStyle = props.axisLabelTextStyle;
  var converted = convertData(props);

  if (!converted) {
    return null;
  }

  var allPoints = converted.allPoints,
      scales = converted.scales,
      offsetAngles = converted.offsetAngles,
      radius = converted.radius,
      voronoiDiagram = converted.voronoiDiagram;
  var highlightedSetKey = highlighted ? highlighted.setKey : null;
  var backgroundScale = scales[data.variables[0].key];
  var colors = {};
  (0, _utils.forEachArray)(allPoints, function (_ref3, idx) {
    var setKey = _ref3.setKey,
        color = _ref3.color;

    if (color) {
      colors[setKey] = color;
    } else {
      colors[setKey] = _d3ScaleChromatic.schemeCategory10[idx];
    }
  });

  var _partition = (0, _partition3.default)(allPoints, function (_ref4) {
    var setKey = _ref4.setKey;
    return setKey === highlightedSetKey;
  }),
      _partition2 = _slicedToArray(_partition, 2),
      highlightedPoints = _partition2[0],
      regularPoints = _partition2[1];

  return _react.default.createElement(_RadarWrapper.default, {
    variables: data.variables,
    width: width,
    height: height,
    padding: padding,
    domainMax: domainMax,
    style: style,
    onHover: onHover,
    highlighted: highlighted,
    scales: scales,
    backgroundScale: backgroundScale,
    offsetAngles: offsetAngles,
    voronoiDiagram: voronoiDiagram,
    radius: radius,
    highlightedPoint: highlightedPoints.length > 0 ? highlightedPoints[0] : null,
    regularPoints: regularPoints,
    colors: colors,
    onAxisLabelClick: onAxisLabelClick,
    onAxisLabelMouseover: onAxisLabelMouseover,
    axisLabelTextStyle: axisLabelTextStyle
  });
}