{"id":1,"date":"2025-12-16T09:13:19","date_gmt":"2025-12-16T09:13:19","guid":{"rendered":"https:\/\/lat.ciss.or.id\/?p=1"},"modified":"2026-04-21T07:29:15","modified_gmt":"2026-04-21T07:29:15","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/lat.ciss.or.id\/?p=1","title":{"rendered":""},"content":{"rendered":"\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<style>\nbody { background:#f4f6f9; }\n\n.header-box {\n  background: linear-gradient(90deg,#2c3e50,#4ca1af);\n  color:white;\n  padding:20px;\n  border-radius:12px;\n  text-align:center;\n  margin-bottom:20px;\n}\n\n.card-custom {\n  background:white;\n  padding:20px;\n  border-radius:12px;\n  box-shadow:0 3px 8px rgba(0,0,0,0.1);\n  margin-bottom:20px;\n}\n\n.label-title {\n  font-weight:600;\n  margin-bottom:5px;\n}\n\n.big-number {\n  font-size:20px;\n  font-weight:bold;\n}\n<\/style>\n\n<div class=\"container\">\n\n  <div class=\"header-box\">\n    <h3>MONITORING REKOMENDASI FORMASI<\/h3>\n    <small>Statistik Pengajuan &#038; Distribusi Jenjang Jabatan<\/small>\n  <\/div>\n\n  <!-- FILTER -->\n  <div class=\"card-custom row\">\n    <div class=\"col-md-6\">\n      <label class=\"label-title\">Instansi \/ Daerah<\/label>\n      <select id=\"provinsi\" class=\"form-control\"><\/select>\n    <\/div>\n\n    <div class=\"col-md-6\">\n      <label class=\"label-title\">Unit Kerja \/ Kab \/ Kota<\/label>\n      <select id=\"kota\" class=\"form-control\"><\/select>\n    <\/div>\n  <\/div>\n\n  <!-- STATUS -->\n  <div class=\"card-custom row\">\n    <div class=\"col-md-8\">\n      <p><b>Unit yang sudah mengajukan:<\/b><\/p>\n      <div id=\"sudahList\"><\/div>\n\n      <p class=\"mt-3 text-danger\"><b>Belum mengajukan:<\/b><\/p>\n      <div id=\"belumList\"><\/div>\n    <\/div>\n\n    <div class=\"col-md-4 text-center\">\n      <canvas id=\"chartStatus\"><\/canvas>\n    <\/div>\n  <\/div>\n\n  <!-- ANALISIS -->\n  <div class=\"card-custom row\">\n    <div class=\"col-md-6\">\n      <h5>ANALIS PERDAGANGAN<\/h5>\n\n      <div class=\"row mt-3\">\n        <div class=\"col-6\">Pertama<\/div>\n        <div class=\"col-6 big-number\" id=\"pertama\"><\/div>\n\n        <div class=\"col-6\">Muda<\/div>\n        <div class=\"col-6 big-number\" id=\"muda\"><\/div>\n\n        <div class=\"col-6\">Madya<\/div>\n        <div class=\"col-6 big-number\" id=\"madya\"><\/div>\n\n        <div class=\"col-6\">Utama<\/div>\n        <div class=\"col-6 big-number\" id=\"utama\"><\/div>\n      <\/div>\n\n      <div class=\"mt-3\">\n        TOTAL: <span id=\"total\"><\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"col-md-6\">\n      <canvas id=\"chartJenjang\"><\/canvas>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\nconst API_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbz7mUybT-OubwDe7-eYJx4hr9VErF07hWhTikJ66JVvwRU0eD_rqzic4SbdC98vOXGIsQ\/exec\";\n\nlet allData = [];\nlet chart1, chart2;\n\nfetch(API_URL)\n.then(res => res.json())\n.then(data => {\n  allData = data;\n  init();\n});\n\nfunction init() {\n  let provSet = [...new Set(allData.map(d => d.Provinsi))];\n  let prov = document.getElementById(\"provinsi\");\n\n  provSet.forEach(p => prov.add(new Option(p,p)));\n\n  prov.onchange = updateKota;\n  updateKota();\n}\n\nfunction updateKota() {\n  let prov = document.getElementById(\"provinsi\").value;\n\n  let kotaSet = [...new Set(\n    allData.filter(d => d.Provinsi==prov).map(d => d[\"Kabupaten\/Kota\"])\n  )];\n\n  let kota = document.getElementById(\"kota\");\n  kota.innerHTML = \"\";\n\n  kotaSet.forEach(k => kota.add(new Option(k,k)));\n\n  kota.onchange = updateDashboard;\n  updateDashboard();\n}\n\nfunction updateDashboard() {\n  let prov = document.getElementById(\"provinsi\").value;\n  let kota = document.getElementById(\"kota\").value;\n\n  let data = allData.filter(d =>\n    d.Provinsi==prov && d[\"Kabupaten\/Kota\"]==kota\n  );\n\n  let sudah = data.filter(d=>d[\"Status Pengajuan\"]==\"Sudah\");\n  let belum = data.filter(d=>d[\"Status Pengajuan\"]==\"Belum\");\n\n  document.getElementById(\"sudahList\").innerText =\n    sudah.map(d=>d[\"Kabupaten\/Kota\"]).join(\", \");\n\n  document.getElementById(\"belumList\").innerText =\n    belum.map(d=>d[\"Kabupaten\/Kota\"]).join(\", \");\n\n  drawStatus(sudah.length, belum.length);\n\n  let jenjang = {Pertama:0,Muda:0,Madya:0,Utama:0};\n\n  data.forEach(d=>{\n    jenjang[d.Jenjang]+=Number(d.Jumlah);\n  });\n\n  document.getElementById(\"pertama\").innerText = jenjang.Pertama;\n  document.getElementById(\"muda\").innerText = jenjang.Muda;\n  document.getElementById(\"madya\").innerText = jenjang.Madya;\n  document.getElementById(\"utama\").innerText = jenjang.Utama;\n\n  let total = Object.values(jenjang).reduce((a,b)=>a+b,0);\n  document.getElementById(\"total\").innerText = total;\n\n  drawJenjang(jenjang);\n}\n\nfunction drawStatus(sudah, belum) {\n  if(chart1) chart1.destroy();\n\n  chart1 = new Chart(document.getElementById(\"chartStatus\"), {\n    type:'doughnut',\n    data:{\n      labels:['Sudah','Belum'],\n      datasets:[{data:[sudah,belum]}]\n    }\n  });\n}\n\nfunction drawJenjang(j) {\n  if(chart2) chart2.destroy();\n\n  chart2 = new Chart(document.getElementById(\"chartJenjang\"), {\n    type:'doughnut',\n    data:{\n      labels:['Pertama','Muda','Madya','Utama'],\n      datasets:[{\n        data:[j.Pertama,j.Muda,j.Madya,j.Utama]\n      }]\n    }\n  });\n}\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MONITORING REKOMENDASI FORMASI Statistik Pengajuan &#038; Distribusi Jenjang Jabatan Instansi \/ Daerah Unit Kerja \/ Kab \/ Kota Unit yang sudah mengajukan: Belum mengajukan: ANALIS PERDAGANGAN Pertama Muda Madya Utama TOTAL:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-informasi"],"_links":{"self":[{"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1"}],"version-history":[{"count":3,"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lat.ciss.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}