Aggiunta pagina con device per orario
This commit is contained in:
loviuz
parent
e6a20299e0
commit
4a53471e88
|
|
@ -87,3 +87,106 @@ function number_format(number, decimals, dec_point, thousands_sep) {
|
|||
}
|
||||
return s.join(dec);
|
||||
}
|
||||
|
||||
// Add a helper to format timestamp data
|
||||
Date.prototype.formatMMDDYYYY = function() {
|
||||
return (this.getMonth() + 1) +
|
||||
"/" + this.getDate() +
|
||||
"/" + this.getFullYear();
|
||||
}
|
||||
|
||||
function drawLineChart( id, resource ) {
|
||||
$.post( reader_url, { op: resource }, function(response){
|
||||
response = $.parseJSON(response);
|
||||
|
||||
// Split timestamp and data into separate arrays
|
||||
var labels = [], data=[]
|
||||
for( i=0; i<response.records.length; i++ ){
|
||||
result = response.records[i];
|
||||
|
||||
labels.push(result.indice);
|
||||
data.push(parseInt(result.valore));
|
||||
}
|
||||
|
||||
// Create the chart.js data structure using 'labels' and 'data'
|
||||
var full_chart_data = {
|
||||
labels : labels,
|
||||
datasets : [{
|
||||
fillColor : "rgba(151,187,205,0.2)",
|
||||
strokeColor : "rgba(151,187,205,1)",
|
||||
pointColor : "rgba(151,187,205,1)",
|
||||
pointStrokeColor : "#fff",
|
||||
pointHighlightFill : "#fff",
|
||||
pointHighlightStroke : "rgba(151,187,205,1)",
|
||||
backgroundColor : "#4e73df",
|
||||
hoverBackgroundColor : "#2e59d9",
|
||||
borderColor : "#4e73df",
|
||||
data : data
|
||||
}]
|
||||
};
|
||||
|
||||
// Get the context of the canvas element we want to select
|
||||
var ctx = document.getElementById(id).getContext("2d");
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: full_chart_data,
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 25,
|
||||
top: 25,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
maxTicksLimit: 6
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
min: 0,
|
||||
maxTicksLimit: 5,
|
||||
padding: 10,
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgb(234, 236, 244)",
|
||||
zeroLineColor: "rgb(234, 236, 244)",
|
||||
drawBorder: false,
|
||||
borderDash: [2],
|
||||
zeroLineBorderDash: [2]
|
||||
}
|
||||
}],
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
titleMarginBottom: 10,
|
||||
titleFontColor: '#6e707e',
|
||||
titleFontSize: 14,
|
||||
backgroundColor: "rgb(255,255,255)",
|
||||
bodyFontColor: "#858796",
|
||||
borderColor: '#dddfeb',
|
||||
borderWidth: 1,
|
||||
displayColors: true,
|
||||
caretPadding: 10,
|
||||
callbacks: {
|
||||
label: function(tooltipItem, chart) {
|
||||
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||||
return tooltipItem.yLabel + ' devices';
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
117
gui/orari.php
117
gui/orari.php
|
|
@ -8,20 +8,16 @@ include('parts/header.php');
|
|||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
|
||||
<!-- Dispositivi per orario -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Lista dispositivi -->
|
||||
<div class="col-lg-9">
|
||||
<div class="col-lg-12">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Dispositivi per orario</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-bar">
|
||||
<canvas id="chart-giorni"></canvas>
|
||||
</div>
|
||||
<canvas id="chart-orari"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,96 +25,29 @@ include('parts/header.php');
|
|||
</div>
|
||||
|
||||
|
||||
<!-- Dispositivi per giorno -->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Dispositivi per giorno</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-bar">
|
||||
<canvas id="chart-giorno"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$('#menu-orari').addClass('active');
|
||||
|
||||
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||
Chart.defaults.global.defaultFontColor = '#858796';
|
||||
|
||||
|
||||
|
||||
// Bar Chart Example
|
||||
var ctx = document.getElementById("chart-giorni");
|
||||
var myBarChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
label: "Revenue",
|
||||
backgroundColor: "#4e73df",
|
||||
hoverBackgroundColor: "#2e59d9",
|
||||
borderColor: "#4e73df",
|
||||
data: [4215, 5312, 6251, 7841, 9821, 14984],
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 25,
|
||||
top: 25,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
time: {
|
||||
unit: 'month'
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
maxTicksLimit: 6
|
||||
},
|
||||
maxBarThickness: 25,
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 15000,
|
||||
maxTicksLimit: 5,
|
||||
padding: 10,
|
||||
// Include a dollar sign in the ticks
|
||||
callback: function(value, index, values) {
|
||||
return '$' + number_format(value);
|
||||
}
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgb(234, 236, 244)",
|
||||
zeroLineColor: "rgb(234, 236, 244)",
|
||||
drawBorder: false,
|
||||
borderDash: [2],
|
||||
zeroLineBorderDash: [2]
|
||||
}
|
||||
}],
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
titleMarginBottom: 10,
|
||||
titleFontColor: '#6e707e',
|
||||
titleFontSize: 14,
|
||||
backgroundColor: "rgb(255,255,255)",
|
||||
bodyFontColor: "#858796",
|
||||
borderColor: '#dddfeb',
|
||||
borderWidth: 1,
|
||||
xPadding: 15,
|
||||
yPadding: 15,
|
||||
displayColors: false,
|
||||
caretPadding: 10,
|
||||
callbacks: {
|
||||
label: function(tooltipItem, chart) {
|
||||
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||||
return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
drawLineChart( 'chart-orari', 'get-devices-by-hour' );
|
||||
drawLineChart( 'chart-giorno', 'get-devices-by-weekday' );
|
||||
</script>
|
||||
|
||||
<?php
|
||||
|
|
|
|||
119
ws/reader.php
119
ws/reader.php
|
|
@ -148,4 +148,123 @@ switch( $_POST['op'] ){
|
|||
$mysqli->close();
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
case 'get-devices-by-hour':
|
||||
// Connessione al database
|
||||
$mysqli = mysqli_connect($config['db_host'], $config['db_user'], $config['db_pass'], $config['db_name']);
|
||||
|
||||
// Errore nella connessione a database
|
||||
if (mysqli_connect_errno($mysqli)) {
|
||||
|
||||
$result = [
|
||||
'status' => 'ERR',
|
||||
'message' => mysqli_connect_error(),
|
||||
];
|
||||
} else {
|
||||
// Lettura numero di device unico nell'intervallo di date
|
||||
$sql = "
|
||||
SELECT
|
||||
CONCAT( DATE_FORMAT(received_at, '%H'), ':00' ) AS indice,
|
||||
COUNT(DISTINCT(mac)) AS valore
|
||||
FROM
|
||||
`logs`
|
||||
GROUP BY
|
||||
DATE_FORMAT(received_at, '%H')";
|
||||
|
||||
$stmt = $mysqli->prepare($sql);
|
||||
|
||||
// Errore nella preparazione query
|
||||
if (!$stmt) {
|
||||
$result = [
|
||||
'status' => 'ERR',
|
||||
'message' => $mysqli->error,
|
||||
];
|
||||
} else {
|
||||
// Esecuzione statement
|
||||
$stmt->execute();
|
||||
|
||||
$rs = $stmt->get_result();
|
||||
|
||||
while ($row = $rs->fetch_assoc()) {
|
||||
$records[] = $row;
|
||||
}
|
||||
|
||||
$result = [
|
||||
'status' => 'OK',
|
||||
'records' => $records,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode($result);
|
||||
|
||||
$stmt->close();
|
||||
$mysqli->close();
|
||||
break;
|
||||
|
||||
|
||||
case 'get-devices-by-weekday':
|
||||
$weekdays = [
|
||||
0 => 'domenica',
|
||||
1 => 'lunedì',
|
||||
2 => 'martedì',
|
||||
3 => 'mercoledì',
|
||||
4 => 'giovedì',
|
||||
5 => 'venerdì',
|
||||
6 => 'sabato',
|
||||
];
|
||||
|
||||
// Connessione al database
|
||||
$mysqli = mysqli_connect($config['db_host'], $config['db_user'], $config['db_pass'], $config['db_name']);
|
||||
|
||||
// Errore nella connessione a database
|
||||
if (mysqli_connect_errno($mysqli)) {
|
||||
|
||||
$result = [
|
||||
'status' => 'ERR',
|
||||
'message' => mysqli_connect_error(),
|
||||
];
|
||||
} else {
|
||||
// Lettura numero di device unico nell'intervallo di date
|
||||
$sql = "
|
||||
SELECT
|
||||
DATE_FORMAT(received_at, '%w') AS indice,
|
||||
COUNT(DISTINCT(mac)) AS valore
|
||||
FROM
|
||||
`logs`
|
||||
GROUP BY
|
||||
DATE_FORMAT(received_at, '%w')";
|
||||
|
||||
$stmt = $mysqli->prepare($sql);
|
||||
|
||||
// Errore nella preparazione query
|
||||
if (!$stmt) {
|
||||
$result = [
|
||||
'status' => 'ERR',
|
||||
'message' => $mysqli->error,
|
||||
];
|
||||
} else {
|
||||
// Esecuzione statement
|
||||
$stmt->execute();
|
||||
|
||||
$rs = $stmt->get_result();
|
||||
|
||||
while ($row = $rs->fetch_assoc()) {
|
||||
$row['indice'] = $weekdays[ $row['indice'] ];
|
||||
$records[] = $row;
|
||||
}
|
||||
|
||||
$result = [
|
||||
'status' => 'OK',
|
||||
'records' => $records,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode($result);
|
||||
|
||||
$stmt->close();
|
||||
$mysqli->close();
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue