Aggiunta generazione grafico per vendor

This commit is contained in:
loviuz 2020-08-08 22:23:21 +02:00
parent 7aabf2dfba
commit f866983d6b
4 changed files with 152 additions and 15 deletions

View File

@ -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;

View File

@ -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;
}

View File

@ -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

View File

@ -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;
}