feat(alumni): integrasi data dinamis skill alumni dari google sheets

groups/M4N1FEST/index.html

@@ -50,6 +50,11 @@
             z-index: 40;
         }
 
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to   { transform: rotate(360deg); }
+        }
+
         @media (prefers-reduced-motion: reduce) {
 
             *,
@@ -1521,50 +1526,66 @@
             </div>
 
             <div class="two-col">
-              <!-- bars -->
+              <!-- bars: skeleton selalu tampil, garis biru terisi otomatis dari data approved -->
-              <div class="rv">
+              <div class="rv" id="skill-bars-container">
+
+                <!-- Web Development -->
                 <div class="skill-row">
                   <span class="skill-label">Web Development</span>
-                  <div class="skill-track">
+                  <div class="skill-track"><div class="skill-fill" id="bar-web-development" style="width:0%;transition:width 0.8s ease"></div></div>
-                    <div class="skill-fill" style="width: 78%"></div>
+                  <span class="skill-pct" id="pct-web-development">—</span>
-                  </div>
-                  <span class="skill-pct">78%</span>
                 </div>
+                <!-- Python / Data Science -->
                 <div class="skill-row">
                   <span class="skill-label">Python / Data Science</span>
-                  <div class="skill-track">
+                  <div class="skill-track"><div class="skill-fill" id="bar-python-data-science" style="width:0%;transition:width 0.8s ease"></div></div>
-                    <div class="skill-fill" style="width: 65%"></div>
+                  <span class="skill-pct" id="pct-python-data-science">—</span>
-                  </div>
-                  <span class="skill-pct">65%</span>
                 </div>
+                <!-- Mobile Development -->
                 <div class="skill-row">
                   <span class="skill-label">Mobile Development</span>
-                  <div class="skill-track">
+                  <div class="skill-track"><div class="skill-fill" id="bar-mobile-development" style="width:0%;transition:width 0.8s ease"></div></div>
-                    <div class="skill-fill" style="width: 54%"></div>
+                  <span class="skill-pct" id="pct-mobile-development">—</span>
-                  </div>
-                  <span class="skill-pct">54%</span>
                 </div>
+                <!-- UI/UX Design -->
                 <div class="skill-row">
                   <span class="skill-label">UI/UX Design</span>
-                  <div class="skill-track">
+                  <div class="skill-track"><div class="skill-fill" id="bar-uiux-design" style="width:0%;transition:width 0.8s ease"></div></div>
-                    <div class="skill-fill" style="width: 48%"></div>
+                  <span class="skill-pct" id="pct-uiux-design">—</span>
-                  </div>
-                  <span class="skill-pct">48%</span>
                 </div>
+                <!-- Networking / DevOps -->
                 <div class="skill-row">
                   <span class="skill-label">Networking / DevOps</span>
-                  <div class="skill-track">
+                  <div class="skill-track"><div class="skill-fill" id="bar-networking-devops" style="width:0%;transition:width 0.8s ease"></div></div>
-                    <div class="skill-fill" style="width: 38%"></div>
+                  <span class="skill-pct" id="pct-networking-devops">—</span>
-                  </div>
-                  <span class="skill-pct">38%</span>
                 </div>
+                <!-- Cybersecurity -->
                 <div class="skill-row">
                   <span class="skill-label">Cybersecurity</span>
-                  <div class="skill-track">
+                  <div class="skill-track"><div class="skill-fill" id="bar-cybersecurity" style="width:0%;transition:width 0.8s ease"></div></div>
-                    <div class="skill-fill" style="width: 25%"></div>
+                  <span class="skill-pct" id="pct-cybersecurity">—</span>
-                  </div>
-                  <span class="skill-pct">25%</span>
                 </div>
+                <!-- Machine Learning / AI -->
+                <div class="skill-row">
+                  <span class="skill-label">Machine Learning / AI</span>
+                  <div class="skill-track"><div class="skill-fill" id="bar-machine-learning-ai" style="width:0%;transition:width 0.8s ease"></div></div>
+                  <span class="skill-pct" id="pct-machine-learning-ai">—</span>
+                </div>
+                <!-- Database -->
+                <div class="skill-row">
+                  <span class="skill-label">Database</span>
+                  <div class="skill-track"><div class="skill-fill" id="bar-database" style="width:0%;transition:width 0.8s ease"></div></div>
+                  <span class="skill-pct" id="pct-database">—</span>
+                </div>
+
+                <!-- Status note -->
+                <p id="skill-data-note" style="font-size:0.72rem;color:#9ca3af;margin-top:14px;text-align:right;font-style:italic;">
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    style="display:inline-block;vertical-align:middle;margin-right:3px;animation:spin 1s linear infinite" id="skill-note-spinner">
+                    <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                  </svg>
+                  <span id="skill-note-text">Memuat data skill alumni...</span>
+                </p>
               </div>
               <!-- stat box -->
               <div class="rv d2" style="height: 100%;">
@@ -2758,6 +2779,98 @@
         }
     }
 
