Aggiunta generazione grafico per vendor
This commit is contained in:
loviuz
parent
7aabf2dfba
commit
f866983d6b
|
|
@ -86,18 +86,7 @@ include('parts/header.php');
|
|||
<!-- Card Body -->
|
||||
<div class="card-body">
|
||||
<div class="chart-pie pt-4 pb-2">
|
||||
<canvas id="vendor-chart"></canvas>
|
||||
</div>
|
||||
<div class="mt-4 text-center small">
|
||||
<span class="mr-2">
|
||||
<i class="fas fa-circle text-primary"></i> Samsung
|
||||
</span>
|
||||
<span class="mr-2">
|
||||
<i class="fas fa-circle text-success"></i> Apple
|
||||
</span>
|
||||
<span class="mr-2">
|
||||
<i class="fas fa-circle text-info"></i> Huawei
|
||||
</span>
|
||||
<canvas id="chart-vendor"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -108,6 +97,8 @@ include('parts/header.php');
|
|||
<script>
|
||||
$('#menu-dashboard').addClass('active');
|
||||
|
||||
drawPieChart( 'chart-vendor', 'get-devices-by-vendor' );
|
||||
|
||||
|
||||
// Intervallo in secondi fra ogni lettura dati
|
||||
var interval = 5;
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ Date.prototype.formatMMDDYYYY = function() {
|
|||
"/" + this.getFullYear();
|
||||
}
|
||||
|
||||
function drawLineChart( id, resource ) {
|
||||
function drawBarChart( id, resource ) {
|
||||
$.post( reader_url, { op: resource }, function(response){
|
||||
response = $.parseJSON(response);
|
||||
|
||||
|
|
@ -190,3 +190,79 @@ function drawLineChart( id, resource ) {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function drawPieChart( id, resource ) {
|
||||
$.post( reader_url, { op: resource }, function(response){
|
||||
response = $.parseJSON(response);
|
||||
|
||||
// Split timestamp and data into separate arrays
|
||||
var labels = [], data=[], extra_data=[], colors=[];
|
||||
for( i=0; i<response.records.length; i++ ){
|
||||
result = response.records[i];
|
||||
|
||||
labels.push(result.indice);
|
||||
data.push(result.valore);
|
||||
extra_data.push(result.valore_extra);
|
||||
colors.push( getRandomColor() );
|
||||
}
|
||||
|
||||
// Create the chart.js data structure using 'labels' and 'data'
|
||||
var full_chart_data = {
|
||||
labels : labels,
|
||||
datasets : [{
|
||||
backgroundColor : colors,
|
||||
data : data
|
||||
}]
|
||||
};
|
||||
|
||||
// Get the context of the canvas element we want to select
|
||||
var ctx = document.getElementById(id).getContext("2d");
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: full_chart_data,
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 25,
|
||||
top: 25,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
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 extra_data[ tooltipItem.index ] + ' devices';
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getRandomColor() {
|
||||
var letters = '0123456789ABCDEF';
|
||||
var color = '#';
|
||||
for (var i = 0; i < 6; i++) {
|
||||
color += letters[Math.floor(Math.random() * 16)];
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
|
@ -46,8 +46,8 @@ include('parts/header.php');
|
|||
<script>
|
||||
$('#menu-orari').addClass('active');
|
||||
|
||||
drawLineChart( 'chart-orari', 'get-devices-by-hour' );
|
||||
drawLineChart( 'chart-giorno', 'get-devices-by-weekday' );
|
||||
drawBarChart( 'chart-orari', 'get-devices-by-hour' );
|
||||
drawBarChart( 'chart-giorno', 'get-devices-by-weekday' );
|
||||
</script>
|
||||
|
||||
<?php
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ $result = [];
|
|||
|
||||
switch( $_POST['op'] ){
|
||||
case 'get-last-devices':
|
||||
// Vendor cache
|
||||
$oui = file_get_contents($config['oui_path']);
|
||||
|
||||
if (!empty($_POST['date_start']) && !empty($_POST['date_end'])) {
|
||||
|
|
@ -278,4 +279,73 @@ switch( $_POST['op'] ){
|
|||
$stmt->close();
|
||||
$mysqli->close();
|
||||
break;
|
||||
|
||||
|
||||
case 'get-devices-by-vendor':
|
||||
// Vendor cache
|
||||
$oui = file_get_contents($config['oui_path']);
|
||||
|
||||
// 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 {
|
||||
$sql = "
|
||||
SELECT
|
||||
SUBSTRING(mac, 1, 8) AS indice,
|
||||
COUNT(mac) AS valore
|
||||
FROM
|
||||
`logs`
|
||||
GROUP BY
|
||||
SUBSTRING(mac, 1, 8)
|
||||
ORDER BY
|
||||
valore DESC
|
||||
LIMIT
|
||||
0, 10";
|
||||
|
||||
$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()) {
|
||||
// Lettura vendor
|
||||
$mac = str_replace( ':', '-', substr($row['indice'], 0, 8) );
|
||||
|
||||
$row['valore_extra'] = '';
|
||||
|
||||
if( preg_match( '/^'.preg_quote($mac).'([\s\t]+)\(hex\)(.+?)$/im', $oui, $m) ){
|
||||
$row['valore_extra'] = trim($m[2]);
|
||||
}
|
||||
|
||||
$records[] = $row;
|
||||
}
|
||||
|
||||
$result = [
|
||||
'status' => 'OK',
|
||||
'records' => $records,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode($result);
|
||||
|
||||
$stmt->close();
|
||||
$mysqli->close();
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue