# Worldview Dashboard

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
## Table of Contents

- [เกี่ยวกับโปรเจกต์](#เกี่ยวกับโปรเจกต์)
- [ฟีเจอร์หลัก](#ฟีเจอร์หลัก)
- [ภาพรวม Tech Stack](#ภาพรวม-tech-stack)
- [การติดตั้งและเริ่มต้นใช้งาน](#การติดตั้งและเริ่มต้นใช้งาน)
    - [Prerequisites](#prerequisites)
    - [Clone Repository](#clone-repository)
    - [การติดตั้ง Dependencies](#การติดตั้ง-dependencies)
    - [การรัน Development Server](#การรัน-development-server)
    - [การสร้าง Production Build](#การสร้าง-production-build)
- [โครงสร้างไฟล์ของโปรเจกต์](#โครงสร้างไฟล์ของโปรเจกต์)
- [วิธีใช้งาน Dashboard](#วิธีใช้งาน-dashboard)
- [การมีส่วนร่วม](#การมีส่วนร่วม)
- [License](#license)
- [ติดต่อ](#ติดต่อ)
- [Acknowledgements](#acknowledgements)

---

## เกี่ยวกับโปรเจกต์

**Worldview Dashboard** เป็นเว็บแอปพลิเคชันเชิงโต้ตอบที่นำเสนอข้อมูลข่าวสารและสถิติสำคัญทั่วโลกผ่านแผนที่ 3 มิติแบบไดนามิก และสามารถสลับไปเป็นแผนที่ 2 มิติในมุมมองเฉพาะพื้นที่ได้ พัฒนาขึ้นเพื่อเป็นเครื่องมือในการสำรวจข้อมูลเชิงภูมิศาสตร์ในรูปแบบที่ทันสมัยและน่าดึงดูดใจ

โปรเจกต์นี้ใช้ประโยชน์จากพลังของ React และ React Three Fiber ในการเรนเดอร์โลก 3 มิติที่สวยงาม พร้อมด้วย Three.js สำหรับการจัดการฉาก 3D ที่ซับซ้อน และ Leaflet สำหรับการแสดงแผนที่ 2 มิติที่คุ้นเคย

## ฟีเจอร์หลัก

* **Interactive 3D Globe (Global View):**
    * แสดงโลก 3 มิติแบบหมุนได้ พร้อมเอฟเฟกต์พื้นหลังดวงดาว (Starfield).
    * **Markers (หมุด):** แสดงตำแหน่งของเหตุการณ์ข่าวสารหรือจุดข้อมูลสถิติต่างๆ ทั่วโลก (สามารถกรองตามโหมด News/Stats).
    * **Connection Lines:** เส้นเชื่อมโยงระหว่างจุดที่สำคัญหรือมีความสัมพันธ์กัน.
    * **Orbiting Satellites:** ดาวเทียม 3D โคจรรอบโลก เพิ่มความสมจริงและน่าสนใจ (หากได้ทำการเพิ่มฟีเจอร์นี้แล้ว).
    * **Dynamic Rotation:** โลกจะหมุนไปยังตำแหน่งของ Panel ที่ถูกเลือกโดยอัตโนมัติ.

* **Local 2D Map View:**
    * **Seamless Transition:** เมื่อผู้ใช้ซูมเข้าใกล้โลก 3D ถึงระดับหนึ่ง จะสลับไปแสดงแผนที่ 2 มิติ (Leaflet) ในบริเวณนั้นโดยอัตโนมัติ.
    * แสดง Marker ในมุมมองแผนที่ 2 มิติ.
    * ปุ่มสำหรับกลับไปยัง Global 3D View.

* **Dynamic Information Panels:**
    * แผงควบคุมด้านข้างที่แสดงข้อมูลรายละเอียดเมื่อคลิกที่ Marker หรือเลือก Panel จาก Global Navigation.
    * **โหมด News:** แสดงหัวข้อข่าวสารและเนื้อหาที่เกี่ยวข้องกับภูมิภาคที่เลือก.
    * **โหมด Statistics:** แสดงข้อมูลสถิติต่างๆ เช่น ดัชนีตลาด, สถิติประชากร, การใช้พลังงาน.
    * **Live Time & Population Display:** แสดงเวลาปัจจุบันและตัวเลขประมาณการประชากรโลกที่มุมขวาบน.

* **Global Navigation:**
    * เมนูนำทางทางซ้ายมือสำหรับเลือกดูข้อมูลข่าวสารหรือสถิติในแต่ละ Panel.
    * สลับโหมดหลักระหว่าง "NEWS" และ "STATISTICS".

* **Pop-up Details:**
    * แสดงข้อมูลสรุปสั้นๆ เมื่อคลิกที่ Marker บนโลก 3D หรือแผนที่ 2D.

## ภาพรวม Tech Stack

* **Frontend Framework:** [React](https://react.dev/)
* **3D Graphics:** [Three.js](https://threejs.org/) และ [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) (React renderer สำหรับ Three.js)
* **3D Utilities (Drei):** [@react-three/drei](https://github.com/pmndrs/drei)
* **2D Mapping:** [Leaflet](https://leafletjs.com/) และ [React-Leaflet](https://react-leaflet.js.org/) (สำหรับใช้งาน Leaflet ใน React)
* **Styling:** [Tailwind CSS](https://tailwindcss.com/) และ [DaisyUI](https://daisyui.com/) (Component library สำหรับ Tailwind)
* **Version Control:** [Git](https://git-scm.com/)
* **Git Hosting:** [Gitea](https://gitea.io/en-us/)

## การติดตั้งและเริ่มต้นใช้งาน

ทำตามขั้นตอนด้านล่างเพื่อตั้งค่าและรัน Worldview Dashboard บนเครื่องของคุณ

### Prerequisites

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งสิ่งต่อไปนี้แล้ว:

* [Node.js](https://nodejs.org/en) (แนะนำ LTS version)
* [npm](https://www.npmjs.com/) (มาพร้อมกับ Node.js) หรือ [Yarn](https://yarnpkg.com/)

### Clone Repository

เริ่มต้นด้วยการ clone repository ของโปรเจกต์นี้:

```bash
git clone https://gitea.softwarecraft.tech/gitea/Worldview_Dashboard.git

```

### การติดตั้ง Dependencies

หลังจาก clone โปรเจกต์แล้ว ให้ติดตั้ง packages ที่จำเป็นทั้งหมด:

```bash
npm install
```

### การรัน Development Server
หากต้องการรันแอปพลิเคชันในโหมดพัฒนา (development mode):

```bash
npm run dev
```

### License
โปรเจกต์นี้เผยแพร่ภายใต้ MIT License

### Acknowledgements
ขอบคุณผู้สร้างและทีมพัฒนาของ React, React Three Fiber, Three.js, Leaflet, Tailwind CSS, DaisyUI, และไลบรารี Open Source อื่น ๆ ที่เป็นส่วนสำคัญของโปรเจกต์นี้ครับ