118 lines
4.3 KiB
HTML
118 lines
4.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-2 px-md-4">
|
|
<h4 class="mb-3 text-center text-md-start">Comparison dSoftware Solapur (UGD) - Live Dashboard</h4>
|
|
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-12 col-md-4">
|
|
<div class="card text-white bg-primary shadow h-100">
|
|
<div class="card-body text-center text-md-start">
|
|
<h6>Trenching Units</h6>
|
|
<h3 class="fw-bold" id="card-trench">0</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<div class="card text-white bg-success shadow h-100">
|
|
<div class="card-body text-center text-md-start">
|
|
<h6>Manhole Units</h6>
|
|
<h3 class="fw-bold" id="card-manhole">0</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<div class="card text-dark bg-warning shadow h-100">
|
|
<div class="card-body text-center text-md-start">
|
|
<h6>Laying Units</h6>
|
|
<h3 class="fw-bold" id="card-laying">0</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-6">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-dark text-white">Live Category Bar Chart</div>
|
|
<div class="card-body">
|
|
<canvas id="liveBarChart" style="max-height:300px;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-dark text-white">Location Distribution Pie Chart</div>
|
|
<div class="card-body">
|
|
<canvas id="livePieChart" style="max-height:300px;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
// 2. Initialize the Bar Chart
|
|
const barCtx = document.getElementById('liveBarChart').getContext('2d');
|
|
let liveBarChart = new Chart(barCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Trenching', 'Manholes', 'Laying'],
|
|
datasets: [{
|
|
label: 'Units Completed',
|
|
data: [0, 0, 0],
|
|
backgroundColor: ['#0d6efd', '#198754', '#ffc107']
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false }
|
|
});
|
|
|
|
// 3. Initialize the Pie Chart
|
|
const pieCtx = document.getElementById('livePieChart').getContext('2d');
|
|
let livePieChart = new Chart(pieCtx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: [], // Will be filled from SQL
|
|
datasets: [{
|
|
data: [],
|
|
backgroundColor: ['#0d6efd', '#198754', '#ffc107', '#6f42c1', '#fd7e14']
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false }
|
|
});
|
|
|
|
// 4. Function to Fetch Live Data from your Python API
|
|
function fetchLiveData() {
|
|
fetch('/dashboard/api/live-stats') // This matches the route we created in the "Kitchen"
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update the Summary Cards
|
|
document.getElementById('card-trench').innerText = data.summary.trench;
|
|
document.getElementById('card-manhole').innerText = data.summary.manhole;
|
|
document.getElementById('card-laying').innerText = data.summary.laying;
|
|
|
|
// Update Bar Chart
|
|
liveBarChart.data.datasets[0].data = [
|
|
data.summary.trench,
|
|
data.summary.manhole,
|
|
data.summary.laying
|
|
];
|
|
liveBarChart.update();
|
|
|
|
// Update Pie Chart (Location stats)
|
|
livePieChart.data.labels = Object.keys(data.locations);
|
|
livePieChart.data.datasets[0].data = Object.values(data.locations);
|
|
livePieChart.update();
|
|
})
|
|
.catch(err => console.error("Error fetching live data:", err));
|
|
}
|
|
|
|
// 5. Check for updates every 10 seconds (Real-time effect)
|
|
setInterval(fetchLiveData, 10000);
|
|
fetchLiveData(); // Load immediately on page open
|
|
</script>
|
|
|
|
{% endblock %} |