ข้ามไปยังเนื้อหาหลัก

Data Components Showcase

ทดสอบ data-driven components: Chart, Metric, Comparison, Timeline, ProgressBar, Gauge, Heatmap, Funnel, Treemap, Waterfall

8 ก.พ. 2569 | 9 นาที

ยังไม่มีเวลาอ่าน? แชร์เก็บไว้ก่อนสิ!
TL;DR
  • ทดสอบ Chart (bar, horizontal bar, donut, area, scatter) — 10 สี
  • ทดสอบ Metric / MetricGroup / ProgressBar / Gauge (10 สี)
  • ทดสอบ DataTable (sort, search)
  • ทดสอบ Heatmap, Funnel (10 สี), Treemap, Waterfall
  • ทดสอบ Comparison (4 items), Timeline

Metric / MetricGroup

Revenue ฿1,250,000 +12.5%
Expenses ฿850,000 +3.2%
Profit Margin 32%

Chart — Bar (Multi-series, 4 colors)

ค่าใช้จ่าย Cloud ตามผู้ให้บริการ (พันบาท)

Chart — Pie (5 colors)

สัดส่วนค่าใช้จ่าย Cloud (5 หมวด)

Chart — Donut (10 colors)

สัดส่วนค่าใช้จ่าย AWS (10 หมวด)

Chart — Area (10 series)

แนวโน้มค่าใช้จ่าย Cloud (10 หมวด)

Chart — Line (Multi-series, 3 colors)

ประสิทธิภาพระบบรายเดือน

Chart — Radar (Multi-series, 2 colors)

Skill Assessment: ปัจจุบัน vs เป้าหมาย

Chart — Scatter (5 groups, 5 colors)

ความเสี่ยง vs ผลตอบแทน (5 ประเภทสินทรัพย์)


Comparison (4 items — 2x2 grid)

Generative AI

OpenAI, Anthropic, Mistral

ข้อดี

  • ตลาดใหญ่ที่สุด ($48B funding)
  • Adoption เร็วมาก
  • Network effects แข็งแกร่ง

ข้อเสีย

  • แข่งขันรุนแรง
  • ต้นทุน compute สูงมาก
  • P/S ratio 35x แพงสุด
return: 42% risk: สูงมาก ps: 35x

AI Infrastructure

NVIDIA, CoreWeave, Lambda

ข้อดี

  • ผลตอบแทนดีที่สุด (58%)
  • Picks & shovels strategy
  • Revenue visibility ดี

ข้อเสีย

  • พึ่งพา AI hype cycle
  • NVIDIA dominance risk
  • Capex สูง
return: 58% risk: สูง ps: 28x

AI Applications

Salesforce, ServiceNow, Adobe

ข้อดี

  • Sticky enterprise customers
  • Recurring revenue model
  • Lower valuation (18x)

ข้อเสีย

  • Slower AI adoption
  • Legacy tech debt
  • Competition from startups
return: 24% risk: ปานกลาง ps: 18x

AI Semiconductors

AMD, Intel, Qualcomm

ข้อดี

  • Diversified revenue
  • Edge AI opportunity
  • Lower P/S (12x)

ข้อเสีย

  • NVIDIA dominance
  • Slower growth (18%)
  • Execution risk
return: 18% risk: ปานกลาง ps: 12x

ถ้าเห็นทุก component แสดงผลถูกต้อง + สีครบ 10 สี = สำเร็จ!


Timeline

COVID Crash

ตลาดหุ้นทั่วโลกร่วง 30% ใน 1 เดือน

Bitcoin ATH

Bitcoin แตะ $69K สูงสุดเป็นประวัติการณ์

ChatGPT Launch

OpenAI เปิดตัว ChatGPT เปลี่ยนวงการ AI

SVB Collapse

Silicon Valley Bank ล้มละลาย

Bitcoin ETF Approved

SEC อนุมัติ Bitcoin Spot ETF ครั้งแรก

Fed Rate Cut

Fed ลดดอกเบี้ยครั้งแรกในรอบ 4 ปี

AI Regulation

EU AI Act มีผลบังคับใช้เต็มรูปแบบ


ProgressBar — ตัวชี้วัดโมเดล ML (10 สี)

ความแม่นยำ (Accuracy) 94%
ความเที่ยงตรง (Precision) 91%
การเรียกคืน (Recall) 88%
คะแนน F1 89%
พื้นที่ใต้เส้นโค้ง (AUC) 96%
สัมประสิทธิ์ MCC 82%
ความจำเพาะ (Specificity) 93%
ความไว (Sensitivity) 87%
ค่า Kappa 79%
Log Loss 85%

Gauge — Threshold (asc: สูง = แย่)

Gauge — Threshold (desc: สูง = ดี)

Gauge — Single Color (ไม่มี threshold)

หมายเหตุ: Gauge ใช้สี semantic: เขียว (ดี), เหลือง (ระวัง), แดง (อันตราย) สำหรับ threshold mode และ chart color สำหรับ single-color mode


Heatmap — เมทริกซ์สหสัมพันธ์

ความสัมพันธ์ระหว่างตัวแปร (6x6)


Funnel — ช่องทางการขาย (10 ขั้น, 10 สี)

ช่องทางการขายแบบเต็ม


Treemap — ค่าใช้จ่าย FinOps (10 กลุ่ม)

ค่าใช้จ่าย AWS รายเดือน (10 กลุ่ม)


Waterfall — งบกำไรขาดทุน

งบกำไรขาดทุน ไตรมาส 4

หมายเหตุ: Waterfall ใช้สี semantic: เขียว (เพิ่ม), แดง (ลด), primary (รวม)


Chart — Horizontal Bar (Multi-series, 5 colors)

รายได้ตามภูมิภาค (ล้านบาท)

ชอบบทความนี้? แชร์ให้เพื่อนด้วยสิ!

รับบทความผ่านทางอีเมล

บทความที่เกี่ยวข้อง