Flood Dashboard — เฝ้าระวังน้ำ (กรมอนามัย)

เว็บแสดงสถานการณ์น้ำท่วมจาก Google Sheets สาธารณะ รันทั้งหมดผ่าน GitHub (ไม่ต้อง deploy Apps Script)

วิธีทำงาน

1. GitHub Actions (.github/workflows/pages.yml) ทำงานทุก 30 นาทีและเมื่อ push
2. fetch_data.cjs อ่านชีตเป็น CSV (ชีตต้องเปิดแบบ "ทุกคนที่มีลิงก์อ่านได้") แล้วแปลงด้วยตรรกะเดียวกับ Code.gs → docs/data.json
3. build_pages.py รวมหน้าเว็บเป็น docs/index.html
4. deploy ขึ้น GitHub Pages

ตั้งค่าครั้งแรก

Settings → Pages → Source: GitHub Actions (Pages บน repo private ต้องใช้แพ็กเกจเสียเงิน)

รันในเครื่อง

node test.cjs
node fetch_data.cjs
python build_pages.py
python -m http.server 8000 --directory docs

แท็บ "ข่าว & Trends" (เฉพาะ GitHub Pages)

ย้ายมาจากโปรเจกต์ SAT_flood: พาดหัวข่าวน้ำท่วม, Word Cloud (TF-IDF) และ Google Trends

• news/news_scraper.py อ่าน RSS (Google News, มติชน, Thai PBS, ไทยรัฐ) ย้อนหลัง 30 ชม. → docs/news_data/news.json (เก็บเฉพาะพาดหัว/แหล่ง/ลิงก์/เวลา ไม่เก็บเนื้อหาข่าว)
• news/trends_scraper.py อ่าน Google Trends → docs/news_data/trends.json ถ้าอ่านไม่ได้ (pytrends ไม่เป็นทางการ อาจถูกจำกัดบน GitHub runner) จะแสดงสถานะ "ไม่พร้อมใช้งาน" ไม่ใช้ข้อมูลสมมติ
• Google Trends แบ่งเป็นส่วนอิสระ (คำค้นหาที่พุ่ง, อันดับจังหวัด, เส้นแนวโน้ม 7 วันของ 5 คำ, คำค้นหาเด่นของ 5 จังหวัดแรก) ถ้า Google จำกัดอัตราส่วนใดจะว่างเฉพาะส่วนนั้นและหน้าเว็บบอกว่าส่วนไหนหาย (parts ใน trends.json) เส้นแนวโน้มลองใหม่ 1 ครั้งเมื่อเจอ 429
• ดัชนี 3 ระยะ (เฝ้าระวัง / วิกฤต / ฟื้นฟู): ดัชนีของคำ = ค่าเฉลี่ย 24 ชม.ล่าสุดของค่า Google Trends (0–100), ดัชนีระยะ = ค่าเฉลี่ยของคำในระยะ, ระดับ ≥60 สูง · 30–59 ปานกลาง · <30 ต่ำ คำนวณใน flood_web/data-model.js (lifecycle) และพิมพ์สูตรไว้บนหน้า คำของแต่ละระยะกำหนดใน news/trends_scraper.py (PHASES) ไม่ใช่จำนวนการค้นหาจริงหรือจำนวนผู้ประสบภัย
• ทั้งสองรันใน pages.yml ก่อน build และ continue-on-error จึงไม่ทำให้ deploy แดชบอร์ดล้ม ไฟล์ JSON ไม่ถูก commit (อยู่ใน docs/)
• หน้าตา: Word Cloud พร้อมแท็บหมวดคำ, กราฟแท่ง Top 15 + ตารางความถี่, การ์ดพาดหัว (กรองระดับ/จังหวัด/ค้นหา เลือกจำนวนที่แสดง), หัว Google Trends พร้อมปุ่มรีเฟรช (โหลด news.json/trends.json ใหม่), ชิปคำค้นหาที่พุ่ง และอันดับจังหวัด ทุกตัวเลขมาจากสองไฟล์นี้เท่านั้น ไม่มีค่าประมาณ
• UI: flood_web/news-view.js (บล็อก <!--@pages-only-begin--> ใน template.html ถูกตัดออกจากแพ็กเกจ Apps Script โดย build.py และใส่กลับใน build_pages.py)
• ทดสอบ: python news/test_news.py · รันในเครื่อง: pip install -r news/requirements.txt && python news/news_scraper.py && python news/trends_scraper.py ก่อน python build_pages.py
• ข้อมูลข่าวเป็นการจัดกลุ่มด้วยกฎคำสำคัญ ไม่ใช่การยืนยันข้อเท็จจริง; ลิงก์ข่าวเป็นของเจ้าของเนื้อหาต้นทาง

แท็บ "น้ำขัง" (ทั้ง GitHub Pages และ Apps Script)

แสดงตำบลที่ pipeline น้ำขัง (repo geeks_project_google) ประเมินว่าพบน้ำจากภาพดาวเทียมร่วมกับรายงานระดับอำเภอของ ปภ. อ่านอย่างเดียว ไม่เขียนกลับ Sheet

• ชีต: flood_waterlogged (1 แถว/ตำบล 21 คอลัมน์) และ flood_waterlogged_amphoe (1 แถว/อำเภอ 22 คอลัมน์ รวมระดับ 2P2R ของอำเภอและของจังหวัด แทนชีตเดิม flood_waterlogged_district และ flood_2p2r_province) หัวคอลัมน์ต้องครบ ไม่ครบ = ชีตนั้นเป็น error. ทุกค่าในชีตเป็นข้อความ ค่าว่างเป็น null (ไม่ใช่ 0) เวลาเป็นเวลาไทย
• เป็นชีต optional (อยู่ใน OPTIONAL): fetch_data.cjs อ่านซ้ำ 1 ครั้งแล้วข้าม ไม่ทำให้ deploy ล้ม ชีตที่อ่านไม่ได้/ว่างทำให้แท็บแสดง "ยังไม่มีข้อมูลรอบนี้" แท็บอื่นทำงานปกติ
• server.py อ่านสองชีตนี้ด้วยชื่อแท็บ (gviz) เพราะไม่มี gid (SHEETS[...] = None); Code.gs (transform_) และ fetch_data.cjs ให้ผลเหมือนกัน
• flood_web/waterlogged-view.js อ่าน window.dashboardData และวาดใหม่เมื่อมี event dashboard:data; ตรรกะบริสุทธิ์ (จัดกลุ่มสถานะ นับ เรียง กรอง ความสด) อยู่ใน data-model.js (waterRows, waterSummary, waterFilter, waterFreshness ...) มีเทสต์ใน test_model.cjs. ตารางใช้ window.DashboardTables (table()/paginateTables ของ dashboard.js)
• แหล่งข้อมูลอยู่ใน DashboardModel.WATERLOGGED_SOURCES ไม่ใส่ใน SOURCES (เหมือน RISK_SOURCES)
• คอลัมน์ basis (แท็บอำเภอ): ภาพดาวเทียม + ปภ. หรือ ปภ. (ไม่มีภาพดาวเทียม) (จังหวัดที่ไม่มีภาพดาวเทียมพบน้ำ แต่ ปภ. รายงานอำเภอต่อเนื่อง ≥ 3 วัน) แถวกลุ่มหลังไม่มีตำบลในแท็บตำบล คอลัมน์จำนวนตำบล/พื้นที่/max_run_days เป็นค่าว่าง (null) หน้าเว็บแสดง "–" ไม่แสดง 0 เรียงไว้ท้ายตาราง มีป้ายเด่น ตัวกรองที่มา การ์ดแยก และคลิกแล้วแจ้งว่าไม่มีรายการตำบล
• เกณฑ์ (พื้นที่น้ำ ≥ 1.0 ตร.กม., ภาพไม่เกิน 240 ชม., ปภ. ≥ 3 วัน) อยู่ที่ pipeline ไม่ฮาร์ดโค้ดในหน้าเว็บ แสดงตาม status และ reasons
• status มี 5 ค่า (น้ำขัง, เฝ้าระวัง, พบน้ำใหม่, ข้อมูลไม่พอ, พบน้ำล่าสุด (ไม่มีภาพใหม่)) ไม่มีสถานะ "รอยืนยัน" แยก: น้ำขัง เป็นป้ายเดียวกันทุกตำบล ระดับหลักฐานอยู่ที่ confidence (สูง = "ยืนยันด้วยภาพ", กลาง = "ตาม ปภ.") หน้าเว็บแสดงป้ายเล็กในตาราง/รายละเอียด การ์ดน้ำขังแสดงยอดแยกใต้ตัวเลข ตารางเรียง confidence สูงก่อนกลาง และแผนที่ใช้ขอบประสำหรับระดับกลาง (สีเดียวกัน)
• สีอำเภอ 2P2R จากชีต (optional) → : เทพื้นอำเภอบนแผนที่ (ชั้นเปิด/ปิดได้ อยู่ใต้จุดตำบล ผูกด้วย = ใน ; ถ้าไม่มีไฟล์ขอบเขตอำเภอจะเทสีจังหวัดแทน) แถวจังหวัดสร้างจากแถวอำเภอ (, จาก pipeline จำนวนอำเภอแต่ละระดับนับจากแถว) แดง / ส้ม / เหลือง / เขียว / ปกติ ไม่เติมสี ใช้ จากชีตตรง ๆ ไม่คำนวณใหม่ ( / แปลงจาก ใน ) คลิกอำเภอแล้วแสดงระดับ แนวทาง เหตุผล ของอำเภอและจังหวัด กรองตารางตามจังหวัด และกรองตำบลตามอำเภอถ้ามีรายการตำบล แดง = น้ำขังนาน เสี่ยงน้ำเน่าเสีย (ไม่ใช่การยืนยันคุณภาพน้ำ) เขียว = ประมาณว่าน้ำลดจาก ปภ. (ไม่ใช่การยืนยัน) มีคำเตือนใน tooltip/รายละเอียด ถ้าแท็บว่าง/อ่านไม่ได้ ชั้นสีถูกซ่อนและขึ้น "ยังไม่มีข้อมูลสี 2P2R รอบนี้" จุดตำบลยังใช้ได้ อำเภอที่ไม่พบใน GeoJSON จะแจ้งใต้คำอธิบายสี

แท็บ "เตรียมรับน้ำท่วม" (ทั้ง GitHub Pages และ Apps Script)

สรุปความเสี่ยงรายจังหวัดที่เฝ้าระวัง จากข้อมูลที่ pipeline flood_prep_pipeline (repo geeks_project_google, วันละ 2 รอบ 09:00 และ 13:00 น.) เขียนลง Google Sheet เดียวกับแดชบอร์ด

• ชีต: flood_risk (รายจังหวัด: ระดับความเสี่ยง ฝนจริง/ฝนพยากรณ์ สถานีน้ำระดับ 5/4 ประกาศเตือน เหตุผล) และ flood_wl_critical (สถานีน้ำระดับ 4-5 พร้อมพิกัดและแนวโน้ม)
• เป็นชีต optional (OPTIONAL ใน flood_web/server.py → optional ใน Config.gs): ถ้าอ่านไม่ได้ fetch_data.cjs ข้ามชีตนั้นแทนที่จะทำให้ deploy ล้ม และแท็บนี้แสดงข้อความแจ้ง แท็บอื่นไม่ได้รับผลกระทบ
• flood_web/risk-view.js อ่านข้อมูลจาก window.dashboardData (ที่ dashboard.js เผยแพร่) และวาดใหม่เมื่อมี event dashboard:data; กฎคำนวณล้วน (จัดเรียง สรุป แนวโน้มระดับน้ำ ความสดของข้อมูล) อยู่ใน data-model.js และมีทดสอบใน test_model.cjs
• ชีตทั้งสองถูกแยกไว้ใน DashboardModel.RISK_SOURCES ไม่ใส่ใน SOURCES โดยตั้งใจ เพื่อไม่ให้ไปปรากฏในแถบแจ้งเตือน ฟุตเตอร์ หรือปุ่มรีเฟรชของแท็บหลัก
• ความสดของข้อมูล: ปกติห่างกันได้ถึง ~20 ชม. (ระหว่างรอบ 13:00 ถึง 09:00 วันถัดไป) จึงเตือนเมื่อเกิน 21 ชม. (เหลือง) และ 30 ชม. (แดง ถือว่าพลาดทั้งรอบ)
• ระดับความเสี่ยงมาจากเกณฑ์ภายในของ pipeline ไม่ใช่ประกาศทางการ (หน้าเว็บระบุข้อความนี้ไว้)
• โครงหน้า (หลักฐานประกอบการเฝ้าระวัง): ประกาศ TMD (พับไว้) → ตัวเลขสรุปรวมกลุ่มเปราะบางในจังหวัดเสี่ยงสูง → ตาราง "ฝนพยากรณ์รายวัน × จังหวัด" (สีตามระดับฝน) → แผนที่ + รายละเอียดจังหวัดที่เลือก (เหตุผล กราฟฝนรายวัน สถานีน้ำ กลุ่มเปราะบาง) → สถานีวิกฤตทั้งหมด → ตารางทุกจังหวัด/CSV
• คอลัมน์หลักฐานที่ pipeline ต่อท้ายใน flood_risk: forecast_start, forecast_fetched_at, forecast_daily_mm (ฝนรายวันคั่นด้วย | ช่องว่าง = ไม่มีข้อมูลวันนั้น), cap_headlines, tmd_warning_title, tmd_warning_text; ใน flood_wl_critical: amphoe, basin_name
• ประชากรกลุ่มเปราะบางมาจากชีต Vulnerable_group ที่แดชบอร์ดอ่านอยู่แล้ว (จับคู่ด้วยชื่อจังหวัด) ไม่ต้องมีข้อมูลเพิ่ม
• แผนที่ fit กรอบใหม่ด้วย ResizeObserver และไม่ fit ขณะคอนเทนเนอร์ขนาด 0 (แท็บถูกซ่อน/กริดยังไม่จัด)
• เพิ่ม/เปลี่ยนคอลัมน์ในชีต: ปรับ REQUIRED/NUMERIC/DATES และ transform() ใน flood_web/server.py กับ transform_ ใน Code.gs ให้ตรงกัน แล้วรัน python build.py