+    /* ── SKILL DISTRIBUTION — Live fetch from Google Sheets (approved rows only) ── */
+    (function fetchSkillData() {
+        const SHEET_ID = '1mtVB1vLev-OWz6aTuuddGKPS8tCv8MJcGpzws8irpxk';
+        // Col I=Skill1, J=Skill2, K=Skill3, L=Approved (admin status)
+        const query = encodeURIComponent("select I,J,K where lower(L)='approved'");
+        const url   = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&tq=${query}`;
+
+        // Map: skill label → bar id prefix (must match id="bar-XXX" and id="pct-XXX" in HTML)
+        const SKILL_MAP = {
+            'Web Development'      : 'web-development',
+            'Mobile Development'   : 'mobile-development',
+            'Python / Data Science': 'python-data-science',
+            'UI/UX Design'         : 'uiux-design',
+            'Networking / DevOps'  : 'networking-devops',
+            'Cybersecurity'        : 'cybersecurity',
+            'Machine Learning / AI': 'machine-learning-ai',
+            'Database'             : 'database',
+        };
+
+        const spinner  = document.getElementById('skill-note-spinner');
+        const noteText = document.getElementById('skill-note-text');
+
+        function setNote(text, spin, isCta) {
+            if (spinner)  spinner.style.animation = spin ? 'spin 1s linear infinite' : 'none';
+            if (!noteText) return;
+            if (isCta) {
+                noteText.innerHTML = text + ' <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>';
+            } else {
+                noteText.textContent = text;
+            }
+        }
+
+        function normalizeSkill(val) {
+            if (!val) return null;
+            const s = val.toLowerCase().trim();
+            if (s.includes('web')) return 'Web Development';
+            if (s.includes('mobile')) return 'Mobile Development';
+            if (s.includes('python') || s.includes('data science') || s.includes('data science')) return 'Python / Data Science';
+            if (s.includes('ui') || s.includes('ux')) return 'UI/UX Design';
+            if (s.includes('network') || s.includes('devops')) return 'Networking / DevOps';
+            if (s.includes('cyber')) return 'Cybersecurity';
+            if (s.includes('machine') || s.includes('ai') || s.includes('artificial')) return 'Machine Learning / AI';
+            if (s.includes('database') || s.includes('db')) return 'Database';
+            return null;
+        }
+
+        fetch(url)
+            .then(res => res.text())
+            .then(raw => {
+                const json = JSON.parse(raw.replace(/^[^{]+/, '').replace(/[);]+$/, ''));
+                const rows = (json.table && json.table.rows) ? json.table.rows : [];
+
+                if (rows.length === 0) {
+                    setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
+                    return;
+                }
+
+                // Count normalized skill mentions
+                const counts = {};
+                rows.forEach(row => {
+                    [0, 1, 2].forEach(colIdx => {
+                        const cell = row.c && row.c[colIdx];
+                        const val  = cell && cell.v ? String(cell.v).trim() : '';
+                        const normalized = normalizeSkill(val);
+                        if (normalized) {
+                            counts[normalized] = (counts[normalized] || 0) + 1;
+                        }
+                    });
+                });
+
+                const totalMentions = Object.values(counts).reduce((s, c) => s + c, 0);
+                const maxCount      = Math.max(...Object.values(counts), 0);
+
+                // Update bars for predefined skills
+                Object.entries(SKILL_MAP).forEach(([label, idKey]) => {
+                    const count  = counts[label] || 0;
+                    const pct    = totalMentions > 0 ? Math.round((count / totalMentions) * 100) : 0;
+                    const barPct = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
+
+                    const barEl = document.getElementById('bar-' + idKey);
+                    const pctEl = document.getElementById('pct-' + idKey);
+                    if (barEl) barEl.style.width = barPct + '%';
+                    if (pctEl) pctEl.textContent  = count > 0 ? pct + '%' : '—';
+                });
+
+                setNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
+            })
+            .catch(() => {
+                setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
+            });
+    })();
+
     /* ── REVEAL ON SCROLL ── */
     const ro = new IntersectionObserver(
         (entries) => {