freifunk-franken
/
monitoring
mirror of https://github.com/FreifunkFranken/fff-monitoring.git
3
0
Fork 0
Code Issues Releases Wiki Activity

fix graphs on mobile devices

This commit is contained in:
Dominik Heidler 2015-11-04 00:30:31 +01:00
parent f495283208
commit 455f1710d5
2 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
ffmap/web/static/js/graph/jquery.flot.resize.js Normal file
View File

@ -0,0 +1,59 @@
/* Flot plugin for automatically redrawing plots as the placeholder resizes.
Copyright (c) 2007-2014 IOLA and Ole Laursen.
Licensed under the MIT license.
It works by listening for changes on the placeholder div (through the jQuery
resize event plugin) - if the size changes, it will redraw the plot.
There are no options. If you need to disable the plugin for some plots, you
can just fix the size of their placeholders.
*/
/* Inline dependency:
* jQuery resize event - v1.1 - 3/14/2010
* http://benalman.com/projects/jquery-resize-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this);
(function ($) {
var options = { }; // no options
function init(plot) {
function onResize() {
var placeholder = plot.getPlaceholder();
// somebody might have hidden us and we can't plot
// when we don't have the dimensions
if (placeholder.width() == 0 || placeholder.height() == 0)
return;
plot.resize();
plot.setupGrid();
plot.draw();
}
function bindEvents(plot, eventHolder) {
plot.getPlaceholder().resize(onResize);
}
function shutdown(plot, eventHolder) {
plot.getPlaceholder().unbind("resize", onResize);
}
plot.hooks.bindEvents.push(bindEvents);
plot.hooks.shutdown.push(shutdown);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'resize',
version: '1.0'
});
})(jQuery);

26
ffmap/web/templates/router.html
View File

@ -8,6 +8,7 @@
<script src="{{ url_for('static', filename='js/graph/jquery.flot.byte.js') }}"></script>
<script src="{{ url_for('static', filename='js/graph/jquery.flot.selection.js') }}"></script>
<script src="{{ url_for('static', filename='js/graph/jquery.flot.downsample.js') }}"></script>
<script src="{{ url_for('static', filename='js/graph/jquery.flot.resize.js') }}"></script>
<script src="{{ url_for('static', filename='js/graph.js') }}"></script>
<style type="text/css">
.graph {
@ -30,6 +31,13 @@
li.list-group-item:hover {
background-color: #f5f5f5;
}
/* hack to remove flex css on small single-column layout */
@media(max-width:767px) {
.row {
display: block !important;
}
}
</style>
{% endblock %}
@ -111,10 +119,10 @@
</div>
{%- if not router.neighbours|length > 0 %}
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-6" style="display: flex; flex-flow: column;">
{%- endif %}
{%- else %}
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-6" style="display: flex; flex-flow: column;">
{%- endif %}
<div class="panel panel-default" style="flex: 1 1 auto;">
<div class="panel-heading">Events</div>
@ -245,11 +253,21 @@
</div>
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Statistics</div>
<div class="panel-heading">Clients</div>
<div class="panel-body">
<div id="clientstat" class="graph"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Memory</div>
<div class="panel-body">
<div id="memstat" class="graph"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Processes</div>
<div class="panel-body">
<div id="procstat" class="graph"></div>
<div id="clientstat" class="graph"></div>
</div>
</div>
<script type="text/javascript">