AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-10 08:38:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added tooltip for moduleStats bar chart

Browse source
This commit is contained in:
Mokaddem 2016-07-28 12:06:54 +02:00
parent acec508f53
commit 09fdaa3e39
3 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
var/www/static/js/moduleTrending.js
View file

@ -76,6 +76,21 @@ function plot_top_graph(module_name, init){
return; return;
var clicked_label = item.series.label; var clicked_label = item.series.label;
update_bar_chart(moduleCharts, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d"); update_bar_chart(moduleCharts, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d");
$("#flot-bar-chart-"+module_name).bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2);
var y = item.datapoint[1].toFixed(2);
var date = new Date(parseInt(x));
date = date.getMonth()+'/'+date.getDate();
$("#tooltip_graph-"+module_name).html(item.series.label + " of " + date + " = <b>" + y+"</b>")
.css({padding: "2px", width: 'auto', 'background-color': 'white', 'border': "3px solid "+item.series.color})
.fadeIn(200);
} else {
}
});
}); });
} }
}); });
@ -100,8 +115,6 @@ function plot_top_graph(module_name, init){
noColumns: 0, noColumns: 0,
position: "nw" position: "nw"
}, },
tooltip: true,
tooltipOpts: { content: "x: %x, y: %y" }
}; };
if (involved_item == "Other"){ // If part 'Other' has been clicked if (involved_item == "Other"){ // If part 'Other' has been clicked
@ -142,6 +155,9 @@ function plot_top_graph(module_name, init){
tickSize: [1, 'day'], tickSize: [1, 'day'],
minTickSize: [1, "day"] minTickSize: [1, "day"]
}, },
yaxis: {
transform: function (v) { return v < 1 ? v : Math.log(v); }
},
grid: { hoverable: true }, grid: { hoverable: true },
legend: { show: true, legend: { show: true,
noColumns: 1, noColumns: 1,
@ -149,7 +165,10 @@ function plot_top_graph(module_name, init){
}, },
tooltip: true, tooltip: true,
tooltipOpts: { content: "x: %x, y: %y" } tooltipOpts: { content: "x: %x, y: %y" }
}); })
}); });
} else { // Normal pie's part clicked } else { // Normal pie's part clicked

1
var/www/templates/Moduletrending.html
View file

@ -18,7 +18,6 @@
<script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script> <script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.pie.js') }}"></script> <script src="{{ url_for('static', filename='js/jquery.flot.pie.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script> <script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.stack.js') }}"></script>
</head> </head>
<body> <body>

24
var/www/templates/trending_graphs/Moduletrending.html
View file

@ -8,7 +8,10 @@
<b id="day-credential" class="pull-right">Today</b> <b id="day-credential" class="pull-right">Today</b>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class=""> <div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph-credential' align="right"></div>
</div>
<div class="row">
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-credential" style="height:250px; width:33%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-credential" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-credential" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-credential" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
</div> </div>
@ -33,7 +36,10 @@
<b id="day-mail" class="pull-right">Today</b> <b id="day-mail" class="pull-right">Today</b>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class=""> <div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph-mail' align="right"></div>
</div>
<div class="row">
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-mail" style="height:250px; width:33%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-mail" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-mail" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-mail" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
</div> </div>
@ -59,13 +65,23 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class=""> <div class="">
<h4>Average paste size by provider </h4> <div class="col-lg-12">
<h4 class="col-lg-3">Average paste size by provider </h4>
<div class="flot-chart-content pull-right" id='tooltip_graph-size' align="right"></div>
</div>
<div class="row">
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-size" style="height:250px; width:33%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-size" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-size" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-size" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
</div>
<h4>Number of paste by provider </h4> <div class="col-lg-12">
<h4 class="col-lg-3">Number of paste by provider </h4>
<div class="flot-chart-content pull-right" id='tooltip_graph-num' align="right"></div>
</div>
<div class="row">
<div class="flot-chart-content col-lg-6" id="flot-pie-chart-num" style="height:250px; width:33%;"></div> <div class="flot-chart-content col-lg-6" id="flot-pie-chart-num" style="height:250px; width:33%;"></div>
<div class="flot-chart-content col-lg-6" id="flot-bar-chart-num" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div> <div class="flot-chart-content col-lg-6" id="flot-bar-chart-num" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
</div>
</div> </div>
<!-- /.row --> <!-- /.row -->