react-svg-donut-chart/es/index.js

A lightweight responsive donut chart React component using only SVG

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; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React from "react";
import PropTypes from "prop-types";

import Segment from "./Segment";
import { width } from "./constants";

var ReactSvgDonutChart = function ReactSvgDonutChart(_ref) {
  var data = _ref.data,
      spacing = _ref.spacing,
      rest = _objectWithoutProperties(_ref, ["data", "spacing"]);

  var total = data.reduce(function (prev, current) {
    return current.value + prev;
  }, 0);
  var percentAcc = 0;
  return React.createElement(
    "svg",
    _extends({ viewBox: "0 0 " + width + " " + width }, rest),
    data.map(function (d, i) {
      var percent = Math.round(d.value / Math.ceil(total) * 100);
      var DashArrayPercent = spacing < 0 || percent - spacing < 0 ? percent : percent - spacing;
      var DashArraylength = spacing < 0 || percent + spacing > 100 ? 100 - percent : 100 - percent + spacing;
      var strokeDasharray = DashArrayPercent + " " + DashArraylength;
      var strokeDashoffset = i === 0 ? 0 : 100 - percentAcc;
      percentAcc += percent;
      return percent > 0 && React.createElement(Segment, _extends({
        key: i,
        strokeDasharray: strokeDasharray,
        strokeDashoffset: strokeDashoffset
      }, d));
    })
  );
};

ReactSvgDonutChart.propTypes = process.env.NODE_ENV !== "production" ? {
  data: PropTypes.arrayOf(PropTypes.shape({
    stroke: PropTypes.string.isRequired,
    strokeWidth: PropTypes.number,
    title: PropTypes.string,
    value: PropTypes.number.isRequired
  })),
  spacing: PropTypes.number
} : {};

ReactSvgDonutChart.defaultProps = {
  data: [],
  spacing: 0
};

export default ReactSvgDonutChart;