93 lines
2.6 KiB
PHP
93 lines
2.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Grafik 1 Minggu</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
.filter-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.filter-button {
|
|
background-color: #f0f0f0;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.filter-button:hover {
|
|
background-color: #d1d1d1;
|
|
}
|
|
|
|
.filter-button.active {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
@vite(['resources/js/sensor-data.js'])
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container pt-5">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="font-weight-bold" id="device-name">
|
|
<h3>{{ $deviceName }}</h3>
|
|
</div>
|
|
<div class="filter-buttons">
|
|
@php
|
|
$filters = [
|
|
[
|
|
'by' => 'hour',
|
|
'label' => 'Per jam',
|
|
],
|
|
[
|
|
'by' => 'date',
|
|
'label' => 'Per hari',
|
|
],
|
|
[
|
|
'by' => 'month',
|
|
'label' => 'Per Bulan',
|
|
],
|
|
[
|
|
'by' => 'year',
|
|
'label' => 'Per Tahun',
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
@foreach ($filters as $filter)
|
|
<button class="filter-button js-btn-filter"
|
|
data-by="{{ $filter['by'] }}">{{ $filter['label'] }}</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mt-2">
|
|
<div id="container" style="height: 80vh">
|
|
|
|
</div>
|
|
<div id="element"></div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |