</head>
<body>
- <div class="container" style="width:80%">
+ <div class="container-fluid">
<div class="row">
<header class="jumbotron">
<h1>Yardstick User Interface</h1>
jstree_data = {{jstree_nodes|safe}};
$(function() {
- create_table(arr);
+ create_table(arr, timestamps);
create_tree(jstree_data);
var objGraph = create_graph($('#cnvGraph'), timestamps);
$('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
var selected_datasets = [];
+ var new_arr = {};
+ deleteRows();
for (var i = 0; i < data.selected.length; i++) {
var node = data.instance.get_node(data.selected[i]);
if (node.children.length == 0) {
data: arr[node.id],
};
selected_datasets.push(dataset);
+ // Create new array for table to show only subset of metrics
+ new_arr[node.id] = arr[node.id];
}
}
+ create_table(new_arr, timestamps);
update_graph(objGraph, selected_datasets);
});
});
});
}
-// may need to pass timestamps too...
-function create_table(table_data)
+function create_table(table_data, timestamps)
{
var tab, tr, td, tn, tbody, keys, key, curr_data, val;
// create table
tab = document.getElementsByTagName('table')[0];
tbody = document.createElement('tbody');
+ // create table headings using timestamps
+ tr = document.createElement('tr');
+ td = document.createElement('td');
+ tn = document.createTextNode('Timestamps');
+ td.appendChild(tn);
+ tr.appendChild(td);
+ for (var k = 0; k < timestamps.length; k++) {
+ td = document.createElement('td');
+ tn = document.createTextNode(timestamps[k]);
+ td.appendChild(tn);
+ tr.appendChild(td);
+ }
+ tbody.appendChild(tr);
// for each metric
keys = Object.keys(table_data);
for (var i = 0; i < keys.length; i++) {
tab.appendChild(tbody);
}
+function deleteRows()
+{
+ // delete rows of the table
+ var tab = document.getElementsByTagName('table')[0];
+ for (var i = tab.rows.length - 1; i >= 0; i--) {
+ tab.deleteRow(i);
+ }
+}
+
function create_graph(cnvGraph, timestamps)
{
return new Chart(cnvGraph, {