// Importar jsPDF si es necesario (para entornos que requieran importaciones) // import { jsPDF } from "jspdf"; // Función para dibujar un círculo de progreso en jsPDF function drawProgressCircle(doc, pos_x, pos_y, ancho, porcentaje, valor, texto) { const radio = ancho / 2; // Radio del círculo const startAngle = -Math.PI / 2; // Comienza desde arriba const endAngle = startAngle + (porcentaje / 100) * (2 * Math.PI); // Ángulo final // Determinar el ancho del texto const textWidth = doc.getTextWidth(texto); const maxAncho = Math.max(ancho, textWidth); // Usar el ancho mayor entre el círculo y el texto const centerX = pos_x - (maxAncho / 2) + (ancho / 2); // Centrar con el elemento más ancho // Dibujar el círculo de fondo doc.setDrawColor(200); // Color gris claro doc.setLineWidth(2); doc.circle(centerX, pos_y, radio, 'S'); // 'S' para solo borde // Dibujar el círculo de progreso doc.setDrawColor(52, 152, 219); // Azul doc.setLineWidth(3); doc.arc(centerX, pos_y, radio, startAngle, endAngle, false); // Mostrar el porcentaje dentro del círculo en negritas doc.setFont("helvetica", "bold"); doc.setFontSize(12); const percentText = porcentaje + "%"; const percentWidth = doc.getTextWidth(percentText); doc.text(percentText, centerX - percentWidth / 2, pos_y - 3); // Centrar dentro del círculo // Mostrar el valor en el centro del círculo doc.setFontSize(16); const valueText = valor.toString(); const valueWidth = doc.getTextWidth(valueText); doc.text(valueText, centerX - valueWidth / 2, pos_y + 8); // Centrar en el círculo // Agregar el texto debajo centrado en relación con el círculo doc.setFontSize(10); doc.setFont("helvetica", "normal"); const textX = pos_x - (textWidth / 2); // Centrar texto en relación al círculo const textY = pos_y + radio + 12; // Ubicar debajo del círculo doc.text(texto, textX, textY); } // Crear y generar el PDF const doc = new jsPDF(); // Llamar la función con parámetros de ejemplo drawProgressCircle(doc, 105, 50, 40, 90, 4, "Evaluación Completa"); // Guardar el PDF doc.save("reporte_progreso.pdf");