@spaced-out/ui-design-system/lib/components/ProgressDonut/ProgressDonut.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProgressDonut = void 0;
var React = _interopRequireWildcard(require("react"));
var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _Text = require("../Text");
var _ProgressDonutModule = _interopRequireDefault(require("./ProgressDonut.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const STROKE_WIDTH = 8;
const MIN_PERCENTAGE = 0;
const DIVISOR_TWO = 2;
const MAX_PERCENTAGE = 100;
const SUCCESS_THRESHOLD = 80;
const LARGE_DONUT_SIZE = 72;
const INFO_THRESHOLD = 50;
const WARNING_THRESHOLD = 30;
const getProgressDonutColor = percentage => {
  if (percentage >= SUCCESS_THRESHOLD) {
    return COLORS.colorSuccess;
  } else if (percentage >= INFO_THRESHOLD && percentage < SUCCESS_THRESHOLD) {
    return COLORS.colorInformation;
  } else if (percentage >= WARNING_THRESHOLD && percentage < INFO_THRESHOLD) {
    return COLORS.colorWarning;
  } else {
    return COLORS.colorDanger;
  }
};
const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    classNames,
    percentage = 0,
    color = ''
  } = _ref;
  const donutPercentage = React.useMemo(() => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE), [percentage]);
  const donutColor = React.useMemo(() => getProgressDonutColor(donutPercentage), [donutPercentage]);
  const radius = React.useMemo(() => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO, [LARGE_DONUT_SIZE]);
  const circumference = React.useMemo(() => DIVISOR_TWO * Math.PI * radius, [radius]);
  const offset = React.useMemo(() => circumference - donutPercentage / MAX_PERCENTAGE * circumference, [circumference, donutPercentage]);
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    "data-testid": "ProgressDonut",
    className: (0, _classify.default)(_ProgressDonutModule.default.wrapper, classNames?.wrapper)
  }, /*#__PURE__*/React.createElement("div", {
    className: _ProgressDonutModule.default.donutChart
  }, /*#__PURE__*/React.createElement("svg", {
    width: LARGE_DONUT_SIZE,
    height: LARGE_DONUT_SIZE,
    viewBox: `0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`,
    className: _ProgressDonutModule.default.donutChartSvg
  }, /*#__PURE__*/React.createElement("circle", {
    className: _ProgressDonutModule.default.donutChartBackground,
    cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
    cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
    r: radius,
    strokeWidth: STROKE_WIDTH
  }), /*#__PURE__*/React.createElement("circle", {
    className: _ProgressDonutModule.default.donutChartForeground,
    cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
    cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
    r: radius,
    strokeWidth: STROKE_WIDTH,
    strokeDasharray: circumference,
    strokeDashoffset: donutPercentage === MIN_PERCENTAGE ? circumference : offset,
    stroke: COLORS[color] || donutColor,
    strokeLinecap: "round"
  })), /*#__PURE__*/React.createElement(_Text.BodyLargeBold, {
    className: _ProgressDonutModule.default.donutChartPercentage
  }, `${donutPercentage}%`)));
});