แท็บ "ศูนย์พักพิง DOH" (เฉพาะ GitHub Pages)

แสดงผลประเมินสุขาภิบาลสิ่งแวดล้อมของศูนย์พักพิงชั่วคราวจากแท็บ doh_shelter ในชีตเดียวกัน (ชีตต้องเปิดแบบ "ทุกคนที่มีลิงก์อ่านได้")

• doh_shelter/build_doh_shelter.py อ่าน CSV ของแท็บ → docs/doh_shelter.json (แปลงวันที่ พ.ศ./ค.ศ., เลือกการประเมินล่าสุดต่อศูนย์ is_latest, คำนวณร้อยละผ่านเกณฑ์ score, ตรวจว่าคอลัมน์ที่ต้องใช้ครบ ถ้าไม่ครบจะล้มพร้อมข้อความ) รันใน pages.yml แบบ continue-on-error
• ไม่เผยแพร่ชื่อผู้รายงาน; ลิงก์ภาพ Google Drive แสดงได้ (ต้องเป็น https)
• UI: flood_web/shelter-doh-view.js (บล็อก pages-only ใน template.html เหมือนแท็บข่าว)
• ทดสอบ: python doh_shelter/test_doh_shelter.py · รันในเครื่อง: python doh_shelter/build_doh_shelter.py && python build_pages.py
• แท็บมีแนวโน้มร้อยละข้อที่ได้ระดับ "ดี"/ผู้รับบริการสะสมรายวัน, รายการ "ศูนย์ที่ควรติดตามก่อน" (คะแนน = 40 ต่อข้อที่ต้องปรับปรุง + 10 ต่อข้อพอใช้ + 10 ถ้าศูนย์ที่เปิดอยู่ไม่ได้ประเมินเกิน 3 วัน; ค่าคงที่ STALE_DAYS ใน build_doh_shelter.py)
• แผนที่ใช้หน้าตาเดียวกับแผนที่สถานีน้ำระดับประเทศ: พื้นขาวไม่มีแผนที่ฐาน, เส้นเขตสุขภาพ + ปุ่มเลขเขต, ตัวกรองเขตสุขภาพ/จังหวัด/วันรายงาน ปภ., ปุ่มจัดแผนที่ให้พอดี, คำอธิบายมุมขวาล่าง (ย้ายไปใต้แผนที่บนมือถือ) และตัวกรองระดับผลประเมินแบบ filter-pill
• เลเยอร์แผนที่เรียงจากบนลงล่าง: (1) หมุดศูนย์พักพิงขนาดเท่ากัน สีตามร้อยละผ่านเกณฑ์ (2) เส้นเขตสุขภาพ (3) สีจังหวัดตามแนวโน้มระดับน้ำจากรายงาน ปภ. (Water_Level_Trend, เฉพาะแถว "กำลังประสบภัย", เลือกวันรายงานได้; เพิ่มขึ้น/ทรงตัว/ลดลง ใช้สีเดียวกับป้ายในตารางหลัก, ถ้าจังหวัดมีหลายแถวใช้แนวโน้มที่แย่สุด) จังหวัดที่ไม่อยู่ในรายงานไม่ได้แปลว่าไม่ท่วม
• เกณฑ์ประเมิน: ตามแดชบอร์ดต้นทางของเจ้าของข้อมูล (7 มิติ 32 ข้อ นิยามที่ ITEMS ใน build_doh_shelter.py) แต่ละข้อได้ ดี / พอใช้ / ต้องปรับปรุง ตามคำตอบ (ต้นทางเรียก ผ่าน / ติดตาม) (ข้อ "พบปัญหา..." กลับขั้ว; Q09 และผลคลอรีน ตัดสินจากข้อความคำตอบ) ระดับมิติ = ข้อที่แย่สุดในมิติ ระดับศูนย์ = มิติที่แย่สุด ไม่นับข้อที่ไม่ได้ตอบ ข้อ Q16/Q18 ใช้ตามต้นทาง (ไม่ใช่ = ต้องปรับปรุง) ซึ่งต่างจากตารางใน แนวทางจัดระดับศพพ.docx (พอใช้) ข้อ 3.2, 4, 12, 19.1, 19.2 (รวมผลคลอรีน) และ 21 ยังประเมินและแสดงรายข้อ แต่ไม่ถูกนับในระดับมิติ (อนุมานจากตัวเลขของต้นทาง ควรยืนยันกับเจ้าของแดชบอร์ด) ตัวเลขรายมิติตรงกับต้นทาง; ช่องข้อความ/ตัวเลข (จำนวนห้องส้วม ฯลฯ) เก็บเป็นข้อมูลประกอบ (SUPPLEMENTARY) ไม่นำมาคำนวณ

โครงสร้างและวิธีแก้ไข

• ต้นทางที่แก้ไข: flood_web/ (template.html, dashboard.js, data-model.js, dashboard.css, GeoJSON, server.py สำหรับทดสอบในเครื่อง)
• ไฟล์ที่สร้างอัตโนมัติ (อย่าแก้ตรงๆ): Index.html, Dashboard.html, DataModel.html, RiskView.html, WaterloggedView.html, Styles.html, *GeoJSON.html, Config.gs, schema.json, appsscript.json สร้างด้วย python build.py แล้ว commit
• เขียนมือ: Code.gs (อ่านชีต แปลงข้อมูล แคช 5 นาทีเมื่อรันบน Apps Script), fetch_data.cjs, build_pages.py, test.cjs

ลำดับหลังแก้หน้าเว็บ:

node flood_web/test_model.cjs
python flood_web/test_server.py
python build.py          # สร้างไฟล์ Apps Script จาก flood_web/
node test.cjs

ทดสอบหน้าจริงกับชีต: python flood_web/server.py แล้วเปิด http://127.0.0.1:8765/

หมายเหตุ

• Code.gs และไฟล์ที่สร้างอัตโนมัติยังใช้เป็น Apps Script ได้เหมือนเดิม (Deploy แยกได้) ส่วนเวอร์ชัน Pages ใช้ Code.gs ชุดเดียวกันผ่าน fetch_data.cjs
• เวอร์ชัน Pages อ่านข้อมูลสองขั้น: เปิดหน้าแล้วแสดง data.json ที่ Actions สร้างไว้ก่อน (เร็ว แต่ GitHub รัน schedule ไม่ตรงเวลา อาจเก่าหลายชั่วโมง) แล้วอ่านชีตสดจากเบราว์เซอร์ทันทีด้วย flood_web/live-sheets.js ซึ่งรัน Config.gs + Code.gs ชุดเดียวกับที่สร้าง data.json (ผลเหมือนกันทุกฟิลด์) แล้วเปลี่ยนเป็นข้อมูลสด ปุ่ม "รีเฟรชข้อมูล" และ "ลองใหม่" อ่านชีตสดเช่นกัน ถ้าแท็บไหนอ่านไม่ได้จะคงข้อมูลเดิมของแท็บนั้น ถ้าอ่านไม่ได้ทั้งหมดใช้ data.json และป้ายอายุข้อมูลจะบอก ใช้ได้เพราะชีตเปิดแบบ "ทุกคนที่มีลิงก์อ่านได้" และ Google ยอมรับ origin ของหน้า (CSV ทั้ง 5 แท็บรวมราว 3 MB ก่อนบีบอัด ต่อผู้เข้าชม 1 คนต่อครั้งที่อ่าน) แคช 5 นาทีมีผลเฉพาะบน Apps Script
• ขั้นตอน CI ตรวจว่าไฟล์ที่สร้างตรงกับ flood_web/ (python3 build.py แล้ว git diff --exit-code) หากไม่ตรงให้รัน python build.py แล้ว commit

