{"id":3116,"date":"2026-09-17T14:02:45","date_gmt":"2026-09-17T07:02:45","guid":{"rendered":"https:\/\/pandaigadai.com\/blog\/?page_id=3116"},"modified":"2026-09-17T14:02:45","modified_gmt":"2026-09-17T07:02:45","slug":"riset-user-gadai","status":"publish","type":"page","link":"https:\/\/pandaigadai.com\/blog\/riset-user-gadai\/","title":{"rendered":"Riset User Gadai"},"content":{"rendered":"<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n<title>Dashboard Survei Kuantitatif \u2014 Pandai Gadai<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.1\/dist\/chart.umd.min.js\"><\/script>\r\n<style>\r\n#pg-page *,#pg-page *::before,#pg-page *::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml,body{margin:0;padding:0;background:#f0f2f8}\r\n\r\n#pg-page{\r\n  --radius:0.625rem;\r\n  --background:#ffffff;\r\n  --foreground:#021431;\r\n  --card:#ffffff;\r\n  --primary:#02439F;\r\n  --primary-deep:#011455;\r\n  --primary-bright:#0255CA;\r\n  --accent:#ffcd05;\r\n  --secondary:#f3f5fb;\r\n  --muted:#f0f2f8;\r\n  --muted-foreground:#6b7280;\r\n  --destructive:#dc2626;\r\n  --success:#047857;\r\n  --border:#e2e6f0;\r\n  --shadow-card:0 2px 8px -2px rgba(2,20,49,0.08);\r\n  --gradient-hero:linear-gradient(135deg,#011455,#0255CA);\r\n}\r\n\r\n#pg-page{font-family:\"Rubik\",system-ui,-apple-system,\"Segoe UI\",sans-serif;background:var(--muted);color:var(--foreground);line-height:1.6;-webkit-font-smoothing:antialiased}\r\n#pg-page h1,#pg-page h2,#pg-page h3{letter-spacing:-0.02em}\r\n#pg-page a{text-decoration:none;color:inherit}\r\n\r\n.site-header{background:var(--background);border-bottom:1px solid var(--border)}\r\n.header-inner{max-width:78rem;margin:0 auto;display:flex;height:4.25rem;align-items:center;justify-content:space-between;padding:0 1.25rem}\r\n.header-inner img{height:2.4rem;width:auto}\r\n.header-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--muted-foreground);background:var(--secondary);border:1px solid var(--border);padding:.35rem .7rem;border-radius:999px}\r\n.pulse{width:6px;height:6px;border-radius:50%;background:var(--success);display:inline-block;animation:pulse 2s infinite}\r\n@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}\r\n\r\n.dash-hero{background:var(--gradient-hero);position:relative;overflow:hidden}\r\n.dash-hero-overlay{position:absolute;inset:0;opacity:.3;background:radial-gradient(ellipse at top right,rgba(255,205,5,.35),transparent 60%);pointer-events:none}\r\n.dash-hero-inner{position:relative;max-width:78rem;margin:0 auto;padding:1.75rem 1.25rem 2rem}\r\n.dash-hero .eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.15);padding:.3rem .7rem;border-radius:999px;color:#fff}\r\n.dash-hero h1{font-size:1.45rem;font-weight:800;margin:.6rem 0 .2rem;color:#fff}\r\n.dash-hero p{font-size:.85rem;color:rgba(255,255,255,.85)}\r\n\r\n.dash-body{max-width:78rem;margin:0 auto;padding:1.25rem 1.25rem 3rem}\r\n\r\n.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:.75rem .9rem;box-shadow:var(--shadow-card);margin-bottom:1.1rem}\r\n.ctl-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}\r\nselect{font-family:inherit;padding:.42rem .6rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);font-size:.8125rem;color:var(--foreground);background:var(--card);outline:none;cursor:pointer}\r\nselect:focus{border-color:var(--primary)}\r\n.btn-ghost{background:var(--secondary);color:var(--primary);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:.5rem .9rem;font-family:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}\r\n.btn-ghost:hover{filter:brightness(.97)}\r\n\r\n.scorecards{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.25rem}\r\n.sc{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:.9rem 1rem;box-shadow:var(--shadow-card);border-top:3px solid var(--primary)}\r\n.sc.accent{border-top-color:var(--accent)}\r\n.sc.green{border-top-color:var(--success)}\r\n.sc.amber{border-top-color:#f59e0b}\r\n.sc .lbl{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}\r\n.sc .val{font-size:1.55rem;font-weight:800;color:var(--primary);line-height:1.1;margin-top:.3rem}\r\n.sc.accent .val{color:#b45309}\r\n.sc.green .val{color:var(--success)}\r\n.sc.amber .val{color:#b45309}\r\n@media(max-width:900px){.scorecards{grid-template-columns:repeat(2,1fr)}}\r\n\r\n.panel{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:1rem 1.15rem;box-shadow:var(--shadow-card);margin-bottom:1rem}\r\n.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.35rem;flex-wrap:wrap}\r\n.panel-title{font-size:.86rem;font-weight:700;color:var(--foreground);line-height:1.4}\r\n.panel-sub{font-size:.7rem;color:var(--muted-foreground);font-weight:600;white-space:nowrap}\r\n\r\n.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin:1.6rem 0 .75rem;flex-wrap:wrap}\r\n.section-title:first-of-type{margin-top:0}\r\n.section-title h2{font-size:1rem;font-weight:800;color:var(--primary-deep)}\r\n.section-title .cnt{font-size:.7rem;font-weight:700;color:var(--muted-foreground)}\r\n\r\n.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:.9rem;margin-bottom:.4rem}\r\n\r\n.text-list{max-height:220px;overflow-y:auto;font-size:.78rem;border-top:1px solid var(--border);padding-top:.5rem;margin-top:.35rem}\r\n.text-list div{padding:.35rem 0;border-bottom:1px solid var(--border);color:var(--foreground);display:flex;justify-content:space-between;gap:.5rem}\r\n.text-list b{color:var(--primary);font-weight:800;flex-shrink:0}\r\n\r\n#loading{padding:60px;text-align:center;color:var(--muted-foreground);font-weight:600}\r\n#err{padding:.9rem 1rem;background:#fef2f2;color:var(--destructive);border:1px solid #fca5a5;border-radius:calc(var(--radius) - 2px);margin-bottom:1rem;font-size:.82rem}\r\n\r\n.footer-strip{background:var(--primary);color:#fff;text-align:center;padding:.9rem 1rem;font-size:.72rem;margin-top:1.5rem}\r\n.footer-strip span{color:rgba(255,255,255,.85)}\r\n\r\n@media(max-width:640px){.dash-body{padding:1rem}}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"pg-page\">\r\n\r\n  <div class=\"site-header\">\r\n    <div class=\"header-inner\">\r\n      <img decoding=\"async\" src=\"https:\/\/pandaigadai.com\/blog\/wp-content\/uploads\/2026\/01\/cropped-panda-1.webp\" alt=\"Pandai Gadai\">\r\n      <div class=\"header-tag\"><span class=\"pulse\"><\/span><span id=\"subtitle-top\">memuat data\u2026<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"dash-hero\">\r\n    <div class=\"dash-hero-overlay\"><\/div>\r\n    <div class=\"dash-hero-inner\">\r\n      <span class=\"eyebrow\">\ud83d\udccb Survei Kuantitatif<\/span>\r\n      <h1>Dashboard Perilaku Nasabah Gadai<\/h1>\r\n      <p>Ringkasan jawaban survei nasabah: profil, perilaku gadai, proses banding-bandingin, sampai channel discovery.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"dash-body\">\r\n\r\n    <div id=\"err\" style=\"display:none;\"><\/div>\r\n    <div id=\"loading\">menarik data dari sheet\u2026<\/div>\r\n\r\n    <div id=\"app\" style=\"display:none;\">\r\n\r\n      <div class=\"controls\">\r\n        <span class=\"ctl-label\">Kota<\/span>\r\n        <select id=\"f-kota\"><option value=\"\">Semua<\/option><\/select>\r\n        <span class=\"ctl-label\">Usia<\/span>\r\n        <select id=\"f-usia\"><option value=\"\">Semua<\/option><\/select>\r\n        <span class=\"ctl-label\">Gender<\/span>\r\n        <select id=\"f-gender\"><option value=\"\">Semua<\/option><\/select>\r\n        <span class=\"ctl-label\">Pekerjaan<\/span>\r\n        <select id=\"f-pekerjaan\"><option value=\"\">Semua<\/option><\/select>\r\n        <button class=\"btn-ghost\" onclick=\"resetFilters()\">Reset filter<\/button>\r\n        <button class=\"btn-ghost\" onclick=\"loadData()\">\u27f3 Refresh data<\/button>\r\n      <\/div>\r\n\r\n      <div class=\"scorecards\" id=\"kpi-row\"><\/div>\r\n\r\n      <div class=\"panel\">\r\n        <div class=\"panel-head\">\r\n          <div class=\"panel-title\">\ud83d\udcc8 Trend respons masuk<\/div>\r\n          <div class=\"panel-sub\">harian, kumulatif seluruh periode<\/div>\r\n        <\/div>\r\n        <div style=\"position:relative;height:180px;\"><canvas id=\"trendChart\"><\/canvas><\/div>\r\n      <\/div>\r\n\r\n      <div id=\"sections\"><\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"footer-strip\"><span>PT Solusi Gadai Pintar \u00b7 Dashboard internal survei nasabah<\/span><\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ISI DENGAN URL DEPLOYMENT APPS SCRIPT (diakhiri \/exec)\r\nvar WEBAPP_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbyFsWWvAQ8YOIrkHZhpxJyzvcRPFHzmWYPq8GDi98sprMg9-_bROP-UHPuv5Affpjz_hA\/exec';\r\n\r\nvar RAW = null;\r\nvar GROUPS = null;\r\nvar charts = [];\r\nvar gridLine = {color:'rgba(2,20,49,.06)'};\r\nvar tickColor = '#6b7280';\r\n\r\nvar STANDALONE_HIDE = ['Submitted at'];\r\n\r\nvar SECTION_RULES = [\r\n  { key: 'Demografi', words: ['kota', 'kecamatan', 'jenis kelamin', 'pekerjaan', 'usia'], color: '#02439F' },\r\n  { key: 'Perilaku & Kebutuhan Gadai', words: ['pernah gadai', 'gadai di mana saja', 'ketahui', 'biasanya kamu gadai apa', 'rata-rata pinjaman', 'berapa kali kamu gadai', 'kebutuhan gadai', 'mendesak', 'berapa lama biasanya anda menggadaikan'], color: '#0255CA' },\r\n  { key: 'Alternatif Sebelum Gadai', words: ['cara lain', 'kepikiran', 'akhirnya gak jadi pakai'], color: '#047857' },\r\n  { key: 'Proses Consideration & Compare', words: ['bandingin', 'dipertimbangkan', 'faktor yang kamu bandingkan', 'kepikiran mau gadai sampai'], color: '#b45309' },\r\n  { key: 'Discovery Channel', words: ['tau tempat gadai', 'instagram\/tiktok', 'google\/internet', 'pertama kali kamu lakuin'], color: '#7c3aed' },\r\n  { key: 'Kompetitor & Switching', words: ['tempat gadai mana aja', 'tidak jadi gadai di tempat', 'promo apa yang paling menarik', 'coba tempat gadai lain'], color: '#dc2626' },\r\n  { key: 'Media & Konten', words: ['sosmed', 'genre konten', 'kol \/ konten kreator'], color: '#db2777' }\r\n];\r\nvar DEFAULT_SECTION_COLOR = '#6b7280';\r\n\r\nfunction sectionOf(header) {\r\n  var h = header.toLowerCase();\r\n  for (var i = 0; i < SECTION_RULES.length; i++) {\r\n    var rule = SECTION_RULES[i];\r\n    for (var j = 0; j < rule.words.length; j++) {\r\n      if (h.indexOf(rule.words[j]) !== -1) return rule;\r\n    }\r\n  }\r\n  return { key: 'Lainnya', color: DEFAULT_SECTION_COLOR };\r\n}\r\n\r\nfunction loadData() {\r\n  document.getElementById('app').style.display = 'none';\r\n  document.getElementById('err').style.display = 'none';\r\n  document.getElementById('loading').style.display = 'block';\r\n  document.getElementById('loading').textContent = 'menarik data dari sheet\u2026';\r\n\r\n  if (!WEBAPP_URL || WEBAPP_URL.indexOf('PASTE_URL') === 0) {\r\n    onError('WEBAPP_URL belum diisi. Buka file ini, ganti konstanta WEBAPP_URL di bagian atas <script> dengan URL deployment Apps Script (diakhiri \/exec).');\r\n    return;\r\n  }\r\n\r\n  fetch(WEBAPP_URL)\r\n    .then(function (r) {\r\n      if (!r.ok) throw new Error('HTTP ' + r.status);\r\n      return r.json();\r\n    })\r\n    .then(function (data) {\r\n      if (data.error) throw new Error(data.error);\r\n      onDataLoaded(data);\r\n    })\r\n    .catch(function (err) {\r\n      onError('Gagal ambil data: ' + err.message + '. Cek WEBAPP_URL sudah benar dan deployment access-nya \"Anyone\".');\r\n    });\r\n}\r\n\r\nfunction onError(msg) {\r\n  document.getElementById('loading').style.display = 'none';\r\n  var e = document.getElementById('err');\r\n  e.style.display = 'block';\r\n  e.textContent = msg;\r\n}\r\n\r\nfunction onDataLoaded(data) {\r\n  RAW = data;\r\n  GROUPS = detectGroups(RAW.headers);\r\n  document.getElementById('loading').style.display = 'none';\r\n  document.getElementById('app').style.display = 'block';\r\n  var label = RAW.rows.length + ' respons \u00b7 update ' + new Date(RAW.lastUpdated).toLocaleString('id-ID', {hour:'2-digit',minute:'2-digit',day:'2-digit',month:'short'});\r\n  document.getElementById('subtitle-top').textContent = label;\r\n  populateFilters();\r\n  render(RAW.rows);\r\n  ['f-kota','f-usia','f-gender','f-pekerjaan'].forEach(function(id){\r\n    document.getElementById(id).addEventListener('change', applyFilters);\r\n  });\r\n}\r\n\r\nfunction resetFilters() {\r\n  ['f-kota','f-usia','f-gender','f-pekerjaan'].forEach(function(id){\r\n    document.getElementById(id).value = '';\r\n  });\r\n  render(RAW.rows);\r\n}\r\n\r\nfunction applyFilters() {\r\n  var kota = document.getElementById('f-kota').value;\r\n  var usia = document.getElementById('f-usia').value;\r\n  var gender = document.getElementById('f-gender').value;\r\n  var pekerjaan = document.getElementById('f-pekerjaan').value;\r\n\r\n  var filtered = RAW.rows.filter(function (r) {\r\n    if (kota && r['Kota \/ Kabupaten domisili kamu'] !== kota) return false;\r\n    if (usia && r['Usia'] !== usia) return false;\r\n    if (gender && r['Jenis kelamin'] !== gender) return false;\r\n    if (pekerjaan && r['Pekerjaan'] !== pekerjaan) return false;\r\n    return true;\r\n  });\r\n  render(filtered);\r\n}\r\n\r\nfunction uniqueVals(col) {\r\n  var s = {};\r\n  RAW.rows.forEach(function (r) {\r\n    var v = r[col];\r\n    if (v !== undefined && v !== null && v !== '') s[v] = true;\r\n  });\r\n  return Object.keys(s).sort();\r\n}\r\n\r\nfunction populateFilters() {\r\n  fillSelect('f-kota', uniqueVals('Kota \/ Kabupaten domisili kamu'));\r\n  fillSelect('f-usia', uniqueVals('Usia'));\r\n  fillSelect('f-gender', uniqueVals('Jenis kelamin'));\r\n  fillSelect('f-pekerjaan', uniqueVals('Pekerjaan'));\r\n}\r\n\r\nfunction fillSelect(id, values) {\r\n  var sel = document.getElementById(id);\r\n  sel.querySelectorAll('option:not(:first-child)').forEach(function(o){ o.remove(); });\r\n  values.forEach(function (v) {\r\n    var opt = document.createElement('option');\r\n    opt.value = v; opt.textContent = v;\r\n    sel.appendChild(opt);\r\n  });\r\n}\r\n\r\nfunction detectGroups(headers) {\r\n  var headerSet = {};\r\n  headers.forEach(function (h) { headerSet[h] = true; });\r\n  var groups = {};\r\n  var groupedHeaders = {};\r\n  headers.forEach(function (h) {\r\n    var m = h.match(\/^(.*?)\\s\\((.*)\\)$\/);\r\n    if (m && headerSet[m[1]]) {\r\n      var base = m[1];\r\n      if (!groups[base]) groups[base] = [];\r\n      groups[base].push({ option: m[2].trim(), header: h });\r\n      groupedHeaders[h] = true;\r\n    }\r\n  });\r\n  var standalone = [];\r\n  headers.forEach(function (h) {\r\n    if (groupedHeaders[h]) return;\r\n    if (groups[h]) return;\r\n    if (STANDALONE_HIDE.indexOf(h) !== -1) return;\r\n    standalone.push(h);\r\n  });\r\n  return { groups: groups, standalone: standalone };\r\n}\r\n\r\nfunction truthy(v) {\r\n  return v === true || v === 'TRUE' || v === 'True' || v === 'true';\r\n}\r\n\r\nfunction aggregateMulti(rows, base, options) {\r\n  var total = rows.length;\r\n  var counts = options.map(function (opt) {\r\n    var c = 0;\r\n    rows.forEach(function (r) { if (truthy(r[opt.header])) c++; });\r\n    return { label: opt.option, count: c, pct: total ? Math.round((c \/ total) * 1000) \/ 10 : 0 };\r\n  });\r\n  counts.sort(function (a, b) { return b.count - a.count; });\r\n  return counts;\r\n}\r\n\r\nfunction aggregateSingle(rows, header) {\r\n  var counts = {};\r\n  var nonEmpty = 0;\r\n  rows.forEach(function (r) {\r\n    var v = r[header];\r\n    if (v === undefined || v === null || v === '') return;\r\n    nonEmpty++;\r\n    counts[v] = (counts[v] || 0) + 1;\r\n  });\r\n  var arr = Object.keys(counts).map(function (k) {\r\n    return { label: k, count: counts[k], pct: nonEmpty ? Math.round((counts[k] \/ nonEmpty) * 1000) \/ 10 : 0 };\r\n  });\r\n  arr.sort(function (a, b) { return b.count - a.count; });\r\n  return { data: arr, nonEmpty: nonEmpty, uniqueCount: arr.length };\r\n}\r\n\r\nfunction destroyCharts() {\r\n  charts.forEach(function (c) { c.destroy(); });\r\n  charts = [];\r\n}\r\n\r\nfunction render(rows) {\r\n  destroyCharts();\r\n  renderKPI(rows);\r\n  renderTrend(rows);\r\n  renderSections(rows);\r\n}\r\n\r\nfunction renderKPI(rows) {\r\n  var total = rows.length;\r\n  var pernahGadai = rows.filter(function (r) { return (r['Apakah kamu pernah gadai sebelumnya?'] || '').indexOf('Ya') === 0; }).length;\r\n  var bersedia = rows.filter(function (r) { return (r['Apakah kamu bersedia dihubungi via telpon untuk wawancara lebih lanjut dan mendapatkan Rp50.000 sebagai apresiasi?'] || '').indexOf('Ya') === 0; }).length;\r\n  var bandingin = rows.filter(function (r) { return (r['Sebelum pilih tempat gadai yang sekarang, apakah kamu bandingin dulu dengan tempat lain?'] || '').indexOf('Ya') === 0; }).length;\r\n\r\n  var kpis = [\r\n    { value: total, label: 'Total respons (filtered)', cls: '' },\r\n    { value: total ? Math.round(pernahGadai \/ total * 100) + '%' : '-', label: 'Pernah gadai sebelumnya', cls: 'accent' },\r\n    { value: total ? Math.round(bandingin \/ total * 100) + '%' : '-', label: 'Bandingin dulu sebelum pilih', cls: 'green' },\r\n    { value: total ? Math.round(bersedia \/ total * 100) + '%' : '-', label: 'Bersedia diwawancara', cls: 'amber' }\r\n  ];\r\n  var el = document.getElementById('kpi-row');\r\n  el.innerHTML = '';\r\n  kpis.forEach(function (k) {\r\n    var div = document.createElement('div');\r\n    div.className = 'sc ' + k.cls;\r\n    div.innerHTML = '<div class=\"lbl\">' + k.label + '<\/div><div class=\"val\">' + k.value + '<\/div>';\r\n    el.appendChild(div);\r\n  });\r\n}\r\n\r\nfunction renderTrend(rows) {\r\n  var counts = {};\r\n  rows.forEach(function (r) {\r\n    var raw = r['Submitted at'];\r\n    if (!raw) return;\r\n    var day = String(raw).slice(0, 10);\r\n    counts[day] = (counts[day] || 0) + 1;\r\n  });\r\n  var days = Object.keys(counts).sort();\r\n  var ctx = document.getElementById('trendChart').getContext('2d');\r\n  var chart = new Chart(ctx, {\r\n    type: 'line',\r\n    data: {\r\n      labels: days,\r\n      datasets: [{\r\n        data: days.map(function (d) { return counts[d]; }),\r\n        borderColor: '#02439F',\r\n        backgroundColor: 'rgba(2,67,159,.08)',\r\n        borderWidth: 2,\r\n        pointRadius: 3,\r\n        pointBackgroundColor: '#02439F',\r\n        tension: .3,\r\n        fill: true\r\n      }]\r\n    },\r\n    options: {\r\n      responsive: true, maintainAspectRatio: false,\r\n      plugins: { legend: { display: false } },\r\n      scales: {\r\n        x: { ticks: { font: {size:10}, color: tickColor, autoSkip: true, maxRotation: 35 }, grid: { display: false } },\r\n        y: { beginAtZero: true, ticks: { font: {size:10}, color: tickColor, precision: 0 }, grid: gridLine }\r\n      }\r\n    }\r\n  });\r\n  charts.push(chart);\r\n}\r\n\r\nfunction renderSections(rows) {\r\n  var container = document.getElementById('sections');\r\n  container.innerHTML = '';\r\n\r\n  var items = [];\r\n  Object.keys(GROUPS.groups).forEach(function (base) {\r\n    items.push({ type: 'multi', header: base, options: GROUPS.groups[base] });\r\n  });\r\n  GROUPS.standalone.forEach(function (h) {\r\n    items.push({ type: 'single', header: h });\r\n  });\r\n\r\n  var buckets = {};\r\n  items.forEach(function (it) {\r\n    var s = sectionOf(it.header);\r\n    if (!buckets[s.key]) buckets[s.key] = { color: s.color, items: [] };\r\n    buckets[s.key].items.push(it);\r\n  });\r\n\r\n  var order = ['Demografi', 'Perilaku & Kebutuhan Gadai', 'Alternatif Sebelum Gadai',\r\n    'Proses Consideration & Compare', 'Discovery Channel', 'Kompetitor & Switching',\r\n    'Media & Konten', 'Lainnya'];\r\n\r\n  order.forEach(function (sec) {\r\n    if (!buckets[sec] || !buckets[sec].items.length) return;\r\n    var color = buckets[sec].color;\r\n\r\n    var h = document.createElement('div');\r\n    h.className = 'section-title';\r\n    h.innerHTML = '<h2>' + sec + '<\/h2><span class=\"cnt\">' + buckets[sec].items.length + ' pertanyaan<\/span>';\r\n    container.appendChild(h);\r\n\r\n    var grid = document.createElement('div');\r\n    grid.className = 'grid';\r\n    container.appendChild(grid);\r\n\r\n    buckets[sec].items.forEach(function (it) {\r\n      renderQuestionCard(grid, it, rows, color);\r\n    });\r\n  });\r\n}\r\n\r\nfunction renderQuestionCard(grid, item, rows, color) {\r\n  var card = document.createElement('div');\r\n  card.className = 'panel';\r\n\r\n  if (item.type === 'multi') {\r\n    var data = aggregateMulti(rows, item.header, item.options);\r\n    var totalResponded = rows.filter(function(r){ return item.options.some(function(o){return truthy(r[o.header]);}); }).length;\r\n    card.innerHTML = '<div class=\"panel-head\"><div class=\"panel-title\">' + item.header + '<\/div><div class=\"panel-sub\">multi-select \u00b7 ' + totalResponded + '\/' + rows.length + '<\/div><\/div><div style=\"position:relative;height:' + Math.max(120, data.length * 26) + 'px;\"><canvas><\/canvas><\/div>';\r\n    grid.appendChild(card);\r\n    drawBar(card.querySelector('canvas'), data, color);\r\n    return;\r\n  }\r\n\r\n  var agg = aggregateSingle(rows, item.header);\r\n  var ratio = agg.nonEmpty ? agg.uniqueCount \/ agg.nonEmpty : 0;\r\n\r\n  if (agg.uniqueCount === 0) {\r\n    card.innerHTML = '<div class=\"panel-head\"><div class=\"panel-title\">' + item.header + '<\/div><\/div><div class=\"panel-sub\">belum ada jawaban<\/div>';\r\n    grid.appendChild(card);\r\n    return;\r\n  }\r\n\r\n  var isFreeText = agg.uniqueCount > 15 && ratio > 0.5;\r\n\r\n  if (isFreeText) {\r\n    var listHtml = agg.data.slice(0, 50).map(function (d) {\r\n      return '<div><span>' + escapeHtml(String(d.label)) + '<\/span>' + (d.count > 1 ? '<b>' + d.count + 'x<\/b>' : '') + '<\/div>';\r\n    }).join('');\r\n    card.innerHTML = '<div class=\"panel-head\"><div class=\"panel-title\">' + item.header + '<\/div><div class=\"panel-sub\">jawaban bebas \u00b7 ' + agg.nonEmpty + '\/' + agg.uniqueCount + ' unik<\/div><\/div>' +\r\n      '<div class=\"text-list\">' + listHtml + '<\/div>';\r\n    grid.appendChild(card);\r\n    return;\r\n  }\r\n\r\n  card.innerHTML = '<div class=\"panel-head\"><div class=\"panel-title\">' + item.header + '<\/div><div class=\"panel-sub\">' + agg.nonEmpty + '\/' + rows.length + '<\/div><\/div><div style=\"position:relative;height:' + Math.max(120, agg.data.length * 26) + 'px;\"><canvas><\/canvas><\/div>';\r\n  grid.appendChild(card);\r\n  drawBar(card.querySelector('canvas'), agg.data, color);\r\n}\r\n\r\nfunction drawBar(canvas, data, color) {\r\n  var ctx = canvas.getContext('2d');\r\n  var chart = new Chart(ctx, {\r\n    type: 'bar',\r\n    data: {\r\n      labels: data.map(function (d) { return d.label; }),\r\n      datasets: [{\r\n        data: data.map(function (d) { return d.count; }),\r\n        backgroundColor: color || '#02439F',\r\n        borderRadius: 4\r\n      }]\r\n    },\r\n    options: {\r\n      indexAxis: 'y',\r\n      responsive: true, maintainAspectRatio: false,\r\n      plugins: {\r\n        legend: { display: false },\r\n        tooltip: {\r\n          callbacks: {\r\n            label: function (ctx) {\r\n              var d = data[ctx.dataIndex];\r\n              return d.count + ' respon (' + d.pct + '%)';\r\n            }\r\n          }\r\n        }\r\n      },\r\n      scales: {\r\n        x: { beginAtZero: true, ticks: { font: {size:10}, color: tickColor, precision: 0 }, grid: gridLine },\r\n        y: { ticks: { font: {size:10}, color: '#021431' }, grid: { display: false } }\r\n      }\r\n    }\r\n  });\r\n  charts.push(chart);\r\n}\r\n\r\nfunction escapeHtml(s) {\r\n  return s.replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;');\r\n}\r\n\r\nloadData();\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3116","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Julia Afildah","author_link":"https:\/\/pandaigadai.com\/blog\/author\/julia-afildah\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages\/3116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/comments?post=3116"}],"version-history":[{"count":1,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages\/3116\/revisions"}],"predecessor-version":[{"id":3117,"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/pages\/3116\/revisions\/3117"}],"wp:attachment":[{"href":"https:\/\/pandaigadai.com\/blog\/wp-json\/wp\/v2\/media?parent=3116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}