204 lines
7.2 KiB
PHP
204 lines
7.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard Monitoring Daya</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<div id="content">
|
|
<header>
|
|
<div class="container">
|
|
<h1 class="title_h1">Dashboard Monitoring Daya</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="dashboard">
|
|
<div id="dateFilter">
|
|
<!-- <label for="date">Pilih Tanggal:</label> -->
|
|
<input type="date" id="date">
|
|
<button class="btn" onclick="filterData()"><i class="bi bi-search"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nama">
|
|
<div class="chart-nama">
|
|
<h1> Pengukuran Tegangan </h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-tegangan-arus">
|
|
<div class="chart-container">
|
|
<canvas id="voltageChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nama">
|
|
<div class="chart-nama">
|
|
<h1> Pengukuran Arus </h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-tegangan-arus">
|
|
<div class="chart-container">
|
|
<canvas id="currentChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p class="copyright">© 2024 Dashboard Monitoring Daya</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<button id="scrollTopBtn" class="scroll-top-btn" onclick="scrollToTop()"> ⇧</button>
|
|
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Mendapatkan elemen input tanggal
|
|
var tanggalInput = document.getElementById("date");
|
|
|
|
// Mendapatkan tanggal hari ini
|
|
var today = new Date();
|
|
var day = String(today.getDate()).padStart(2, '0');
|
|
var month = String(today.getMonth() + 1).padStart(2, '0'); // Januari adalah 0!
|
|
var year = today.getFullYear();
|
|
|
|
// Format YYYY-MM-DD
|
|
var todayFormatted = year + '-' + month + '-' + day;
|
|
|
|
// Mengatur nilai input tanggal ke hari ini
|
|
tanggalInput.value = todayFormatted;
|
|
filterData();
|
|
|
|
|
|
});
|
|
|
|
let voltageChart, currentChart;
|
|
|
|
function createCharts(data) {
|
|
const ctx1 = document.getElementById('voltageChart').getContext('2d');
|
|
const ctx2 = document.getElementById('currentChart').getContext('2d');
|
|
|
|
// Mendapatkan nilai minimum untuk tegangan dan arus dari data
|
|
const minVoltage = Math.min(...data.map(item => item.tegangan));
|
|
const minCurrent = Math.min(...data.map(item => item.arus));
|
|
|
|
// Tentukan nilai minimum yang akan digunakan
|
|
const minVoltageValue = Math.floor(minVoltage) - 2; // Dimulai dari nilai minimum tegangan dikurangi 2
|
|
const minCurrentValue = Math.floor(minCurrent) - 2; // Dimulai dari nilai minimum arus dikurangi 2
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
time: {
|
|
unit: 'hour'
|
|
}
|
|
},
|
|
y: {
|
|
// Skala untuk tegangan (V)
|
|
voltage: {
|
|
beginAtZero: false,
|
|
suggestedMin: minVoltageValue
|
|
},
|
|
// Skala untuk arus (A)
|
|
current: {
|
|
beginAtZero: false,
|
|
suggestedMin: minCurrentValue
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
voltageChart = new Chart(ctx1, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.map(item => item.waktu),
|
|
datasets: [{
|
|
label: 'Tegangan (V)',
|
|
data: data.map(item => ({ x: item.waktu, y: item.tegangan })),
|
|
borderColor: '#1a237e',
|
|
backgroundColor: 'rgba(26, 35, 126, 0.1)',
|
|
tension: 0.1
|
|
}]
|
|
},
|
|
options: chartOptions
|
|
});
|
|
|
|
currentChart = new Chart(ctx2, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.map(item => item.waktu),
|
|
datasets: [{
|
|
label: 'Arus (A)',
|
|
data: data.map(item => ({ x: item.waktu, y: item.arus })),
|
|
borderColor: '#3949ab',
|
|
backgroundColor: 'rgba(57, 73, 171, 0.1)',
|
|
tension: 0.1
|
|
}]
|
|
},
|
|
options: chartOptions
|
|
});
|
|
}
|
|
|
|
|
|
function filterData() {
|
|
const date = document.getElementById('date').value;
|
|
|
|
fetch(`get_data.php?date=${date}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (voltageChart) voltageChart.destroy();
|
|
if (currentChart) currentChart.destroy();
|
|
createCharts(data);
|
|
});
|
|
}
|
|
|
|
// Inisialisasi grafik dengan semua data
|
|
|
|
setInterval(() => {
|
|
filterData();
|
|
}, 10000);
|
|
|
|
fetch('get_data.php')
|
|
.then(response => response.json())
|
|
.then(data => createCharts(data));
|
|
|
|
// Tampilkan tombol ketika pengguna scroll ke bawah 20px dari atas dokumen
|
|
window.onscroll = function() {
|
|
scrollFunction();
|
|
};
|
|
|
|
function scrollFunction() {
|
|
const scrollTopBtn = document.getElementById('scrollTopBtn');
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
scrollTopBtn.style.display = 'block';
|
|
} else {
|
|
scrollTopBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Scroll ke atas halaman ketika tombol ditekan
|
|
function scrollToTop() {
|
|
document.body.scrollTop = 0; // Untuk Safari
|
|
document.documentElement.scrollTop = 0; // Untuk Chrome, Firefox, IE, dan Opera
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |