<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Attributes chart</title>
<link rel="preload" href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" as="script">
<link rel="preload" href="https://www.gstatic.com/charts/loader.js" as="script">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script async type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script async type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'table', 'controls', 'charteditor']});
google.charts.setOnLoadCallback(refreshChart());
var chartState = [];
function refreshChart() {
setTimeout(getData(), 500);
setTimeout(getData(), 1500);
setInterval(getData, 5000);
}
function getData(){
$.getJSON("/attribAllValues", function(data, status){
drawTable(data)
});
$.getJSON("/attribNumValues", function(data, status){
drawChart(data)
});
}
function drawChart(jsonData) {
var data = google.visualization.arrayToDataTable(jsonData);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
if (chartState === undefined || chartState.length === 0) {
chartState = initState;
}
var options = {
width : '70%',
hAxis: {title: 'Timestamp', titleTextStyle: {color: '#333'}},
interpolateNulls: true,
crosshair: {trigger: 'both', orientation: 'vertical'}
};
var chart = new google.visualization.ChartWrapper({
chartType : 'LineChart',
containerId : 'programmatic_chart_div',
options : options,
dataTable : data
});
var columnFilter = new google.visualization.ControlWrapper({
controlType : 'CategoryFilter',
containerId : 'programmatic_control_div',
dataTable : columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui : {
label : 'Attribute',
allowTyping : false,
allowMultiple : false,
allowNone : false,
selectedValuesLayout : 'below',
cssClass : 'google-visualization-controls-categoryfilter'
}
},
state : chartState
});
function drawChartHandler() {
var state = columnFilter.getState();
var row;
var columnIndices = [0];
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
columnIndices.push(columnsTable.getValue(row, 0));
}
columnIndices.sort(function (a, b) {
return (a - b);
});
chartState = state;
chart.setView({columns: columnIndices});
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', drawChartHandler);
columnFilter.draw();
drawChartHandler();
}
function drawTable(jsonData) {
var data = new google.visualization.DataTable();
for (let col of jsonData[0]) {
data.addColumn('string', col);
}
jsonData.shift();
data.addRow(jsonData[jsonData.length - 1]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {width: '80%', height: '100%'});
}
</script>
</head>
<body>
<div th:replace="fragments/navbar :: navbar"></div>
<h4 th:text="${currentZone}" class="d-flex justify-content-center mt-2"></h4>
<div id="zoneAttribForm" class="d-flex justify-content-center mt-2">
<form action="#" th:action="@{/values}" th:object="${zoneName}" method="post">
<div class="form-group">
<label for="ZoneName1">Change zone name</label>
<input type="text" class="form-control" id="ZoneName1" rows="3" th:field="*{string}"/>
<small id="passwordHelpBlock" class="form-text text-muted" th:text="${availableZones}">
</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div id="programmatic_dashboard_div" class="d-flex flex-column justify-content-center mt-5">
<h4 class="d-flex justify-content-center mt-2">Attribute values</h4>
<div id="programmatic_control_div" class="d-flex justify-content-center mt-3"></div>
<div id="programmatic_chart_div" class="d-flex justify-content-center mt-1"></div>
<div id="table_div" class="d-flex justify-content-center mt-5"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>