https://okhenry.ai/assets/controllers/completion_tracker_controller-be17a1db.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["ring", "percentage", "field"]
5  static values = { total: Number }
6
7  connect() {
8    this.update()
9  }
10
11  update() {
12    const filled = this.fieldTargets.filter(f => {
13      const input = f.querySelector("input, textarea, select")
14      return input && input.value && input.value.trim() !== ""
15    }).length
16    const total = this.totalValue || this.fieldTargets.length
17    const pct = total > 0 ? Math.round((filled / total) * 100) : 0
18
19    if (this.hasPercentageTarget) {
20      this.percentageTarget.textContent = `${pct}%`
21    }
22
23    if (this.hasRingTarget) {
24      const circle = this.ringTarget.querySelector(".progress-ring-value")
25      if (circle) {
26        const r = circle.r.baseVal.value
27        const c = 2 * Math.PI * r
28        circle.style.strokeDashoffset = c - (pct / 100) * c
29      }
30    }
31  }
32}