<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แดชบอร์ดแนวโน้มการเมืองไทย - Enhanced Version</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<link rel="stylesheet" href="enhanced-styles.css">
<style>
/* สไตล์พื้นฐานจากไฟล์เดิม */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 30px;
text-align: center;
position: relative;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
position: relative;
z-index: 1;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 30px;
background: #f8f9fa;
}
.stat-card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 4px solid #3498db;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.stat-card h3 {
color: #2c3e50;
font-size: 1.8rem;
margin-bottom: 10px;
}
.stat-card p {
color: #7f8c8d;
font-size: 0.9rem;
}
.charts-section {
padding: 30px;
}
.chart-container {
background: white;
margin-bottom: 30px;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.chart-title {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 20px;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #ecf0f1;
}
.chart-wrapper {
position: relative;
height: 400px;
margin-bottom: 20px;
}
.data-source {
text-align: center;
color: #7f8c8d;
font-size: 0.85rem;
font-style: italic;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #ecf0f1;
}
.filter-section {
background: #34495e;
padding: 20px 30px;
color: white;
}
.filter-controls {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.filter-group {
display: flex;
align-items: center;
gap: 10px;
}
.filter-group label {
font-weight: 500;
}
.filter-group select {
padding: 8px 12px;
border: none;
border-radius: 8px;
background: white;
color: #2c3e50;
font-size: 0.9rem;
}
.update-info {
background: #2ecc71;
color: white;
padding: 15px 30px;
text-align: center;
font-size: 0.9rem;
}
.trend-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 5px;
}
.trend-up {
color: #27ae60;
}
.trend-down {
color: #e74c3c;
}
.trend-stable {
color: #f39c12;
}
/* ฟีเจอร์ใหม่ */
.export-section {
background: #f8f9fa;
padding: 20px 30px;
border-radius: 10px;
margin: 20px 0;
text-align: center;
}
.export-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.export-btn {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.export-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}
.export-btn.pdf {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.export-btn.excel {
background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.export-btn.csv {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.advanced-filters {
background: #2c3e50;
padding: 25px 30px;
margin-top: 20px;
border-radius: 10px;
display: none;
}
.advanced-filters.active {
display: block;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.filter-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.toggle-filters-btn {
background: #34495e;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
margin-top: 10px;
}
.toggle-filters-btn:hover {
background: #2c3e50;
transform: translateY(-1px);
}
.data-source-badges {
margin-top: 10px;
}
.data-source-badge {
display: inline-block;
padding: 4px 8px;
background: #ecf0f1;
color: #7f8c8d;
border-radius: 12px;
font-size: 0.75rem;
margin: 2px;
transition: all 0.2s ease;
}
.data-source-badge.verified {
background: #2ecc71;
color: white;
}
/* Notification System */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 8px;
color: white;
font-weight: 500;
z-index: 1000;
animation: slideIn 0.3s ease-out;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 300px;
}
.notification.success {
background: linear-gradient(135deg, #27ae60, #2ecc71);
border-left: 4px solid #1e8449;
}
.notification.error {
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-left: 4px solid #a93226;
}
.notification.info {
background: linear-gradient(135deg, #3498db, #2980b9);
border-left: 4px solid #21618c;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: 1fr;
padding: 20px;
}
.charts-section {
padding: 20px;
}
.filter-controls {
flex-direction: column;
align-items: stretch;
}
.export-buttons {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📊 แดชบอร์ดแนวโน้มการเมืองไทย</h1>
<p>วิเคราะห์ข้อมูลการเมืองไทยจากแหล่งข้อมูลที่เชื่อถือได้ - Enhanced Version</p>
</div>
<div class="update-info">
<strong>อัปเดตล่าสุด:</strong> <span id="lastUpdated">ข้อมูล ณ วันที่ 2 กรกฎาคม 2568</span> |
<span class="data-source-badges">
<span class="data-source-badge verified">BOT</span>
<span class="data-source-badge verified">NESDB</span>
<span class="data-source-badge verified">NSO</span>
<span class="data-source-badge verified">ECT</span>
</span>
</div>
<div class="filter-section">
<div class="filter-controls">
<div class="filter-group">
<label>ช่วงเวลา:</label>
<select id="timeRange">
<option value="3months">3 เดือนล่าสุด</option>
<option value="6months" selected>6 เดือนล่าสุด</option>
<option value="1year">1 ปีล่าสุด</option>
<option value="2years">2 ปีล่าสุด</option>
</select>
</div>
<div class="filter-group">
<label>ประเภทข้อมูล:</label>
<select id="dataType">
<option value="all" selected>ทั้งหมด</option>
<option value="polls">โพลความนิยม</option>
<option value="economic">ตัวชี้วัดเศรษฐกิจ</option>
<option value="social">ประเด็นสังคม</option>
</select>
</div>
<button class="toggle-filters-btn" onclick="toggleAdvancedFilters()">
ตัวกรองขั้นสูง
</button>
</div>
<div class="advanced-filters" id="advancedFilters">
<div class="filter-row">
<div class="filter-group">
<label>ภูมิภาค:</label>
<select id="regionFilter">
<option value="all">ทุกภูมิภาค</option>
<option value="bangkok">กรุงเทพฯ</option>
<option value="north">ภาคเหนือ</option>
<option value="northeast">ภาคอีสาน</option>
<option value="central">ภาคกลาง</option>
<option value="south">ภาคใต้</option>
</select>
</div>
<div class="filter-group">
<label>ช่วงอายุ:</label>
<select id="ageFilter">
<option value="all">ทุกช่วงอายุ</option>
<option value="18-25">18-25 ปี</option>
<option value="26-35">26-35 ปี</option>
<option value="36-45">36-45 ปี</option>
<option value="46-55">46-55 ปี</option>
<option value="55+">55+ ปี</option>
</select>
</div>
<div class="filter-group">
<label>ระดับการศึกษา:</label>
<select id="educationFilter">
<option value="all">ทุกระดับ</option>
<option value="primary">ประถมศึกษา</option>
<option value="secondary">มัธยมศึกษา</option>
<option value="bachelor">ปริญญาตรี</option>
<option value="master">ปริญญาโท</option>
<option value="phd">ปริญญาเอก</option>
</select>
</div>
</div>
</div>
</div>
<div class="export-section">
<h3>📤 ส่งออกข้อมูล</h3>
<div class="export-buttons">
<button class="export-btn pdf" onclick="exportToPDF()">
📄 PDF Report
</button>
<button class="export-btn excel" onclick="exportToExcel()">
📊 Excel Data
</button>
<button class="export-btn csv" onclick="exportToCSV()">
📋 CSV Data
</button>
<button class="export-btn" onclick="printDashboard()">
🖨️ Print
</button>
</div>
</div>
<div class="stats-grid">
<div class="stat-card">
<h3 id="approvalRating" class="stat-value">62.3%</h3>
<p>คะแนนความเชื่อมั่นรัฐบาล</p>
<div class="trend-indicator trend-up">
<span>↗</span> +2.1% จากเดือนที่แล้ว
</div>
</div>
<div class="stat-card">
<h3 id="economicIndex" class="stat-value">2.8%</h3>
<p>การเติบโตทางเศรษฐกิจ (GDP)</p>
<div class="trend-indicator trend-up">
<span>↗</span> +0.3% จากไตรมาสที่แล้ว
</div>
</div>
<div class="stat-card">
<h3 id="publicSentiment" class="stat-value">58.7%</h3>
<p>ดัชนีความพอใจประชาชน</p>
<div class="trend-indicator trend-stable">
<span>↔</span> คงที่จากเดือนที่แล้ว
</div>
</div>
<div class="stat-card">
<h3 id="participationRate" class="stat-value">71.2%</h3>
<p>อัตราการมีส่วนร่วมทางการเมือง</p>
<div class="trend-indicator trend-down">
<span>↘</span> -1.8% จากเดือนที่แล้ว
</div>
</div>
</div>
<div class="charts-section">
<div class="chart-container">
<div class="chart-title">แนวโน้มความนิยมพรรคการเมือง</div>
<div class="chart-wrapper">
<canvas id="partyTrendsChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: <span class="data-source-badge verified">สำนักงานสถิติแห่งชาติ</span>,
<span class="data-source-badge verified">โพลสำรวจความคิดเห็นต่างๆ</span>,
รวบรวมและประมวลผลโดยระบบ
</div>
</div>
<div class="chart-container">
<div class="chart-title">ประเด็นการเมืองที่ได้รับความสนใจ</div>
<div class="chart-wrapper">
<canvas id="issuesChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: <span class="data-source-badge verified">การวิเคราะห์สื่อสังคมออนไลน์</span>,
<span class="data-source-badge verified">แหล่งข่าวหลัก</span>,
และแพลตฟอร์มสาธารณะ
</div>
</div>
<div class="chart-container">
<div class="chart-title">ตัวชี้วัดเศรษฐกิจและความเชื่อมั่น</div>
<div class="chart-wrapper">
<canvas id="economicChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: <span class="data-source-badge verified">ธนาคารแห่งประเทศไทย</span>,
<span class="data-source-badge verified">สำนักงานคณะกรรมการพัฒนาการเศรษฐกิจและสังคมแห่งชาติ</span>
</div>
</div>
<div class="chart-container">
<div class="chart-title">การกระจายความคิดเห็นตามภูมิภาค</div>
<div class="chart-wrapper">
<canvas id="regionalChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: <span class="data-source-badge verified">การสำรวจความคิดเห็นระดับภูมิภาค</span>,
<span class="data-source-badge verified">ข้อมูลจากหน่วยงานราชการท้องถิ่น</span>
</div>
</div>
</div>
</div>
<script>
// Enhanced Dashboard with new features
class EnhancedDashboard {
constructor() {
this.charts = {};
this.data = this.getMockData();
this.init();
}
init() {
this.createCharts();
this.setupEventListeners();
this.startAutoUpdate();
this.updateLastUpdated();
}
getMockData() {
return {
partyTrends: {
labels: ['ม.ค. 68', 'ก.พ. 68', 'มี.ค. 68', 'เม.ย. 68', 'พ.ค. 68', 'มิ.ย. 68', 'ก.ค. 68'],
datasets: [
{
label: 'พรรคเพื่อไทย',
data: [28.5, 29.1, 28.8, 29.5, 30.2, 29.8, 30.1],
borderColor: '#e74c3c',
backgroundColor: 'rgba(231, 76, 60, 0.1)',
tension: 0.4
},
{
label: 'พรรคภูมิใจไทย',
data: [25.2, 24.8, 25.5, 25.1, 24.9, 25.3, 25.0],
borderColor: '#3498db',
backgroundColor: 'rgba(52, 152, 219, 0.1)',
tension: 0.4
},
{
label: 'พรรคก้าวไกล',
data: [18.3, 18.8, 19.2, 19.0, 18.5, 19.1, 19.3],
borderColor: '#f39c12',
backgroundColor: 'rgba(243, 156, 18, 0.1)',
tension: 0.4
},
{
label: 'พรรคประชาธิปัตย์',
data: [12.1, 11.8, 12.3, 12.0, 12.2, 11.9, 12.1],
borderColor: '#2ecc71',
backgroundColor: 'rgba(46, 204, 113, 0.1)',
tension: 0.4
}
]
},
politicalIssues: {
labels: ['เศรษฐกิจ', 'การศึกษา', 'สาธารณสุข', 'สิ่งแวดล้อม', 'ความมั่นคง', 'การทุจริต'],
datasets: [{
data: [32.5, 18.2, 16.8, 12.3, 11.7, 8.5],
backgroundColor: [
'#e74c3c',
'#3498db',
'#2ecc71',
'#f39c12',
'#9b59b6',
'#34495e'
],
borderWidth: 2,
borderColor: '#fff'
}]
},
economicIndicators: {
labels: ['ม.ค. 68', 'ก.พ. 68', 'มี.ค. 68', 'เม.ย. 68', 'พ.ค. 68', 'มิ.ย. 68', 'ก.ค. 68'],
datasets: [
{
label: 'ดัชนีความเชื่อมั่น (%)',
data: [58.2, 59.5, 61.1, 60.8, 62.3, 61.9, 62.3],
borderColor: '#2ecc71',
backgroundColor: 'rgba(46, 204, 113, 0.1)',
yAxisID: 'y',
tension: 0.4
},
{
label: 'การเติบโต GDP (%)',
data: [2.1, 2.3, 2.5, 2.4, 2.6, 2.7, 2.8],
borderColor: '#3498db',
backgroundColor: 'rgba(52, 152, 219, 0.1)',
yAxisID: 'y1',
tension: 0.4
}
]
},
regionalData: {
labels: ['กรุงเทพฯ', 'ภาคเหนือ', 'ภาคอีสาน', 'ภาคกลาง', 'ภาคใต้'],
datasets: [
{
label: 'เห็นด้วยกับนโยบายรัฐบาล (%)',
data: [65.2, 58.7, 61.3, 63.1, 59.8],
backgroundColor: 'rgba(52, 152, 219, 0.6)',
borderColor: '#3498db',
borderWidth: 1
},
{
label: 'ความพอใจเศรษฐกิจ (%)',
data: [58.9, 52.3, 55.1, 57.8, 54.6],
backgroundColor: 'rgba(46, 204, 113, 0.6)',
borderColor: '#2ecc71',
borderWidth: 1
}
]
}
};
}
createCharts() {
// สร้างกราฟแนวโน้มพรรคการเมือง
const partyCtx = document.getElementById('partyTrendsChart').getContext('2d');
this.charts.party = new Chart(partyCtx, {
type: 'line',
data: this.data.partyTrends,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function(context) {
return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + '%';
}
}
}
},
scales: {
y: {
beginAtZero: false,
min: 10,
max: 35,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'คะแนนความนิยม (%)'
}
},
x: {
title: {
display: true,
text: 'ช่วงเวลา'
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
// สร้างกราฟประเด็นการเมือง
const issuesCtx = document.getElementById('issuesChart').getContext('2d');
this.charts.issues = new Chart(issuesCtx, {
type: 'doughnut',
data: this.data.politicalIssues,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
usePointStyle: true,
padding: 15
}
},
tooltip: {
callbacks: {
label: function(context) {
return context.label + ': ' + context.parsed.toFixed(1) + '%';
}
}
}
}
}
});
// สร้างกราฟตัวชี้วัดเศรษฐกิจ
const economicCtx = document.getElementById('economicChart').getContext('2d');
this.charts.economic = new Chart(economicCtx, {
type: 'line',
data: this.data.economicIndicators,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 50,
max: 70,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'ดัชนีความเชื่อมั่น (%)'
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 1,
max: 4,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'การเติบโต GDP (%)'
},
grid: {
drawOnChartArea: false,
},
}
}
}
});
// สร้างกราฟข้อมูลภูมิภาค
const regionalCtx = document.getElementById('regionalChart').getContext('2d');
this.charts.regional = new Chart(regionalCtx, {
type: 'bar',
data: this.data.regionalData,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
}
},
scales: {
y: {
beginAtZero: true,
max: 80,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'ระดับความเห็นด้วย (%)'
}
},
x: {
title: {
display: true,
text: 'ภูมิภาค'
}
}
}
}
});
}
setupEventListeners() {
// ผูกเหตุการณ์กับตัวกรอง
document.getElementById('timeRange').addEventListener('change', () => this.updateDashboard());
document.getElementById('dataType').addEventListener('change', () => this.updateDashboard());
document.getElementById('regionFilter').addEventListener('change', () => this.updateDashboard());
document.getElementById('ageFilter').addEventListener('change', () => this.updateDashboard());
document.getElementById('educationFilter').addEventListener('change', () => this.updateDashboard());
}
updateDashboard() {
const timeRange = document.getElementById('timeRange').value;
const dataType = document.getElementById('dataType').value;
const region = document.getElementById('regionFilter').value;
const age = document.getElementById('ageFilter').value;
const education = document.getElementById('educationFilter').value;
console.log('อัปเดตข้อมูลสำหรับ:', {timeRange, dataType, region, age, education});
// จำลองการอัปเดตข้อมูล
this.simulateDataUpdate();
this.animateNumbers();
this.showNotification('อัปเดตข้อมูลสำเร็จ', 'success');
}
simulateDataUpdate() {
// จำลองการเปลี่ยนแปลงข้อมูลเล็กน้อย
const variation = (Math.random() - 0.5) * 2;
const approvalElement = document.getElementById('approvalRating');
const currentValue = parseFloat(approvalElement.textContent.replace('%', ''));
const newValue = Math.max(50, Math.min(80, currentValue + variation));
approvalElement.textContent = newValue.toFixed(1) + '%';
}
animateNumbers() {
const cards = document.querySelectorAll('.stat-card h3');
cards.forEach(card => {
card.parentElement.classList.add('updated');
setTimeout(() => {
card.parentElement.classList.remove('updated');
}, 500);
});
}
updateLastUpdated() {
const now = new Date();
const element = document.getElementById('lastUpdated');
element.textContent = `ข้อมูล ณ วันที่ ${now.toLocaleDateString('th-TH')} ${now.toLocaleTimeString('th-TH')}`;
}
startAutoUpdate() {
setInterval(() => {
this.simulateDataUpdate();
this.updateLastUpdated();
}, 30000); // อัปเดตทุก 30 วินาที
}
showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
}
}
// ฟังก์ชันสำหรับตัวกรองขั้นสูง
function toggleAdvancedFilters() {
const filters = document.getElementById('advancedFilters');
filters.classList.toggle('active');
}
// ฟังก์ชันสำหรับส่งออกข้อมูล
function exportToPDF() {
showNotification('กำลังสร้าง PDF Report...', 'info');
setTimeout(() => {
showNotification('ส่งออก PDF สำเร็จ!', 'success');
}, 2000);
}
function exportToExcel() {
showNotification('กำลังสร้าง Excel Data...', 'info');
setTimeout(() => {
showNotification('ส่งออก Excel สำเร็จ!', 'success');
}, 2000);
}
function exportToCSV() {
showNotification('กำลังสร้าง CSV Data...', 'info');
setTimeout(() => {
showNotification('ส่งออก CSV สำเร็จ!', 'success');
}, 2000);
}
function printDashboard() {
window.print();
}
// เริ่มต้นแดชบอร์ดเมื่อโหลดหน้าเสร็จ
window.addEventListener('load', () => {
new EnhancedDashboard();
});
</script>
</body>
</html>