Method renderProgressCircle

src/views/StatsView.ts:1338–1392

(
		container: HTMLElement,
		percentage: number,
		completed: number,
		total: number
	)

	}

	private renderProgressCircle(
		container: HTMLElement,
		percentage: number,
		completed: number,
		total: number
	) {
		const size = 60;
		const strokeWidth = 5;
		const radius = (size - strokeWidth) / 2;
		const circumference = 2 * Math.PI * radius;
		const offset = circumference - (percentage / 100) * circumference;

		const svg = activeDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
		svg.setAttribute("width", size.toString());
		svg.setAttribute("height", size.toString());
		svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
		svg.classList.add("stats-view__progress-circle-svg");

		const backgroundCircle = activeDocument.createElementNS(
			"http://www.w3.org/2000/svg",
			"circle"
		);
		backgroundCircle.setAttribute("cx", (size / 2).toString());
		backgroundCircle.setAttribute("cy", (size / 2).toString());
		backgroundCircle.setAttribute("r", radius.toString());
		backgroundCircle.classList.add("stats-view__progress-circle-bg");

		const foregroundCircle = activeDocument.createElementNS(
			"http://www.w3.org/2000/svg",
			"circle"
		);
		foregroundCircle.setAttribute("cx", (size / 2).toString());
		foregroundCircle.setAttribute("cy", (size / 2).toString());
		foregroundCircle.setAttribute("r", radius.toString());
		foregroundCircle.setAttribute("stroke-dasharray", `${circumference} ${circumference}`);
		foregroundCircle.setAttribute("stroke-dashoffset", offset.toString());
		foregroundCircle.classList.add("stats-view__progress-circle-fg");

		const text = activeDocument.createElementNS("http://www.w3.org/2000/svg", "text");
		text.setAttribute("x", "50%");
		text.setAttribute("y", "50%");
		text.setAttribute("dy", "0.3em");
		text.setAttribute("text-anchor", "middle");
		text.classList.add("stats-view__progress-circle-text");
		text.textContent = `${Math.round(percentage)}%`;

		svg.appendChild(backgroundCircle);
		svg.appendChild(foregroundCircle);
		svg.appendChild(text);

		container.appendChild(svg);

		const label = container.createDiv({ cls: "stats-view__progress-label" });
		label.textContent = `${completed}/${total} tasks`;
	}

	/**
	 * Calculate trend data for a project over the last 30 days