/*******************************************************************************
* Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com>
* Copyright (c) 2018 Intel Corporation.
*
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Apache License, Version 2.0
* which accompanies this distribution, and is available at
* http://www.apache.org/licenses/LICENSE-2.0
******************************************************************************/
var None = null;
function create_tree(divTree, jstree_data)
{
divTree.jstree({
plugins: ['checkbox'],
checkbox: {
three_state: false,
whole_node: true,
tie_selection: false,
},
core: {
themes: {
icons: false,
stripes: true,
},
data: jstree_data,
},
});
}
function create_table(tblMetrics, table_data, timestamps, table_keys)
{
var tbody = $('
');
var tr0 = $('
');
var th0 = $(' | ');
var td0 = $(' | ');
var tr;
// create table headings using timestamps
tr = tr0.clone().append(th0.clone().text('Timestamp'));
timestamps.forEach(function(t) {
tr.append(th0.clone().text(t));
});
tbody.append(tr);
// for each metric
table_keys.forEach(function(key) {
tr = tr0.clone().append(td0.clone().text(key));
// add each piece of data as its own column
table_data[key].forEach(function(val) {
tr.append(td0.clone().text(val === None ? '' : val));
});
tbody.append(tr);
});
// re-create table
tblMetrics.empty().append(tbody);
}
function create_graph(cnvGraph, timestamps)
{
return new Chart(cnvGraph, {
type: 'line',
data: {
labels: timestamps,
datasets: [],
},
options: {
elements: {
line: {
borderWidth: 2,
fill: false,
tension: 0,
},
},
scales: {
xAxes: [{
type: 'category',
}],
yAxes: [{
type: 'linear',
}],
},
tooltips: {
mode: 'point',
intersect: true,
},
hover: {
mode: 'index',
intersect: false,
animationDuration: 0,
},
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
},
},
animation: {
duration: 0,
},
responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: false,
},
});
}
function update_graph(objGraph, datasets)
{
var colors = [
'#FF0000', // Red
'#228B22', // ForestGreen
'#FF8C00', // DarkOrange
'#00008B', // DarkBlue
'#FF00FF', // Fuchsia
'#9ACD32', // YellowGreen
'#FFD700', // Gold
'#4169E1', // RoyalBlue
'#A0522D', // Sienna
'#20B2AA', // LightSeaGreen
'#8A2BE2', // BlueViolet
];
var points = [
{s: 'circle', r: 3},
{s: 'rect', r: 4},
{s: 'triangle', r: 4},
{s: 'star', r: 4},
{s: 'rectRot', r: 5},
];
datasets.forEach(function(d, i) {
var color = colors[i % colors.length];
var point = points[i % points.length];
d.borderColor = color;
d.backgroundColor = color;
d.pointStyle = point.s;
d.pointRadius = point.r;
d.pointHoverRadius = point.r + 1;
});
objGraph.data.datasets = datasets;
objGraph.update();
}
function handle_tree(divTree, tblMetrics, objGraph, table_data, timestamps)
{
divTree.on('check_node.jstree uncheck_node.jstree', function(e, data) {
var selected_keys = [];
var selected_datasets = [];
data.selected.forEach(function(sel) {
var node = data.instance.get_node(sel);
if (node.children.length == 0) {
selected_keys.push(node.id);
selected_datasets.push({
label: node.id,
data: table_data[node.id],
});
}
});
create_table(tblMetrics, table_data, timestamps, selected_keys);
update_graph(objGraph, selected_datasets);
});
}