sccoreui
Version:
ui-sccore
30 lines (29 loc) • 2.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const CircleProgressComponent = ({ height = 290, strokeWidth = 14, text = "", strokeColor = "var(--primary-600)", strokeBgColor = "var(--gray-300)", value = -1, textDisabled = false, textClassName = "text-lg text-gray-700 font-normal", valueTextClassName = "text-2xl, text-gray-700 font-bold", className, }) => {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `relative flex align-items-center justify-content-center${!!className ? ` ${className}` : ""}`, style: { height: height, width: height } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex ", style: {
width: `${height}px`,
height: `${height}px`,
transform: "rotate(-90deg)",
position: "absolute",
top: "0",
zIndex: "10",
} }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", strokeWidth: strokeWidth, style: {
strokeDasharray: "256.92",
strokeDashoffset: `${256.92 - (256.92 / 100) * value}`,
strokeLinecap: "round",
stroke: `${strokeColor}`,
} }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex obsolute ", style: {
width: `${height}px`,
height: `${height}px`,
position: "absolute",
transform: "rotate(-90deg)",
} }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", strokeWidth: strokeWidth, style: {
strokeDasharray: "256.92",
strokeDashoffset: "0",
strokeLinecap: "round",
stroke: `${strokeBgColor}`,
} }) })) })), !textDisabled && ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center mr-auto ml-auto mt-auto mb-auto" }, { children: [text !== "" && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: textClassName }, { children: text })), value !== -1 && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: valueTextClassName }, { children: [value, "%"] }))] })))] })));
};
exports.default = CircleProgressComponent;