analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
207 lines (200 loc) • 6.88 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/components/ProgressCircle/ProgressCircle.tsx
var _jsxruntime = require('react/jsx-runtime');
var SIZE_CLASSES = {
small: {
container: "w-[107px] h-[107px]",
// 107px circle to fit labels like "CONCLUÍDO"
strokeWidth: 4,
// 4px stroke width - matches ProgressBar small (h-1)
textSize: "2xl",
// 24px for percentage (font-size: 24px)
textWeight: "medium",
// font-weight: 500
labelSize: "2xs",
// 10px for status label
labelWeight: "bold",
// font-weight: 700
spacing: "gap-0",
// Reduced gap between percentage and label for better spacing
contentWidth: "max-w-[85px]"
// Width to fit labels like "CONCLUÍDO" inside circle
},
medium: {
container: "w-[152px] h-[152px]",
// 151.67px ≈ 152px circle from design specs
strokeWidth: 8,
// 8px stroke width - matches ProgressBar medium (h-2)
textSize: "2xl",
// 24px for percentage (font-size: 24px)
textWeight: "medium",
// font-weight: 500
labelSize: "xs",
// 12px for status label (font-size: 12px)
labelWeight: "medium",
// font-weight: 500 (changed from bold)
spacing: "gap-1",
// 4px gap between percentage and label
contentWidth: "max-w-[90px]"
// Reduced width to fit text inside circle
}
};
var VARIANT_CLASSES = {
blue: {
background: "stroke-primary-100",
// Light blue background (#BBDCF7)
fill: "stroke-primary-700",
// Blue for activity progress (#2271C4)
textColor: "text-primary-700",
// Blue text color (#2271C4)
labelColor: "text-text-700"
// Gray text for label (#525252)
},
green: {
background: "stroke-background-300",
// Gray background (#D5D4D4 - matches design)
fill: "stroke-success-200",
// Green for performance (#84D3A2 - matches design)
textColor: "text-text-800",
// Dark gray text (#404040 - matches design)
labelColor: "text-text-600"
// Medium gray text for label (#737373 - matches design)
}
};
var ProgressCircle = ({
value,
max = 100,
size = "small",
variant = "blue",
fillColor,
trackColor,
label,
showPercentage = true,
className = "",
labelClassName = "",
percentageClassName = ""
}) => {
const safeValue = isNaN(value) ? 0 : value;
const clampedValue = Math.max(0, Math.min(safeValue, max));
const percentage = max === 0 ? 0 : clampedValue / max * 100;
const sizeClasses = SIZE_CLASSES[size];
const variantClasses = VARIANT_CLASSES[variant];
const trackClass = trackColor ? void 0 : variantClasses.background;
const fillClass = fillColor ? void 0 : variantClasses.fill;
const radius = size === "small" ? 49 : 64;
const circumference = 2 * Math.PI * radius;
const strokeDashoffset = circumference - percentage / 100 * circumference;
const center = size === "small" ? 53.5 : 76;
const svgSize = size === "small" ? 107 : 152;
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"relative flex flex-col items-center justify-center",
sizeClasses.container,
"rounded-lg",
className
),
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"svg",
{
className: "absolute inset-0 transform -rotate-90",
width: svgSize,
height: svgSize,
viewBox: `0 0 ${svgSize} ${svgSize}`,
"aria-hidden": "true",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"circle",
{
cx: center,
cy: center,
r: radius,
fill: "none",
strokeWidth: sizeClasses.strokeWidth,
className: _chunkTN3AYOMVjs.cn.call(void 0, trackClass, "rounded-lg"),
style: trackColor ? { stroke: trackColor } : void 0
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"circle",
{
cx: center,
cy: center,
r: radius,
fill: "none",
strokeWidth: sizeClasses.strokeWidth,
strokeLinecap: "round",
strokeDasharray: circumference,
strokeDashoffset,
className: _chunkTN3AYOMVjs.cn.call(void 0,
fillClass,
"transition-all duration-500 ease-out shadow-soft-shadow-3 rounded-lg"
),
style: fillColor ? { stroke: fillColor } : void 0
}
)
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"progress",
{
value: clampedValue,
max,
"aria-label": typeof label === "string" ? label : "Progress",
className: "absolute opacity-0 w-0 h-0"
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"relative z-10 flex flex-col items-center justify-center",
sizeClasses.spacing,
sizeClasses.contentWidth
),
children: [
showPercentage && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: sizeClasses.textSize,
weight: sizeClasses.textWeight,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"text-center w-full",
variantClasses.textColor,
percentageClassName
),
children: [
Math.round(percentage),
"%"
]
}
),
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
as: "span",
size: sizeClasses.labelSize,
weight: sizeClasses.labelWeight,
className: _chunkTN3AYOMVjs.cn.call(void 0,
variantClasses.labelColor,
"text-center uppercase tracking-wide truncate w-full",
labelClassName
),
children: label
}
)
]
}
)
]
}
);
};
var ProgressCircle_default = ProgressCircle;
exports.ProgressCircle_default = ProgressCircle_default;
//# sourceMappingURL=chunk-MIEC42PL.js.map