1 /*******************************************************************************
2 * Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com>
3 * Copyright (c) 2018 Intel Corporation.
5 * All rights reserved. This program and the accompanying materials
6 * are made available under the terms of the Apache License, Version 2.0
7 * which accompanies this distribution, and is available at
8 * http://www.apache.org/licenses/LICENSE-2.0
9 ******************************************************************************/
13 function create_tree(divTree, jstree_data)
16 plugins: ['checkbox'],
32 function create_table(tblMetrics, table_data, timestamps, table_keys)
34 var tbody = $('<tbody></tbody>');
35 var tr0 = $('<tr></tr>');
36 var th0 = $('<th></th>');
37 var td0 = $('<td></td>');
40 // create table headings using timestamps
41 tr = tr0.clone().append(th0.clone().text('Timestamp'));
42 timestamps.forEach(function(t) {
43 tr.append(th0.clone().text(t));
48 table_keys.forEach(function(key) {
49 tr = tr0.clone().append(td0.clone().text(key));
50 // add each piece of data as its own column
51 table_data[key].forEach(function(val) {
52 tr.append(td0.clone().text(val === None ? '' : val));
58 tblMetrics.empty().append(tbody);
61 function create_graph(cnvGraph, timestamps)
63 return new Chart(cnvGraph, {
104 responsiveAnimationDuration: 0,
105 maintainAspectRatio: false,
110 function update_graph(objGraph, datasets)
114 '#228B22', // ForestGreen
115 '#FF8C00', // DarkOrange
116 '#00008B', // DarkBlue
117 '#FF00FF', // Fuchsia
118 '#9ACD32', // YellowGreen
120 '#4169E1', // RoyalBlue
122 '#20B2AA', // LightSeaGreen
123 '#8A2BE2', // BlueViolet
129 {s: 'triangle', r: 4},
131 {s: 'rectRot', r: 5},
134 datasets.forEach(function(d, i) {
135 var color = colors[i % colors.length];
136 var point = points[i % points.length];
137 d.borderColor = color;
138 d.backgroundColor = color;
139 d.pointStyle = point.s;
140 d.pointRadius = point.r;
141 d.pointHoverRadius = point.r + 1;
143 objGraph.data.datasets = datasets;
147 function handle_tree(divTree, tblMetrics, objGraph, table_data, timestamps)
149 divTree.on('check_node.jstree uncheck_node.jstree', function(e, data) {
150 var selected_keys = [];
151 var selected_datasets = [];
152 data.selected.forEach(function(sel) {
153 var node = data.instance.get_node(sel);
154 if (node.children.length == 0) {
155 selected_keys.push(node.id);
156 selected_datasets.push({
158 data: table_data[node.id],
162 create_table(tblMetrics, table_data, timestamps, selected_keys);
163 update_graph(objGraph, selected_datasets);