vrr/ntopng
2
0
Fork 0
mirror of https://github.com/ntop/ntopng.git synced 2026-04-29 15:39:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added x axis Hover (#6146)

Browse source
This commit is contained in:
MatteoBiscosi 2021-12-20 13:46:04 +01:00
parent 9b0ac6342c
commit c8354e4b7d
1 changed files with 14 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

26
scripts/lua/modules/graph_utils.lua
View file

@ -513,16 +513,14 @@ function graph_utils.drawGraphs(ifid, schema, tags, zoomLevel, baseurl, selected
<div id="legend"></div>
<div id="chart_legend"></div>
<div id="chart" style="margin-right: 50px; margin-left: 10px; display: table-cell"></div>
<p style='color: lightgray'><small>NOTE: Click on the graph to zoom.</small>
<div id="chart" style="margin-right: 3rem; margin-left: 1rem; display: table-cell"></div>
</td>
<td rowspan=2>
<div id="y_axis"></div>
<div style="margin-left: 10px; display: table">
<div style="margin-left: 1rem; display: table">
<div id="chart_container" style="display: table-row">
]]
@ -576,7 +574,7 @@ function graph_utils.drawGraphs(ifid, schema, tags, zoomLevel, baseurl, selected
end
print [[
<table class="table table-bordered table-striped" style="border: 0; margin-right: 10px; display: table-cell">
<table class="table table-bordered table-striped" style="border: 1rem; margin-right: 1rem; display: table-cell">
]]
print(' <tr><th>&nbsp;</th><th>Time</th><th>Value</th></tr>\n')
@ -669,8 +667,11 @@ var palette = new Rickshaw.Color.Palette();
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 600,
height: 300,
width: 750,
stroke: true,
min: 'auto',
padding: {top: 0.02, bottom: 0.02},
height: 350,
renderer: 'area',
series: [
]]
@ -703,16 +704,15 @@ var chart_legend = document.querySelector('#chart_legend');
var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
graph: graph,
xFormatter: function(x) { return new Date( x * 1000 ); },
xFormatter: function(x) { return NtopUtils.epoch2Seen(x); },
yFormatter: function(bits) { return(]] print(formatter_fctn) print [[(bits)); },
render: function(args) {
var graph = this.graph;
var points = args.points;
var point = points.filter( function(p) { return p.active } ).shift();
if(point.value.y === null) return;
if(point.value.y === null) return;
var formattedXValue = NtopUtils.fdate(point.value.x); // point.formattedXValue;
var formattedXValue = NtopUtils.epoch2Seen(point.value.x); // point.formattedXValue;
var formattedYValue = ]]
print(formatter_fctn)
print [[(point.value.y); // point.formattedYValue;
@ -774,6 +774,8 @@ infoHTML += "</ul>";]]
item.className = 'item';
item.innerHTML = this.formatter(point.series, point.value.x, point.value.y, formattedXValue, formattedYValue, point);
let tmp = item.innerHTML;
item.innerHTML = formattedXValue + "<br>" + tmp;
item.style.top = this.graph.y(point.value.y0 + point.value.y) + 'px';
this.element.appendChild(item);
@ -814,13 +816,13 @@ var legend = new Rickshaw.Graph.Legend( {
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
padding: { top: 0.02, bottom: 0.02 },
tickFormat: ]] print(formatter_fctn) print [[
});
yAxis.render();
]]
if zoomLevel ~= nextZoomLevel then
print[[
$("#chart").click(function() {