แนวโน้มสถานี กทม.

แท็บ กทม. แสดง “เพิ่ม–คงตัว–ลด” ในตารางสถานีและการ์ดนับเขตตามพื้นที่ที่เลือก โดยอ่าน water_status_vs_24h_avg จาก BKK_water_DB ซึ่งเป็นผลเปรียบเทียบกับค่าเฉลี่ย 24 ชั่วโมงของสถานีนั้นตามเกณฑ์ต้นทาง ไม่ใช่รายงานแนวโน้มจาก ปภ. และไม่เปลี่ยนสถานะเตือนภัยเดิม ข้อมูลเกิน 24 ชั่วโมง เวลาไม่ถูกต้อง ระดับน้ำว่าง/-99 หรือไม่มีผลเทียบที่รู้จัก จะไม่ถูกนับในการ์ดและแสดง “ข้อมูลไม่เพียงพอ” ในตาราง คอลัมน์นี้เป็น optional เพื่อให้ชีตรุ่นเก่ายังอ่านได้

พรีวิวแผนที่ กทม.: สีพื้นและการ์ด เพิ่ม–คงตัว–ลด ใช้หน่วย เขต แต่ละเขตนับครั้งเดียวตามกลุ่มสถานีที่มีจำนวนมากที่สุดในเขตนั้น หากจำนวนสูงสุดเท่ากันใช้ “แนวโน้มผสม” และหากไม่มีผลที่ใช้ได้ใช้ “ข้อมูลไม่เพียงพอ” (แสดงจำนวนสองกลุ่มนี้แยกจากสามการ์ดหลัก) ตารางข้างแผนที่แสดงหนึ่งรายการต่อเขต ผลรวมทุกกลุ่มเท่ากับ 50 เขตเมื่อไม่กรอง หรือ 1 เขตเมื่อเลือกเขต รายสถานียังคงดูได้ใน popup และตารางรายละเอียดสถานี