@hisptz/react-ui/build/cjs/components/CircularProgressDashboard/index.js

A collection of reusable complex DHIS2 react ui components.

"use strict";

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

var _ui = require("@dhis2/ui");

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

var _reactCircularProgressbar = require("react-circular-progressbar");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function CircularProgressDashboard(_ref) {
  var _strokeStyle$color, _textStyle$fontSize, _ref2, _textStyle$color;

  let {
    numerator,
    size,
    denominator,
    value,
    textStyle,
    strokeStyle
  } = _ref;
  const filledSectionFieldsPercentage = (0, _react.useMemo)(() => {
    return value !== undefined ? value : Math.floor((numerator !== null && numerator !== void 0 ? numerator : 0) / (denominator !== null && denominator !== void 0 ? denominator : 1) * 100);
  }, [numerator, denominator, value]);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      backgroundColor: "transparent",
      width: size
    }
  }, /*#__PURE__*/_react.default.createElement(_reactCircularProgressbar.CircularProgressbarWithChildren, {
    styles: {
      path: {
        stroke: (_strokeStyle$color = strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.color) !== null && _strokeStyle$color !== void 0 ? _strokeStyle$color : _ui.colors.blue700
      }
    },
    strokeWidth: 7,
    value: filledSectionFieldsPercentage
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: { ...(textStyle !== null && textStyle !== void 0 ? textStyle : {}),
      fontSize: ((_textStyle$fontSize = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize) !== null && _textStyle$fontSize !== void 0 ? _textStyle$fontSize : typeof size === "number") ? 0.3 * size : "100%",
      marginTop: -11
    }
  }, /*#__PURE__*/_react.default.createElement("strong", {
    style: {
      color: (_ref2 = (_textStyle$color = textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) !== null && _textStyle$color !== void 0 ? _textStyle$color : strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.color) !== null && _ref2 !== void 0 ? _ref2 : _ui.colors.blue700
    }
  }, filledSectionFieldsPercentage, "%"))));
}