432 lines
15 KiB
PHP
432 lines
15 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Monitoring</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<style>
|
|
body {
|
|
font-family: roboto;
|
|
background-color: #f8f9fa;
|
|
padding-top: 50px;
|
|
overflow-y: auto;
|
|
}
|
|
.container {
|
|
max-width: 100%;
|
|
margin: auto;
|
|
}
|
|
.card {
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.card-header {
|
|
background-color: #4D869C;
|
|
border-radius: 10px 10px 0 0;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
.card-body {
|
|
padding: 20px;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 300px;
|
|
margin: 20px auto;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
.chart {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
@media (max-width: 576px) {
|
|
.card-header {
|
|
font-size: 20px;
|
|
}
|
|
.chart-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
TDS Data
|
|
</div>
|
|
<div class="card-body">
|
|
@if ($tdsData->isEmpty())
|
|
<div class="alert alert-info" role="alert">
|
|
No data available for TDS
|
|
</div>
|
|
@else
|
|
<div class="row">
|
|
<div class="chart-container">
|
|
<canvas id="tdsChart" class="chart"></canvas>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Waterflow1 Data
|
|
</div>
|
|
<div class="card-body">
|
|
@if ($waterflow1Data->isEmpty())
|
|
<div class="alert alert-info" role="alert">
|
|
No data available for Waterflow1
|
|
</div>
|
|
@else
|
|
<div class="row">
|
|
<div class="chart-container">
|
|
<canvas id="waterflow1Chart" class="chart"></canvas>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Waterflow2 Data
|
|
</div>
|
|
<div class="card-body">
|
|
@if ($waterflow2Data->isEmpty())
|
|
<div class="alert alert-info" role="alert">
|
|
No data available for Waterflow2
|
|
</div>
|
|
@else
|
|
<div class="row">
|
|
<div class="chart-container">
|
|
<canvas id="waterflow2Chart" class="chart"></canvas>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Ultrasonik Data
|
|
</div>
|
|
<div class="card-body">
|
|
@if ($ultrasonikData->isEmpty())
|
|
<div class="alert alert-info" role="alert">
|
|
No data available for Ultrasonik
|
|
</div>
|
|
@else
|
|
<div class="row">
|
|
<div class="chart-container">
|
|
<canvas id="ultrasonikChart" class="chart"></canvas>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (!$tdsData->isEmpty() || !$waterflow1Data->isEmpty() || !$waterflow2Data->isEmpty() || !$ultrasonikData->isEmpty())
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
var ctxTds = document.getElementById('tdsChart').getContext('2d');
|
|
var ctxWaterflow1 = document.getElementById('waterflow1Chart').getContext('2d');
|
|
var ctxWaterflow2 = document.getElementById('waterflow2Chart').getContext('2d');
|
|
var ctxUltrasonik = document.getElementById('ultrasonikChart').getContext('2d');
|
|
|
|
var tdsLabels = {!! json_encode($tdsData->pluck('tanggal')) !!};
|
|
var tdsData = {!! json_encode($tdsData->pluck('tds')) !!};
|
|
|
|
var waterflow1Labels = {!! json_encode($waterflow1Data->pluck('tanggal')) !!};
|
|
var waterflow1ArusData = {!! json_encode($waterflow1Data->pluck('arus')) !!};
|
|
var waterflow1TotalData = {!! json_encode($waterflow1Data->pluck('total')) !!};
|
|
|
|
var waterflow2Labels = {!! json_encode($waterflow2Data->pluck('tanggal')) !!};
|
|
var waterflow2ArusData = {!! json_encode($waterflow2Data->pluck('arus')) !!};
|
|
var waterflow2TotalData = {!! json_encode($waterflow2Data->pluck('total')) !!};
|
|
|
|
var ultrasonikLabels = {!! json_encode($ultrasonikData->pluck('tanggal')) !!};
|
|
var ultrasonikData = {!! json_encode($ultrasonikData->pluck('ultrasonik')) !!};
|
|
|
|
var tdsChart = new Chart(ctxTds, {
|
|
type: 'line',
|
|
data: {
|
|
labels: tdsLabels,
|
|
datasets: [{
|
|
label: 'TDS',
|
|
data: tdsData,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
fontColor: '#36a2eb'
|
|
}
|
|
},
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
backgroundColor: '#36a2eb',
|
|
titleFontColor: '#fff',
|
|
bodyFontColor: '#fff',
|
|
footerFontColor: '#fff',
|
|
footerFontSize: 14,
|
|
footerAlign: 'center',
|
|
callbacks: {
|
|
title: function(tooltipItems, data) {
|
|
return 'Date: ' + tdsLabels[tooltipItems[0].index];
|
|
},
|
|
label: function(tooltipItem, data) {
|
|
return 'Value: ' + tooltipItem.yLabel;
|
|
},
|
|
footer: function(tooltipItems, data) {
|
|
return 'Timestamp: ' + new Date().toLocaleString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
var waterflow1Chart = new Chart(ctxWaterflow1, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: waterflow1Labels,
|
|
datasets: [{
|
|
label: 'Arus',
|
|
data: waterflow1ArusData,
|
|
backgroundColor: '#00FFFF',
|
|
borderColor: '#007bff',
|
|
borderWidth: 1
|
|
}, {
|
|
label: 'Total',
|
|
data: waterflow1TotalData,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
fontColor: '#007bff'
|
|
}
|
|
},
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
backgroundColor: '#007bff',
|
|
titleFontColor: '#fff',
|
|
bodyFontColor: '#fff',
|
|
footerFontColor: '#fff',
|
|
footerFontSize: 14,
|
|
footerAlign: 'center',
|
|
callbacks: {
|
|
title: function(tooltipItems, data) {
|
|
return 'Date: ' + waterflow1Labels[tooltipItems[0].index];
|
|
},
|
|
label: function(tooltipItem, data) {
|
|
return 'Value: ' + tooltipItem.yLabel;
|
|
},
|
|
footer: function(tooltipItems, data) {
|
|
return 'Timestamp: ' + new Date().toLocaleString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
var waterflow2Chart = new Chart(ctxWaterflow2, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: waterflow2Labels,
|
|
datasets: [{
|
|
label: 'Arus',
|
|
data: waterflow2ArusData,
|
|
backgroundColor: '#00FFFF',
|
|
borderColor: '#007bff',
|
|
borderWidth: 1
|
|
}, {
|
|
label: 'Total',
|
|
data: waterflow2TotalData,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
fontColor: '#007bff'
|
|
}
|
|
},
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
backgroundColor: '#007bff',
|
|
titleFontColor: '#fff',
|
|
bodyFontColor: '#fff',
|
|
footerFontColor: '#fff',
|
|
footerFontSize: 14,
|
|
footerAlign: 'center',
|
|
callbacks: {
|
|
title: function(tooltipItems, data) {
|
|
return 'Date: ' + waterflow2Labels[tooltipItems[0].index];
|
|
},
|
|
label: function(tooltipItem, data) {
|
|
return 'Value: ' + tooltipItem.yLabel;
|
|
},
|
|
footer: function(tooltipItems, data) {
|
|
return 'Timestamp: ' + new Date().toLocaleString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
var ultrasonikChart = new Chart(ctxUltrasonik, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ultrasonikLabels,
|
|
datasets: [{
|
|
label: 'Ultrasonik',
|
|
data: ultrasonikData,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
fontColor: '#4bc0c0'
|
|
}
|
|
},
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
backgroundColor: '#4bc0c0',
|
|
titleFontColor: '#fff',
|
|
bodyFontColor: '#fff',
|
|
footerFontColor: '#fff',
|
|
footerFontSize: 14,
|
|
footerAlign: 'center',
|
|
callbacks: {
|
|
title: function(tooltipItems, data) {
|
|
return 'Date: ' + ultrasonikLabels[tooltipItems[0].index];
|
|
},
|
|
label: function(tooltipItem, data) {
|
|
return 'Value: ' + tooltipItem.yLabel;
|
|
},
|
|
footer: function(tooltipItems, data) {
|
|
return 'Timestamp: ' + new Date().toLocaleString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endif
|
|
</body>
|
|
</html>
|
|
@endsection
|