Dashboard Patterns

KPI Cards — ตัวเลขสรุปหน้า Dashboard

KPI card ต้องอยู่แถวบนสุดเสมอ — ให้ผู้ใช้เห็นตัวเลขสำคัญที่สุดก่อนกราฟ:

KPI Cards จริง · 4 ใบเรียงด้วย CSS Grid

กำลังผลิตติดตั้ง3,036 MW▲ +4.2% จากปีก่อน

ผลิตไฟฟ้ารวม18,247 GWh▲ +3.8% จากปีก่อน

จำนวนโครงการ47 แห่ง▲ +2 จากปีก่อน

ประสิทธิภาพ92.4 %● คงที่

ตัวเลขหลักใช้ #22242A ไม่ใช้สีส้ม — สีส้มสงวนไว้เป็น accent/CTA เท่านั้นตามกฎ 60-30-10 (ดู Color Palette)

แถวบนสุด = KPI card เสมอ — ให้ผู้ใช้เห็นตัวเลขสำคัญที่สุดก่อนกราฟ
ตัวเลขหลักใน KPI card ใช้ color.text-strong (#22242A) ไม่ใช้สีส้ม — สีส้มสงวนไว้เป็น accent/CTA เท่านั้นตามกฎ 60-30-10
ทิศทางเทรนด์ (เพิ่ม/ลด) สื่อด้วยไอคอนลูกศร + สีเสริม ไม่ใช่สีแดง/เขียวมาตรฐาน — ใช้ #C43400 (แนวโน้มที่ต้องระวัง) และ green accent #009C8D (แนวโน้มบวก) ให้อยู่ในจานสีแบรนด์เสมอ
Card ใช้สเปกเดียวกับ Buttons & Cards — border, radius, elevation มาตรฐานเดียวกันทั้งเว็บ

ใช้ grid 12 คอลัมน์เดียวกับ Layout & Navigation — จัดกราฟตามน้ำหนักความสำคัญ ไม่ใช่ขนาดเท่ากันหมด:

Dashboard Grid Preview · 12-column grid จริง

KPI 1

KPI 2

KPI 3

KPI 4

กราฟหลัก (เต็มความกว้าง) — Trend / Comparison

กราฟรอง (8 คอลัมน์)

กราฟเสริม (4 คอลัมน์)

ข้อมูลประกอบ (6)

ระยะห่างระหว่างกราฟใช้ space.6 (24px) คงที่ทุกจุด

กราฟหลัก 1 ตัวต่อหน้า — ตัวที่ตอบคำถามสำคัญที่สุดของ dashboard นั้น วางเต็มความกว้างหรือกว้างที่สุด
กราฟรอง/เสริม จัดตาม column span 12/8/4 ไม่ใช้สัดส่วนอิสระ
ระยะห่างระหว่างกราฟใช้ space.6 (24px) คงที่ทุกจุด

KPI Card แบบแยก · แสดงทุกองค์ประกอบ

ป้ายชื่อ (Dark Grey, sm)3,036 MW▼ -1.2% จากไตรมาสก่อน

Card ประกอบด้วย label → value + unit → trend · padding 18/20px · radius 14px

รายละเอียดชนิดกราฟที่ใช้ในแต่ละช่องดูที่ Chart Selection Rules และธีมสี/ฟอนต์ที่ Chart.js Theme