ffr-components/es/simple-donut/SimpleDonut.js

Fiori styled UI components

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import "./style.css";
import "../theme/theme.css";

var SimpleDonut = function SimpleDonut(_ref) {
  var size = _ref.size,
      strokewidth = _ref.strokewidth,
      title = _ref.title,
      _ref$parts = _ref.parts,
      parts = _ref$parts === void 0 ? [] : _ref$parts,
      _ref$showDetail = _ref.showDetail,
      showDetail = _ref$showDetail === void 0 ? false : _ref$showDetail,
      _ref$showTitle = _ref.showTitle,
      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle;
  var halfWidth = size * 0.5;
  var radius = halfWidth - strokewidth * 0.5;
  var circumference = 2 * Math.PI * radius;
  var total = parts.reduce(function (tol, cur) {
    return Number(cur.value) + tol;
  }, 0);

  var _parts = parts.map(function (part) {
    var occupy = Math.ceil(part.value / total * circumference);
    var left = circumference - occupy;
    return _objectSpread({}, part, {
      dasharray: "".concat(occupy, " ").concat(left),
      occupy: occupy
    });
  });

  _parts.reduce(function (offset, part) {
    part.offset = offset;
    return offset - part.occupy;
  }, circumference / 4 - strokewidth / 2);

  var renderDetail = function renderDetail(parts) {
    return React.createElement("div", {
      className: "donut-detail"
    }, parts.map(function (part, inx) {
      return React.createElement("div", {
        key: inx
      }, React.createElement("span", {
        style: {
          color: part.color
        }
      }, part.value), React.createElement("span", null, part.text));
    }));
  };

  return React.createElement("div", {
    className: "donut-wrapper"
  }, React.createElement("div", null, React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 ".concat(size, " ").concat(size),
    style: {
      width: size
    }
  }, _parts.reverse().map(function (part, inx) {
    // if (inx > 0) return null;
    return React.createElement("circle", {
      key: inx,
      cx: halfWidth,
      cy: halfWidth,
      r: radius,
      fill: "transparent",
      stroke: part.color,
      strokeWidth: strokewidth,
      strokeDasharray: part.dasharray,
      strokeDashoffset: part.offset,
      strokeLinecap: part.occupy > 0 ? 'round' : 'butt'
    });
  }), showTitle && React.createElement("text", {
    x: "50%",
    y: "50%",
    className: "donut-center",
    style: {
      textAnchor: 'middle',
      alignmentBaseline: 'central'
    }
  }, "".concat(_parts[parts.length - 1].value, "/").concat(total))), showTitle && React.createElement("div", {
    className: "donut-title"
  }, title)), showDetail && renderDetail(_parts));
};

export default SimpleDonut;