{"id":1352,"date":"2026-04-16T11:11:27","date_gmt":"2026-04-16T04:11:27","guid":{"rendered":"https:\/\/ndoae.doae.go.th\/aopdb01\/?p=1352"},"modified":"2026-04-17T11:13:07","modified_gmt":"2026-04-17T04:13:07","slug":"1352","status":"publish","type":"post","link":"https:\/\/ndoae.doae.go.th\/aopdb01\/2026\/04\/16\/1352\/","title":{"rendered":""},"content":{"rendered":"\n<div id=\"app\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;600&#038;display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\"\/>\n<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<style>\n\n\/* \ud83d\udd25 \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19 Sarabun *\/\n#app, #app * {\n  font-family: 'Sarabun', sans-serif;\n}\n\nbody{background:#f5f5f5;margin:0;}\n.container{max-width:1100px;margin:auto;padding:10px;}\n\n.kpi{display:flex;gap:10px;margin-bottom:10px;}\n.kpi-card{\n  flex:1;\n  background:#eee;\n  padding:10px 12px;   \/* \ud83d\udd3d \u0e25\u0e14\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07 *\/\n  border-radius:14px;\n  text-align:center;\n}\n\n.kpi-card h2{\n  margin:6px 0;\n  font-size:28px;   \/* \ud83d\udd3d \u0e25\u0e14\u0e02\u0e19\u0e32\u0e14\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02 *\/\n}\n\n.kpi-card{\n  min-height:90px; \/* \ud83d\udd3d \u0e04\u0e38\u0e21\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07 *\/\n}\n\n.filters{display:flex;gap:8px;margin-bottom:10px;}\n.chip{background:#fff;color:#000;border:1px solid #ccc;border-radius:20px;padding:6px 12px;cursor:pointer;}\n.chip.active{background:#2e7d32;color:#fff;}\n\n.map-card{background:#bcd3cd;border-radius:16px;padding:10px;position:relative;}\n#map{height:450px;border-radius:16px;}\n\n.legend{position:absolute;bottom:15px;left:15px;background:white;padding:8px;border-radius:10px;}\n.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n\n.select{margin:10px 0;padding:6px;border-radius:8px;}\n\n<\/style>\n\n<div class=\"container\">\n\n<h2>\ud83d\udccd Dashboard \u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e41\u0e21\u0e25\u0e07\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e43\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48<\/h2>\n\n<div class=\"kpi\">\n<div class=\"kpi-card\">\ud83d\udc1d \u0e1c\u0e36\u0e49\u0e07 <h2 id=\"beeTotal\">0<\/h2><p style=\"font-size:12px;\">\u0e41\u0e2b\u0e48\u0e07<\/p><\/div>\n<div class=\"kpi-card\">\ud83c\udf3c \u0e0a\u0e31\u0e19\u0e42\u0e23\u0e07 <h2 id=\"stingTotal\">0<\/h2><p style=\"font-size:12px;\">\u0e41\u0e2b\u0e48\u0e07<\/p><\/div>\n<div class=\"kpi-card\">\ud83e\udd97 \u0e08\u0e34\u0e49\u0e07\u0e2b\u0e23\u0e35\u0e14 <h2 id=\"criTotal\">0<\/h2><p style=\"font-size:12px;\">\u0e41\u0e2b\u0e48\u0e07<\/p><\/div>\n<\/div>\n\n<div class=\"filters\">\n<button class=\"chip active\" onclick=\"setType('all')\">\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\n<button class=\"chip\" onclick=\"setType('\u0e1c\u0e36\u0e49\u0e07')\">\ud83d\udc1d \u0e1c\u0e36\u0e49\u0e07 <\/button>\n<button class=\"chip\" onclick=\"setType('\u0e0a\u0e31\u0e19\u0e42\u0e23\u0e07')\">\ud83c\udf3c \u0e0a\u0e31\u0e19\u0e42\u0e23\u0e07 <\/button>\n<button class=\"chip\" onclick=\"setType('\u0e08\u0e34\u0e49\u0e07\u0e2b\u0e23\u0e35\u0e14')\">\ud83e\udd97 \u0e08\u0e34\u0e49\u0e07\u0e2b\u0e23\u0e35\u0e14 <\/button>\n<\/div>\n\n<select id=\"provinceSelect\" class=\"select\"><\/select>\n\n<div class=\"map-card\">\n<div id=\"map\"><\/div>\n\n<div style=\"\nposition:absolute;\nbottom:20px;\nleft:20px;\nbackground:white;\npadding:10px 14px;\nborder-radius:12px;\nbox-shadow:0 4px 10px rgba(0,0,0,0.15);\nz-index:9999;\nfont-size:14px;\ndisplay:flex;\ngap:12px;\nalign-items:center;\n\">\n\n<span>\n<i style=\"background:#fbc02d;width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:5px;\"><\/i>\n\u0e1c\u0e36\u0e49\u0e07\n<\/span>\n\n<span>\n<i style=\"background:#2e7d32;width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:5px;\"><\/i>\n\u0e0a\u0e31\u0e19\u0e42\u0e23\u0e07\n<\/span>\n\n<span>\n<i style=\"background:#1976d2;width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:5px;\"><\/i>\n\u0e08\u0e34\u0e49\u0e07\u0e2b\u0e23\u0e35\u0e14\n<\/span>\n\n<\/div>\n\n<div class=\"legend\">\n<span><i class=\"dot\" style=\"background:#fbc02d\"><\/i>\u0e1c\u0e36\u0e49\u0e07<\/span>\n<span><i class=\"dot\" style=\"background:#2e7d32\"><\/i>\u0e0a\u0e31\u0e19\u0e42\u0e23\u0e07<\/span>\n<span><i class=\"dot\" style=\"background:#1976d2\"><\/i>\u0e08\u0e34\u0e49\u0e07\u0e2b\u0e23\u0e35\u0e14<\/span>\n<\/div>\n\n<\/div>\n\n<canvas id=\"provinceChart\" height=\"120\"><\/canvas>\n\n<\/div>\n\n<script>\n\nChart.defaults.font.family = \"'Sarabun', sans-serif\";\nChart.defaults.font.size = 12;\n\nconst sheetURL=\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vRgYX0K4w5jJdSihdTHaeKU3o0KAd9TxrCmMrdhAMlU8ETiq7HZHErs9iz8fS_cmlGCg3FFYb6eWfmD\/pub?output=csv\";\n\nlet map=L.map('map').setView([16.5,100.5],8);\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n\nlet dataAll=[],markers=[],type='all',province='all',chart;\n\nfunction color(t){\nif(t==='\u0e1c\u0e36\u0e49\u0e07')return '#fbc02d';\nif(t==='\u0e0a\u0e31\u0e19\u0e42\u0e23\u0e07')return '#2e7d32';\nif(t==='\u0e08\u0e34\u0e49\u0e07\u0e2b\u0e23\u0e35\u0e14')return '#1976d2';\n}\n\n\/\/ \ud83d\udcca \u0e01\u0e23\u0e32\u0e1f\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14 (\u0e41\u0e01\u0e49\u0e43\u0e2b\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07)\nfunction updateChart(filtered){\nlet sum={};\n\nfiltered.forEach(d=>{\nsum[d.province]=(sum[d.province]||0)+d.qty;\n});\n\nif(chart)chart.destroy();\n\nchart=new Chart(document.getElementById(\"provinceChart\"),{\ntype:'bar',\ndata:{\nlabels:Object.keys(sum),\ndatasets:[{data:Object.values(sum)}]\n},\noptions:{plugins:{legend:{display:false}}}\n});\n}\n\n\/\/ \ud83c\udfaf render\nfunction render(){\n\nmarkers.forEach(m=>map.removeLayer(m));\nmarkers=[];\n\n\/\/ \ud83d\udd25 \u0e43\u0e0a\u0e49 Set \u0e41\u0e17\u0e19\nlet beeSet = new Set();\nlet stingSet = new Set();\nlet criSet = new Set();\n\nlet filtered=[];\n\ndataAll.forEach(d=>{\n\n  if(type!='all'&&d.type!=type)return;\n  if(province!='all'&&d.province!=province)return;\n\n  filtered.push(d);\n\n  \/\/ \ud83d\udd25 \u0e19\u0e31\u0e1a\u0e40\u0e1b\u0e47\u0e19 \u201c\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u201d\n  if(d.type==='\u0e1c\u0e36\u0e49\u0e07') beeSet.add(d.farm);\n  if(d.type==='\u0e0a\u0e31\u0e19\u0e42\u0e23\u0e07') stingSet.add(d.farm);\n  if(d.type==='\u0e08\u0e34\u0e49\u0e07\u0e2b\u0e23\u0e35\u0e14') criSet.add(d.farm);\n\n  if(!d.lat || !d.lng) return;\n\n  let m=L.circleMarker([d.lat,d.lng],{\n    radius:Math.sqrt(d.qty)*2+6,\n    color:color(d.type),\n    fillOpacity:0.9\n  }).addTo(map);\n\n  m.bindPopup(`\n  <b>${d.farm}<\/b><br>\n  \ud83d\udc64 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07: ${d.owner}<br>\n  \ud83d\udccd ${d.district}, ${d.province}<br>\n  \ud83d\udc1e \u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17: ${d.type}<br>\n  \ud83c\udf31 \u0e2a\u0e32\u0e22\u0e1e\u0e31\u0e19\u0e18\u0e38\u0e4c: ${d.breed}<br>\n  \ud83d\udd22 \u0e08\u0e33\u0e19\u0e27\u0e19: ${d.qty}\n  `);\n\n  markers.push(m);\n\n});\n\n\/\/ \ud83d\udd25 \u0e43\u0e0a\u0e49 .size (\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e21\u0e32\u0e01)\nbeeTotal.innerText = beeSet.size;\nstingTotal.innerText = stingSet.size;\ncriTotal.innerText = criSet.size;\n\nupdateChart(filtered);\n}\n\nfunction setType(t){\ntype=t;\ndocument.querySelectorAll('.chip').forEach(c=>c.classList.remove('active'));\nevent.target.classList.add('active');\nrender();\n}\n\n\/\/ \u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\nfetch(sheetURL).then(r=>r.text()).then(txt=>{\nlet rows=txt.split(\"\\n\").slice(1);\nlet provinces=new Set();\n\nrows.forEach(r=>{\nlet c=r.split(\",\");\nlet obj={\nprovince:c[0],\ndistrict:c[1],\nfarm:c[2],\nowner:c[3],\ntype:c[4],\nbreed:c[5],\nqty:parseInt(c[6])||0,\nlat:parseFloat(c[7]),\nlng:parseFloat(c[8])\n};\n\ndataAll.push(obj);\nprovinces.add(obj.province);\n});\n\n\/\/ dropdown\nprovinceSelect.innerHTML='<option value=\"all\">\u0e17\u0e38\u0e01\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14<\/option>';\nprovinces.forEach(p=>{\nprovinceSelect.innerHTML+=`<option value=\"${p}\">${p}<\/option>`;\n});\n\nprovinceSelect.onchange=()=>{\nprovince=provinceSelect.value;\nrender();\n};\n\nrender();\n});\n\n<\/script>\n\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udccd Dashboard \u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","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":""},"categories":[1],"tags":[],"class_list":["post-1352","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/posts\/1352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/comments?post=1352"}],"version-history":[{"count":21,"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/posts\/1352\/revisions"}],"predecessor-version":[{"id":1375,"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/posts\/1352\/revisions\/1375"}],"wp:attachment":[{"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/media?parent=1352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/categories?post=1352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndoae.doae.go.th\/aopdb01\/wp-json\/wp\/v2\/tags?post=1352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}