@hisptz/react-ui
Version:
A collection of reusable complex DHIS2 react ui components.
41 lines (40 loc) • 1.98 kB
JavaScript
import { colors } from "@dhis2/ui";
import React, { useMemo } from "react";
import { CircularProgressbarWithChildren } from "react-circular-progressbar";
export default function CircularProgressDashboard(_ref) {
var _strokeStyle$color, _textStyle$fontSize, _ref2, _textStyle$color;
let {
numerator,
size,
denominator,
value,
textStyle,
strokeStyle
} = _ref;
const filledSectionFieldsPercentage = 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.createElement("div", {
style: {
backgroundColor: "transparent",
width: size
}
}, /*#__PURE__*/React.createElement(CircularProgressbarWithChildren, {
styles: {
path: {
stroke: (_strokeStyle$color = strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.color) !== null && _strokeStyle$color !== void 0 ? _strokeStyle$color : colors.blue700
}
},
strokeWidth: 7,
value: filledSectionFieldsPercentage
}, /*#__PURE__*/React.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.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 : colors.blue700
}
}, filledSectionFieldsPercentage, "%"))));
}