From 0225bdb772d1334cc1aa7ab0fc3678df0864df6b Mon Sep 17 00:00:00 2001 From: AlisaLinUwU Date: Sun, 26 Jan 2025 10:42:28 +0500 Subject: Initialize --- .../resources/static/plugins/flot/jquery.flot.js | 2 + .../plugins/flot/plugins/jquery.flot.axislabels.js | 212 ++++++ .../plugins/flot/plugins/jquery.flot.browser.js | 98 +++ .../plugins/flot/plugins/jquery.flot.categories.js | 202 +++++ .../flot/plugins/jquery.flot.composeImages.js | 330 ++++++++ .../plugins/flot/plugins/jquery.flot.crosshair.js | 202 +++++ .../plugins/flot/plugins/jquery.flot.drawSeries.js | 662 ++++++++++++++++ .../plugins/flot/plugins/jquery.flot.errorbars.js | 375 +++++++++ .../flot/plugins/jquery.flot.fillbetween.js | 254 +++++++ .../plugins/flot/plugins/jquery.flot.flatdata.js | 47 ++ .../plugins/flot/plugins/jquery.flot.hover.js | 359 +++++++++ .../plugins/flot/plugins/jquery.flot.image.js | 249 ++++++ .../plugins/flot/plugins/jquery.flot.legend.js | 437 +++++++++++ .../plugins/flot/plugins/jquery.flot.logaxis.js | 298 ++++++++ .../plugins/flot/plugins/jquery.flot.navigate.js | 834 +++++++++++++++++++++ .../static/plugins/flot/plugins/jquery.flot.pie.js | 794 ++++++++++++++++++++ .../plugins/flot/plugins/jquery.flot.resize.js | 60 ++ .../plugins/flot/plugins/jquery.flot.saturated.js | 43 ++ .../plugins/flot/plugins/jquery.flot.selection.js | 527 +++++++++++++ .../plugins/flot/plugins/jquery.flot.stack.js | 220 ++++++ .../plugins/flot/plugins/jquery.flot.symbol.js | 98 +++ .../plugins/flot/plugins/jquery.flot.threshold.js | 143 ++++ .../plugins/flot/plugins/jquery.flot.time.js | 587 +++++++++++++++ .../plugins/flot/plugins/jquery.flot.touch.js | 320 ++++++++ .../flot/plugins/jquery.flot.touchNavigate.js | 360 +++++++++ .../flot/plugins/jquery.flot.uiConstants.js | 10 + 26 files changed, 7723 insertions(+) create mode 100644 src/main/resources/static/plugins/flot/jquery.flot.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.axislabels.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.browser.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.categories.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.composeImages.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.crosshair.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.drawSeries.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.errorbars.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.fillbetween.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.flatdata.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.hover.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.image.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.legend.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.logaxis.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.navigate.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.pie.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.resize.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.saturated.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.selection.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.stack.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.symbol.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.threshold.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.time.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.touch.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.touchNavigate.js create mode 100644 src/main/resources/static/plugins/flot/plugins/jquery.flot.uiConstants.js (limited to 'src/main/resources/static/plugins/flot') diff --git a/src/main/resources/static/plugins/flot/jquery.flot.js b/src/main/resources/static/plugins/flot/jquery.flot.js new file mode 100644 index 0000000..a0359d0 --- /dev/null +++ b/src/main/resources/static/plugins/flot/jquery.flot.js @@ -0,0 +1,2 @@ +"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(r){var t=function(t,e){var n=e.getElementsByClassName(t)[0];if(!n&&((n=document.createElement("canvas")).className=t,n.style.direction="ltr",n.style.position="absolute",n.style.left="0px",n.style.top="0px",e.appendChild(n),!n.getContext))throw new Error("Canvas is not available.");this.element=n;var o=this.context=n.getContext("2d");this.pixelRatio=r.plot.browser.getPixelRatio(o);var i=r(e).width(),a=r(e).height();this.resize(i,a),this.SVGContainer=null,this.SVG={},this._textCache={}};function f(e,t){e.transform.baseVal.clear(),t&&t.forEach(function(t){e.transform.baseVal.appendItem(t)})}t.prototype.resize=function(t,e){t=t<10?10:t,e=e<10?10:e;var n=this.element,o=this.context,i=this.pixelRatio;this.width!==t&&(n.width=t*i,n.style.width=t+"px",this.width=t),this.height!==e&&(n.height=e*i,n.style.height=e+"px",this.height=e),o.restore(),o.save(),o.scale(i,i)},t.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},t.prototype.render=function(){var t=this._textCache;for(var e in t)if(hasOwnProperty.call(t,e)){var n=this.getSVGLayer(e),o=t[e],i=n.style.display;for(var a in n.style.display="none",o)if(hasOwnProperty.call(o,a)){var r=o[a];for(var s in r)if(hasOwnProperty.call(r,s)){for(var l,c=r[s],u=c.positions,p=0;u[p];p++)if((l=u[p]).active)l.rendered||(n.appendChild(l.element),l.rendered=!0);else if(u.splice(p--,1),l.rendered){for(;l.element.firstChild;)l.element.removeChild(l.element.firstChild);l.element.parentNode.removeChild(l.element)}0===u.length&&(c.measured?c.measured=!1:delete r[s])}}n.style.display=i}},t.prototype.getSVGLayer=function(t){var e,n=this.SVG[t];n||(this.SVGContainer?e=this.SVGContainer.firstChild:(this.SVGContainer=document.createElement("div"),this.SVGContainer.className="flot-svg",this.SVGContainer.style.position="absolute",this.SVGContainer.style.top="0px",this.SVGContainer.style.left="0px",this.SVGContainer.style.height="100%",this.SVGContainer.style.width="100%",this.SVGContainer.style.pointerEvents="none",this.element.parentNode.appendChild(this.SVGContainer),(e=document.createElementNS("http://www.w3.org/2000/svg","svg")).style.width="100%",e.style.height="100%",this.SVGContainer.appendChild(e)),(n=document.createElementNS("http://www.w3.org/2000/svg","g")).setAttribute("class",t),n.style.position="absolute",n.style.top="0px",n.style.left="0px",n.style.bottom="0px",n.style.right="0px",e.appendChild(n),this.SVG[t]=n);return n},t.prototype.getTextInfo=function(t,e,n,o,i){var a,r,s,l;e=""+e,a="object"===_typeof(n)?n.style+" "+n.variant+" "+n.weight+" "+n.size+"px/"+n.lineHeight+"px "+n.family:n,null==(r=this._textCache[t])&&(r=this._textCache[t]={}),null==(s=r[a])&&(s=r[a]={});var c=e.replace(/0|1|2|3|4|5|6|7|8|9/g,"0");if(!(l=s[c])){var u=document.createElementNS("http://www.w3.org/2000/svg","text");if(-1!==e.indexOf("
"))m(e,u,-9999);else{var p=document.createTextNode(e);u.appendChild(p)}u.style.position="absolute",u.style.maxWidth=i,u.setAttributeNS(null,"x",-9999),u.setAttributeNS(null,"y",-9999),"object"===_typeof(n)?(u.style.font=a,u.style.fill=n.fill):"string"==typeof n&&u.setAttribute("class",n),this.getSVGLayer(t).appendChild(u);var h=u.getBBox();for(l=s[c]={width:h.width,height:h.height,measured:!0,element:u,positions:[]};u.firstChild;)u.removeChild(u.firstChild);u.parentNode.removeChild(u)}return l.measured=!0,l},t.prototype.addText=function(t,e,n,o,i,a,r,s,l,c){var u=this.getTextInfo(t,o,i,a,r),p=u.positions;"center"===s?e-=u.width/2:"right"===s&&(e-=u.width),"middle"===l?n-=u.height/2:"bottom"===l&&(n-=u.height),n+=.75*u.height;for(var h,d=0;p[d];d++){if((h=p[d]).x===e&&h.y===n&&h.text===o)return h.active=!0,void f(h.element,c);if(!1===h.active)return h.active=!0,-1!==(h.text=o).indexOf("
")?(n-=.25*u.height,m(o,h.element,e)):h.element.textContent=o,h.element.setAttributeNS(null,"x",e),h.element.setAttributeNS(null,"y",n),h.x=e,h.y=n,void f(h.element,c)}h={active:!0,rendered:!1,element:p.length?u.element.cloneNode():u.element,text:o,x:e,y:n},p.push(h),-1!==o.indexOf("
")?(n-=.25*u.height,m(o,h.element,e)):h.element.textContent=o,h.element.setAttributeNS(null,"x",e),h.element.setAttributeNS(null,"y",n),h.element.style.textAlign=s,f(h.element,c)};var m=function(t,e,n){var o,i,a,r=t.split("
");for(i=0;il.xmax&&(l.xmax=p)),!0===h.y&&(pl.ymax&&(l.ymax=p))))}return l},M.adjustSeriesDataRange=function(t,e){if(t.bars.show){var n,o=t.bars.barWidth[1];t.datapoints&&t.datapoints.points&&!o&&function(t){var e=[],n=t.datapoints.pointsize,o=Number.MAX_VALUE;t.datapoints.points.length<=n&&(o=1);for(var i=t.bars.horizontal?1:0;it.datamax&&n!==1/0&&(t.datamax=n)}function g(t,e){return t&&t[e]&&t[e].datapoints&&t[e].datapoints.points?t[e].datapoints.points:[]}for(K.each(z(),function(t,e){!0!==e.options.growOnly?(e.datamin=d,e.datamax=f):(void 0===e.datamin&&(e.datamin=d),void 0===e.datamax&&(e.datamax=f)),e.used=!1}),e=0;eo.max?d:(l=x.getTextInfo(p,t.label,h),"x"===o.direction?(r="center",i=b.left+o.p2c(t.v),"bottom"===o.position?a=u.top+u.padding-o.boxPosition.centerY:(a=u.top+u.height-u.padding+o.boxPosition.centerY,s="bottom")):(s="middle",a=b.top+o.p2c(t.v),"left"===o.position?(i=u.left+u.width-u.padding-o.boxPosition.centerX,r="right"):i=u.left+u.padding+o.boxPosition.centerX),c={x:i-l.width/2-3,y:a-3,width:l.width+6,height:l.height+6},n=c,e.some(function(t){return m(n.x,n.y,n.x+n.width,n.y+n.height,t.x,t.y,t.x+t.width,t.y+t.height)})?d:(x.addText(p,i,a,t.label,h,null,null,r,s),c));var n};if(x.removeText(p),C(k.drawAxis,[o,x]),o.show)switch(o.options.showTickLabels){case"none":break;case"endpoints":f.push(g(o.ticks[0],f)),f.push(g(o.ticks[o.ticks.length-1],f));break;case"major":for(f.push(g(o.ticks[0],f)),f.push(g(o.ticks[o.ticks.length-1],f)),e=1;e=t.min&&c<=t.max&&("x"===t.direction?(a=t.p2c(c),p=e,"top"===t.position&&(p=-p)):(r=t.p2c(c),u=e,"left"===t.position&&(u=-u)),"x"===t.direction?a=X(g.lineWidth,a):r=X(g.lineWidth,r),g.moveTo(a,r),g.lineTo(a+u,r+p)),!0===n&&st.max||(n=i,void 0,o=f.grid.borderWidth,(!("object"===_typeof(o)&&0i.axis.max||a.toa.axis.max)){i.from=Math.max(i.from,i.axis.min),i.to=Math.min(i.to,i.axis.max),a.from=Math.max(a.from,a.axis.min),a.to=Math.min(a.to,a.axis.max);var r=i.from===i.to,s=a.from===a.to;if(!r||!s)if(i.from=Math.floor(i.axis.p2c(i.from)),i.to=Math.floor(i.axis.p2c(i.to)),a.from=Math.floor(a.axis.p2c(a.from)),a.to=Math.floor(a.axis.p2c(a.to)),r||s){var l=o.lineWidth||f.grid.markingsLineWidth,c=l%2?.5:0;g.beginPath(),g.strokeStyle=o.color||f.grid.markingsColor,g.lineWidth=l,r?(g.moveTo(i.to+c,a.from),g.lineTo(i.to+c,a.to)):(g.moveTo(i.from,a.to+c),g.lineTo(i.to,a.to+c)),g.stroke()}else g.fillStyle=o.color||f.grid.markingsColor,g.fillRect(i.from,a.to,i.to-i.from,a.from-a.to)}}}(),t=z(),e=f.grid.borderWidth;for(var i=0;it.yaxis.min?Math.min(t.yaxis.max,u):t.yaxis.min,h=-1,d=0;d=Math.min(g,f)&&m+o<=s&&s<=m+i:f+o<=r&&r<=f+i&&s>=Math.min(g,m)&&s<=Math.max(g,m))&&(h=d/c)}}return h}function Q(){var t=f.interaction.redrawOverlayInterval;-1!==t?s||(s=setTimeout(function(){Z(M)},t)):Z()}function Z(t){if(s=null,a){n.clear(),C(k.drawOverlay,[a,n]);var e=new CustomEvent("onDrawingDone");t.getEventHolder().dispatchEvent(e),t.getPlaceholder().trigger("drawingdone")}}function J(t,e,n,o){if("string"==typeof t)return t;for(var i=g.createLinearGradient(0,n,0,e),a=0,r=t.colors.length;ar.max||vs.max||(mr.max&&(g=r.max,h=!1),xs.max&&(v=s.max,d=!1),m=r.p2c(m),x=s.p2c(x),g=r.p2c(g),v=s.p2c(v),a&&(l.fillStyle=a(x,v),l.fillRect(m,v,g-m,x-v)),0n.min?Math.min(n.max,o):n.min,c=0,u=1,p=!1,h=0,d=0,f=null,m=null;!(0r.length+s);){var g=r[(c+=s)-s],x=r[c-s+u],v=r[c],b=r[c+u];if(-2===s&&(x=b=l),p){if(0e.max){if(v>e.max)continue;x=(e.max-g)/(v-g)*(b-x)+x,g=e.max}else if(g<=v&&v>e.max){if(g>e.max)continue;b=(e.max-g)/(v-g)*(b-x)+x,v=e.max}if(p||(i.beginPath(),i.moveTo(e.p2c(g),n.p2c(l)),p=!0),x>=n.max&&b>=n.max)i.lineTo(e.p2c(g),n.p2c(n.max)),i.lineTo(e.p2c(v),n.p2c(n.max));else if(x<=n.min&&b<=n.min)i.lineTo(e.p2c(g),n.p2c(n.min)),i.lineTo(e.p2c(v),n.p2c(n.min));else{var y=g,w=v;x<=b&&x=n.min?(g=(n.min-x)/(b-x)*(v-g)+g,x=n.min):b<=x&&b=n.min&&(v=(n.min-x)/(b-x)*(v-g)+g,b=n.min),b<=x&&x>n.max&&b<=n.max?(g=(n.max-x)/(b-x)*(v-g)+g,x=n.max):x<=b&&b>n.max&&x<=n.max&&(v=(n.max-x)/(b-x)*(v-g)+g,b=n.max),g!==y&&i.lineTo(e.p2c(y),n.p2c(x)),i.lineTo(e.p2c(g),n.p2c(x)),i.lineTo(e.p2c(v),n.p2c(b)),v!==w&&(i.lineTo(e.p2c(v),n.p2c(b)),i.lineTo(e.p2c(w),n.p2c(b)))}}else m=f=null}}(s,t.xaxis,t.yaxis,t.lines.fillTowards||0,e,t.lines.steps)),0i.max){if(f>i.max)continue;p=(i.max-h)/(f-h)*(d-p)+p,h=i.max}else if(h<=f&&f>i.max){if(h>i.max)continue;d=(i.max-h)/(f-h)*(d-p)+p,f=i.max}if(p<=d&&po.max){if(d>o.max)continue;h=(o.max-p)/(d-p)*(f-h)+h,p=o.max}else if(p<=d&&d>o.max){if(p>o.max)continue;f=(o.max-p)/(d-p)*(f-h)+h,d=o.max}p===c&&h===u||a.moveTo(o.p2c(p)+e,i.p2c(h)+n),c=d,u=f,a.lineTo(o.p2c(d)+e,i.p2c(f)+n)}else g=m=null;a.stroke()}(s,0,0,t.xaxis,t.yaxis,e,t.lines.steps),e.restore()},this.drawSeriesPoints=function(t,d,e,n,o,i,a){function r(t,e,n,o,i,a){t.moveTo(e+o,n),t.arc(e,n,o,0,i?Math.PI:2*Math.PI,!1)}r.fill=!0,d.save(),d.translate(e.left,e.top);var s={format:t.datapoints.format,points:t.datapoints.points,pointsize:t.datapoints.pointsize};t.decimatePoints&&(s.points=t.decimatePoints(t,t.xaxis.min,t.xaxis.max,n,t.yaxis.min,t.yaxis.max,o));var l,c=t.points.lineWidth,u=t.points.radius,p=t.points.symbol;"circle"===p?l=r:"string"==typeof p&&i&&i[p]?l=i[p]:"function"==typeof i&&(l=i),0===c&&(c=1e-4),d.lineWidth=c,d.fillStyle=m(t.points,t.color,null,null,a),d.strokeStyle=t.color,function(t,e,n,o,i,a,r,s){var l=t.points,c=t.pointsize;d.beginPath();for(var u=0;ua.max||hr.max||(p=a.p2c(p),h=r.p2c(h)+o,s(d,p,h,e,i,n))}s.fill&&!i&&d.fill(),d.stroke()}(s,u,!0,0,!1,t.xaxis,t.yaxis,l),d.restore()},this.drawSeriesBars=function(h,d,t,e,n,o,i){d.save(),d.translate(t.left,t.top);var a,r={format:h.datapoints.format,points:h.datapoints.points,pointsize:h.datapoints.pointsize};h.decimate&&(r.points=h.decimate(h,h.xaxis.min,h.xaxis.max,e)),d.lineWidth=h.bars.lineWidth,d.strokeStyle=h.color;var s=h.bars.barWidth[0]||h.bars.barWidth;switch(h.bars.align){case"left":a=0;break;case"right":a=-s;break;default:a=-s/2}!function(t,e,n,o,i,a){for(var r=t.points,s=t.pointsize,l=h.bars.fillTowards||0,c=l>a.min?Math.min(a.max,l):a.min,u=0;ur[1].max||gr[0].max))continue;if("y"===l[d].err&&(m>r[0].max||mr[1].max))continue;var b=!0,y=!0;x>f[1]&&(b=!1,x=f[1]),v=f?d={pixelCoord:p,idealPixelCoord:d.idealPixelCoord-f}:h=null,h&&o.push(h);o.reverse()}else{var g=t.computeTickSize(l,c,n),x={min:l,max:c,tickSize:g};o=v.plot.linearTickGenerator(x)}return o},w=function(t,e){var n=t.min,o=t.max;return n<=0&&o<(n=null===t.datamin?t.min=.1:h(e,t))&&(t.max=null!==t.datamax?t.datamax:t.options.max,t.options.offset.below=0,t.options.offset.above=0),n},a=function(t,e,n){var o=0e.left&&a.lefte.top&&a.tope.left&&n.lefte.top&&n.topp.zoomRange[1])continue}var g=S.plot.saturated.saturate(f.below-(u.min-h)),x=S.plot.saturated.saturate(f.above-(u.max-d));p.offset={below:g,above:x}}}y.setupGrid(!0),y.draw(),t.preventEvent||y.getPlaceholder().trigger("plotzoom",[y,t])},y.pan=function(l){var c={x:+l.left,y:+l.top};isNaN(c.x)&&(c.x=0),isNaN(c.y)&&(c.y=0),S.each(l.axes||y.getAxes(),function(t,e){var n=e.options,o=c[e.direction];if((n.axisPan||!l.axes)&&(n.plotPan||l.axes)){var i=e.p2c(n.panRange[0])-e.p2c(e.min),a=e.p2c(n.panRange[1])-e.p2c(e.max);if(void 0!==n.panRange[0]&&a<=o&&(o=a),void 0!==n.panRange[1]&&o<=i&&(o=i),0!==o){var r=P.saturate(e.c2p(e.p2c(e.min)+o)-e.c2p(e.p2c(e.min))),s=P.saturate(e.c2p(e.p2c(e.max)+o)-e.c2p(e.p2c(e.max)));isFinite(r)||(r=0),isFinite(s)||(s=0),n.offset={below:P.saturate(r+(n.offset.below||0)),above:P.saturate(s+(n.offset.above||0))}}}}),y.setupGrid(!0),y.draw(),l.preventEvent||y.getPlaceholder().trigger("plotpan",[y,l])},y.recenter=function(n){S.each(n.axes||y.getAxes(),function(t,e){n.axes?"x"===this.direction?e.options.offset={below:0}:"y"===this.direction&&(e.options.offset={above:0}):e.options.offset={below:0,above:0}}),y.setupGrid(!0),y.draw()};var k=null,M={x:0,y:0};y.smartPan=function(a,t,r,e,n){var s,o,i,l,c,u,p,h,d,f,m,g,x,v=!!n||(o=a,Math.abs(o.y)=N||Math.abs(o.x)=N),b=y.getAxes();a=n?function(t){switch(!k&&Math.max(Math.abs(t.x),Math.abs(t.y))>=N&&(k=Math.abs(t.x)=N?{x:0,y:i.y}:Math.abs(i.y)=N?{x:i.x,y:0}:i),l=a,0e.left&&n.lefte.top&&n.top=e.length?null:e[t.fillBetween]:null}(e,t.getData());if(o){for(var i,a,r,s,l,c,u,p,h=n.pointsize,d=n.points,f=o.datapoints.pointsize,m=o.datapoints.points,g=[],x=e.lines.show,v=2=d.length);){if(u=g.length,null==d[w]){for(p=0;p=m.length){if(!x)for(p=0;p=t.min&&o<=t.max&&e.push([o,n])}return e.sort(function(t,e){return t[0]-e[0]}),e}function o(t,e,n){if("categories"===t[e].options.mode){if(!t[e].categories){var o={},i=t[e].options.categories||{};if(s.isArray(i))for(var a=0;ae&&(e=t[n]);return e+1}(n),l=0;l=m.length);){if(h=v.length,null==m[S]){for(d=0;d=x.length){if(!b)for(d=0;dm)&&(e=c,n=h,o=d,i=(t=u).offset(),a={left:0,top:0},r=x(e)/n.prevDistance,s=x(e),a.left=y(e,"pinch").x-i.left,a.top=y(e,"pinch").y-i.top,t.zoom({center:a,amount:r,axes:o.touchedAxis}),n.prevDistance=s,h.zoomEnable=!0),p=null},1e3/60))},end:function(t){p&&(clearTimeout(p),p=null),f(t,"pinch",h),h.prevDistance=null}},a={recenterPlot:function(t){t&&t.detail&&"touchstart"===t.detail.type&&function(t,e,n,o){if(a=t,r=e,s=o,l=a.getTouchedAxis(r.detail.firstTouch.x,r.detail.firstTouch.y),void 0!==l[0]&&(s.prevTouchedAxis=l[0].direction),void 0!==(l=a.getTouchedAxis(r.detail.secondTouch.x,r.detail.secondTouch.y))[0]&&(s.touchedAxis=l,s.currentTouchedAxis=l[0].direction),g(s)&&(s.touchedAxis=null,s.prevTouchedAxis="none",s.currentTouchedAxis="none"),"x"===o.currentTouchedAxis&&"x"===o.prevTouchedAxis||"y"===o.currentTouchedAxis&&"y"===o.prevTouchedAxis||"none"===o.currentTouchedAxis&&"none"===o.prevTouchedAxis){var i;t.recenter({axes:o.touchedAxis}),i=o.touchedAxis?new c.Event("re-center",{detail:{axisTouched:o.touchedAxis}}):new c.Event("re-center",{detail:e}),t.getPlaceholder().trigger(i)}var a,r,s,l}(u,t,0,d)}},!0!==t.pan.enableTouch&&!0!==t.zoom.enableTouch||(u.hooks.bindEvents.push(function(t,e){var n=t.getOptions();n.zoom.interactive&&n.zoom.enableTouch&&(e[0].addEventListener("pinchstart",i.start,!1),e[0].addEventListener("pinchdrag",i.drag,!1),e[0].addEventListener("pinchend",i.end,!1)),n.pan.interactive&&n.pan.enableTouch&&(e[0].addEventListener("panstart",o.start,!1),e[0].addEventListener("pandrag",o.drag,!1),e[0].addEventListener("panend",o.end,!1)),n.recenter.interactive&&n.recenter.enableTouch&&e[0].addEventListener("doubletap",a.recenterPlot,!1)}),u.hooks.shutdown.push(function(t,e){e[0].removeEventListener("panstart",o.start),e[0].removeEventListener("pandrag",o.drag),e[0].removeEventListener("panend",o.end),e[0].removeEventListener("pinchstart",i.start),e[0].removeEventListener("pinchdrag",i.drag),e[0].removeEventListener("pinchend",i.end),e[0].removeEventListener("doubletap",a.recenterPlot)}))}function g(t){return!t.touchedAxis||0===t.touchedAxis.length}function l(t,e,n,o){var i,a=y(t,e);switch(o.navigationConstraint){case"unconstrained":o.touchedAxis=null,n.prevTapPosition={x:n.prevPanPosition.x,y:n.prevPanPosition.y},n.prevPanPosition={x:a.x,y:a.y};break;case"axisConstrained":i=o.touchedAxis[0].direction,o.currentTouchedAxis=i,n.prevTapPosition[i]=n.prevPanPosition[i],n.prevPanPosition[i]=a[i]}}function x(t){var e,n,o,i,a=t.detail.touches[0],r=t.detail.touches[1];return e=a.pageX,n=a.pageY,o=r.pageX,i=r.pageY,Math.sqrt((e-o)*(e-o)+(n-i)*(n-i))}function v(t,e,n,o){var i=y(t,e);switch(o.navigationConstraint){case"unconstrained":n.prevPanPosition.x=i.x,n.prevPanPosition.y=i.y;break;case"axisConstrained":n.prevPanPosition[o.currentTouchedAxis]=i[o.currentTouchedAxis]}}function b(t,e,n){var o=y(t,e);return{x:o.x-n.prevPanPosition.x,y:o.y-n.prevPanPosition.y}}function y(t,e){return"pinch"===e?{x:(t.detail.touches[0].pageX+t.detail.touches[1].pageX)/2,y:(t.detail.touches[0].pageY+t.detail.touches[1].pageY)/2}:{x:t.detail.touches[0].pageX,y:t.detail.touches[0].pageY}}c.plot.plugins.push({init:function(t){t.hooks.processOptions.push(e)},options:{zoom:{enableTouch:!1},pan:{enableTouch:!1,touchMode:"manual"},recenter:{enableTouch:!0}},name:"navigateTouch",version:"0.3"})}(jQuery),function(y){var w=y.plot.browser,e="click",T="hover";y.plot.plugins.push({init:function(g){var n,x=[];function o(t){var e=g.getOptions(),n=new CustomEvent("mouseevent");return n.pageX=t.detail.changedTouches[0].pageX,n.pageY=t.detail.changedTouches[0].pageY,n.clientX=t.detail.changedTouches[0].clientX,n.clientY=t.detail.changedTouches[0].clientY,e.grid.hoverable&&i(n,T,30),!1}function i(t,e,n){var o=g.getData();if(void 0!==t&&0r.max||as.max)){var c=t.points.radius+t.points.lineWidth/2;n.lineWidth=c,n.strokeStyle=l;var u=1.5*c;i=r.p2c(i),a=s.p2c(a),n.beginPath();var p=t.points.symbol;"circle"===p?n.arc(i,a,u,0,2*Math.PI,!1):"string"==typeof p&&o.drawSymbol&&o.drawSymbol[p]&&o.drawSymbol[p](n,i,a,u,!1),n.closePath(),n.stroke()}}function m(t,e,n){var o,i="string"==typeof t.highlightColor?t.highlightColor:y.color.parse(t.color).scale("a",.5).toString(),a=i,r=t.bars.barWidth[0]||t.bars.barWidth;switch(t.bars.align){case"left":o=0;break;case"right":o=-r;break;default:o=-r/2}n.lineWidth=t.bars.lineWidth,n.strokeStyle=i;var s=t.bars.fillTowards||0,l=s>t.yaxis.min?Math.min(t.yaxis.max,s):t.yaxis.min;y.plot.drawSeries.drawBar(e[0],e[1],e[2]||l,o,o+r,function(){return a},t.xaxis,t.yaxis,n,t.bars.horizontal,t.bars.lineWidth)}g.hooks.bindEvents.push(function(t,e){var n=t.getOptions();(n.grid.hoverable||n.grid.clickable)&&(e[0].addEventListener("touchevent",l,!1),e[0].addEventListener("tap",o,!1)),n.grid.clickable&&e.bind("click",s),n.grid.hoverable&&(e.bind("mousemove",a),e.bind("mouseleave",r))}),g.hooks.shutdown.push(function(t,e){e[0].removeEventListener("tap",o),e[0].removeEventListener("touchevent",l),e.unbind("mousemove",a),e.unbind("mouseleave",r),e.unbind("click",s),x=[]}),g.hooks.processOptions.push(function(t,e){t.highlight=v,t.unhighlight=b,(e.grid.hoverable||e.grid.clickable)&&(t.hooks.drawOverlay.push(d),t.hooks.processDatapoints.push(p),t.hooks.setupGrid.push(h)),n=t.getPlaceholder()[0].lastMouseMoveEvent})},options:{grid:{hoverable:!1,clickable:!1}},name:"hover",version:"0.1"})}(jQuery),function(t){function e(n,t){var o,i={twoTouches:!1,currentTapStart:{x:0,y:0},currentTapEnd:{x:0,y:0},prevTap:{x:0,y:0},currentTap:{x:0,y:0},interceptedLongTap:!1,isUnsupportedGesture:!1,prevTapTime:null,tapStartTime:null,longTapTriggerId:null},a=20,r=500;function s(t){var e=n.getOptions();(e.pan.active||e.zoom.active)&&(3<=t.touches.length?i.isUnsupportedGesture=!0:i.isUnsupportedGesture=!1,o.dispatchEvent(new CustomEvent("touchevent",{detail:t})),v(t)?l(t,"pinch"):(l(t,"pan"),x(t)||(function(t){var e=(new Date).getTime(),n=e-i.prevTapTime;if(0<=n&&n=a);++s);var l=r[s][0],c=r[s][1];if("year"===c){if(null!==n.minTickSize&&void 0!==n.minTickSize&&"year"===n.minTickSize[1])l=Math.floor(n.minTickSize[0]);else{var u=parseFloat("1e"+Math.floor(Math.log(t.delta/e.year)/Math.LN10)),p=t.delta/e.year/u;l=p<1.5?1:p<3?2:p<7.5?5:10,l*=u}l<1&&(l=1)}t.tickSize=n.tickSize||[l,c];var h=t.tickSize[0],d=h*e[c=t.tickSize[1]];"microsecond"===c?i.setMicroseconds(y(i.getMicroseconds(),h)):"millisecond"===c?i.setMilliseconds(y(i.getMilliseconds(),h)):"second"===c?i.setSeconds(y(i.getSeconds(),h)):"minute"===c?i.setMinutes(y(i.getMinutes(),h)):"hour"===c?i.setHours(y(i.getHours(),h)):"month"===c?i.setMonth(y(i.getMonth(),h)):"quarter"===c?i.setMonth(3*y(i.getMonth()/3,h)):"year"===c&&i.setFullYear(y(i.getFullYear(),h)),d>=e.millisecond&&(d>=e.second?i.setMicroseconds(0):i.setMicroseconds(1e3*i.getMilliseconds())),d>=e.minute&&i.setSeconds(0),d>=e.hour&&i.setMinutes(0),d>=e.day&&i.setHours(0),d>=4*e.day&&i.setDate(1),d>=2*e.month&&i.setMonth(y(i.getMonth(),3)),d>=2*e.quarter&&i.setMonth(y(i.getMonth(),6)),d>=e.year&&i.setMonth(0);var f,m,g=0,x=Number.NaN;do{if(m=x,f=i.getTime(),x=n&&"seconds"===n.timeBase?f/1e3:n&&"microseconds"===n.timeBase?1e3*f:f,o.push(x),"month"===c||"quarter"===c)if(h<1){i.setDate(1);var v=i.getTime();i.setMonth(i.getMonth()+("quarter"===c?3:1));var b=i.getTime();i.setTime(x+g*e.hour+(b-v)*h),g=i.getHours(),i.setHours(0)}else i.setMonth(i.getMonth()+h*("quarter"===c?3:1));else"year"===c?i.setFullYear(i.getFullYear()+h):"seconds"===n.timeBase?i.setTime(1e3*(x+d)):"microseconds"===n.timeBase?i.setTime((x+d)/1e3):i.setTime(x+d)}while(x=t&&Math.abs(k.second.y-k.first.y)>=t}c.clearSelection=h,c.setSelection=function(t,e){var n;"y"===M(c)?(k.first.x=0,k.second.x=c.width()):(n=d(t,"x"),k.first.x=n.axis.p2c(n.from),k.second.x=n.axis.p2c(n.to)),"x"===M(c)?(k.first.y=0,k.second.y=c.height()):(n=d(t,"y"),k.first.y=n.axis.p2c(n.from),k.second.y=n.axis.p2c(n.to)),k.show=!0,c.triggerRedrawOverlay(),!e&&S()&&s()},c.getSelection=e,c.hooks.bindEvents.push(function(t,e){null!=t.getOptions().selection.mode&&(t.addEventHandler("dragstart",a,e,0),t.addEventHandler("drag",o,e,0),t.addEventHandler("dragend",r,e,0))}),c.hooks.drawOverlay.push(function(t,e){if(k.show&&S()){var n=t.getPlotOffset(),o=t.getOptions();e.save(),e.translate(n.left,n.top);var i=P.color.parse(o.selection.color),a=o.selection.visualization,r=o.selection.displaySelectionDecorations,s=1;"fill"===a&&(s=.8),e.strokeStyle=i.scale("a",s).toString(),e.lineWidth=1,e.lineJoin=o.selection.shape,e.fillStyle=i.scale("a",.4).toString();var l=Math.min(k.first.x,k.second.x)+.5,c=l,u=Math.min(k.first.y,k.second.y)+.5,p=u,h=Math.abs(k.second.x-k.first.x)-1,d=Math.abs(k.second.y-k.first.y)-1;"x"===M(t)&&(d+=u,u=0),"y"===M(t)&&(h+=l,l=0),"fill"===a?(e.fillRect(l,u,h,d),e.strokeRect(l,u,h,d)):(e.fillRect(0,0,t.width(),t.height()),e.clearRect(l,u,h,d),r&&(f=e,m=l,g=u,x=h,v=d,b=c,y=p,w=M(t),T=Math.max(0,Math.min(15,x/2-2,v/2-2)),f.fillStyle="#ffffff","xy"===w&&(f.beginPath(),f.moveTo(m,g+T),f.lineTo(m-3,g+T),f.lineTo(m-3,g-3),f.lineTo(m+T,g-3),f.lineTo(m+T,g),f.lineTo(m,g),f.closePath(),f.moveTo(m,g+v-T),f.lineTo(m-3,g+v-T),f.lineTo(m-3,g+v+3),f.lineTo(m+T,g+v+3),f.lineTo(m+T,g+v),f.lineTo(m,g+v),f.closePath(),f.moveTo(m+x,g+T),f.lineTo(m+x+3,g+T),f.lineTo(m+x+3,g-3),f.lineTo(m+x-T,g-3),f.lineTo(m+x-T,g),f.lineTo(m+x,g),f.closePath(),f.moveTo(m+x,g+v-T),f.lineTo(m+x+3,g+v-T),f.lineTo(m+x+3,g+v+3),f.lineTo(m+x-T,g+v+3),f.lineTo(m+x-T,g+v),f.lineTo(m+x,g+v),f.closePath(),f.stroke(),f.fill()),m=b,g=y,"x"===w&&(f.beginPath(),f.moveTo(m,g+15),f.lineTo(m,g-15),f.lineTo(m-3,g-15),f.lineTo(m-3,g+15),f.closePath(),f.moveTo(m+x,g+15),f.lineTo(m+x,g-15),f.lineTo(m+x+3,g-15),f.lineTo(m+x+3,g+15),f.closePath(),f.stroke(),f.fill()),"y"===w&&(f.beginPath(),f.moveTo(m-15,g),f.lineTo(m+15,g),f.lineTo(m+15,g-3),f.lineTo(m-15,g-3),f.closePath(),f.moveTo(m-15,g+v),f.lineTo(m+15,g+v),f.lineTo(m+15,g+v+3),f.lineTo(m-15,g+v+3),f.closePath(),f.stroke(),f.fill()))),e.restore()}var f,m,g,x,v,b,y,w,T}),c.hooks.shutdown.push(function(t,e){e.unbind("dragstart",a),e.unbind("drag",o),e.unbind("dragend",r)})},options:{selection:{mode:null,visualization:"focus",displaySelectionDecorations:!0,color:"#888888",shape:"round",minSize:5}},name:"selection",version:"1.1"})}(jQuery),function(t){var e=-100,c=0,u=-1,p=-2,h=1,g=t.plot.browser,a=g.getPixelRatio;function n(t,e){var n=t.filter(r);h=a(e.getContext("2d"));var o,i=n.map(function(t){var f,m,e=new Image;return new Promise((m=t,(f=e).sourceDescription='',f.sourceComponent=m,function(e,t){var n,o,i,a,r,s,l,c,u,p,h,d;f.onload=function(t){f.successfullyLoaded=!0,e(f)},f.onabort=function(t){f.successfullyLoaded=!1,console.log("Can't generate temp image from "+f.sourceDescription+". It is possible that it is missing some properties or its content is not supported by this browser. Source component:",f.sourceComponent),e(f)},f.onerror=function(t){f.successfullyLoaded=!1,console.log("Can't generate temp image from "+f.sourceDescription+". It is possible that it is missing some properties or its content is not supported by this browser. Source component:",f.sourceComponent),e(f)},o=f,"CANVAS"===(n=m).tagName&&(i=n,o.src=i.toDataURL("image/png")),"svg"===n.tagName&&(a=n,r=o,g.isSafari()||g.isMobileSafari()?(s=a,l=r,p=b(p=v(x(document),s)),u=function(t){for(var e="",n=new Uint8Array(t),o=0;ot[l].genLeft&&(i=t[l].genLeft),a>t[l].genTop&&(a=t[l].genTop);for(l=1;l',"",e.innerHTML,""].join("\n")}function b(t){var e="";return t.match(/^]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)||(e=t.replace(/^]+"http:\/\/www\.w3\.org\/1999\/xlink"/)||(e=t.replace(/^\r\n'+e}function s(){return e}t.plot.composeImages=n,t.plot.plugins.push({init:function(t){t.composeImages=n},name:"composeImages",version:"1.0"})}(jQuery),function(S){function P(t){var e="",n=t.name,o=t.xPos,i=t.yPos,a=t.fillColor,r=t.strokeColor,s=t.strokeWidth;switch(n){case"circle":e='';break;case"diamond":e='';break;case"cross":e='';break;case"rectangle":e='';break;case"plus":e='';break;case"bar":e='';break;case"area":e='';break;case"line":e='';break;default:e=''}return e}var C='';function l(t,e){for(var n in t)if(t.hasOwnProperty(n)&&t[n]!==e[n])return!0;return!1}S.plot.plugins.push({init:function(t){t.hooks.setupGrid.push(function(t){var e=t.getOptions(),n=t.getData(),o=e.legend.labelFormatter,i=e.legend.legendEntries,a=e.legend.plotOffset,r=function(t,e,n){var a=e,o=t.reduce(function(t,e,n){var o=a?a(e.label,e):e.label;if(!e.hasOwnProperty("label")||o){var i={label:o||"Plot "+(n+1),color:e.color,options:{lines:e.lines,points:e.points,bars:e.bars}};t.push(i)}return t},[]);if(n)if(S.isFunction(n))o.sort(n);else if("reverse"===n)o.reverse();else{var i="descending"!==n;o.sort(function(t,e){return t.label===e.label?0:t.label',u[p++]='',u[p++]=C;var g=0,x=[],v=window.getComputedStyle(document.querySelector("body"));for(s=0;sx[b]&&(x[b]=y+48):x[b]=y+48}for(s=0;s'+m.label+"",u[p++]=""+r+a+""}u[p++]="",null==f[0]&&(f=[f,f]),"n"===d.charAt(0)?h+="top:"+(f[1]+c.top)+"px;":"s"===d.charAt(0)&&(h+="bottom:"+(f[1]+c.bottom)+"px;"),"e"===d.charAt(1)?h+="right:"+(f[0]+c.right)+"px;":"w"===d.charAt(1)&&(h+="left:"+(f[0]+c.left)+"px;");var T=6;for(s=0;s'+u.join("")+"").appendTo(n)).css("width",T+"px"),k.css("height",M+"em"),k.css("pointerEvents","none"))}}(t,e,t.getPlaceholder(),r)})},options:{legend:{show:!1,noColumns:1,labelFormatter:null,container:null,position:"ne",margin:5,sorted:null}},name:"legend",version:"1.0"})}(jQuery); +//# sourceMappingURL=jquery.flot.js.map diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.axislabels.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.axislabels.js new file mode 100644 index 0000000..8c80828 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.axislabels.js @@ -0,0 +1,212 @@ +/* +Axis label plugin for flot + +Derived from: +Axis Labels Plugin for flot. +http://github.com/markrcote/flot-axislabels + +Original code is Copyright (c) 2010 Xuan Luo. +Original code was released under the GPLv3 license by Xuan Luo, September 2010. +Original code was rereleased under the MIT license by Xuan Luo, April 2012. + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ + +(function($) { + "use strict"; + + var options = { + axisLabels: { + show: true + } + }; + + function AxisLabel(axisName, position, padding, placeholder, axisLabel, surface) { + this.axisName = axisName; + this.position = position; + this.padding = padding; + this.placeholder = placeholder; + this.axisLabel = axisLabel; + this.surface = surface; + this.width = 0; + this.height = 0; + this.elem = null; + } + + AxisLabel.prototype.calculateSize = function() { + var axisId = this.axisName + 'Label', + layerId = axisId + 'Layer', + className = axisId + ' axisLabels'; + + var info = this.surface.getTextInfo(layerId, this.axisLabel, className); + this.labelWidth = info.width; + this.labelHeight = info.height; + + if (this.position === 'left' || this.position === 'right') { + this.width = this.labelHeight + this.padding; + this.height = 0; + } else { + this.width = 0; + this.height = this.labelHeight + this.padding; + } + }; + + AxisLabel.prototype.transforms = function(degrees, x, y, svgLayer) { + var transforms = [], translate, rotate; + if (x !== 0 || y !== 0) { + translate = svgLayer.createSVGTransform(); + translate.setTranslate(x, y); + transforms.push(translate); + } + if (degrees !== 0) { + rotate = svgLayer.createSVGTransform(); + var centerX = Math.round(this.labelWidth / 2), + centerY = 0; + rotate.setRotate(degrees, centerX, centerY); + transforms.push(rotate); + } + + return transforms; + }; + + AxisLabel.prototype.calculateOffsets = function(box) { + var offsets = { + x: 0, + y: 0, + degrees: 0 + }; + if (this.position === 'bottom') { + offsets.x = box.left + box.width / 2 - this.labelWidth / 2; + offsets.y = box.top + box.height - this.labelHeight; + } else if (this.position === 'top') { + offsets.x = box.left + box.width / 2 - this.labelWidth / 2; + offsets.y = box.top; + } else if (this.position === 'left') { + offsets.degrees = -90; + offsets.x = box.left - this.labelWidth / 2; + offsets.y = box.height / 2 + box.top; + } else if (this.position === 'right') { + offsets.degrees = 90; + offsets.x = box.left + box.width - this.labelWidth / 2; + offsets.y = box.height / 2 + box.top; + } + offsets.x = Math.round(offsets.x); + offsets.y = Math.round(offsets.y); + + return offsets; + }; + + AxisLabel.prototype.cleanup = function() { + var axisId = this.axisName + 'Label', + layerId = axisId + 'Layer', + className = axisId + ' axisLabels'; + this.surface.removeText(layerId, 0, 0, this.axisLabel, className); + }; + + AxisLabel.prototype.draw = function(box) { + var axisId = this.axisName + 'Label', + layerId = axisId + 'Layer', + className = axisId + ' axisLabels', + offsets = this.calculateOffsets(box), + style = { + position: 'absolute', + bottom: '', + right: '', + display: 'inline-block', + 'white-space': 'nowrap' + }; + + var layer = this.surface.getSVGLayer(layerId); + var transforms = this.transforms(offsets.degrees, offsets.x, offsets.y, layer.parentNode); + + this.surface.addText(layerId, 0, 0, this.axisLabel, className, undefined, undefined, undefined, undefined, transforms); + this.surface.render(); + Object.keys(style).forEach(function(key) { + layer.style[key] = style[key]; + }); + }; + + function init(plot) { + plot.hooks.processOptions.push(function(plot, options) { + if (!options.axisLabels.show) { + return; + } + + var axisLabels = {}; + var defaultPadding = 2; // padding between axis and tick labels + + plot.hooks.axisReserveSpace.push(function(plot, axis) { + var opts = axis.options; + var axisName = axis.direction + axis.n; + + axis.labelHeight += axis.boxPosition.centerY; + axis.labelWidth += axis.boxPosition.centerX; + + if (!opts || !opts.axisLabel || !axis.show) { + return; + } + + var padding = opts.axisLabelPadding === undefined + ? defaultPadding + : opts.axisLabelPadding; + + var axisLabel = axisLabels[axisName]; + if (!axisLabel) { + axisLabel = new AxisLabel(axisName, + opts.position, padding, + plot.getPlaceholder()[0], opts.axisLabel, plot.getSurface()); + axisLabels[axisName] = axisLabel; + } + + axisLabel.calculateSize(); + + // Incrementing the sizes of the tick labels. + axis.labelHeight += axisLabel.height; + axis.labelWidth += axisLabel.width; + }); + + // TODO - use the drawAxis hook + plot.hooks.draw.push(function(plot, ctx) { + $.each(plot.getAxes(), function(flotAxisName, axis) { + var opts = axis.options; + if (!opts || !opts.axisLabel || !axis.show) { + return; + } + + var axisName = axis.direction + axis.n; + axisLabels[axisName].draw(axis.box); + }); + }); + + plot.hooks.shutdown.push(function(plot, eventHolder) { + for (var axisName in axisLabels) { + axisLabels[axisName].cleanup(); + } + }); + }); + }; + + $.plot.plugins.push({ + init: init, + options: options, + name: 'axisLabels', + version: '3.0' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.browser.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.browser.js new file mode 100644 index 0000000..e50a629 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.browser.js @@ -0,0 +1,98 @@ +/** ## jquery.flot.browser.js + +This plugin is used to make available some browser-related utility functions. + +### Methods +*/ + +(function ($) { + 'use strict'; + + var browser = { + /** + - getPageXY(e) + + Calculates the pageX and pageY using the screenX, screenY properties of the event + and the scrolling of the page. This is needed because the pageX and pageY + properties of the event are not correct while running tests in Edge. */ + getPageXY: function (e) { + // This code is inspired from https://stackoverflow.com/a/3464890 + var doc = document.documentElement, + pageX = e.clientX + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0), + pageY = e.clientY + (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + return { X: pageX, Y: pageY }; + }, + + /** + - getPixelRatio(context) + + This function returns the current pixel ratio defined by the product of desktop + zoom and page zoom. + Additional info: https://www.html5rocks.com/en/tutorials/canvas/hidpi/ + */ + getPixelRatio: function(context) { + var devicePixelRatio = window.devicePixelRatio || 1, + backingStoreRatio = + context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + return devicePixelRatio / backingStoreRatio; + }, + + /** + - isSafari, isMobileSafari, isOpera, isFirefox, isIE, isEdge, isChrome, isBlink + + This is a collection of functions, used to check if the code is running in a + particular browser or Javascript engine. + */ + isSafari: function() { + // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser + // Safari 3.0+ "[object HTMLElementConstructor]" + return /constructor/i.test(window.top.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window.top['safari'] || (typeof window.top.safari !== 'undefined' && window.top.safari.pushNotification)); + }, + + isMobileSafari: function() { + //isMobileSafari adapted from https://stackoverflow.com/questions/3007480/determine-if-user-navigated-from-mobile-safari + return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/); + }, + + isOpera: function() { + // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser + //Opera 8.0+ + return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; + }, + + isFirefox: function() { + // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser + // Firefox 1.0+ + return typeof InstallTrigger !== 'undefined'; + }, + + isIE: function() { + // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser + // Internet Explorer 6-11 + return /*@cc_on!@*/false || !!document.documentMode; + }, + + isEdge: function() { + // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser + // Edge 20+ + return !browser.isIE() && !!window.StyleMedia; + }, + + isChrome: function() { + // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser + // Chrome 1+ + return !!window.chrome && !!window.chrome.webstore; + }, + + isBlink: function() { + // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser + return (browser.isChrome() || browser.isOpera()) && !!window.CSS; + } + }; + + $.plot.browser = browser; +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.categories.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.categories.js new file mode 100644 index 0000000..af16f78 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.categories.js @@ -0,0 +1,202 @@ +/* Flot plugin for plotting textual data or categories. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +Consider a dataset like [["February", 34], ["March", 20], ...]. This plugin +allows you to plot such a dataset directly. + +To enable it, you must specify mode: "categories" on the axis with the textual +labels, e.g. + + $.plot("#placeholder", data, { xaxis: { mode: "categories" } }); + +By default, the labels are ordered as they are met in the data series. If you +need a different ordering, you can specify "categories" on the axis options +and list the categories there: + + xaxis: { + mode: "categories", + categories: ["February", "March", "April"] + } + +If you need to customize the distances between the categories, you can specify +"categories" as an object mapping labels to values + + xaxis: { + mode: "categories", + categories: { "February": 1, "March": 3, "April": 4 } + } + +If you don't specify all categories, the remaining categories will be numbered +from the max value plus 1 (with a spacing of 1 between each). + +Internally, the plugin works by transforming the input data through an auto- +generated mapping where the first category becomes 0, the second 1, etc. +Hence, a point like ["February", 34] becomes [0, 34] internally in Flot (this +is visible in hover and click events that return numbers rather than the +category labels). The plugin also overrides the tick generator to spit out the +categories as ticks instead of the values. + +If you need to map a value back to its label, the mapping is always accessible +as "categories" on the axis object, e.g. plot.getAxes().xaxis.categories. + +*/ + +(function ($) { + var options = { + xaxis: { + categories: null + }, + yaxis: { + categories: null + } + }; + + function processRawData(plot, series, data, datapoints) { + // if categories are enabled, we need to disable + // auto-transformation to numbers so the strings are intact + // for later processing + + var xCategories = series.xaxis.options.mode === "categories", + yCategories = series.yaxis.options.mode === "categories"; + + if (!(xCategories || yCategories)) { + return; + } + + var format = datapoints.format; + + if (!format) { + // FIXME: auto-detection should really not be defined here + var s = series; + format = []; + format.push({ x: true, number: true, required: true, computeRange: true}); + format.push({ y: true, number: true, required: true, computeRange: true }); + + if (s.bars.show || (s.lines.show && s.lines.fill)) { + var autoScale = !!((s.bars.show && s.bars.zero) || (s.lines.show && s.lines.zero)); + format.push({ y: true, number: true, required: false, defaultValue: 0, computeRange: autoScale }); + if (s.bars.horizontal) { + delete format[format.length - 1].y; + format[format.length - 1].x = true; + } + } + + datapoints.format = format; + } + + for (var m = 0; m < format.length; ++m) { + if (format[m].x && xCategories) { + format[m].number = false; + } + + if (format[m].y && yCategories) { + format[m].number = false; + format[m].computeRange = false; + } + } + } + + function getNextIndex(categories) { + var index = -1; + + for (var v in categories) { + if (categories[v] > index) { + index = categories[v]; + } + } + + return index + 1; + } + + function categoriesTickGenerator(axis) { + var res = []; + for (var label in axis.categories) { + var v = axis.categories[label]; + if (v >= axis.min && v <= axis.max) { + res.push([v, label]); + } + } + + res.sort(function (a, b) { return a[0] - b[0]; }); + + return res; + } + + function setupCategoriesForAxis(series, axis, datapoints) { + if (series[axis].options.mode !== "categories") { + return; + } + + if (!series[axis].categories) { + // parse options + var c = {}, o = series[axis].options.categories || {}; + if ($.isArray(o)) { + for (var i = 0; i < o.length; ++i) { + c[o[i]] = i; + } + } else { + for (var v in o) { + c[v] = o[v]; + } + } + + series[axis].categories = c; + } + + // fix ticks + if (!series[axis].options.ticks) { + series[axis].options.ticks = categoriesTickGenerator; + } + + transformPointsOnAxis(datapoints, axis, series[axis].categories); + } + + function transformPointsOnAxis(datapoints, axis, categories) { + // go through the points, transforming them + var points = datapoints.points, + ps = datapoints.pointsize, + format = datapoints.format, + formatColumn = axis.charAt(0), + index = getNextIndex(categories); + + for (var i = 0; i < points.length; i += ps) { + if (points[i] == null) { + continue; + } + + for (var m = 0; m < ps; ++m) { + var val = points[i + m]; + + if (val == null || !format[m][formatColumn]) { + continue; + } + + if (!(val in categories)) { + categories[val] = index; + ++index; + } + + points[i + m] = categories[val]; + } + } + } + + function processDatapoints(plot, series, datapoints) { + setupCategoriesForAxis(series, "xaxis", datapoints); + setupCategoriesForAxis(series, "yaxis", datapoints); + } + + function init(plot) { + plot.hooks.processRawData.push(processRawData); + plot.hooks.processDatapoints.push(processDatapoints); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'categories', + version: '1.0' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.composeImages.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.composeImages.js new file mode 100644 index 0000000..0b7ab78 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.composeImages.js @@ -0,0 +1,330 @@ +/** ## jquery.flot.composeImages.js + +This plugin is used to expose a function used to overlap several canvases and +SVGs, for the purpose of creating a snaphot out of them. + +### When composeImages is used: +When multiple canvases and SVGs have to be overlapped into a single image +and their offset on the page, must be preserved. + +### Where can be used: +In creating a downloadable snapshot of the plots, axes, cursors etc of a graph. + +### How it works: +The entry point is composeImages function. It expects an array of objects, +which should be either canvases or SVGs (or a mix). It does a prevalidation +of them, by verifying if they will be usable or not, later in the flow. +After selecting only usable sources, it passes them to getGenerateTempImg +function, which generates temporary images out of them. This function +expects that some of the passed sources (canvas or SVG) may still have +problems being converted to an image and makes sure the promises system, +used by composeImages function, moves forward. As an example, SVGs with +missing information from header or with unsupported content, may lead to +failure in generating the temporary image. Temporary images are required +mostly on extracting content from SVGs, but this is also where the x/y +offsets are extracted for each image which will be added. For SVGs in +particular, their CSS rules have to be applied. +After all temporary images are generated, they are overlapped using +getExecuteImgComposition function. This is where the destination canvas +is set to the proper dimensions. It is then output by composeImages. +This function returns a promise, which can be used to wait for the whole +composition process. It requires to be asynchronous, because this is how +temporary images load their data. +*/ + +(function($) { + "use strict"; + const GENERALFAILURECALLBACKERROR = -100; //simply a negative number + const SUCCESSFULIMAGEPREPARATION = 0; + const EMPTYARRAYOFIMAGESOURCES = -1; + const NEGATIVEIMAGESIZE = -2; + var pixelRatio = 1; + var browser = $.plot.browser; + var getPixelRatio = browser.getPixelRatio; + + function composeImages(canvasOrSvgSources, destinationCanvas) { + var validCanvasOrSvgSources = canvasOrSvgSources.filter(isValidSource); + pixelRatio = getPixelRatio(destinationCanvas.getContext('2d')); + + var allImgCompositionPromises = validCanvasOrSvgSources.map(function(validCanvasOrSvgSource) { + var tempImg = new Image(); + var currentPromise = new Promise(getGenerateTempImg(tempImg, validCanvasOrSvgSource)); + return currentPromise; + }); + + var lastPromise = Promise.all(allImgCompositionPromises).then(getExecuteImgComposition(destinationCanvas), failureCallback); + return lastPromise; + } + + function isValidSource(canvasOrSvgSource) { + var isValidFromCanvas = true; + var isValidFromContent = true; + if ((canvasOrSvgSource === null) || (canvasOrSvgSource === undefined)) { + isValidFromContent = false; + } else { + if (canvasOrSvgSource.tagName === 'CANVAS') { + if ((canvasOrSvgSource.getBoundingClientRect().right === canvasOrSvgSource.getBoundingClientRect().left) || + (canvasOrSvgSource.getBoundingClientRect().bottom === canvasOrSvgSource.getBoundingClientRect().top)) { + isValidFromCanvas = false; + } + } + } + return isValidFromContent && isValidFromCanvas && (window.getComputedStyle(canvasOrSvgSource).visibility === 'visible'); + } + + function getGenerateTempImg(tempImg, canvasOrSvgSource) { + tempImg.sourceDescription = ''; + tempImg.sourceComponent = canvasOrSvgSource; + + return function doGenerateTempImg(successCallbackFunc, failureCallbackFunc) { + tempImg.onload = function(evt) { + tempImg.successfullyLoaded = true; + successCallbackFunc(tempImg); + }; + + tempImg.onabort = function(evt) { + tempImg.successfullyLoaded = false; + console.log('Can\'t generate temp image from ' + tempImg.sourceDescription + '. It is possible that it is missing some properties or its content is not supported by this browser. Source component:', tempImg.sourceComponent); + successCallbackFunc(tempImg); //call successCallback, to allow snapshot of all working images + }; + + tempImg.onerror = function(evt) { + tempImg.successfullyLoaded = false; + console.log('Can\'t generate temp image from ' + tempImg.sourceDescription + '. It is possible that it is missing some properties or its content is not supported by this browser. Source component:', tempImg.sourceComponent); + successCallbackFunc(tempImg); //call successCallback, to allow snapshot of all working images + }; + + generateTempImageFromCanvasOrSvg(canvasOrSvgSource, tempImg); + }; + } + + function getExecuteImgComposition(destinationCanvas) { + return function executeImgComposition(tempImgs) { + var compositionResult = copyImgsToCanvas(tempImgs, destinationCanvas); + return compositionResult; + }; + } + + function copyCanvasToImg(canvas, img) { + img.src = canvas.toDataURL('image/png'); + } + + function getCSSRules(document) { + var styleSheets = document.styleSheets, + rulesList = []; + for (var i = 0; i < styleSheets.length; i++) { + // CORS requests for style sheets throw and an exception on Chrome > 64 + try { + // in Chrome, the external CSS files are empty when the page is directly loaded from disk + var rules = styleSheets[i].cssRules || []; + for (var j = 0; j < rules.length; j++) { + var rule = rules[j]; + rulesList.push(rule.cssText); + } + } catch (e) { + console.log('Failed to get some css rules'); + } + } + return rulesList; + } + + function embedCSSRulesInSVG(rules, svg) { + var text = [ + '', + '', + svg.innerHTML, + '' + ].join('\n'); + return text; + } + + function copySVGToImgMostBrowsers(svg, img) { + var rules = getCSSRules(document), + source = embedCSSRulesInSVG(rules, svg); + + source = patchSVGSource(source); + + var blob = new Blob([source], {type: "image/svg+xml;charset=utf-8"}), + domURL = self.URL || self.webkitURL || self, + url = domURL.createObjectURL(blob); + img.src = url; + } + + function copySVGToImgSafari(svg, img) { + // Use this method to convert a string buffer array to a binary string. + // Do so by breaking up large strings into smaller substrings; this is necessary to avoid the + // "maximum call stack size exceeded" exception that can happen when calling 'String.fromCharCode.apply' + // with a very long array. + function buildBinaryString (arrayBuffer) { + var binaryString = ""; + const utf8Array = new Uint8Array(arrayBuffer); + const blockSize = 16384; + for (var i = 0; i < utf8Array.length; i = i + blockSize) { + const binarySubString = String.fromCharCode.apply(null, utf8Array.subarray(i, i + blockSize)); + binaryString = binaryString + binarySubString; + } + return binaryString; + }; + + var rules = getCSSRules(document), + source = embedCSSRulesInSVG(rules, svg), + data, + utf8BinaryString; + + source = patchSVGSource(source); + + // Encode the string as UTF-8 and convert it to a binary string. The UTF-8 encoding is required to + // capture unicode characters correctly. + utf8BinaryString = buildBinaryString(new (TextEncoder || TextEncoderLite)('utf-8').encode(source)); + + data = "data:image/svg+xml;base64," + btoa(utf8BinaryString); + img.src = data; + } + + function patchSVGSource(svgSource) { + var source = ''; + //add name spaces. + if (!svgSource.match(/^]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) { + source = svgSource.replace(/^]+"http:\/\/www\.w3\.org\/1999\/xlink"/)) { + source = svgSource.replace(/^\r\n' + source; + } + + function copySVGToImg(svg, img) { + if (browser.isSafari() || browser.isMobileSafari()) { + copySVGToImgSafari(svg, img); + } else { + copySVGToImgMostBrowsers(svg, img); + } + } + + function adaptDestSizeToZoom(destinationCanvas, sources) { + function containsSVGs(source) { + return source.srcImgTagName === 'svg'; + } + + if (sources.find(containsSVGs) !== undefined) { + if (pixelRatio < 1) { + destinationCanvas.width = destinationCanvas.width * pixelRatio; + destinationCanvas.height = destinationCanvas.height * pixelRatio; + } + } + } + + function prepareImagesToBeComposed(sources, destination) { + var result = SUCCESSFULIMAGEPREPARATION; + if (sources.length === 0) { + result = EMPTYARRAYOFIMAGESOURCES; //nothing to do if called without sources + } else { + var minX = sources[0].genLeft; + var minY = sources[0].genTop; + var maxX = sources[0].genRight; + var maxY = sources[0].genBottom; + var i = 0; + + for (i = 1; i < sources.length; i++) { + if (minX > sources[i].genLeft) { + minX = sources[i].genLeft; + } + + if (minY > sources[i].genTop) { + minY = sources[i].genTop; + } + } + + for (i = 1; i < sources.length; i++) { + if (maxX < sources[i].genRight) { + maxX = sources[i].genRight; + } + + if (maxY < sources[i].genBottom) { + maxY = sources[i].genBottom; + } + } + + if ((maxX - minX <= 0) || (maxY - minY <= 0)) { + result = NEGATIVEIMAGESIZE; //this might occur on hidden images + } else { + destination.width = Math.round(maxX - minX); + destination.height = Math.round(maxY - minY); + + for (i = 0; i < sources.length; i++) { + sources[i].xCompOffset = sources[i].genLeft - minX; + sources[i].yCompOffset = sources[i].genTop - minY; + } + + adaptDestSizeToZoom(destination, sources); + } + } + return result; + } + + function copyImgsToCanvas(sources, destination) { + var prepareImagesResult = prepareImagesToBeComposed(sources, destination); + if (prepareImagesResult === SUCCESSFULIMAGEPREPARATION) { + var destinationCtx = destination.getContext('2d'); + + for (var i = 0; i < sources.length; i++) { + if (sources[i].successfullyLoaded === true) { + destinationCtx.drawImage(sources[i], sources[i].xCompOffset * pixelRatio, sources[i].yCompOffset * pixelRatio); + } + } + } + return prepareImagesResult; + } + + function adnotateDestImgWithBoundingClientRect(srcCanvasOrSvg, destImg) { + destImg.genLeft = srcCanvasOrSvg.getBoundingClientRect().left; + destImg.genTop = srcCanvasOrSvg.getBoundingClientRect().top; + + if (srcCanvasOrSvg.tagName === 'CANVAS') { + destImg.genRight = destImg.genLeft + srcCanvasOrSvg.width; + destImg.genBottom = destImg.genTop + srcCanvasOrSvg.height; + } + + if (srcCanvasOrSvg.tagName === 'svg') { + destImg.genRight = srcCanvasOrSvg.getBoundingClientRect().right; + destImg.genBottom = srcCanvasOrSvg.getBoundingClientRect().bottom; + } + } + + function generateTempImageFromCanvasOrSvg(srcCanvasOrSvg, destImg) { + if (srcCanvasOrSvg.tagName === 'CANVAS') { + copyCanvasToImg(srcCanvasOrSvg, destImg); + } + + if (srcCanvasOrSvg.tagName === 'svg') { + copySVGToImg(srcCanvasOrSvg, destImg); + } + + destImg.srcImgTagName = srcCanvasOrSvg.tagName; + adnotateDestImgWithBoundingClientRect(srcCanvasOrSvg, destImg); + } + + function failureCallback() { + return GENERALFAILURECALLBACKERROR; + } + + // used for testing + $.plot.composeImages = composeImages; + + function init(plot) { + // used to extend the public API of the plot + plot.composeImages = composeImages; + } + + $.plot.plugins.push({ + init: init, + name: 'composeImages', + version: '1.0' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.crosshair.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.crosshair.js new file mode 100644 index 0000000..385c705 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.crosshair.js @@ -0,0 +1,202 @@ +/* Flot plugin for showing crosshairs when the mouse hovers over the plot. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin supports these options: + + crosshair: { + mode: null or "x" or "y" or "xy" + color: color + lineWidth: number + } + +Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical +crosshair that lets you trace the values on the x axis, "y" enables a +horizontal crosshair and "xy" enables them both. "color" is the color of the +crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of +the drawn lines (default is 1). + +The plugin also adds four public methods: + + - setCrosshair( pos ) + + Set the position of the crosshair. Note that this is cleared if the user + moves the mouse. "pos" is in coordinates of the plot and should be on the + form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple + axes), which is coincidentally the same format as what you get from a + "plothover" event. If "pos" is null, the crosshair is cleared. + + - clearCrosshair() + + Clear the crosshair. + + - lockCrosshair(pos) + + Cause the crosshair to lock to the current location, no longer updating if + the user moves the mouse. Optionally supply a position (passed on to + setCrosshair()) to move it to. + + Example usage: + + var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; + $("#graph").bind( "plothover", function ( evt, position, item ) { + if ( item ) { + // Lock the crosshair to the data point being hovered + myFlot.lockCrosshair({ + x: item.datapoint[ 0 ], + y: item.datapoint[ 1 ] + }); + } else { + // Return normal crosshair operation + myFlot.unlockCrosshair(); + } + }); + + - unlockCrosshair() + + Free the crosshair to move again after locking it. +*/ + +(function ($) { + var options = { + crosshair: { + mode: null, // one of null, "x", "y" or "xy", + color: "rgba(170, 0, 0, 0.80)", + lineWidth: 1 + } + }; + + function init(plot) { + // position of crosshair in pixels + var crosshair = {x: -1, y: -1, locked: false, highlighted: false}; + + plot.setCrosshair = function setCrosshair(pos) { + if (!pos) { + crosshair.x = -1; + } else { + var o = plot.p2c(pos); + crosshair.x = Math.max(0, Math.min(o.left, plot.width())); + crosshair.y = Math.max(0, Math.min(o.top, plot.height())); + } + + plot.triggerRedrawOverlay(); + }; + + plot.clearCrosshair = plot.setCrosshair; // passes null for pos + + plot.lockCrosshair = function lockCrosshair(pos) { + if (pos) { + plot.setCrosshair(pos); + } + + crosshair.locked = true; + }; + + plot.unlockCrosshair = function unlockCrosshair() { + crosshair.locked = false; + crosshair.rect = null; + }; + + function onMouseOut(e) { + if (crosshair.locked) { + return; + } + + if (crosshair.x !== -1) { + crosshair.x = -1; + plot.triggerRedrawOverlay(); + } + } + + function onMouseMove(e) { + var offset = plot.offset(); + if (crosshair.locked) { + var mouseX = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); + var mouseY = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); + + if ((mouseX > crosshair.x - 4) && (mouseX < crosshair.x + 4) && (mouseY > crosshair.y - 4) && (mouseY < crosshair.y + 4)) { + if (!crosshair.highlighted) { + crosshair.highlighted = true; + plot.triggerRedrawOverlay(); + } + } else { + if (crosshair.highlighted) { + crosshair.highlighted = false; + plot.triggerRedrawOverlay(); + } + } + return; + } + + if (plot.getSelection && plot.getSelection()) { + crosshair.x = -1; // hide the crosshair while selecting + return; + } + + crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); + crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); + plot.triggerRedrawOverlay(); + } + + plot.hooks.bindEvents.push(function (plot, eventHolder) { + if (!plot.getOptions().crosshair.mode) { + return; + } + + eventHolder.mouseout(onMouseOut); + eventHolder.mousemove(onMouseMove); + }); + + plot.hooks.drawOverlay.push(function (plot, ctx) { + var c = plot.getOptions().crosshair; + if (!c.mode) { + return; + } + + var plotOffset = plot.getPlotOffset(); + + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + + if (crosshair.x !== -1) { + var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0; + + ctx.strokeStyle = c.color; + ctx.lineWidth = c.lineWidth; + ctx.lineJoin = "round"; + + ctx.beginPath(); + if (c.mode.indexOf("x") !== -1) { + var drawX = Math.floor(crosshair.x) + adj; + ctx.moveTo(drawX, 0); + ctx.lineTo(drawX, plot.height()); + } + if (c.mode.indexOf("y") !== -1) { + var drawY = Math.floor(crosshair.y) + adj; + ctx.moveTo(0, drawY); + ctx.lineTo(plot.width(), drawY); + } + if (crosshair.locked) { + if (crosshair.highlighted) ctx.fillStyle = 'orange'; + else ctx.fillStyle = c.color; + ctx.fillRect(Math.floor(crosshair.x) + adj - 4, Math.floor(crosshair.y) + adj - 4, 8, 8); + } + ctx.stroke(); + } + ctx.restore(); + }); + + plot.hooks.shutdown.push(function (plot, eventHolder) { + eventHolder.unbind("mouseout", onMouseOut); + eventHolder.unbind("mousemove", onMouseMove); + }); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'crosshair', + version: '1.0' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.drawSeries.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.drawSeries.js new file mode 100644 index 0000000..0c49be1 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.drawSeries.js @@ -0,0 +1,662 @@ +/** +## jquery.flot.drawSeries.js + +This plugin is used by flot for drawing lines, plots, bars or area. + +### Public methods +*/ + +(function($) { + "use strict"; + + function DrawSeries() { + function plotLine(datapoints, xoffset, yoffset, axisx, axisy, ctx, steps) { + var points = datapoints.points, + ps = datapoints.pointsize, + prevx = null, + prevy = null; + var x1 = 0.0, + y1 = 0.0, + x2 = 0.0, + y2 = 0.0, + mx = null, + my = null, + i = 0; + + ctx.beginPath(); + for (i = ps; i < points.length; i += ps) { + x1 = points[i - ps]; + y1 = points[i - ps + 1]; + x2 = points[i]; + y2 = points[i + 1]; + + if (x1 === null || x2 === null) { + mx = null; + my = null; + continue; + } + + if (isNaN(x1) || isNaN(x2) || isNaN(y1) || isNaN(y2)) { + prevx = null; + prevy = null; + continue; + } + + if (steps) { + if (mx !== null && my !== null) { + // if middle point exists, transfer p2 -> p1 and p1 -> mp + x2 = x1; + y2 = y1; + x1 = mx; + y1 = my; + + // 'remove' middle point + mx = null; + my = null; + + // subtract pointsize from i to have current point p1 handled again + i -= ps; + } else if (y1 !== y2 && x1 !== x2) { + // create a middle point + y2 = y1; + mx = x2; + my = y1; + } + } + + // clip with ymin + if (y1 <= y2 && y1 < axisy.min) { + if (y2 < axisy.min) { + // line segment is outside + continue; + } + // compute new intersection point + x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = axisy.min; + } else if (y2 <= y1 && y2 < axisy.min) { + if (y1 < axisy.min) { + continue; + } + + x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = axisy.min; + } + + // clip with ymax + if (y1 >= y2 && y1 > axisy.max) { + if (y2 > axisy.max) { + continue; + } + + x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = axisy.max; + } else if (y2 >= y1 && y2 > axisy.max) { + if (y1 > axisy.max) { + continue; + } + + x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = axisy.max; + } + + // clip with xmin + if (x1 <= x2 && x1 < axisx.min) { + if (x2 < axisx.min) { + continue; + } + + y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = axisx.min; + } else if (x2 <= x1 && x2 < axisx.min) { + if (x1 < axisx.min) { + continue; + } + + y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = axisx.min; + } + + // clip with xmax + if (x1 >= x2 && x1 > axisx.max) { + if (x2 > axisx.max) { + continue; + } + + y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = axisx.max; + } else if (x2 >= x1 && x2 > axisx.max) { + if (x1 > axisx.max) { + continue; + } + + y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = axisx.max; + } + + if (x1 !== prevx || y1 !== prevy) { + ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset); + } + + prevx = x2; + prevy = y2; + ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset); + } + ctx.stroke(); + } + + function plotLineArea(datapoints, axisx, axisy, fillTowards, ctx, steps) { + var points = datapoints.points, + ps = datapoints.pointsize, + bottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min, + i = 0, + ypos = 1, + areaOpen = false, + segmentStart = 0, + segmentEnd = 0, + mx = null, + my = null; + + // we process each segment in two turns, first forward + // direction to sketch out top, then once we hit the + // end we go backwards to sketch the bottom + while (true) { + if (ps > 0 && i > points.length + ps) { + break; + } + + i += ps; // ps is negative if going backwards + + var x1 = points[i - ps], + y1 = points[i - ps + ypos], + x2 = points[i], + y2 = points[i + ypos]; + + if (ps === -2) { + /* going backwards and no value for the bottom provided in the series*/ + y1 = y2 = bottom; + } + + if (areaOpen) { + if (ps > 0 && x1 != null && x2 == null) { + // at turning point + segmentEnd = i; + ps = -ps; + ypos = 2; + continue; + } + + if (ps < 0 && i === segmentStart + ps) { + // done with the reverse sweep + ctx.fill(); + areaOpen = false; + ps = -ps; + ypos = 1; + i = segmentStart = segmentEnd + ps; + continue; + } + } + + if (x1 == null || x2 == null) { + mx = null; + my = null; + continue; + } + + if (steps) { + if (mx !== null && my !== null) { + // if middle point exists, transfer p2 -> p1 and p1 -> mp + x2 = x1; + y2 = y1; + x1 = mx; + y1 = my; + + // 'remove' middle point + mx = null; + my = null; + + // subtract pointsize from i to have current point p1 handled again + i -= ps; + } else if (y1 !== y2 && x1 !== x2) { + // create a middle point + y2 = y1; + mx = x2; + my = y1; + } + } + + // clip x values + + // clip with xmin + if (x1 <= x2 && x1 < axisx.min) { + if (x2 < axisx.min) { + continue; + } + + y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = axisx.min; + } else if (x2 <= x1 && x2 < axisx.min) { + if (x1 < axisx.min) { + continue; + } + + y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = axisx.min; + } + + // clip with xmax + if (x1 >= x2 && x1 > axisx.max) { + if (x2 > axisx.max) { + continue; + } + + y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = axisx.max; + } else if (x2 >= x1 && x2 > axisx.max) { + if (x1 > axisx.max) { + continue; + } + + y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = axisx.max; + } + + if (!areaOpen) { + // open area + ctx.beginPath(); + ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom)); + areaOpen = true; + } + + // now first check the case where both is outside + if (y1 >= axisy.max && y2 >= axisy.max) { + ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max)); + ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max)); + continue; + } else if (y1 <= axisy.min && y2 <= axisy.min) { + ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min)); + ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min)); + continue; + } + + // else it's a bit more complicated, there might + // be a flat maxed out rectangle first, then a + // triangular cutout or reverse; to find these + // keep track of the current x values + var x1old = x1, + x2old = x2; + + // clip the y values, without shortcutting, we + // go through all cases in turn + + // clip with ymin + if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) { + x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = axisy.min; + } else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) { + x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = axisy.min; + } + + // clip with ymax + if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) { + x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = axisy.max; + } else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) { + x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = axisy.max; + } + + // if the x value was changed we got a rectangle + // to fill + if (x1 !== x1old) { + ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1)); + // it goes to (x1, y1), but we fill that below + } + + // fill triangular section, this sometimes result + // in redundant points if (x1, y1) hasn't changed + // from previous line to, but we just ignore that + ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1)); + ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); + + // fill the other rectangle if it's there + if (x2 !== x2old) { + ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); + ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2)); + } + } + } + + /** + - drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) + + This function is used for drawing lines or area fill. In case the series has line decimation function + attached, before starting to draw, as an optimization the points will first be decimated. + + The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and + plotHeight are the corresponding parameters of flot used to determine the drawing surface. + The function getColorOrGradient is used to compute the fill style of lines and area. + */ + function drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) { + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + ctx.lineJoin = "round"; + + if (series.lines.dashes && ctx.setLineDash) { + ctx.setLineDash(series.lines.dashes); + } + + var datapoints = { + format: series.datapoints.format, + points: series.datapoints.points, + pointsize: series.datapoints.pointsize + }; + + if (series.decimate) { + datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight); + } + + var lw = series.lines.lineWidth; + + ctx.lineWidth = lw; + ctx.strokeStyle = series.color; + var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight, getColorOrGradient); + if (fillStyle) { + ctx.fillStyle = fillStyle; + plotLineArea(datapoints, series.xaxis, series.yaxis, series.lines.fillTowards || 0, ctx, series.lines.steps); + } + + if (lw > 0) { + plotLine(datapoints, 0, 0, series.xaxis, series.yaxis, ctx, series.lines.steps); + } + + ctx.restore(); + } + + /** + - drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) + + This function is used for drawing points using a given symbol. In case the series has points decimation + function attached, before starting to draw, as an optimization the points will first be decimated. + + The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and + plotHeight are the corresponding parameters of flot used to determine the drawing surface. + The function drawSymbol is used to compute and draw the symbol chosen for the points. + */ + function drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) { + function drawCircle(ctx, x, y, radius, shadow, fill) { + ctx.moveTo(x + radius, y); + ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false); + } + drawCircle.fill = true; + function plotPoints(datapoints, radius, fill, offset, shadow, axisx, axisy, drawSymbolFn) { + var points = datapoints.points, + ps = datapoints.pointsize; + + ctx.beginPath(); + for (var i = 0; i < points.length; i += ps) { + var x = points[i], + y = points[i + 1]; + if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) { + continue; + } + + x = axisx.p2c(x); + y = axisy.p2c(y) + offset; + + drawSymbolFn(ctx, x, y, radius, shadow, fill); + } + if (drawSymbolFn.fill && !shadow) { + ctx.fill(); + } + ctx.stroke(); + } + + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + + var datapoints = { + format: series.datapoints.format, + points: series.datapoints.points, + pointsize: series.datapoints.pointsize + }; + + if (series.decimatePoints) { + datapoints.points = series.decimatePoints(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight); + } + + var lw = series.points.lineWidth, + radius = series.points.radius, + symbol = series.points.symbol, + drawSymbolFn; + + if (symbol === 'circle') { + drawSymbolFn = drawCircle; + } else if (typeof symbol === 'string' && drawSymbol && drawSymbol[symbol]) { + drawSymbolFn = drawSymbol[symbol]; + } else if (typeof drawSymbol === 'function') { + drawSymbolFn = drawSymbol; + } + + // If the user sets the line width to 0, we change it to a very + // small value. A line width of 0 seems to force the default of 1. + + if (lw === 0) { + lw = 0.0001; + } + + ctx.lineWidth = lw; + ctx.fillStyle = getFillStyle(series.points, series.color, null, null, getColorOrGradient); + ctx.strokeStyle = series.color; + plotPoints(datapoints, radius, + true, 0, false, + series.xaxis, series.yaxis, drawSymbolFn); + ctx.restore(); + } + + function drawBar(x, y, b, barLeft, barRight, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) { + var left = x + barLeft, + right = x + barRight, + bottom = b, top = y, + drawLeft, drawRight, drawTop, drawBottom = false, + tmp; + + drawLeft = drawRight = drawTop = true; + + // in horizontal mode, we start the bar from the left + // instead of from the bottom so it appears to be + // horizontal rather than vertical + if (horizontal) { + drawBottom = drawRight = drawTop = true; + drawLeft = false; + left = b; + right = x; + top = y + barLeft; + bottom = y + barRight; + + // account for negative bars + if (right < left) { + tmp = right; + right = left; + left = tmp; + drawLeft = true; + drawRight = false; + } + } else { + drawLeft = drawRight = drawTop = true; + drawBottom = false; + left = x + barLeft; + right = x + barRight; + bottom = b; + top = y; + + // account for negative bars + if (top < bottom) { + tmp = top; + top = bottom; + bottom = tmp; + drawBottom = true; + drawTop = false; + } + } + + // clip + if (right < axisx.min || left > axisx.max || + top < axisy.min || bottom > axisy.max) { + return; + } + + if (left < axisx.min) { + left = axisx.min; + drawLeft = false; + } + + if (right > axisx.max) { + right = axisx.max; + drawRight = false; + } + + if (bottom < axisy.min) { + bottom = axisy.min; + drawBottom = false; + } + + if (top > axisy.max) { + top = axisy.max; + drawTop = false; + } + + left = axisx.p2c(left); + bottom = axisy.p2c(bottom); + right = axisx.p2c(right); + top = axisy.p2c(top); + + // fill the bar + if (fillStyleCallback) { + c.fillStyle = fillStyleCallback(bottom, top); + c.fillRect(left, top, right - left, bottom - top) + } + + // draw outline + if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) { + c.beginPath(); + + // FIXME: inline moveTo is buggy with excanvas + c.moveTo(left, bottom); + if (drawLeft) { + c.lineTo(left, top); + } else { + c.moveTo(left, top); + } + + if (drawTop) { + c.lineTo(right, top); + } else { + c.moveTo(right, top); + } + + if (drawRight) { + c.lineTo(right, bottom); + } else { + c.moveTo(right, bottom); + } + + if (drawBottom) { + c.lineTo(left, bottom); + } else { + c.moveTo(left, bottom); + } + + c.stroke(); + } + } + + /** + - drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) + + This function is used for drawing series represented as bars. In case the series has decimation + function attached, before starting to draw, as an optimization the points will first be decimated. + + The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and + plotHeight are the corresponding parameters of flot used to determine the drawing surface. + The function getColorOrGradient is used to compute the fill style of bars. + */ + function drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) { + function plotBars(datapoints, barLeft, barRight, fillStyleCallback, axisx, axisy) { + var points = datapoints.points, + ps = datapoints.pointsize, + fillTowards = series.bars.fillTowards || 0, + defaultBottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min; + + for (var i = 0; i < points.length; i += ps) { + if (points[i] == null) { + continue; + } + + // Use third point as bottom if pointsize is 3 + var bottom = ps === 3 ? points[i + 2] : defaultBottom; + drawBar(points[i], points[i + 1], bottom, barLeft, barRight, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth); + } + } + + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + + var datapoints = { + format: series.datapoints.format, + points: series.datapoints.points, + pointsize: series.datapoints.pointsize + }; + + if (series.decimate) { + datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth); + } + + ctx.lineWidth = series.bars.lineWidth; + ctx.strokeStyle = series.color; + + var barLeft; + var barWidth = series.bars.barWidth[0] || series.bars.barWidth; + switch (series.bars.align) { + case "left": + barLeft = 0; + break; + case "right": + barLeft = -barWidth; + break; + default: + barLeft = -barWidth / 2; + } + + var fillStyleCallback = series.bars.fill ? function(bottom, top) { + return getFillStyle(series.bars, series.color, bottom, top, getColorOrGradient); + } : null; + + plotBars(datapoints, barLeft, barLeft + barWidth, fillStyleCallback, series.xaxis, series.yaxis); + ctx.restore(); + } + + function getFillStyle(filloptions, seriesColor, bottom, top, getColorOrGradient) { + var fill = filloptions.fill; + if (!fill) { + return null; + } + + if (filloptions.fillColor) { + return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor); + } + + var c = $.color.parse(seriesColor); + c.a = typeof fill === "number" ? fill : 0.4; + c.normalize(); + return c.toString(); + } + + this.drawSeriesLines = drawSeriesLines; + this.drawSeriesPoints = drawSeriesPoints; + this.drawSeriesBars = drawSeriesBars; + this.drawBar = drawBar; + }; + + $.plot.drawSeries = new DrawSeries(); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.errorbars.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.errorbars.js new file mode 100644 index 0000000..956562e --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.errorbars.js @@ -0,0 +1,375 @@ +/* Flot plugin for plotting error bars. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +Error bars are used to show standard deviation and other statistical +properties in a plot. + +* Created by Rui Pereira - rui (dot) pereira (at) gmail (dot) com + +This plugin allows you to plot error-bars over points. Set "errorbars" inside +the points series to the axis name over which there will be error values in +your data array (*even* if you do not intend to plot them later, by setting +"show: null" on xerr/yerr). + +The plugin supports these options: + + series: { + points: { + errorbars: "x" or "y" or "xy", + xerr: { + show: null/false or true, + asymmetric: null/false or true, + upperCap: null or "-" or function, + lowerCap: null or "-" or function, + color: null or color, + radius: null or number + }, + yerr: { same options as xerr } + } + } + +Each data point array is expected to be of the type: + + "x" [ x, y, xerr ] + "y" [ x, y, yerr ] + "xy" [ x, y, xerr, yerr ] + +Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and +equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric +error-bars on X and asymmetric on Y would be: + + [ x, y, xerr, yerr_lower, yerr_upper ] + +By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will +draw a small cap perpendicular to the error bar. They can also be set to a +user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg. + + function drawSemiCircle( ctx, x, y, radius ) { + ctx.beginPath(); + ctx.arc( x, y, radius, 0, Math.PI, false ); + ctx.moveTo( x - radius, y ); + ctx.lineTo( x + radius, y ); + ctx.stroke(); + } + +Color and radius both default to the same ones of the points series if not +set. The independent radius parameter on xerr/yerr is useful for the case when +we may want to add error-bars to a line, without showing the interconnecting +points (with radius: 0), and still showing end caps on the error-bars. +shadowSize and lineWidth are derived as well from the points series. + +*/ + +(function ($) { + var options = { + series: { + points: { + errorbars: null, //should be 'x', 'y' or 'xy' + xerr: {err: 'x', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null}, + yerr: {err: 'y', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null} + } + } + }; + + function processRawData(plot, series, data, datapoints) { + if (!series.points.errorbars) { + return; + } + + // x,y values + var format = [ + { x: true, number: true, required: true }, + { y: true, number: true, required: true } + ]; + + var errors = series.points.errorbars; + // error bars - first X then Y + if (errors === 'x' || errors === 'xy') { + // lower / upper error + if (series.points.xerr.asymmetric) { + format.push({ x: true, number: true, required: true }); + format.push({ x: true, number: true, required: true }); + } else { + format.push({ x: true, number: true, required: true }); + } + } + if (errors === 'y' || errors === 'xy') { + // lower / upper error + if (series.points.yerr.asymmetric) { + format.push({ y: true, number: true, required: true }); + format.push({ y: true, number: true, required: true }); + } else { + format.push({ y: true, number: true, required: true }); + } + } + datapoints.format = format; + } + + function parseErrors(series, i) { + var points = series.datapoints.points; + + // read errors from points array + var exl = null, + exu = null, + eyl = null, + eyu = null; + var xerr = series.points.xerr, + yerr = series.points.yerr; + + var eb = series.points.errorbars; + // error bars - first X + if (eb === 'x' || eb === 'xy') { + if (xerr.asymmetric) { + exl = points[i + 2]; + exu = points[i + 3]; + if (eb === 'xy') { + if (yerr.asymmetric) { + eyl = points[i + 4]; + eyu = points[i + 5]; + } else { + eyl = points[i + 4]; + } + } + } else { + exl = points[i + 2]; + if (eb === 'xy') { + if (yerr.asymmetric) { + eyl = points[i + 3]; + eyu = points[i + 4]; + } else { + eyl = points[i + 3]; + } + } + } + // only Y + } else { + if (eb === 'y') { + if (yerr.asymmetric) { + eyl = points[i + 2]; + eyu = points[i + 3]; + } else { + eyl = points[i + 2]; + } + } + } + + // symmetric errors? + if (exu == null) exu = exl; + if (eyu == null) eyu = eyl; + + var errRanges = [exl, exu, eyl, eyu]; + // nullify if not showing + if (!xerr.show) { + errRanges[0] = null; + errRanges[1] = null; + } + if (!yerr.show) { + errRanges[2] = null; + errRanges[3] = null; + } + return errRanges; + } + + function drawSeriesErrors(plot, ctx, s) { + var points = s.datapoints.points, + ps = s.datapoints.pointsize, + ax = [s.xaxis, s.yaxis], + radius = s.points.radius, + err = [s.points.xerr, s.points.yerr], + tmp; + + //sanity check, in case some inverted axis hack is applied to flot + var invertX = false; + if (ax[0].p2c(ax[0].max) < ax[0].p2c(ax[0].min)) { + invertX = true; + tmp = err[0].lowerCap; + err[0].lowerCap = err[0].upperCap; + err[0].upperCap = tmp; + } + + var invertY = false; + if (ax[1].p2c(ax[1].min) < ax[1].p2c(ax[1].max)) { + invertY = true; + tmp = err[1].lowerCap; + err[1].lowerCap = err[1].upperCap; + err[1].upperCap = tmp; + } + + for (var i = 0; i < s.datapoints.points.length; i += ps) { + //parse + var errRanges = parseErrors(s, i); + + //cycle xerr & yerr + for (var e = 0; e < err.length; e++) { + var minmax = [ax[e].min, ax[e].max]; + + //draw this error? + if (errRanges[e * err.length]) { + //data coordinates + var x = points[i], + y = points[i + 1]; + + //errorbar ranges + var upper = [x, y][e] + errRanges[e * err.length + 1], + lower = [x, y][e] - errRanges[e * err.length]; + + //points outside of the canvas + if (err[e].err === 'x') { + if (y > ax[1].max || y < ax[1].min || upper < ax[0].min || lower > ax[0].max) { + continue; + } + } + + if (err[e].err === 'y') { + if (x > ax[0].max || x < ax[0].min || upper < ax[1].min || lower > ax[1].max) { + continue; + } + } + + // prevent errorbars getting out of the canvas + var drawUpper = true, + drawLower = true; + + if (upper > minmax[1]) { + drawUpper = false; + upper = minmax[1]; + } + if (lower < minmax[0]) { + drawLower = false; + lower = minmax[0]; + } + + //sanity check, in case some inverted axis hack is applied to flot + if ((err[e].err === 'x' && invertX) || (err[e].err === 'y' && invertY)) { + //swap coordinates + tmp = lower; + lower = upper; + upper = tmp; + tmp = drawLower; + drawLower = drawUpper; + drawUpper = tmp; + tmp = minmax[0]; + minmax[0] = minmax[1]; + minmax[1] = tmp; + } + + // convert to pixels + x = ax[0].p2c(x); + y = ax[1].p2c(y); + upper = ax[e].p2c(upper); + lower = ax[e].p2c(lower); + minmax[0] = ax[e].p2c(minmax[0]); + minmax[1] = ax[e].p2c(minmax[1]); + + //same style as points by default + var lw = err[e].lineWidth ? err[e].lineWidth : s.points.lineWidth, + sw = s.points.shadowSize != null ? s.points.shadowSize : s.shadowSize; + + //shadow as for points + if (lw > 0 && sw > 0) { + var w = sw / 2; + ctx.lineWidth = w; + ctx.strokeStyle = "rgba(0,0,0,0.1)"; + drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w + w / 2, minmax); + + ctx.strokeStyle = "rgba(0,0,0,0.2)"; + drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w / 2, minmax); + } + + ctx.strokeStyle = err[e].color + ? err[e].color + : s.color; + ctx.lineWidth = lw; + //draw it + drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, 0, minmax); + } + } + } + } + + function drawError(ctx, err, x, y, upper, lower, drawUpper, drawLower, radius, offset, minmax) { + //shadow offset + y += offset; + upper += offset; + lower += offset; + + // error bar - avoid plotting over circles + if (err.err === 'x') { + if (upper > x + radius) drawPath(ctx, [[upper, y], [Math.max(x + radius, minmax[0]), y]]); + else drawUpper = false; + + if (lower < x - radius) drawPath(ctx, [[Math.min(x - radius, minmax[1]), y], [lower, y]]); + else drawLower = false; + } else { + if (upper < y - radius) drawPath(ctx, [[x, upper], [x, Math.min(y - radius, minmax[0])]]); + else drawUpper = false; + + if (lower > y + radius) drawPath(ctx, [[x, Math.max(y + radius, minmax[1])], [x, lower]]); + else drawLower = false; + } + + //internal radius value in errorbar, allows to plot radius 0 points and still keep proper sized caps + //this is a way to get errorbars on lines without visible connecting dots + radius = err.radius != null + ? err.radius + : radius; + + // upper cap + if (drawUpper) { + if (err.upperCap === '-') { + if (err.err === 'x') drawPath(ctx, [[upper, y - radius], [upper, y + radius]]); + else drawPath(ctx, [[x - radius, upper], [x + radius, upper]]); + } else if ($.isFunction(err.upperCap)) { + if (err.err === 'x') err.upperCap(ctx, upper, y, radius); + else err.upperCap(ctx, x, upper, radius); + } + } + // lower cap + if (drawLower) { + if (err.lowerCap === '-') { + if (err.err === 'x') drawPath(ctx, [[lower, y - radius], [lower, y + radius]]); + else drawPath(ctx, [[x - radius, lower], [x + radius, lower]]); + } else if ($.isFunction(err.lowerCap)) { + if (err.err === 'x') err.lowerCap(ctx, lower, y, radius); + else err.lowerCap(ctx, x, lower, radius); + } + } + } + + function drawPath(ctx, pts) { + ctx.beginPath(); + ctx.moveTo(pts[0][0], pts[0][1]); + for (var p = 1; p < pts.length; p++) { + ctx.lineTo(pts[p][0], pts[p][1]); + } + + ctx.stroke(); + } + + function draw(plot, ctx) { + var plotOffset = plot.getPlotOffset(); + + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + $.each(plot.getData(), function (i, s) { + if (s.points.errorbars && (s.points.xerr.show || s.points.yerr.show)) { + drawSeriesErrors(plot, ctx, s); + } + }); + ctx.restore(); + } + + function init(plot) { + plot.hooks.processRawData.push(processRawData); + plot.hooks.draw.push(draw); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'errorbars', + version: '1.0' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.fillbetween.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.fillbetween.js new file mode 100644 index 0000000..4132b66 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.fillbetween.js @@ -0,0 +1,254 @@ +/* Flot plugin for computing bottoms for filled line and bar charts. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The case: you've got two series that you want to fill the area between. In Flot +terms, you need to use one as the fill bottom of the other. You can specify the +bottom of each data point as the third coordinate manually, or you can use this +plugin to compute it for you. + +In order to name the other series, you need to give it an id, like this: + + var dataset = [ + { data: [ ... ], id: "foo" } , // use default bottom + { data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom + ]; + + $.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }}); + +As a convenience, if the id given is a number that doesn't appear as an id in +the series, it is interpreted as the index in the array instead (so fillBetween: +0 can also mean the first series). + +Internally, the plugin modifies the datapoints in each series. For line series, +extra data points might be inserted through interpolation. Note that at points +where the bottom line is not defined (due to a null point or start/end of line), +the current line will show a gap too. The algorithm comes from the +jquery.flot.stack.js plugin, possibly some code could be shared. + +*/ + +(function ($) { + var options = { + series: { + fillBetween: null // or number + } + }; + + function init(plot) { + function findBottomSeries(s, allseries) { + var i; + + for (i = 0; i < allseries.length; ++i) { + if (allseries[ i ].id === s.fillBetween) { + return allseries[ i ]; + } + } + + if (typeof s.fillBetween === "number") { + if (s.fillBetween < 0 || s.fillBetween >= allseries.length) { + return null; + } + return allseries[ s.fillBetween ]; + } + + return null; + } + + function computeFormat(plot, s, data, datapoints) { + if (s.fillBetween == null) { + return; + } + + var format = datapoints.format; + var plotHasId = function(id) { + var plotData = plot.getData(); + for (var i = 0; i < plotData.length; i++) { + if (plotData[i].id === id) { + return true; + } + } + + return false; + } + + if (!format) { + format = []; + + format.push({ + x: true, + number: true, + computeRange: s.xaxis.options.autoScale !== 'none', + required: true + }); + format.push({ + y: true, + number: true, + computeRange: s.yaxis.options.autoScale !== 'none', + required: true + }); + + if (s.fillBetween !== undefined && s.fillBetween !== '' && plotHasId(s.fillBetween) && s.fillBetween !== s.id) { + format.push({ + x: false, + y: true, + number: true, + required: false, + computeRange: s.yaxis.options.autoScale !== 'none', + defaultValue: 0 + }); + } + + datapoints.format = format; + } + } + + function computeFillBottoms(plot, s, datapoints) { + if (s.fillBetween == null) { + return; + } + + var other = findBottomSeries(s, plot.getData()); + + if (!other) { + return; + } + + var ps = datapoints.pointsize, + points = datapoints.points, + otherps = other.datapoints.pointsize, + otherpoints = other.datapoints.points, + newpoints = [], + px, py, intery, qx, qy, bottom, + withlines = s.lines.show, + withbottom = ps > 2 && datapoints.format[2].y, + withsteps = withlines && s.lines.steps, + fromgap = true, + i = 0, + j = 0, + l, m; + + while (true) { + if (i >= points.length) { + break; + } + + l = newpoints.length; + + if (points[ i ] == null) { + // copy gaps + for (m = 0; m < ps; ++m) { + newpoints.push(points[ i + m ]); + } + + i += ps; + } else if (j >= otherpoints.length) { + // for lines, we can't use the rest of the points + if (!withlines) { + for (m = 0; m < ps; ++m) { + newpoints.push(points[ i + m ]); + } + } + + i += ps; + } else if (otherpoints[ j ] == null) { + // oops, got a gap + for (m = 0; m < ps; ++m) { + newpoints.push(null); + } + + fromgap = true; + j += otherps; + } else { + // cases where we actually got two points + px = points[ i ]; + py = points[ i + 1 ]; + qx = otherpoints[ j ]; + qy = otherpoints[ j + 1 ]; + bottom = 0; + + if (px === qx) { + for (m = 0; m < ps; ++m) { + newpoints.push(points[ i + m ]); + } + + //newpoints[ l + 1 ] += qy; + bottom = qy; + + i += ps; + j += otherps; + } else if (px > qx) { + // we got past point below, might need to + // insert interpolated extra point + + if (withlines && i > 0 && points[ i - ps ] != null) { + intery = py + (points[ i - ps + 1 ] - py) * (qx - px) / (points[ i - ps ] - px); + newpoints.push(qx); + newpoints.push(intery); + for (m = 2; m < ps; ++m) { + newpoints.push(points[ i + m ]); + } + bottom = qy; + } + + j += otherps; + } else { + // px < qx + // if we come from a gap, we just skip this point + + if (fromgap && withlines) { + i += ps; + continue; + } + + for (m = 0; m < ps; ++m) { + newpoints.push(points[ i + m ]); + } + + // we might be able to interpolate a point below, + // this can give us a better y + + if (withlines && j > 0 && otherpoints[ j - otherps ] != null) { + bottom = qy + (otherpoints[ j - otherps + 1 ] - qy) * (px - qx) / (otherpoints[ j - otherps ] - qx); + } + + //newpoints[l + 1] += bottom; + + i += ps; + } + + fromgap = false; + + if (l !== newpoints.length && withbottom) { + newpoints[ l + 2 ] = bottom; + } + } + + // maintain the line steps invariant + + if (withsteps && l !== newpoints.length && l > 0 && + newpoints[ l ] !== null && + newpoints[ l ] !== newpoints[ l - ps ] && + newpoints[ l + 1 ] !== newpoints[ l - ps + 1 ]) { + for (m = 0; m < ps; ++m) { + newpoints[ l + ps + m ] = newpoints[ l + m ]; + } + newpoints[ l + 1 ] = newpoints[ l - ps + 1 ]; + } + } + + datapoints.points = newpoints; + } + + plot.hooks.processRawData.push(computeFormat); + plot.hooks.processDatapoints.push(computeFillBottoms); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: "fillbetween", + version: "1.0" + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.flatdata.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.flatdata.js new file mode 100644 index 0000000..b91d168 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.flatdata.js @@ -0,0 +1,47 @@ +/* Support for flat 1D data series. + +A 1D flat data series is a data series in the form of a regular 1D array. The +main reason for using a flat data series is that it performs better, consumes +less memory and generates less garbage collection than the regular flot format. + +Example: + + plot.setData([[[0,0], [1,1], [2,2], [3,3]]]); // regular flot format + plot.setData([{flatdata: true, data: [0, 1, 2, 3]}]); // flatdata format + +Set series.flatdata to true to enable this plugin. + +You can use series.start to specify the starting index of the series (default is 0) +You can use series.step to specify the interval between consecutive indexes of the series (default is 1) +*/ + +/* global jQuery*/ + +(function ($) { + 'use strict'; + + function process1DRawData(plot, series, data, datapoints) { + if (series.flatdata === true) { + var start = series.start || 0; + var step = typeof series.step === 'number' ? series.step : 1; + datapoints.pointsize = 2; + for (var i = 0, j = 0; i < data.length; i++, j += 2) { + datapoints.points[j] = start + (i * step); + datapoints.points[j + 1] = data[i]; + } + if (datapoints.points !== undefined) { + datapoints.points.length = data.length * 2; + } else { + datapoints.points = []; + } + } + } + + $.plot.plugins.push({ + init: function(plot) { + plot.hooks.processRawData.push(process1DRawData); + }, + name: 'flatdata', + version: '0.0.2' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.hover.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.hover.js new file mode 100644 index 0000000..f24936a --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.hover.js @@ -0,0 +1,359 @@ +/* global jQuery */ + +/** +## jquery.flot.hover.js + +This plugin is used for mouse hover and tap on a point of plot series. +It supports the following options: +```js +grid: { + hoverable: false, //to trigger plothover event on mouse hover or tap on a point + clickable: false //to trigger plotclick event on mouse hover +} +``` + +It listens to native mouse move event or click, as well as artificial generated +tap and touchevent. + +When the mouse is over a point or a tap on a point is performed, that point or +the correscponding bar will be highlighted and a "plothover" event will be generated. + +Custom "touchevent" is triggered when any touch interaction is made. Hover plugin +handles this events by unhighlighting all of the previously highlighted points and generates +"plothovercleanup" event to notify any part that is handling plothover (for exemple to cleanup +the tooltip from webcharts). +*/ + +(function($) { + 'use strict'; + + var options = { + grid: { + hoverable: false, + clickable: false + } + }; + + var browser = $.plot.browser; + + var eventType = { + click: 'click', + hover: 'hover' + } + + function init(plot) { + var lastMouseMoveEvent; + var highlights = []; + + function bindEvents(plot, eventHolder) { + var o = plot.getOptions(); + + if (o.grid.hoverable || o.grid.clickable) { + eventHolder[0].addEventListener('touchevent', triggerCleanupEvent, false); + eventHolder[0].addEventListener('tap', generatePlothoverEvent, false); + } + + if (o.grid.clickable) { + eventHolder.bind("click", onClick); + } + + if (o.grid.hoverable) { + eventHolder.bind("mousemove", onMouseMove); + + // Use bind, rather than .mouseleave, because we officially + // still support jQuery 1.2.6, which doesn't define a shortcut + // for mouseenter or mouseleave. This was a bug/oversight that + // was fixed somewhere around 1.3.x. We can return to using + // .mouseleave when we drop support for 1.2.6. + + eventHolder.bind("mouseleave", onMouseLeave); + } + } + + function shutdown(plot, eventHolder) { + eventHolder[0].removeEventListener('tap', generatePlothoverEvent); + eventHolder[0].removeEventListener('touchevent', triggerCleanupEvent); + eventHolder.unbind("mousemove", onMouseMove); + eventHolder.unbind("mouseleave", onMouseLeave); + eventHolder.unbind("click", onClick); + highlights = []; + } + + function generatePlothoverEvent(e) { + var o = plot.getOptions(), + newEvent = new CustomEvent('mouseevent'); + + //transform from touch event to mouse event format + newEvent.pageX = e.detail.changedTouches[0].pageX; + newEvent.pageY = e.detail.changedTouches[0].pageY; + newEvent.clientX = e.detail.changedTouches[0].clientX; + newEvent.clientY = e.detail.changedTouches[0].clientY; + + if (o.grid.hoverable) { + doTriggerClickHoverEvent(newEvent, eventType.hover, 30); + } + return false; + } + + function doTriggerClickHoverEvent(event, eventType, searchDistance) { + var series = plot.getData(); + if (event !== undefined && + series.length > 0 && + series[0].xaxis.c2p !== undefined && + series[0].yaxis.c2p !== undefined) { + var eventToTrigger = "plot" + eventType; + var seriesFlag = eventType + "able"; + triggerClickHoverEvent(eventToTrigger, event, + function(i) { + return series[i][seriesFlag] !== false; + }, searchDistance); + } + } + + function onMouseMove(e) { + lastMouseMoveEvent = e; + plot.getPlaceholder()[0].lastMouseMoveEvent = e; + doTriggerClickHoverEvent(e, eventType.hover); + } + + function onMouseLeave(e) { + lastMouseMoveEvent = undefined; + plot.getPlaceholder()[0].lastMouseMoveEvent = undefined; + triggerClickHoverEvent("plothover", e, + function(i) { + return false; + }); + } + + function onClick(e) { + doTriggerClickHoverEvent(e, eventType.click); + } + + function triggerCleanupEvent() { + plot.unhighlight(); + plot.getPlaceholder().trigger('plothovercleanup'); + } + + // trigger click or hover event (they send the same parameters + // so we share their code) + function triggerClickHoverEvent(eventname, event, seriesFilter, searchDistance) { + var options = plot.getOptions(), + offset = plot.offset(), + page = browser.getPageXY(event), + canvasX = page.X - offset.left, + canvasY = page.Y - offset.top, + pos = plot.c2p({ + left: canvasX, + top: canvasY + }), + distance = searchDistance !== undefined ? searchDistance : options.grid.mouseActiveRadius; + + pos.pageX = page.X; + pos.pageY = page.Y; + + var items = plot.findNearbyItems(canvasX, canvasY, seriesFilter, distance); + var item = items[0]; + + for (let i = 1; i < items.length; ++i) { + if (item.distance === undefined || + items[i].distance < item.distance) { + item = items[i]; + } + } + + if (item) { + // fill in mouse pos for any listeners out there + item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left, 10); + item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top, 10); + } else { + item = null; + } + + if (options.grid.autoHighlight) { + // clear auto-highlights + for (let i = 0; i < highlights.length; ++i) { + var h = highlights[i]; + if ((h.auto === eventname && + !(item && h.series === item.series && + h.point[0] === item.datapoint[0] && + h.point[1] === item.datapoint[1])) || !item) { + unhighlight(h.series, h.point); + } + } + + if (item) { + highlight(item.series, item.datapoint, eventname); + } + } + + plot.getPlaceholder().trigger(eventname, [pos, item, items]); + } + + function highlight(s, point, auto) { + if (typeof s === "number") { + s = plot.getData()[s]; + } + + if (typeof point === "number") { + var ps = s.datapoints.pointsize; + point = s.datapoints.points.slice(ps * point, ps * (point + 1)); + } + + var i = indexOfHighlight(s, point); + if (i === -1) { + highlights.push({ + series: s, + point: point, + auto: auto + }); + + plot.triggerRedrawOverlay(); + } else if (!auto) { + highlights[i].auto = false; + } + } + + function unhighlight(s, point) { + if (s == null && point == null) { + highlights = []; + plot.triggerRedrawOverlay(); + return; + } + + if (typeof s === "number") { + s = plot.getData()[s]; + } + + if (typeof point === "number") { + var ps = s.datapoints.pointsize; + point = s.datapoints.points.slice(ps * point, ps * (point + 1)); + } + + var i = indexOfHighlight(s, point); + if (i !== -1) { + highlights.splice(i, 1); + + plot.triggerRedrawOverlay(); + } + } + + function indexOfHighlight(s, p) { + for (var i = 0; i < highlights.length; ++i) { + var h = highlights[i]; + if (h.series === s && + h.point[0] === p[0] && + h.point[1] === p[1]) { + return i; + } + } + + return -1; + } + + function processDatapoints() { + triggerCleanupEvent(); + doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover); + } + + function setupGrid() { + doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover); + } + + function drawOverlay(plot, octx, overlay) { + var plotOffset = plot.getPlotOffset(), + i, hi; + + octx.save(); + octx.translate(plotOffset.left, plotOffset.top); + for (i = 0; i < highlights.length; ++i) { + hi = highlights[i]; + + if (hi.series.bars.show) drawBarHighlight(hi.series, hi.point, octx); + else drawPointHighlight(hi.series, hi.point, octx, plot); + } + octx.restore(); + } + + function drawPointHighlight(series, point, octx, plot) { + var x = point[0], + y = point[1], + axisx = series.xaxis, + axisy = series.yaxis, + highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(); + + if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) { + return; + } + + var pointRadius = series.points.radius + series.points.lineWidth / 2; + octx.lineWidth = pointRadius; + octx.strokeStyle = highlightColor; + var radius = 1.5 * pointRadius; + x = axisx.p2c(x); + y = axisy.p2c(y); + + octx.beginPath(); + var symbol = series.points.symbol; + if (symbol === 'circle') { + octx.arc(x, y, radius, 0, 2 * Math.PI, false); + } else if (typeof symbol === 'string' && plot.drawSymbol && plot.drawSymbol[symbol]) { + plot.drawSymbol[symbol](octx, x, y, radius, false); + } + + octx.closePath(); + octx.stroke(); + } + + function drawBarHighlight(series, point, octx) { + var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(), + fillStyle = highlightColor, + barLeft; + + var barWidth = series.bars.barWidth[0] || series.bars.barWidth; + switch (series.bars.align) { + case "left": + barLeft = 0; + break; + case "right": + barLeft = -barWidth; + break; + default: + barLeft = -barWidth / 2; + } + + octx.lineWidth = series.bars.lineWidth; + octx.strokeStyle = highlightColor; + + var fillTowards = series.bars.fillTowards || 0, + bottom = fillTowards > series.yaxis.min ? Math.min(series.yaxis.max, fillTowards) : series.yaxis.min; + + $.plot.drawSeries.drawBar(point[0], point[1], point[2] || bottom, barLeft, barLeft + barWidth, + function() { + return fillStyle; + }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth); + } + + function initHover(plot, options) { + plot.highlight = highlight; + plot.unhighlight = unhighlight; + if (options.grid.hoverable || options.grid.clickable) { + plot.hooks.drawOverlay.push(drawOverlay); + plot.hooks.processDatapoints.push(processDatapoints); + plot.hooks.setupGrid.push(setupGrid); + } + + lastMouseMoveEvent = plot.getPlaceholder()[0].lastMouseMoveEvent; + } + + plot.hooks.bindEvents.push(bindEvents); + plot.hooks.shutdown.push(shutdown); + plot.hooks.processOptions.push(initHover); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'hover', + version: '0.1' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.image.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.image.js new file mode 100644 index 0000000..ae98fb4 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.image.js @@ -0,0 +1,249 @@ +/* Flot plugin for plotting images. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and +(x2, y2) are where you intend the two opposite corners of the image to end up +in the plot. Image must be a fully loaded Javascript image (you can make one +with new Image()). If the image is not complete, it's skipped when plotting. + +There are two helpers included for retrieving images. The easiest work the way +that you put in URLs instead of images in the data, like this: + + [ "myimage.png", 0, 0, 10, 10 ] + +Then call $.plot.image.loadData( data, options, callback ) where data and +options are the same as you pass in to $.plot. This loads the images, replaces +the URLs in the data with the corresponding images and calls "callback" when +all images are loaded (or failed loading). In the callback, you can then call +$.plot with the data set. See the included example. + +A more low-level helper, $.plot.image.load(urls, callback) is also included. +Given a list of URLs, it calls callback with an object mapping from URL to +Image object when all images are loaded or have failed loading. + +The plugin supports these options: + + series: { + images: { + show: boolean + anchor: "corner" or "center" + alpha: [ 0, 1 ] + } + } + +They can be specified for a specific series: + + $.plot( $("#placeholder"), [{ + data: [ ... ], + images: { ... } + ]) + +Note that because the data format is different from usual data points, you +can't use images with anything else in a specific data series. + +Setting "anchor" to "center" causes the pixels in the image to be anchored at +the corner pixel centers inside of at the pixel corners, effectively letting +half a pixel stick out to each side in the plot. + +A possible future direction could be support for tiling for large images (like +Google Maps). + +*/ + +(function ($) { + var options = { + series: { + images: { + show: false, + alpha: 1, + anchor: "corner" // or "center" + } + } + }; + + $.plot.image = {}; + + $.plot.image.loadDataImages = function (series, options, callback) { + var urls = [], points = []; + + var defaultShow = options.series.images.show; + + $.each(series, function (i, s) { + if (!(defaultShow || s.images.show)) { + return; + } + + if (s.data) { + s = s.data; + } + + $.each(s, function (i, p) { + if (typeof p[0] === "string") { + urls.push(p[0]); + points.push(p); + } + }); + }); + + $.plot.image.load(urls, function (loadedImages) { + $.each(points, function (i, p) { + var url = p[0]; + if (loadedImages[url]) { + p[0] = loadedImages[url]; + } + }); + + callback(); + }); + } + + $.plot.image.load = function (urls, callback) { + var missing = urls.length, loaded = {}; + if (missing === 0) { + callback({}); + } + + $.each(urls, function (i, url) { + var handler = function () { + --missing; + loaded[url] = this; + + if (missing === 0) { + callback(loaded); + } + }; + + $('').load(handler).error(handler).attr('src', url); + }); + }; + + function drawSeries(plot, ctx, series) { + var plotOffset = plot.getPlotOffset(); + + if (!series.images || !series.images.show) { + return; + } + + var points = series.datapoints.points, + ps = series.datapoints.pointsize; + + for (var i = 0; i < points.length; i += ps) { + var img = points[i], + x1 = points[i + 1], y1 = points[i + 2], + x2 = points[i + 3], y2 = points[i + 4], + xaxis = series.xaxis, yaxis = series.yaxis, + tmp; + + // actually we should check img.complete, but it + // appears to be a somewhat unreliable indicator in + // IE6 (false even after load event) + if (!img || img.width <= 0 || img.height <= 0) { + continue; + } + + if (x1 > x2) { + tmp = x2; + x2 = x1; + x1 = tmp; + } + if (y1 > y2) { + tmp = y2; + y2 = y1; + y1 = tmp; + } + + // if the anchor is at the center of the pixel, expand the + // image by 1/2 pixel in each direction + if (series.images.anchor === "center") { + tmp = 0.5 * (x2 - x1) / (img.width - 1); + x1 -= tmp; + x2 += tmp; + tmp = 0.5 * (y2 - y1) / (img.height - 1); + y1 -= tmp; + y2 += tmp; + } + + // clip + if (x1 === x2 || y1 === y2 || + x1 >= xaxis.max || x2 <= xaxis.min || + y1 >= yaxis.max || y2 <= yaxis.min) { + continue; + } + + var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height; + if (x1 < xaxis.min) { + sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1); + x1 = xaxis.min; + } + + if (x2 > xaxis.max) { + sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1); + x2 = xaxis.max; + } + + if (y1 < yaxis.min) { + sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1); + y1 = yaxis.min; + } + + if (y2 > yaxis.max) { + sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1); + y2 = yaxis.max; + } + + x1 = xaxis.p2c(x1); + x2 = xaxis.p2c(x2); + y1 = yaxis.p2c(y1); + y2 = yaxis.p2c(y2); + + // the transformation may have swapped us + if (x1 > x2) { + tmp = x2; + x2 = x1; + x1 = tmp; + } + if (y1 > y2) { + tmp = y2; + y2 = y1; + y1 = tmp; + } + + tmp = ctx.globalAlpha; + ctx.globalAlpha *= series.images.alpha; + ctx.drawImage(img, + sx1, sy1, sx2 - sx1, sy2 - sy1, + x1 + plotOffset.left, y1 + plotOffset.top, + x2 - x1, y2 - y1); + ctx.globalAlpha = tmp; + } + } + + function processRawData(plot, series, data, datapoints) { + if (!series.images.show) { + return; + } + + // format is Image, x1, y1, x2, y2 (opposite corners) + datapoints.format = [ + { required: true }, + { x: true, number: true, required: true }, + { y: true, number: true, required: true }, + { x: true, number: true, required: true }, + { y: true, number: true, required: true } + ]; + } + + function init(plot) { + plot.hooks.processRawData.push(processRawData); + plot.hooks.drawSeries.push(drawSeries); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'image', + version: '1.1' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.legend.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.legend.js new file mode 100644 index 0000000..40c0787 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.legend.js @@ -0,0 +1,437 @@ +/* Flot plugin for drawing legends. + +*/ + +(function($) { + var defaultOptions = { + legend: { + show: false, + noColumns: 1, + labelFormatter: null, // fn: string -> string + container: null, // container (as jQuery object) to put legend in, null means default on top of graph + position: 'ne', // position of default legend container within plot + margin: 5, // distance from grid edge to default legend container within plot + sorted: null // default to no legend sorting + } + }; + + function insertLegend(plot, options, placeholder, legendEntries) { + // clear before redraw + if (options.legend.container != null) { + $(options.legend.container).html(''); + } else { + placeholder.find('.legend').remove(); + } + + if (!options.legend.show) { + return; + } + + // Save the legend entries in legend options + var entries = options.legend.legendEntries = legendEntries, + plotOffset = options.legend.plotOffset = plot.getPlotOffset(), + html = [], + entry, labelHtml, iconHtml, + j = 0, + i, + pos = "", + p = options.legend.position, + m = options.legend.margin, + shape = { + name: '', + label: '', + xPos: '', + yPos: '' + }; + + html[j++] = ''; + html[j++] = ''; + html[j++] = svgShapeDefs; + + var left = 0; + var columnWidths = []; + var style = window.getComputedStyle(document.querySelector('body')); + for (i = 0; i < entries.length; ++i) { + let columnIndex = i % options.legend.noColumns; + entry = entries[i]; + shape.label = entry.label; + var info = plot.getSurface().getTextInfo('', shape.label, { + style: style.fontStyle, + variant: style.fontVariant, + weight: style.fontWeight, + size: parseInt(style.fontSize), + lineHeight: parseInt(style.lineHeight), + family: style.fontFamily + }); + + var labelWidth = info.width; + // 36px = 1.5em + 6px margin + var iconWidth = 48; + if (columnWidths[columnIndex]) { + if (labelWidth > columnWidths[columnIndex]) { + columnWidths[columnIndex] = labelWidth + iconWidth; + } + } else { + columnWidths[columnIndex] = labelWidth + iconWidth; + } + } + + // Generate html for icons and labels from a list of entries + for (i = 0; i < entries.length; ++i) { + let columnIndex = i % options.legend.noColumns; + entry = entries[i]; + iconHtml = ''; + shape.label = entry.label; + shape.xPos = (left + 3) + 'px'; + left += columnWidths[columnIndex]; + if ((i + 1) % options.legend.noColumns === 0) { + left = 0; + } + shape.yPos = Math.floor(i / options.legend.noColumns) * 1.5 + 'em'; + // area + if (entry.options.lines.show && entry.options.lines.fill) { + shape.name = 'area'; + shape.fillColor = entry.color; + iconHtml += getEntryIconHtml(shape); + } + // bars + if (entry.options.bars.show) { + shape.name = 'bar'; + shape.fillColor = entry.color; + iconHtml += getEntryIconHtml(shape); + } + // lines + if (entry.options.lines.show && !entry.options.lines.fill) { + shape.name = 'line'; + shape.strokeColor = entry.color; + shape.strokeWidth = entry.options.lines.lineWidth; + iconHtml += getEntryIconHtml(shape); + } + // points + if (entry.options.points.show) { + shape.name = entry.options.points.symbol; + shape.strokeColor = entry.color; + shape.fillColor = entry.options.points.fillColor; + shape.strokeWidth = entry.options.points.lineWidth; + iconHtml += getEntryIconHtml(shape); + } + + labelHtml = '' + shape.label + '' + html[j++] = '' + iconHtml + labelHtml + ''; + } + + html[j++] = ''; + if (m[0] == null) { + m = [m, m]; + } + + if (p.charAt(0) === 'n') { + pos += 'top:' + (m[1] + plotOffset.top) + 'px;'; + } else if (p.charAt(0) === 's') { + pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;'; + } + + if (p.charAt(1) === 'e') { + pos += 'right:' + (m[0] + plotOffset.right) + 'px;'; + } else if (p.charAt(1) === 'w') { + pos += 'left:' + (m[0] + plotOffset.left) + 'px;'; + } + + var width = 6; + for (i = 0; i < columnWidths.length; ++i) { + width += columnWidths[i]; + } + + var legendEl, + height = Math.ceil(entries.length / options.legend.noColumns) * 1.6; + if (!options.legend.container) { + legendEl = $('
' + html.join('') + '
').appendTo(placeholder); + legendEl.css('width', width + 'px'); + legendEl.css('height', height + 'em'); + legendEl.css('pointerEvents', 'none'); + } else { + legendEl = $(html.join('')).appendTo(options.legend.container)[0]; + options.legend.container.style.width = width + 'px'; + options.legend.container.style.height = height + 'em'; + } + } + + // Generate html for a shape + function getEntryIconHtml(shape) { + var html = '', + name = shape.name, + x = shape.xPos, + y = shape.yPos, + fill = shape.fillColor, + stroke = shape.strokeColor, + width = shape.strokeWidth; + switch (name) { + case 'circle': + html = ''; + break; + case 'diamond': + html = ''; + break; + case 'cross': + html = ''; + break; + case 'rectangle': + html = ''; + break; + case 'plus': + html = ''; + break; + case 'bar': + html = ''; + break; + case 'area': + html = ''; + break; + case 'line': + html = ''; + break; + default: + // default is circle + html = ''; + } + + return html; + } + + // Define svg symbols for shapes + var svgShapeDefs = '' + + '' + + '' + + '' + + '' + + + '' + + '' + + '' + + + '' + + '' + + '' + + + '' + + '' + + '' + + '' + + '' + + '' + + + '' + + '' + + '' + + '' + + '' + + '' + + + '' + + '' + + '' + + '' + + '' + + '' + + + '' + + '' + + '' + + '' + + '' + + '' + + + '' + + '' + + '' + + '' + + '' + + '' + + ''; + + // Generate a list of legend entries in their final order + function getLegendEntries(series, labelFormatter, sorted) { + var lf = labelFormatter, + legendEntries = series.reduce(function(validEntries, s, i) { + var labelEval = (lf ? lf(s.label, s) : s.label) + if (s.hasOwnProperty("label") ? labelEval : true) { + var entry = { + label: labelEval || 'Plot ' + (i + 1), + color: s.color, + options: { + lines: s.lines, + points: s.points, + bars: s.bars + } + } + validEntries.push(entry) + } + return validEntries; + }, []); + + // Sort the legend using either the default or a custom comparator + if (sorted) { + if ($.isFunction(sorted)) { + legendEntries.sort(sorted); + } else if (sorted === 'reverse') { + legendEntries.reverse(); + } else { + var ascending = (sorted !== 'descending'); + legendEntries.sort(function(a, b) { + return a.label === b.label + ? 0 + : ((a.label < b.label) !== ascending ? 1 : -1 // Logical XOR + ); + }); + } + } + + return legendEntries; + } + + // return false if opts1 same as opts2 + function checkOptions(opts1, opts2) { + for (var prop in opts1) { + if (opts1.hasOwnProperty(prop)) { + if (opts1[prop] !== opts2[prop]) { + return true; + } + } + } + return false; + } + + // Compare two lists of legend entries + function shouldRedraw(oldEntries, newEntries) { + if (!oldEntries || !newEntries) { + return true; + } + + if (oldEntries.length !== newEntries.length) { + return true; + } + var i, newEntry, oldEntry, newOpts, oldOpts; + for (i = 0; i < newEntries.length; i++) { + newEntry = newEntries[i]; + oldEntry = oldEntries[i]; + + if (newEntry.label !== oldEntry.label) { + return true; + } + + if (newEntry.color !== oldEntry.color) { + return true; + } + + // check for changes in lines options + newOpts = newEntry.options.lines; + oldOpts = oldEntry.options.lines; + if (checkOptions(newOpts, oldOpts)) { + return true; + } + + // check for changes in points options + newOpts = newEntry.options.points; + oldOpts = oldEntry.options.points; + if (checkOptions(newOpts, oldOpts)) { + return true; + } + + // check for changes in bars options + newOpts = newEntry.options.bars; + oldOpts = oldEntry.options.bars; + if (checkOptions(newOpts, oldOpts)) { + return true; + } + } + + return false; + } + + function init(plot) { + plot.hooks.setupGrid.push(function (plot) { + var options = plot.getOptions(); + var series = plot.getData(), + labelFormatter = options.legend.labelFormatter, + oldEntries = options.legend.legendEntries, + oldPlotOffset = options.legend.plotOffset, + newEntries = getLegendEntries(series, labelFormatter, options.legend.sorted), + newPlotOffset = plot.getPlotOffset(); + + if (shouldRedraw(oldEntries, newEntries) || + checkOptions(oldPlotOffset, newPlotOffset)) { + insertLegend(plot, options, plot.getPlaceholder(), newEntries); + } + }); + } + + $.plot.plugins.push({ + init: init, + options: defaultOptions, + name: 'legend', + version: '1.0' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.logaxis.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.logaxis.js new file mode 100644 index 0000000..e11dedd --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.logaxis.js @@ -0,0 +1,298 @@ +/* Pretty handling of log axes. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Copyright (c) 2015 Ciprian Ceteras cipix2000@gmail.com. +Copyright (c) 2017 Raluca Portase +Licensed under the MIT license. + +Set axis.mode to "log" to enable. +*/ + +/* global jQuery*/ + +/** +## jquery.flot.logaxis +This plugin is used to create logarithmic axis. This includes tick generation, +formatters and transformers to and from logarithmic representation. + +### Methods and hooks +*/ + +(function ($) { + 'use strict'; + + var options = { + xaxis: {} + }; + + /*tick generators and formatters*/ + var PREFERRED_LOG_TICK_VALUES = computePreferedLogTickValues(Number.MAX_VALUE, 10), + EXTENDED_LOG_TICK_VALUES = computePreferedLogTickValues(Number.MAX_VALUE, 4); + + function computePreferedLogTickValues(endLimit, rangeStep) { + var log10End = Math.floor(Math.log(endLimit) * Math.LOG10E) - 1, + log10Start = -log10End, + val, range, vals = []; + + for (var power = log10Start; power <= log10End; power++) { + range = parseFloat('1e' + power); + for (var mult = 1; mult < 9; mult += rangeStep) { + val = range * mult; + vals.push(val); + } + } + return vals; + } + + /** + - logTickGenerator(plot, axis, noTicks) + + Generates logarithmic ticks, depending on axis range. + In case the number of ticks that can be generated is less than the expected noTicks/4, + a linear tick generation is used. + */ + var logTickGenerator = function (plot, axis, noTicks) { + var ticks = [], + minIdx = -1, + maxIdx = -1, + surface = plot.getCanvas(), + logTickValues = PREFERRED_LOG_TICK_VALUES, + min = clampAxis(axis, plot), + max = axis.max; + + if (!noTicks) { + noTicks = 0.3 * Math.sqrt(axis.direction === "x" ? surface.width : surface.height); + } + + PREFERRED_LOG_TICK_VALUES.some(function (val, i) { + if (val >= min) { + minIdx = i; + return true; + } else { + return false; + } + }); + + PREFERRED_LOG_TICK_VALUES.some(function (val, i) { + if (val >= max) { + maxIdx = i; + return true; + } else { + return false; + } + }); + + if (maxIdx === -1) { + maxIdx = PREFERRED_LOG_TICK_VALUES.length - 1; + } + + if (maxIdx - minIdx <= noTicks / 4 && logTickValues.length !== EXTENDED_LOG_TICK_VALUES.length) { + //try with multiple of 5 for tick values + logTickValues = EXTENDED_LOG_TICK_VALUES; + minIdx *= 2; + maxIdx *= 2; + } + + var lastDisplayed = null, + inverseNoTicks = 1 / noTicks, + tickValue, pixelCoord, tick; + + // Count the number of tick values would appear, if we can get at least + // nTicks / 4 accept them. + if (maxIdx - minIdx >= noTicks / 4) { + for (var idx = maxIdx; idx >= minIdx; idx--) { + tickValue = logTickValues[idx]; + pixelCoord = (Math.log(tickValue) - Math.log(min)) / (Math.log(max) - Math.log(min)); + tick = tickValue; + + if (lastDisplayed === null) { + lastDisplayed = { + pixelCoord: pixelCoord, + idealPixelCoord: pixelCoord + }; + } else { + if (Math.abs(pixelCoord - lastDisplayed.pixelCoord) >= inverseNoTicks) { + lastDisplayed = { + pixelCoord: pixelCoord, + idealPixelCoord: lastDisplayed.idealPixelCoord - inverseNoTicks + }; + } else { + tick = null; + } + } + + if (tick) { + ticks.push(tick); + } + } + // Since we went in backwards order. + ticks.reverse(); + } else { + var tickSize = plot.computeTickSize(min, max, noTicks), + customAxis = {min: min, max: max, tickSize: tickSize}; + ticks = $.plot.linearTickGenerator(customAxis); + } + + return ticks; + }; + + var clampAxis = function (axis, plot) { + var min = axis.min, + max = axis.max; + + if (min <= 0) { + //for empty graph if axis.min is not strictly positive make it 0.1 + if (axis.datamin === null) { + min = axis.min = 0.1; + } else { + min = processAxisOffset(plot, axis); + } + + if (max < min) { + axis.max = axis.datamax !== null ? axis.datamax : axis.options.max; + axis.options.offset.below = 0; + axis.options.offset.above = 0; + } + } + + return min; + } + + /** + - logTickFormatter(value, axis, precision) + + This is the corresponding tickFormatter of the logaxis. + For a number greater that 10^6 or smaller than 10^(-3), this will be drawn + with e representation + */ + var logTickFormatter = function (value, axis, precision) { + var tenExponent = value > 0 ? Math.floor(Math.log(value) / Math.LN10) : 0; + + if (precision) { + if ((tenExponent >= -4) && (tenExponent <= 7)) { + return $.plot.defaultTickFormatter(value, axis, precision); + } else { + return $.plot.expRepTickFormatter(value, axis, precision); + } + } + if ((tenExponent >= -4) && (tenExponent <= 7)) { + //if we have float numbers, return a limited length string(ex: 0.0009 is represented as 0.000900001) + var formattedValue = tenExponent < 0 ? value.toFixed(-tenExponent) : value.toFixed(tenExponent + 2); + if (formattedValue.indexOf('.') !== -1) { + var lastZero = formattedValue.lastIndexOf('0'); + + while (lastZero === formattedValue.length - 1) { + formattedValue = formattedValue.slice(0, -1); + lastZero = formattedValue.lastIndexOf('0'); + } + + //delete the dot if is last + if (formattedValue.indexOf('.') === formattedValue.length - 1) { + formattedValue = formattedValue.slice(0, -1); + } + } + return formattedValue; + } else { + return $.plot.expRepTickFormatter(value, axis); + } + }; + + /*logaxis caracteristic functions*/ + var logTransform = function (v) { + if (v < PREFERRED_LOG_TICK_VALUES[0]) { + v = PREFERRED_LOG_TICK_VALUES[0]; + } + + return Math.log(v); + }; + + var logInverseTransform = function (v) { + return Math.exp(v); + }; + + var invertedTransform = function (v) { + return -v; + } + + var invertedLogTransform = function (v) { + return -logTransform(v); + } + + var invertedLogInverseTransform = function (v) { + return logInverseTransform(-v); + } + + /** + - setDataminRange(plot, axis) + + It is used for clamping the starting point of a logarithmic axis. + This will set the axis datamin range to 0.1 or to the first datapoint greater then 0. + The function is usefull since the logarithmic representation can not show + values less than or equal to 0. + */ + function setDataminRange(plot, axis) { + if (axis.options.mode === 'log' && axis.datamin <= 0) { + if (axis.datamin === null) { + axis.datamin = 0.1; + } else { + axis.datamin = processAxisOffset(plot, axis); + } + } + } + + function processAxisOffset(plot, axis) { + var series = plot.getData(), + range = series + .filter(function(series) { + return series.xaxis === axis || series.yaxis === axis; + }) + .map(function(series) { + return plot.computeRangeForDataSeries(series, null, isValid); + }), + min = axis.direction === 'x' + ? Math.min(0.1, range && range[0] ? range[0].xmin : 0.1) + : Math.min(0.1, range && range[0] ? range[0].ymin : 0.1); + + axis.min = min; + + return min; + } + + function isValid(a) { + return a > 0; + } + + function init(plot) { + plot.hooks.processOptions.push(function (plot) { + $.each(plot.getAxes(), function (axisName, axis) { + var opts = axis.options; + if (opts.mode === 'log') { + axis.tickGenerator = function (axis) { + var noTicks = 11; + return logTickGenerator(plot, axis, noTicks); + }; + if (typeof axis.options.tickFormatter !== 'function') { + axis.options.tickFormatter = logTickFormatter; + } + axis.options.transform = opts.inverted ? invertedLogTransform : logTransform; + axis.options.inverseTransform = opts.inverted ? invertedLogInverseTransform : logInverseTransform; + axis.options.autoScaleMargin = 0; + plot.hooks.setRange.push(setDataminRange); + } else if (opts.inverted) { + axis.options.transform = invertedTransform; + axis.options.inverseTransform = invertedTransform; + } + }); + }); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'log', + version: '0.1' + }); + + $.plot.logTicksGenerator = logTickGenerator; + $.plot.logTickFormatter = logTickFormatter; +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.navigate.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.navigate.js new file mode 100644 index 0000000..676cc52 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.navigate.js @@ -0,0 +1,834 @@ +/* Flot plugin for adding the ability to pan and zoom the plot. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Copyright (c) 2016 Ciprian Ceteras. +Copyright (c) 2017 Raluca Portase. +Licensed under the MIT license. + +*/ + +/** +## jquery.flot.navigate.js + +This flot plugin is used for adding the ability to pan and zoom the plot. +A higher level overview is available at [interactions](interactions.md) documentation. + +The default behaviour is scrollwheel up/down to zoom in, drag +to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and +plot.pan( offset ) so you easily can add custom controls. It also fires +"plotpan" and "plotzoom" events, useful for synchronizing plots. + +The plugin supports these options: +```js + zoom: { + interactive: false, + active: false, + amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) + } + + pan: { + interactive: false, + active: false, + cursor: "move", // CSS mouse cursor value used when dragging, e.g. "pointer" + frameRate: 60, + mode: "smart" // enable smart pan mode + } + + xaxis: { + axisZoom: true, //zoom axis when mouse over it is allowed + plotZoom: true, //zoom axis is allowed for plot zoom + axisPan: true, //pan axis when mouse over it is allowed + plotPan: true, //pan axis is allowed for plot pan + panRange: [undefined, undefined], // no limit on pan range, or [min, max] in axis units + zoomRange: [undefined, undefined], // no limit on zoom range, or [closest zoom, furthest zoom] in axis units + } + + yaxis: { + axisZoom: true, //zoom axis when mouse over it is allowed + plotZoom: true, //zoom axis is allowed for plot zoom + axisPan: true, //pan axis when mouse over it is allowed + plotPan: true //pan axis is allowed for plot pan + panRange: [undefined, undefined], // no limit on pan range, or [min, max] in axis units + zoomRange: [undefined, undefined], // no limit on zoom range, or [closest zoom, furthest zoom] in axis units + } +``` +**interactive** enables the built-in drag/click behaviour. If you enable +interactive for pan, then you'll have a basic plot that supports moving +around; the same for zoom. + +**active** is true after a touch tap on plot. This enables plot navigation. +Once activated, zoom and pan cannot be deactivated. When the plot becomes active, +"plotactivated" event is triggered. + +**amount** specifies the default amount to zoom in (so 1.5 = 150%) relative to +the current viewport. + +**cursor** is a standard CSS mouse cursor string used for visual feedback to the +user when dragging. + +**frameRate** specifies the maximum number of times per second the plot will +update itself while the user is panning around on it (set to null to disable +intermediate pans, the plot will then not update until the mouse button is +released). + +**mode** a string specifies the pan mode for mouse interaction. Accepted values: +'manual': no pan hint or direction snapping; +'smart': The graph shows pan hint bar and the pan movement will snap +to one direction when the drag direction is close to it; +'smartLock'. The graph shows pan hint bar and the pan movement will always +snap to a direction that the drag diorection started with. + +Example API usage: +```js + plot = $.plot(...); + + // zoom default amount in on the pixel ( 10, 20 ) + plot.zoom({ center: { left: 10, top: 20 } }); + + // zoom out again + plot.zoomOut({ center: { left: 10, top: 20 } }); + + // zoom 200% in on the pixel (10, 20) + plot.zoom({ amount: 2, center: { left: 10, top: 20 } }); + + // pan 100 pixels to the left (changing x-range in a positive way) and 20 down + plot.pan({ left: -100, top: 20 }) +``` + +Here, "center" specifies where the center of the zooming should happen. Note +that this is defined in pixel space, not the space of the data points (you can +use the p2c helpers on the axes in Flot to help you convert between these). + +**amount** is the amount to zoom the viewport relative to the current range, so +1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You +can set the default in the options. +*/ + +/* eslint-enable */ +(function($) { + 'use strict'; + + var options = { + zoom: { + interactive: false, + active: false, + amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out) + }, + pan: { + interactive: false, + active: false, + cursor: "move", + frameRate: 60, + mode: 'smart' + }, + recenter: { + interactive: true + }, + xaxis: { + axisZoom: true, //zoom axis when mouse over it is allowed + plotZoom: true, //zoom axis is allowed for plot zoom + axisPan: true, //pan axis when mouse over it is allowed + plotPan: true, //pan axis is allowed for plot pan + panRange: [undefined, undefined], // no limit on pan range, or [min, max] in axis units + zoomRange: [undefined, undefined] // no limit on zoom range, or [closest zoom, furthest zoom] in axis units + }, + yaxis: { + axisZoom: true, + plotZoom: true, + axisPan: true, + plotPan: true, + panRange: [undefined, undefined], // no limit on pan range, or [min, max] in axis units + zoomRange: [undefined, undefined] // no limit on zoom range, or [closest zoom, furthest zoom] in axis units + } + }; + + var saturated = $.plot.saturated; + var browser = $.plot.browser; + var SNAPPING_CONSTANT = $.plot.uiConstants.SNAPPING_CONSTANT; + var PANHINT_LENGTH_CONSTANT = $.plot.uiConstants.PANHINT_LENGTH_CONSTANT; + + function init(plot) { + plot.hooks.processOptions.push(initNevigation); + } + + function initNevigation(plot, options) { + var panAxes = null; + var canDrag = false; + var useManualPan = options.pan.mode === 'manual', + smartPanLock = options.pan.mode === 'smartLock', + useSmartPan = smartPanLock || options.pan.mode === 'smart'; + + function onZoomClick(e, zoomOut, amount) { + var page = browser.getPageXY(e); + + var c = plot.offset(); + c.left = page.X - c.left; + c.top = page.Y - c.top; + + var ec = plot.getPlaceholder().offset(); + ec.left = page.X - ec.left; + ec.top = page.Y - ec.top; + + var axes = plot.getXAxes().concat(plot.getYAxes()).filter(function (axis) { + var box = axis.box; + if (box !== undefined) { + return (ec.left > box.left) && (ec.left < box.left + box.width) && + (ec.top > box.top) && (ec.top < box.top + box.height); + } + }); + + if (axes.length === 0) { + axes = undefined; + } + + if (zoomOut) { + plot.zoomOut({ + center: c, + axes: axes, + amount: amount + }); + } else { + plot.zoom({ + center: c, + axes: axes, + amount: amount + }); + } + } + + var prevCursor = 'default', + panHint = null, + panTimeout = null, + plotState, + prevDragPosition = { x: 0, y: 0 }, + isPanAction = false; + + function onMouseWheel(e, delta) { + var maxAbsoluteDeltaOnMac = 1, + isMacScroll = Math.abs(e.originalEvent.deltaY) <= maxAbsoluteDeltaOnMac, + defaultNonMacScrollAmount = null, + macMagicRatio = 50, + amount = isMacScroll ? 1 + Math.abs(e.originalEvent.deltaY) / macMagicRatio : defaultNonMacScrollAmount; + + if (isPanAction) { + onDragEnd(e); + } + + if (plot.getOptions().zoom.active) { + e.preventDefault(); + onZoomClick(e, delta < 0, amount); + return false; + } + } + + plot.navigationState = function(startPageX, startPageY) { + var axes = this.getAxes(); + var result = {}; + Object.keys(axes).forEach(function(axisName) { + var axis = axes[axisName]; + result[axisName] = { + navigationOffset: { below: axis.options.offset.below || 0, + above: axis.options.offset.above || 0}, + axisMin: axis.min, + axisMax: axis.max, + diagMode: false + } + }); + + result.startPageX = startPageX || 0; + result.startPageY = startPageY || 0; + return result; + } + + function onMouseDown(e) { + canDrag = true; + } + + function onMouseUp(e) { + canDrag = false; + } + + function isLeftMouseButtonPressed(e) { + return e.button === 0; + } + + function onDragStart(e) { + if (!canDrag || !isLeftMouseButtonPressed(e)) { + return false; + } + + isPanAction = true; + var page = browser.getPageXY(e); + + var ec = plot.getPlaceholder().offset(); + ec.left = page.X - ec.left; + ec.top = page.Y - ec.top; + + panAxes = plot.getXAxes().concat(plot.getYAxes()).filter(function (axis) { + var box = axis.box; + if (box !== undefined) { + return (ec.left > box.left) && (ec.left < box.left + box.width) && + (ec.top > box.top) && (ec.top < box.top + box.height); + } + }); + + if (panAxes.length === 0) { + panAxes = undefined; + } + + var c = plot.getPlaceholder().css('cursor'); + if (c) { + prevCursor = c; + } + + plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor); + + if (useSmartPan) { + plotState = plot.navigationState(page.X, page.Y); + } else if (useManualPan) { + prevDragPosition.x = page.X; + prevDragPosition.y = page.Y; + } + } + + function onDrag(e) { + if (!isPanAction) { + return; + } + + var page = browser.getPageXY(e); + var frameRate = plot.getOptions().pan.frameRate; + + if (frameRate === -1) { + if (useSmartPan) { + plot.smartPan({ + x: plotState.startPageX - page.X, + y: plotState.startPageY - page.Y + }, plotState, panAxes, false, smartPanLock); + } else if (useManualPan) { + plot.pan({ + left: prevDragPosition.x - page.X, + top: prevDragPosition.y - page.Y, + axes: panAxes + }); + prevDragPosition.x = page.X; + prevDragPosition.y = page.Y; + } + return; + } + + if (panTimeout || !frameRate) return; + + panTimeout = setTimeout(function() { + if (useSmartPan) { + plot.smartPan({ + x: plotState.startPageX - page.X, + y: plotState.startPageY - page.Y + }, plotState, panAxes, false, smartPanLock); + } else if (useManualPan) { + plot.pan({ + left: prevDragPosition.x - page.X, + top: prevDragPosition.y - page.Y, + axes: panAxes + }); + prevDragPosition.x = page.X; + prevDragPosition.y = page.Y; + } + + panTimeout = null; + }, 1 / frameRate * 1000); + } + + function onDragEnd(e) { + if (!isPanAction) { + return; + } + + if (panTimeout) { + clearTimeout(panTimeout); + panTimeout = null; + } + + isPanAction = false; + var page = browser.getPageXY(e); + + plot.getPlaceholder().css('cursor', prevCursor); + + if (useSmartPan) { + plot.smartPan({ + x: plotState.startPageX - page.X, + y: plotState.startPageY - page.Y + }, plotState, panAxes, false, smartPanLock); + plot.smartPan.end(); + } else if (useManualPan) { + plot.pan({ + left: prevDragPosition.x - page.X, + top: prevDragPosition.y - page.Y, + axes: panAxes + }); + prevDragPosition.x = 0; + prevDragPosition.y = 0; + } + } + + function onDblClick(e) { + plot.activate(); + var o = plot.getOptions() + + if (!o.recenter.interactive) { return; } + + var axes = plot.getTouchedAxis(e.clientX, e.clientY), + event; + + plot.recenter({ axes: axes[0] ? axes : null }); + + if (axes[0]) { + event = new $.Event('re-center', { detail: { + axisTouched: axes[0] + }}); + } else { + event = new $.Event('re-center', { detail: e }); + } + plot.getPlaceholder().trigger(event); + } + + function onClick(e) { + plot.activate(); + + if (isPanAction) { + onDragEnd(e); + } + + return false; + } + + plot.activate = function() { + var o = plot.getOptions(); + if (!o.pan.active || !o.zoom.active) { + o.pan.active = true; + o.zoom.active = true; + plot.getPlaceholder().trigger("plotactivated", [plot]); + } + } + + function bindEvents(plot, eventHolder) { + var o = plot.getOptions(); + if (o.zoom.interactive) { + eventHolder.mousewheel(onMouseWheel); + } + + if (o.pan.interactive) { + plot.addEventHandler("dragstart", onDragStart, eventHolder, 0); + plot.addEventHandler("drag", onDrag, eventHolder, 0); + plot.addEventHandler("dragend", onDragEnd, eventHolder, 0); + eventHolder.bind("mousedown", onMouseDown); + eventHolder.bind("mouseup", onMouseUp); + } + + eventHolder.dblclick(onDblClick); + eventHolder.click(onClick); + } + + plot.zoomOut = function(args) { + if (!args) { + args = {}; + } + + if (!args.amount) { + args.amount = plot.getOptions().zoom.amount; + } + + args.amount = 1 / args.amount; + plot.zoom(args); + }; + + plot.zoom = function(args) { + if (!args) { + args = {}; + } + + var c = args.center, + amount = args.amount || plot.getOptions().zoom.amount, + w = plot.width(), + h = plot.height(), + axes = args.axes || plot.getAxes(); + + if (!c) { + c = { + left: w / 2, + top: h / 2 + }; + } + + var xf = c.left / w, + yf = c.top / h, + minmax = { + x: { + min: c.left - xf * w / amount, + max: c.left + (1 - xf) * w / amount + }, + y: { + min: c.top - yf * h / amount, + max: c.top + (1 - yf) * h / amount + } + }; + + for (var key in axes) { + if (!axes.hasOwnProperty(key)) { + continue; + } + + var axis = axes[key], + opts = axis.options, + min = minmax[axis.direction].min, + max = minmax[axis.direction].max, + navigationOffset = axis.options.offset; + + //skip axis without axisZoom when zooming only on certain axis or axis without plotZoom for zoom on entire plot + if ((!opts.axisZoom && args.axes) || (!args.axes && !opts.plotZoom)) { + continue; + } + + min = $.plot.saturated.saturate(axis.c2p(min)); + max = $.plot.saturated.saturate(axis.c2p(max)); + if (min > max) { + // make sure min < max + var tmp = min; + min = max; + max = tmp; + } + + // test for zoom limits zoomRange: [min,max] + if (opts.zoomRange) { + // zoomed in too far + if (max - min < opts.zoomRange[0]) { + continue; + } + // zoomed out to far + if (max - min > opts.zoomRange[1]) { + continue; + } + } + + var offsetBelow = $.plot.saturated.saturate(navigationOffset.below - (axis.min - min)); + var offsetAbove = $.plot.saturated.saturate(navigationOffset.above - (axis.max - max)); + opts.offset = { below: offsetBelow, above: offsetAbove }; + }; + + plot.setupGrid(true); + plot.draw(); + + if (!args.preventEvent) { + plot.getPlaceholder().trigger("plotzoom", [plot, args]); + } + }; + + plot.pan = function(args) { + var delta = { + x: +args.left, + y: +args.top + }; + + if (isNaN(delta.x)) delta.x = 0; + if (isNaN(delta.y)) delta.y = 0; + + $.each(args.axes || plot.getAxes(), function(_, axis) { + var opts = axis.options, + d = delta[axis.direction]; + + //skip axis without axisPan when panning only on certain axis or axis without plotPan for pan the entire plot + if ((!opts.axisPan && args.axes) || (!opts.plotPan && !args.axes)) { + return; + } + + // calc min delta (revealing left edge of plot) + var minD = axis.p2c(opts.panRange[0]) - axis.p2c(axis.min); + // calc max delta (revealing right edge of plot) + var maxD = axis.p2c(opts.panRange[1]) - axis.p2c(axis.max); + // limit delta to min or max if enabled + if (opts.panRange[0] !== undefined && d >= maxD) d = maxD; + if (opts.panRange[1] !== undefined && d <= minD) d = minD; + + if (d !== 0) { + var navigationOffsetBelow = saturated.saturate(axis.c2p(axis.p2c(axis.min) + d) - axis.c2p(axis.p2c(axis.min))), + navigationOffsetAbove = saturated.saturate(axis.c2p(axis.p2c(axis.max) + d) - axis.c2p(axis.p2c(axis.max))); + + if (!isFinite(navigationOffsetBelow)) { + navigationOffsetBelow = 0; + } + + if (!isFinite(navigationOffsetAbove)) { + navigationOffsetAbove = 0; + } + + opts.offset = { + below: saturated.saturate(navigationOffsetBelow + (opts.offset.below || 0)), + above: saturated.saturate(navigationOffsetAbove + (opts.offset.above || 0)) + }; + } + }); + + plot.setupGrid(true); + plot.draw(); + if (!args.preventEvent) { + plot.getPlaceholder().trigger("plotpan", [plot, args]); + } + }; + + plot.recenter = function(args) { + $.each(args.axes || plot.getAxes(), function(_, axis) { + if (args.axes) { + if (this.direction === 'x') { + axis.options.offset = { below: 0 }; + } else if (this.direction === 'y') { + axis.options.offset = { above: 0 }; + } + } else { + axis.options.offset = { below: 0, above: 0 }; + } + }); + plot.setupGrid(true); + plot.draw(); + }; + + var shouldSnap = function(delta) { + return (Math.abs(delta.y) < SNAPPING_CONSTANT && Math.abs(delta.x) >= SNAPPING_CONSTANT) || + (Math.abs(delta.x) < SNAPPING_CONSTANT && Math.abs(delta.y) >= SNAPPING_CONSTANT); + } + + // adjust delta so the pan action is constrained on the vertical or horizontal direction + // it the movements in the other direction are small + var adjustDeltaToSnap = function(delta) { + if (Math.abs(delta.x) < SNAPPING_CONSTANT && Math.abs(delta.y) >= SNAPPING_CONSTANT) { + return {x: 0, y: delta.y}; + } + + if (Math.abs(delta.y) < SNAPPING_CONSTANT && Math.abs(delta.x) >= SNAPPING_CONSTANT) { + return {x: delta.x, y: 0}; + } + + return delta; + } + + var lockedDirection = null; + var lockDeltaDirection = function(delta) { + if (!lockedDirection && Math.max(Math.abs(delta.x), Math.abs(delta.y)) >= SNAPPING_CONSTANT) { + lockedDirection = Math.abs(delta.x) < Math.abs(delta.y) ? 'y' : 'x'; + } + + switch (lockedDirection) { + case 'x': + return { x: delta.x, y: 0 }; + case 'y': + return { x: 0, y: delta.y }; + default: + return { x: 0, y: 0 }; + } + } + + var isDiagonalMode = function(delta) { + if (Math.abs(delta.x) > 0 && Math.abs(delta.y) > 0) { + return true; + } + return false; + } + + var restoreAxisOffset = function(axes, initialState, delta) { + var axis; + Object.keys(axes).forEach(function(axisName) { + axis = axes[axisName]; + if (delta[axis.direction] === 0) { + axis.options.offset.below = initialState[axisName].navigationOffset.below; + axis.options.offset.above = initialState[axisName].navigationOffset.above; + } + }); + } + + var prevDelta = { x: 0, y: 0 }; + plot.smartPan = function(delta, initialState, panAxes, preventEvent, smartLock) { + var snap = smartLock ? true : shouldSnap(delta), + axes = plot.getAxes(), + opts; + delta = smartLock ? lockDeltaDirection(delta) : adjustDeltaToSnap(delta); + + if (isDiagonalMode(delta)) { + initialState.diagMode = true; + } + + if (snap && initialState.diagMode === true) { + initialState.diagMode = false; + restoreAxisOffset(axes, initialState, delta); + } + + if (snap) { + panHint = { + start: { + x: initialState.startPageX - plot.offset().left + plot.getPlotOffset().left, + y: initialState.startPageY - plot.offset().top + plot.getPlotOffset().top + }, + end: { + x: initialState.startPageX - delta.x - plot.offset().left + plot.getPlotOffset().left, + y: initialState.startPageY - delta.y - plot.offset().top + plot.getPlotOffset().top + } + } + } else { + panHint = { + start: { + x: initialState.startPageX - plot.offset().left + plot.getPlotOffset().left, + y: initialState.startPageY - plot.offset().top + plot.getPlotOffset().top + }, + end: false + } + } + + if (isNaN(delta.x)) delta.x = 0; + if (isNaN(delta.y)) delta.y = 0; + + if (panAxes) { + axes = panAxes; + } + + var axis, axisMin, axisMax, p, d; + Object.keys(axes).forEach(function(axisName) { + axis = axes[axisName]; + axisMin = axis.min; + axisMax = axis.max; + opts = axis.options; + + d = delta[axis.direction]; + p = prevDelta[axis.direction]; + + //skip axis without axisPan when panning only on certain axis or axis without plotPan for pan the entire plot + if ((!opts.axisPan && panAxes) || (!panAxes && !opts.plotPan)) { + return; + } + + // calc min delta (revealing left edge of plot) + var minD = p + axis.p2c(opts.panRange[0]) - axis.p2c(axisMin); + // calc max delta (revealing right edge of plot) + var maxD = p + axis.p2c(opts.panRange[1]) - axis.p2c(axisMax); + // limit delta to min or max if enabled + if (opts.panRange[0] !== undefined && d >= maxD) d = maxD; + if (opts.panRange[1] !== undefined && d <= minD) d = minD; + + if (d !== 0) { + var navigationOffsetBelow = saturated.saturate(axis.c2p(axis.p2c(axisMin) - (p - d)) - axis.c2p(axis.p2c(axisMin))), + navigationOffsetAbove = saturated.saturate(axis.c2p(axis.p2c(axisMax) - (p - d)) - axis.c2p(axis.p2c(axisMax))); + + if (!isFinite(navigationOffsetBelow)) { + navigationOffsetBelow = 0; + } + + if (!isFinite(navigationOffsetAbove)) { + navigationOffsetAbove = 0; + } + + axis.options.offset.below = saturated.saturate(navigationOffsetBelow + (axis.options.offset.below || 0)); + axis.options.offset.above = saturated.saturate(navigationOffsetAbove + (axis.options.offset.above || 0)); + } + }); + + prevDelta = delta; + plot.setupGrid(true); + plot.draw(); + + if (!preventEvent) { + plot.getPlaceholder().trigger("plotpan", [plot, delta, panAxes, initialState]); + } + }; + + plot.smartPan.end = function() { + panHint = null; + lockedDirection = null; + prevDelta = { x: 0, y: 0 }; + plot.triggerRedrawOverlay(); + } + + function shutdown(plot, eventHolder) { + eventHolder.unbind("mousewheel", onMouseWheel); + eventHolder.unbind("mousedown", onMouseDown); + eventHolder.unbind("mouseup", onMouseUp); + eventHolder.unbind("dragstart", onDragStart); + eventHolder.unbind("drag", onDrag); + eventHolder.unbind("dragend", onDragEnd); + eventHolder.unbind("dblclick", onDblClick); + eventHolder.unbind("click", onClick); + + if (panTimeout) clearTimeout(panTimeout); + } + + function drawOverlay(plot, ctx) { + if (panHint) { + ctx.strokeStyle = 'rgba(96, 160, 208, 0.7)'; + ctx.lineWidth = 2; + ctx.lineJoin = "round"; + var startx = Math.round(panHint.start.x), + starty = Math.round(panHint.start.y), + endx, endy; + + if (panAxes) { + if (panAxes[0].direction === 'x') { + endy = Math.round(panHint.start.y); + endx = Math.round(panHint.end.x); + } else if (panAxes[0].direction === 'y') { + endx = Math.round(panHint.start.x); + endy = Math.round(panHint.end.y); + } + } else { + endx = Math.round(panHint.end.x); + endy = Math.round(panHint.end.y); + } + + ctx.beginPath(); + + if (panHint.end === false) { + ctx.moveTo(startx, starty - PANHINT_LENGTH_CONSTANT); + ctx.lineTo(startx, starty + PANHINT_LENGTH_CONSTANT); + + ctx.moveTo(startx + PANHINT_LENGTH_CONSTANT, starty); + ctx.lineTo(startx - PANHINT_LENGTH_CONSTANT, starty); + } else { + var dirX = starty === endy; + + ctx.moveTo(startx - (dirX ? 0 : PANHINT_LENGTH_CONSTANT), starty - (dirX ? PANHINT_LENGTH_CONSTANT : 0)); + ctx.lineTo(startx + (dirX ? 0 : PANHINT_LENGTH_CONSTANT), starty + (dirX ? PANHINT_LENGTH_CONSTANT : 0)); + + ctx.moveTo(startx, starty); + ctx.lineTo(endx, endy); + + ctx.moveTo(endx - (dirX ? 0 : PANHINT_LENGTH_CONSTANT), endy - (dirX ? PANHINT_LENGTH_CONSTANT : 0)); + ctx.lineTo(endx + (dirX ? 0 : PANHINT_LENGTH_CONSTANT), endy + (dirX ? PANHINT_LENGTH_CONSTANT : 0)); + } + + ctx.stroke(); + } + } + + plot.getTouchedAxis = function(touchPointX, touchPointY) { + var ec = plot.getPlaceholder().offset(); + ec.left = touchPointX - ec.left; + ec.top = touchPointY - ec.top; + + var axis = plot.getXAxes().concat(plot.getYAxes()).filter(function (axis) { + var box = axis.box; + if (box !== undefined) { + return (ec.left > box.left) && (ec.left < box.left + box.width) && + (ec.top > box.top) && (ec.top < box.top + box.height); + } + }); + + return axis; + } + + plot.hooks.drawOverlay.push(drawOverlay); + plot.hooks.bindEvents.push(bindEvents); + plot.hooks.shutdown.push(shutdown); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'navigate', + version: '1.3' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.pie.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.pie.js new file mode 100644 index 0000000..026a9c0 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.pie.js @@ -0,0 +1,794 @@ +/* Flot plugin for rendering pie charts. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin assumes that each series has a single data value, and that each +value is a positive integer or zero. Negative numbers don't make sense for a +pie chart, and have unpredictable results. The values do NOT need to be +passed in as percentages; the plugin will calculate the total and per-slice +percentages internally. + +* Created by Brian Medendorp + +* Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars + +The plugin supports these options: + + series: { + pie: { + show: true/false + radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto' + innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect + startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result + tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show) + offset: { + top: integer value to move the pie up or down + left: integer value to move the pie left or right, or 'auto' + }, + stroke: { + color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF') + width: integer pixel width of the stroke + }, + label: { + show: true/false, or 'auto' + formatter: a user-defined function that modifies the text/style of the label text + radius: 0-1 for percentage of fullsize, or a specified pixel length + background: { + color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000') + opacity: 0-1 + }, + threshold: 0-1 for the percentage value at which to hide labels (if they're too small) + }, + combine: { + threshold: 0-1 for the percentage value at which to combine slices (if they're too small) + color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined + label: any text value of what the combined slice should be labeled + } + highlight: { + opacity: 0-1 + } + } + } + +More detail and specific examples can be found in the included HTML file. + +*/ + +(function($) { + // Maximum redraw attempts when fitting labels within the plot + + var REDRAW_ATTEMPTS = 10; + + // Factor by which to shrink the pie when fitting labels within the plot + + var REDRAW_SHRINK = 0.95; + + function init(plot) { + var canvas = null, + target = null, + options = null, + maxRadius = null, + centerLeft = null, + centerTop = null, + processed = false, + ctx = null; + + // interactive variables + + var highlights = []; + + // add hook to determine if pie plugin in enabled, and then perform necessary operations + + plot.hooks.processOptions.push(function(plot, options) { + if (options.series.pie.show) { + options.grid.show = false; + + // set labels.show + + if (options.series.pie.label.show === "auto") { + if (options.legend.show) { + options.series.pie.label.show = false; + } else { + options.series.pie.label.show = true; + } + } + + // set radius + + if (options.series.pie.radius === "auto") { + if (options.series.pie.label.show) { + options.series.pie.radius = 3 / 4; + } else { + options.series.pie.radius = 1; + } + } + + // ensure sane tilt + + if (options.series.pie.tilt > 1) { + options.series.pie.tilt = 1; + } else if (options.series.pie.tilt < 0) { + options.series.pie.tilt = 0; + } + } + }); + + plot.hooks.bindEvents.push(function(plot, eventHolder) { + var options = plot.getOptions(); + if (options.series.pie.show) { + if (options.grid.hoverable) { + eventHolder.unbind("mousemove").mousemove(onMouseMove); + eventHolder.bind("mouseleave", onMouseMove); + } + if (options.grid.clickable) { + eventHolder.unbind("click").click(onClick); + } + } + }); + + plot.hooks.shutdown.push(function (plot, eventHolder) { + eventHolder.unbind("mousemove", onMouseMove); + eventHolder.unbind("mouseleave", onMouseMove); + eventHolder.unbind("click", onClick); + highlights = []; + }); + + plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) { + var options = plot.getOptions(); + if (options.series.pie.show) { + processDatapoints(plot, series, data, datapoints); + } + }); + + plot.hooks.drawOverlay.push(function(plot, octx) { + var options = plot.getOptions(); + if (options.series.pie.show) { + drawOverlay(plot, octx); + } + }); + + plot.hooks.draw.push(function(plot, newCtx) { + var options = plot.getOptions(); + if (options.series.pie.show) { + draw(plot, newCtx); + } + }); + + function processDatapoints(plot, series, datapoints) { + if (!processed) { + processed = true; + canvas = plot.getCanvas(); + target = $(canvas).parent(); + options = plot.getOptions(); + plot.setData(combine(plot.getData())); + } + } + + function combine(data) { + var total = 0, + combined = 0, + numCombined = 0, + color = options.series.pie.combine.color, + newdata = [], + i, + value; + + // Fix up the raw data from Flot, ensuring the data is numeric + + for (i = 0; i < data.length; ++i) { + value = data[i].data; + + // If the data is an array, we'll assume that it's a standard + // Flot x-y pair, and are concerned only with the second value. + + // Note how we use the original array, rather than creating a + // new one; this is more efficient and preserves any extra data + // that the user may have stored in higher indexes. + + if ($.isArray(value) && value.length === 1) { + value = value[0]; + } + + if ($.isArray(value)) { + // Equivalent to $.isNumeric() but compatible with jQuery < 1.7 + if (!isNaN(parseFloat(value[1])) && isFinite(value[1])) { + value[1] = +value[1]; + } else { + value[1] = 0; + } + } else if (!isNaN(parseFloat(value)) && isFinite(value)) { + value = [1, +value]; + } else { + value = [1, 0]; + } + + data[i].data = [value]; + } + + // Sum up all the slices, so we can calculate percentages for each + + for (i = 0; i < data.length; ++i) { + total += data[i].data[0][1]; + } + + // Count the number of slices with percentages below the combine + // threshold; if it turns out to be just one, we won't combine. + + for (i = 0; i < data.length; ++i) { + value = data[i].data[0][1]; + if (value / total <= options.series.pie.combine.threshold) { + combined += value; + numCombined++; + if (!color) { + color = data[i].color; + } + } + } + + for (i = 0; i < data.length; ++i) { + value = data[i].data[0][1]; + if (numCombined < 2 || value / total > options.series.pie.combine.threshold) { + newdata.push( + $.extend(data[i], { /* extend to allow keeping all other original data values + and using them e.g. in labelFormatter. */ + data: [[1, value]], + color: data[i].color, + label: data[i].label, + angle: value * Math.PI * 2 / total, + percent: value / (total / 100) + }) + ); + } + } + + if (numCombined > 1) { + newdata.push({ + data: [[1, combined]], + color: color, + label: options.series.pie.combine.label, + angle: combined * Math.PI * 2 / total, + percent: combined / (total / 100) + }); + } + + return newdata; + } + + function draw(plot, newCtx) { + if (!target) { + return; // if no series were passed + } + + var canvasWidth = plot.getPlaceholder().width(), + canvasHeight = plot.getPlaceholder().height(), + legendWidth = target.children().filter(".legend").children().width() || 0; + + ctx = newCtx; + + // WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE! + + // When combining smaller slices into an 'other' slice, we need to + // add a new series. Since Flot gives plugins no way to modify the + // list of series, the pie plugin uses a hack where the first call + // to processDatapoints results in a call to setData with the new + // list of series, then subsequent processDatapoints do nothing. + + // The plugin-global 'processed' flag is used to control this hack; + // it starts out false, and is set to true after the first call to + // processDatapoints. + + // Unfortunately this turns future setData calls into no-ops; they + // call processDatapoints, the flag is true, and nothing happens. + + // To fix this we'll set the flag back to false here in draw, when + // all series have been processed, so the next sequence of calls to + // processDatapoints once again starts out with a slice-combine. + // This is really a hack; in 0.9 we need to give plugins a proper + // way to modify series before any processing begins. + + processed = false; + + // calculate maximum radius and center point + maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2; + centerTop = canvasHeight / 2 + options.series.pie.offset.top; + centerLeft = canvasWidth / 2; + + if (options.series.pie.offset.left === "auto") { + if (options.legend.position.match("w")) { + centerLeft += legendWidth / 2; + } else { + centerLeft -= legendWidth / 2; + } + if (centerLeft < maxRadius) { + centerLeft = maxRadius; + } else if (centerLeft > canvasWidth - maxRadius) { + centerLeft = canvasWidth - maxRadius; + } + } else { + centerLeft += options.series.pie.offset.left; + } + + var slices = plot.getData(), + attempts = 0; + + // Keep shrinking the pie's radius until drawPie returns true, + // indicating that all the labels fit, or we try too many times. + do { + if (attempts > 0) { + maxRadius *= REDRAW_SHRINK; + } + attempts += 1; + clear(); + if (options.series.pie.tilt <= 0.8) { + drawShadow(); + } + } while (!drawPie() && attempts < REDRAW_ATTEMPTS) + + if (attempts >= REDRAW_ATTEMPTS) { + clear(); + target.prepend("
Could not draw pie with labels contained inside canvas
"); + } + + if (plot.setSeries && plot.insertLegend) { + plot.setSeries(slices); + plot.insertLegend(); + } + + // we're actually done at this point, just defining internal functions at this point + function clear() { + ctx.clearRect(0, 0, canvasWidth, canvasHeight); + target.children().filter(".pieLabel, .pieLabelBackground").remove(); + } + + function drawShadow() { + var shadowLeft = options.series.pie.shadow.left; + var shadowTop = options.series.pie.shadow.top; + var edge = 10; + var alpha = options.series.pie.shadow.alpha; + var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius; + + if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 2 - shadowTop || radius <= edge) { + return; // shadow would be outside canvas, so don't draw it + } + + ctx.save(); + ctx.translate(shadowLeft, shadowTop); + ctx.globalAlpha = alpha; + ctx.fillStyle = "#000"; + + // center and rotate to starting position + ctx.translate(centerLeft, centerTop); + ctx.scale(1, options.series.pie.tilt); + + //radius -= edge; + for (var i = 1; i <= edge; i++) { + ctx.beginPath(); + ctx.arc(0, 0, radius, 0, Math.PI * 2, false); + ctx.fill(); + radius -= i; + } + + ctx.restore(); + } + + function drawPie() { + var startAngle = Math.PI * options.series.pie.startAngle; + var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius; + var i; + // center and rotate to starting position + + ctx.save(); + ctx.translate(centerLeft, centerTop); + ctx.scale(1, options.series.pie.tilt); + //ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera + + // draw slices + ctx.save(); + + var currentAngle = startAngle; + for (i = 0; i < slices.length; ++i) { + slices[i].startAngle = currentAngle; + drawSlice(slices[i].angle, slices[i].color, true); + } + + ctx.restore(); + + // draw slice outlines + if (options.series.pie.stroke.width > 0) { + ctx.save(); + ctx.lineWidth = options.series.pie.stroke.width; + currentAngle = startAngle; + for (i = 0; i < slices.length; ++i) { + drawSlice(slices[i].angle, options.series.pie.stroke.color, false); + } + + ctx.restore(); + } + + // draw donut hole + drawDonutHole(ctx); + + ctx.restore(); + + // Draw the labels, returning true if they fit within the plot + if (options.series.pie.label.show) { + return drawLabels(); + } else return true; + + function drawSlice(angle, color, fill) { + if (angle <= 0 || isNaN(angle)) { + return; + } + + if (fill) { + ctx.fillStyle = color; + } else { + ctx.strokeStyle = color; + ctx.lineJoin = "round"; + } + + ctx.beginPath(); + if (Math.abs(angle - Math.PI * 2) > 0.000000001) { + ctx.moveTo(0, 0); // Center of the pie + } + + //ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera + ctx.arc(0, 0, radius, currentAngle, currentAngle + angle / 2, false); + ctx.arc(0, 0, radius, currentAngle + angle / 2, currentAngle + angle, false); + ctx.closePath(); + //ctx.rotate(angle); // This doesn't work properly in Opera + currentAngle += angle; + + if (fill) { + ctx.fill(); + } else { + ctx.stroke(); + } + } + + function drawLabels() { + var currentAngle = startAngle; + var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.radius : maxRadius * options.series.pie.label.radius; + + for (var i = 0; i < slices.length; ++i) { + if (slices[i].percent >= options.series.pie.label.threshold * 100) { + if (!drawLabel(slices[i], currentAngle, i)) { + return false; + } + } + currentAngle += slices[i].angle; + } + + return true; + + function drawLabel(slice, startAngle, index) { + if (slice.data[0][1] === 0) { + return true; + } + + // format label text + var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter; + + if (lf) { + text = lf(slice.label, slice); + } else { + text = slice.label; + } + + if (plf) { + text = plf(text, slice); + } + + var halfAngle = ((startAngle + slice.angle) + startAngle) / 2; + var x = centerLeft + Math.round(Math.cos(halfAngle) * radius); + var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt; + + var html = "" + text + ""; + target.append(html); + + var label = target.children("#pieLabel" + index); + var labelTop = (y - label.height() / 2); + var labelLeft = (x - label.width() / 2); + + label.css("top", labelTop); + label.css("left", labelLeft); + + // check to make sure that the label is not outside the canvas + if (0 - labelTop > 0 || 0 - labelLeft > 0 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) { + return false; + } + + if (options.series.pie.label.background.opacity !== 0) { + // put in the transparent background separately to avoid blended labels and label boxes + var c = options.series.pie.label.background.color; + if (c == null) { + c = slice.color; + } + + var pos = "top:" + labelTop + "px;left:" + labelLeft + "px;"; + $("
") + .css("opacity", options.series.pie.label.background.opacity) + .insertBefore(label); + } + + return true; + } // end individual label function + } // end drawLabels function + } // end drawPie function + } // end draw function + + // Placed here because it needs to be accessed from multiple locations + + function drawDonutHole(layer) { + if (options.series.pie.innerRadius > 0) { + // subtract the center + layer.save(); + var innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius; + layer.globalCompositeOperation = "destination-out"; // this does not work with excanvas, but it will fall back to using the stroke color + layer.beginPath(); + layer.fillStyle = options.series.pie.stroke.color; + layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false); + layer.fill(); + layer.closePath(); + layer.restore(); + + // add inner stroke + layer.save(); + layer.beginPath(); + layer.strokeStyle = options.series.pie.stroke.color; + layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false); + layer.stroke(); + layer.closePath(); + layer.restore(); + + // TODO: add extra shadow inside hole (with a mask) if the pie is tilted. + } + } + + //-- Additional Interactive related functions -- + + function isPointInPoly(poly, pt) { + for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) { + ((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || + (poly[j][1] <= pt[1] && pt[1] < poly[i][1])) && + (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0]) && + (c = !c); + } + return c; + } + + function findNearbySlice(mouseX, mouseY) { + var slices = plot.getData(), + options = plot.getOptions(), + radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius, + x, y; + + for (var i = 0; i < slices.length; ++i) { + var s = slices[i]; + if (s.pie.show) { + ctx.save(); + ctx.beginPath(); + ctx.moveTo(0, 0); // Center of the pie + //ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here. + ctx.arc(0, 0, radius, s.startAngle, s.startAngle + s.angle / 2, false); + ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false); + ctx.closePath(); + x = mouseX - centerLeft; + y = mouseY - centerTop; + + if (ctx.isPointInPath) { + if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) { + ctx.restore(); + return { + datapoint: [s.percent, s.data], + dataIndex: 0, + series: s, + seriesIndex: i + }; + } + } else { + // excanvas for IE doesn;t support isPointInPath, this is a workaround. + var p1X = radius * Math.cos(s.startAngle), + p1Y = radius * Math.sin(s.startAngle), + p2X = radius * Math.cos(s.startAngle + s.angle / 4), + p2Y = radius * Math.sin(s.startAngle + s.angle / 4), + p3X = radius * Math.cos(s.startAngle + s.angle / 2), + p3Y = radius * Math.sin(s.startAngle + s.angle / 2), + p4X = radius * Math.cos(s.startAngle + s.angle / 1.5), + p4Y = radius * Math.sin(s.startAngle + s.angle / 1.5), + p5X = radius * Math.cos(s.startAngle + s.angle), + p5Y = radius * Math.sin(s.startAngle + s.angle), + arrPoly = [[0, 0], [p1X, p1Y], [p2X, p2Y], [p3X, p3Y], [p4X, p4Y], [p5X, p5Y]], + arrPoint = [x, y]; + + // TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt? + + if (isPointInPoly(arrPoly, arrPoint)) { + ctx.restore(); + return { + datapoint: [s.percent, s.data], + dataIndex: 0, + series: s, + seriesIndex: i + }; + } + } + + ctx.restore(); + } + } + + return null; + } + + function onMouseMove(e) { + triggerClickHoverEvent("plothover", e); + } + + function onClick(e) { + triggerClickHoverEvent("plotclick", e); + } + + // trigger click or hover event (they send the same parameters so we share their code) + + function triggerClickHoverEvent(eventname, e) { + var offset = plot.offset(); + var canvasX = parseInt(e.pageX - offset.left); + var canvasY = parseInt(e.pageY - offset.top); + var item = findNearbySlice(canvasX, canvasY); + + if (options.grid.autoHighlight) { + // clear auto-highlights + for (var i = 0; i < highlights.length; ++i) { + var h = highlights[i]; + if (h.auto === eventname && !(item && h.series === item.series)) { + unhighlight(h.series); + } + } + } + + // highlight the slice + + if (item) { + highlight(item.series, eventname); + } + + // trigger any hover bind events + + var pos = { pageX: e.pageX, pageY: e.pageY }; + target.trigger(eventname, [pos, item]); + } + + function highlight(s, auto) { + //if (typeof s == "number") { + // s = series[s]; + //} + + var i = indexOfHighlight(s); + + if (i === -1) { + highlights.push({ series: s, auto: auto }); + plot.triggerRedrawOverlay(); + } else if (!auto) { + highlights[i].auto = false; + } + } + + function unhighlight(s) { + if (s == null) { + highlights = []; + plot.triggerRedrawOverlay(); + } + + //if (typeof s == "number") { + // s = series[s]; + //} + + var i = indexOfHighlight(s); + + if (i !== -1) { + highlights.splice(i, 1); + plot.triggerRedrawOverlay(); + } + } + + function indexOfHighlight(s) { + for (var i = 0; i < highlights.length; ++i) { + var h = highlights[i]; + if (h.series === s) { + return i; + } + } + return -1; + } + + function drawOverlay(plot, octx) { + var options = plot.getOptions(); + var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius; + + octx.save(); + octx.translate(centerLeft, centerTop); + octx.scale(1, options.series.pie.tilt); + + for (var i = 0; i < highlights.length; ++i) { + drawHighlight(highlights[i].series); + } + + drawDonutHole(octx); + + octx.restore(); + + function drawHighlight(series) { + if (series.angle <= 0 || isNaN(series.angle)) { + return; + } + + //octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString(); + octx.fillStyle = "rgba(255, 255, 255, " + options.series.pie.highlight.opacity + ")"; // this is temporary until we have access to parseColor + octx.beginPath(); + if (Math.abs(series.angle - Math.PI * 2) > 0.000000001) { + octx.moveTo(0, 0); // Center of the pie + } + octx.arc(0, 0, radius, series.startAngle, series.startAngle + series.angle / 2, false); + octx.arc(0, 0, radius, series.startAngle + series.angle / 2, series.startAngle + series.angle, false); + octx.closePath(); + octx.fill(); + } + } + } // end init (plugin body) + + // define pie specific options and their default values + var options = { + series: { + pie: { + show: false, + radius: "auto", // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value) + innerRadius: 0, /* for donut */ + startAngle: 3 / 2, + tilt: 1, + shadow: { + left: 5, // shadow left offset + top: 15, // shadow top offset + alpha: 0.02 // shadow alpha + }, + offset: { + top: 0, + left: "auto" + }, + stroke: { + color: "#fff", + width: 1 + }, + label: { + show: "auto", + formatter: function(label, slice) { + return "
" + label + "
" + Math.round(slice.percent) + "%
"; + }, // formatter function + radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value) + background: { + color: null, + opacity: 0 + }, + threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow) + }, + combine: { + threshold: -1, // percentage at which to combine little slices into one larger slice + color: null, // color to give the new slice (auto-generated if null) + label: "Other" // label to give the new slice + }, + highlight: { + //color: "#fff", // will add this functionality once parseColor is available + opacity: 0.5 + } + } + } + }; + + $.plot.plugins.push({ + init: init, + options: options, + name: "pie", + version: "1.1" + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.resize.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.resize.js new file mode 100644 index 0000000..c520f96 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.resize.js @@ -0,0 +1,60 @@ +/* eslint-disable */ +/* 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,window); + +/* eslint-enable */ +(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); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.saturated.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.saturated.js new file mode 100644 index 0000000..34b9c50 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.saturated.js @@ -0,0 +1,43 @@ +(function ($) { + 'use strict'; + var saturated = { + saturate: function (a) { + if (a === Infinity) { + return Number.MAX_VALUE; + } + + if (a === -Infinity) { + return -Number.MAX_VALUE; + } + + return a; + }, + delta: function(min, max, noTicks) { + return ((max - min) / noTicks) === Infinity ? (max / noTicks - min / noTicks) : (max - min) / noTicks + }, + multiply: function (a, b) { + return saturated.saturate(a * b); + }, + // returns c * bInt * a. Beahves properly in the case where c is negative + // and bInt * a is bigger that Number.MAX_VALUE (Infinity) + multiplyAdd: function (a, bInt, c) { + if (isFinite(a * bInt)) { + return saturated.saturate(a * bInt + c); + } else { + var result = c; + + for (var i = 0; i < bInt; i++) { + result += a; + } + + return saturated.saturate(result); + } + }, + // round to nearby lower multiple of base + floorInBase: function(n, base) { + return base * Math.floor(n / base); + } + }; + + $.plot.saturated = saturated; +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.selection.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.selection.js new file mode 100644 index 0000000..c7c69a8 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.selection.js @@ -0,0 +1,527 @@ +/* Flot plugin for selecting regions of a plot. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin supports these options: + +selection: { + mode: null or "x" or "y" or "xy" or "smart", + color: color, + shape: "round" or "miter" or "bevel", + visualization: "fill" or "focus", + displaySelectionDecorations: true or false, + minSize: number of pixels +} + +Selection support is enabled by setting the mode to one of "x", "y" or "xy". +In "x" mode, the user will only be able to specify the x range, similarly for +"y" mode. For "xy", the selection becomes a rectangle where both ranges can be +specified. "color" is color of the selection (if you need to change the color +later on, you can get to it with plot.getOptions().selection.color). "shape" +is the shape of the corners of the selection. + +The way how the selection is visualized, can be changed by using the option +"visualization". Flot currently supports two modes: "focus" and "fill". The +option "focus" draws a colored bezel around the selected area while keeping +the selected area clear. The option "fill" highlights (i.e., fills) the +selected area with a colored highlight. + +There are optional selection decorations (handles) that are rendered with the +"focus" visualization option. The selection decoration is rendered by default +but can be turned off by setting displaySelectionDecorations to false. + +"minSize" is the minimum size a selection can be in pixels. This value can +be customized to determine the smallest size a selection can be and still +have the selection rectangle be displayed. When customizing this value, the +fact that it refers to pixels, not axis units must be taken into account. +Thus, for example, if there is a bar graph in time mode with BarWidth set to 1 +minute, setting "minSize" to 1 will not make the minimum selection size 1 +minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent +"plotunselected" events from being fired when the user clicks the mouse without +dragging. + +When selection support is enabled, a "plotselected" event will be emitted on +the DOM element you passed into the plot function. The event handler gets a +parameter with the ranges selected on the axes, like this: + + placeholder.bind( "plotselected", function( event, ranges ) { + alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to) + // similar for yaxis - with multiple axes, the extra ones are in + // x2axis, x3axis, ... + }); + +The "plotselected" event is only fired when the user has finished making the +selection. A "plotselecting" event is fired during the process with the same +parameters as the "plotselected" event, in case you want to know what's +happening while it's happening, + +A "plotunselected" event with no arguments is emitted when the user clicks the +mouse to remove the selection. As stated above, setting "minSize" to 0 will +destroy this behavior. + +The plugin allso adds the following methods to the plot object: + +- setSelection( ranges, preventEvent ) + + Set the selection rectangle. The passed in ranges is on the same form as + returned in the "plotselected" event. If the selection mode is "x", you + should put in either an xaxis range, if the mode is "y" you need to put in + an yaxis range and both xaxis and yaxis if the selection mode is "xy", like + this: + + setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } }); + + setSelection will trigger the "plotselected" event when called. If you don't + want that to happen, e.g. if you're inside a "plotselected" handler, pass + true as the second parameter. If you are using multiple axes, you can + specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of + xaxis, the plugin picks the first one it sees. + +- clearSelection( preventEvent ) + + Clear the selection rectangle. Pass in true to avoid getting a + "plotunselected" event. + +- getSelection() + + Returns the current selection in the same format as the "plotselected" + event. If there's currently no selection, the function returns null. + +*/ + +(function ($) { + function init(plot) { + var selection = { + first: {x: -1, y: -1}, + second: {x: -1, y: -1}, + show: false, + currentMode: 'xy', + active: false + }; + + var SNAPPING_CONSTANT = $.plot.uiConstants.SNAPPING_CONSTANT; + + // FIXME: The drag handling implemented here should be + // abstracted out, there's some similar code from a library in + // the navigation plugin, this should be massaged a bit to fit + // the Flot cases here better and reused. Doing this would + // make this plugin much slimmer. + var savedhandlers = {}; + + function onDrag(e) { + if (selection.active) { + updateSelection(e); + + plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]); + } + } + + function onDragStart(e) { + var o = plot.getOptions(); + // only accept left-click + if (e.which !== 1 || o.selection.mode === null) return; + + // reinitialize currentMode + selection.currentMode = 'xy'; + + // cancel out any text selections + document.body.focus(); + + // prevent text selection and drag in old-school browsers + if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) { + savedhandlers.onselectstart = document.onselectstart; + document.onselectstart = function () { return false; }; + } + if (document.ondrag !== undefined && savedhandlers.ondrag == null) { + savedhandlers.ondrag = document.ondrag; + document.ondrag = function () { return false; }; + } + + setSelectionPos(selection.first, e); + + selection.active = true; + } + + function onDragEnd(e) { + // revert drag stuff for old-school browsers + if (document.onselectstart !== undefined) { + document.onselectstart = savedhandlers.onselectstart; + } + + if (document.ondrag !== undefined) { + document.ondrag = savedhandlers.ondrag; + } + + // no more dragging + selection.active = false; + updateSelection(e); + + if (selectionIsSane()) { + triggerSelectedEvent(); + } else { + // this counts as a clear + plot.getPlaceholder().trigger("plotunselected", [ ]); + plot.getPlaceholder().trigger("plotselecting", [ null ]); + } + + return false; + } + + function getSelection() { + if (!selectionIsSane()) return null; + + if (!selection.show) return null; + + var r = {}, + c1 = {x: selection.first.x, y: selection.first.y}, + c2 = {x: selection.second.x, y: selection.second.y}; + + if (selectionDirection(plot) === 'x') { + c1.y = 0; + c2.y = plot.height(); + } + + if (selectionDirection(plot) === 'y') { + c1.x = 0; + c2.x = plot.width(); + } + + $.each(plot.getAxes(), function (name, axis) { + if (axis.used) { + var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]); + r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) }; + } + }); + return r; + } + + function triggerSelectedEvent() { + var r = getSelection(); + + plot.getPlaceholder().trigger("plotselected", [ r ]); + + // backwards-compat stuff, to be removed in future + if (r.xaxis && r.yaxis) { + plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]); + } + } + + function clamp(min, value, max) { + return value < min ? min : (value > max ? max : value); + } + + function selectionDirection(plot) { + var o = plot.getOptions(); + + if (o.selection.mode === 'smart') { + return selection.currentMode; + } else { + return o.selection.mode; + } + } + + function updateMode(pos) { + if (selection.first) { + var delta = { + x: pos.x - selection.first.x, + y: pos.y - selection.first.y + }; + + if (Math.abs(delta.x) < SNAPPING_CONSTANT) { + selection.currentMode = 'y'; + } else if (Math.abs(delta.y) < SNAPPING_CONSTANT) { + selection.currentMode = 'x'; + } else { + selection.currentMode = 'xy'; + } + } + } + + function setSelectionPos(pos, e) { + var offset = plot.getPlaceholder().offset(); + var plotOffset = plot.getPlotOffset(); + pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width()); + pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height()); + + if (pos !== selection.first) updateMode(pos); + + if (selectionDirection(plot) === "y") { + pos.x = pos === selection.first ? 0 : plot.width(); + } + + if (selectionDirection(plot) === "x") { + pos.y = pos === selection.first ? 0 : plot.height(); + } + } + + function updateSelection(pos) { + if (pos.pageX == null) return; + + setSelectionPos(selection.second, pos); + if (selectionIsSane()) { + selection.show = true; + plot.triggerRedrawOverlay(); + } else clearSelection(true); + } + + function clearSelection(preventEvent) { + if (selection.show) { + selection.show = false; + selection.currentMode = ''; + plot.triggerRedrawOverlay(); + if (!preventEvent) { + plot.getPlaceholder().trigger("plotunselected", [ ]); + } + } + } + + // function taken from markings support in Flot + function extractRange(ranges, coord) { + var axis, from, to, key, axes = plot.getAxes(); + + for (var k in axes) { + axis = axes[k]; + if (axis.direction === coord) { + key = coord + axis.n + "axis"; + if (!ranges[key] && axis.n === 1) { + // support x1axis as xaxis + key = coord + "axis"; + } + + if (ranges[key]) { + from = ranges[key].from; + to = ranges[key].to; + break; + } + } + } + + // backwards-compat stuff - to be removed in future + if (!ranges[key]) { + axis = coord === "x" ? plot.getXAxes()[0] : plot.getYAxes()[0]; + from = ranges[coord + "1"]; + to = ranges[coord + "2"]; + } + + // auto-reverse as an added bonus + if (from != null && to != null && from > to) { + var tmp = from; + from = to; + to = tmp; + } + + return { from: from, to: to, axis: axis }; + } + + function setSelection(ranges, preventEvent) { + var range; + + if (selectionDirection(plot) === "y") { + selection.first.x = 0; + selection.second.x = plot.width(); + } else { + range = extractRange(ranges, "x"); + selection.first.x = range.axis.p2c(range.from); + selection.second.x = range.axis.p2c(range.to); + } + + if (selectionDirection(plot) === "x") { + selection.first.y = 0; + selection.second.y = plot.height(); + } else { + range = extractRange(ranges, "y"); + selection.first.y = range.axis.p2c(range.from); + selection.second.y = range.axis.p2c(range.to); + } + + selection.show = true; + plot.triggerRedrawOverlay(); + if (!preventEvent && selectionIsSane()) { + triggerSelectedEvent(); + } + } + + function selectionIsSane() { + var minSize = plot.getOptions().selection.minSize; + return Math.abs(selection.second.x - selection.first.x) >= minSize && + Math.abs(selection.second.y - selection.first.y) >= minSize; + } + + plot.clearSelection = clearSelection; + plot.setSelection = setSelection; + plot.getSelection = getSelection; + + plot.hooks.bindEvents.push(function(plot, eventHolder) { + var o = plot.getOptions(); + if (o.selection.mode != null) { + plot.addEventHandler("dragstart", onDragStart, eventHolder, 0); + plot.addEventHandler("drag", onDrag, eventHolder, 0); + plot.addEventHandler("dragend", onDragEnd, eventHolder, 0); + } + }); + + function drawSelectionDecorations(ctx, x, y, w, h, oX, oY, mode) { + var spacing = 3; + var fullEarWidth = 15; + var earWidth = Math.max(0, Math.min(fullEarWidth, w / 2 - 2, h / 2 - 2)); + ctx.fillStyle = '#ffffff'; + + if (mode === 'xy') { + ctx.beginPath(); + ctx.moveTo(x, y + earWidth); + ctx.lineTo(x - 3, y + earWidth); + ctx.lineTo(x - 3, y - 3); + ctx.lineTo(x + earWidth, y - 3); + ctx.lineTo(x + earWidth, y); + ctx.lineTo(x, y); + ctx.closePath(); + + ctx.moveTo(x, y + h - earWidth); + ctx.lineTo(x - 3, y + h - earWidth); + ctx.lineTo(x - 3, y + h + 3); + ctx.lineTo(x + earWidth, y + h + 3); + ctx.lineTo(x + earWidth, y + h); + ctx.lineTo(x, y + h); + ctx.closePath(); + + ctx.moveTo(x + w, y + earWidth); + ctx.lineTo(x + w + 3, y + earWidth); + ctx.lineTo(x + w + 3, y - 3); + ctx.lineTo(x + w - earWidth, y - 3); + ctx.lineTo(x + w - earWidth, y); + ctx.lineTo(x + w, y); + ctx.closePath(); + + ctx.moveTo(x + w, y + h - earWidth); + ctx.lineTo(x + w + 3, y + h - earWidth); + ctx.lineTo(x + w + 3, y + h + 3); + ctx.lineTo(x + w - earWidth, y + h + 3); + ctx.lineTo(x + w - earWidth, y + h); + ctx.lineTo(x + w, y + h); + ctx.closePath(); + + ctx.stroke(); + ctx.fill(); + } + + x = oX; + y = oY; + + if (mode === 'x') { + ctx.beginPath(); + ctx.moveTo(x, y + fullEarWidth); + ctx.lineTo(x, y - fullEarWidth); + ctx.lineTo(x - spacing, y - fullEarWidth); + ctx.lineTo(x - spacing, y + fullEarWidth); + ctx.closePath(); + + ctx.moveTo(x + w, y + fullEarWidth); + ctx.lineTo(x + w, y - fullEarWidth); + ctx.lineTo(x + w + spacing, y - fullEarWidth); + ctx.lineTo(x + w + spacing, y + fullEarWidth); + ctx.closePath(); + ctx.stroke(); + ctx.fill(); + } + + if (mode === 'y') { + ctx.beginPath(); + + ctx.moveTo(x - fullEarWidth, y); + ctx.lineTo(x + fullEarWidth, y); + ctx.lineTo(x + fullEarWidth, y - spacing); + ctx.lineTo(x - fullEarWidth, y - spacing); + ctx.closePath(); + + ctx.moveTo(x - fullEarWidth, y + h); + ctx.lineTo(x + fullEarWidth, y + h); + ctx.lineTo(x + fullEarWidth, y + h + spacing); + ctx.lineTo(x - fullEarWidth, y + h + spacing); + ctx.closePath(); + ctx.stroke(); + ctx.fill(); + } + } + + plot.hooks.drawOverlay.push(function (plot, ctx) { + // draw selection + if (selection.show && selectionIsSane()) { + var plotOffset = plot.getPlotOffset(); + var o = plot.getOptions(); + + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + + var c = $.color.parse(o.selection.color); + var visualization = o.selection.visualization; + var displaySelectionDecorations = o.selection.displaySelectionDecorations; + + var scalingFactor = 1; + + // use a dimmer scaling factor if visualization is "fill" + if (visualization === "fill") { + scalingFactor = 0.8; + } + + ctx.strokeStyle = c.scale('a', scalingFactor).toString(); + ctx.lineWidth = 1; + ctx.lineJoin = o.selection.shape; + ctx.fillStyle = c.scale('a', 0.4).toString(); + + var x = Math.min(selection.first.x, selection.second.x) + 0.5, + oX = x, + y = Math.min(selection.first.y, selection.second.y) + 0.5, + oY = y, + w = Math.abs(selection.second.x - selection.first.x) - 1, + h = Math.abs(selection.second.y - selection.first.y) - 1; + + if (selectionDirection(plot) === 'x') { + h += y; + y = 0; + } + + if (selectionDirection(plot) === 'y') { + w += x; + x = 0; + } + + if (visualization === "fill") { + ctx.fillRect(x, y, w, h); + ctx.strokeRect(x, y, w, h); + } else { + ctx.fillRect(0, 0, plot.width(), plot.height()); + ctx.clearRect(x, y, w, h); + + if (displaySelectionDecorations) { + drawSelectionDecorations(ctx, x, y, w, h, oX, oY, selectionDirection(plot)); + } + } + + ctx.restore(); + } + }); + + plot.hooks.shutdown.push(function (plot, eventHolder) { + eventHolder.unbind("dragstart", onDragStart); + eventHolder.unbind("drag", onDrag); + eventHolder.unbind("dragend", onDragEnd); + }); + } + + $.plot.plugins.push({ + init: init, + options: { + selection: { + mode: null, // one of null, "x", "y" or "xy" + visualization: "focus", // "focus" or "fill" + displaySelectionDecorations: true, // true or false (currently only relevant for the focus visualization) + color: "#888888", + shape: "round", // one of "round", "miter", or "bevel" + minSize: 5 // minimum number of pixels + } + }, + name: 'selection', + version: '1.1' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.stack.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.stack.js new file mode 100644 index 0000000..cd464b8 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.stack.js @@ -0,0 +1,220 @@ +/* Flot plugin for stacking data sets rather than overlaying them. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin assumes the data is sorted on x (or y if stacking horizontally). +For line charts, it is assumed that if a line has an undefined gap (from a +null point), then the line above it should have the same gap - insert zeros +instead of "null" if you want another behaviour. This also holds for the start +and end of the chart. Note that stacking a mix of positive and negative values +in most instances doesn't make sense (so it looks weird). + +Two or more series are stacked when their "stack" attribute is set to the same +key (which can be any number or string or just "true"). To specify the default +stack, you can set the stack option like this: + + series: { + stack: null/false, true, or a key (number/string) + } + +You can also specify it for a single series, like this: + + $.plot( $("#placeholder"), [{ + data: [ ... ], + stack: true + }]) + +The stacking order is determined by the order of the data series in the array +(later series end up on top of the previous). + +Internally, the plugin modifies the datapoints in each series, adding an +offset to the y value. For line series, extra data points are inserted through +interpolation. If there's a second y value, it's also adjusted (e.g for bar +charts or filled areas). + +*/ + +(function ($) { + var options = { + series: { stack: null } // or number/string + }; + + function init(plot) { + function findMatchingSeries(s, allseries) { + var res = null; + for (var i = 0; i < allseries.length; ++i) { + if (s === allseries[i]) break; + + if (allseries[i].stack === s.stack) { + res = allseries[i]; + } + } + + return res; + } + + function addBottomPoints (s, datapoints) { + var formattedPoints = []; + for (var i = 0; i < datapoints.points.length; i += 2) { + formattedPoints.push(datapoints.points[i]); + formattedPoints.push(datapoints.points[i + 1]); + formattedPoints.push(0); + } + + datapoints.format.push({ + x: s.bars.horizontal, + y: !s.bars.horizontal, + number: true, + required: false, + computeRange: s.yaxis.options.autoScale !== 'none', + defaultValue: 0 + }); + datapoints.points = formattedPoints; + datapoints.pointsize = 3; + } + + function stackData(plot, s, datapoints) { + if (s.stack == null || s.stack === false) return; + + var needsBottom = s.bars.show || (s.lines.show && s.lines.fill); + var hasBottom = datapoints.pointsize > 2 && (s.bars.horizontal ? datapoints.format[2].x : datapoints.format[2].y); + // Series data is missing bottom points - need to format + if (needsBottom && !hasBottom) { + addBottomPoints(s, datapoints); + } + + var other = findMatchingSeries(s, plot.getData()); + if (!other) return; + + var ps = datapoints.pointsize, + points = datapoints.points, + otherps = other.datapoints.pointsize, + otherpoints = other.datapoints.points, + newpoints = [], + px, py, intery, qx, qy, bottom, + withlines = s.lines.show, + horizontal = s.bars.horizontal, + withsteps = withlines && s.lines.steps, + fromgap = true, + keyOffset = horizontal ? 1 : 0, + accumulateOffset = horizontal ? 0 : 1, + i = 0, j = 0, l, m; + + while (true) { + if (i >= points.length) break; + + l = newpoints.length; + + if (points[i] == null) { + // copy gaps + for (m = 0; m < ps; ++m) { + newpoints.push(points[i + m]); + } + + i += ps; + } else if (j >= otherpoints.length) { + // for lines, we can't use the rest of the points + if (!withlines) { + for (m = 0; m < ps; ++m) { + newpoints.push(points[i + m]); + } + } + + i += ps; + } else if (otherpoints[j] == null) { + // oops, got a gap + for (m = 0; m < ps; ++m) { + newpoints.push(null); + } + + fromgap = true; + j += otherps; + } else { + // cases where we actually got two points + px = points[i + keyOffset]; + py = points[i + accumulateOffset]; + qx = otherpoints[j + keyOffset]; + qy = otherpoints[j + accumulateOffset]; + bottom = 0; + + if (px === qx) { + for (m = 0; m < ps; ++m) { + newpoints.push(points[i + m]); + } + + newpoints[l + accumulateOffset] += qy; + bottom = qy; + + i += ps; + j += otherps; + } else if (px > qx) { + // we got past point below, might need to + // insert interpolated extra point + if (withlines && i > 0 && points[i - ps] != null) { + intery = py + (points[i - ps + accumulateOffset] - py) * (qx - px) / (points[i - ps + keyOffset] - px); + newpoints.push(qx); + newpoints.push(intery + qy); + for (m = 2; m < ps; ++m) { + newpoints.push(points[i + m]); + } + + bottom = qy; + } + + j += otherps; + } else { // px < qx + if (fromgap && withlines) { + // if we come from a gap, we just skip this point + i += ps; + continue; + } + + for (m = 0; m < ps; ++m) { + newpoints.push(points[i + m]); + } + + // we might be able to interpolate a point below, + // this can give us a better y + if (withlines && j > 0 && otherpoints[j - otherps] != null) { + bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx); + } + + newpoints[l + accumulateOffset] += bottom; + + i += ps; + } + + fromgap = false; + + if (l !== newpoints.length && needsBottom) { + newpoints[l + 2] += bottom; + } + } + + // maintain the line steps invariant + if (withsteps && l !== newpoints.length && l > 0 && + newpoints[l] !== null && + newpoints[l] !== newpoints[l - ps] && + newpoints[l + 1] !== newpoints[l - ps + 1]) { + for (m = 0; m < ps; ++m) { + newpoints[l + ps + m] = newpoints[l + m]; + } + + newpoints[l + 1] = newpoints[l - ps + 1]; + } + } + + datapoints.points = newpoints; + } + + plot.hooks.processDatapoints.push(stackData); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'stack', + version: '1.2' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.symbol.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.symbol.js new file mode 100644 index 0000000..0e06513 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.symbol.js @@ -0,0 +1,98 @@ +/* Flot plugin that adds some extra symbols for plotting points. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The symbols are accessed as strings through the standard symbol options: + + series: { + points: { + symbol: "square" // or "diamond", "triangle", "cross", "plus", "ellipse", "rectangle" + } + } + +*/ + +(function ($) { + // we normalize the area of each symbol so it is approximately the + // same as a circle of the given radius + + var square = function (ctx, x, y, radius, shadow) { + // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2 + var size = radius * Math.sqrt(Math.PI) / 2; + ctx.rect(x - size, y - size, size + size, size + size); + }, + rectangle = function (ctx, x, y, radius, shadow) { + // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2 + var size = radius * Math.sqrt(Math.PI) / 2; + ctx.rect(x - size, y - size, size + size, size + size); + }, + diamond = function (ctx, x, y, radius, shadow) { + // pi * r^2 = 2s^2 => s = r * sqrt(pi/2) + var size = radius * Math.sqrt(Math.PI / 2); + ctx.moveTo(x - size, y); + ctx.lineTo(x, y - size); + ctx.lineTo(x + size, y); + ctx.lineTo(x, y + size); + ctx.lineTo(x - size, y); + ctx.lineTo(x, y - size); + }, + triangle = function (ctx, x, y, radius, shadow) { + // pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3)) + var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3)); + var height = size * Math.sin(Math.PI / 3); + ctx.moveTo(x - size / 2, y + height / 2); + ctx.lineTo(x + size / 2, y + height / 2); + if (!shadow) { + ctx.lineTo(x, y - height / 2); + ctx.lineTo(x - size / 2, y + height / 2); + ctx.lineTo(x + size / 2, y + height / 2); + } + }, + cross = function (ctx, x, y, radius, shadow) { + // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2 + var size = radius * Math.sqrt(Math.PI) / 2; + ctx.moveTo(x - size, y - size); + ctx.lineTo(x + size, y + size); + ctx.moveTo(x - size, y + size); + ctx.lineTo(x + size, y - size); + }, + ellipse = function(ctx, x, y, radius, shadow, fill) { + if (!shadow) { + ctx.moveTo(x + radius, y); + ctx.arc(x, y, radius, 0, Math.PI * 2, false); + } + }, + plus = function (ctx, x, y, radius, shadow) { + var size = radius * Math.sqrt(Math.PI / 2); + ctx.moveTo(x - size, y); + ctx.lineTo(x + size, y); + ctx.moveTo(x, y + size); + ctx.lineTo(x, y - size); + }, + handlers = { + square: square, + rectangle: rectangle, + diamond: diamond, + triangle: triangle, + cross: cross, + ellipse: ellipse, + plus: plus + }; + + square.fill = true; + rectangle.fill = true; + diamond.fill = true; + triangle.fill = true; + ellipse.fill = true; + + function init(plot) { + plot.drawSymbol = handlers; + } + + $.plot.plugins.push({ + init: init, + name: 'symbols', + version: '1.0' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.threshold.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.threshold.js new file mode 100644 index 0000000..db5a59c --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.threshold.js @@ -0,0 +1,143 @@ +/* Flot plugin for thresholding data. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin supports these options: + + series: { + threshold: { + below: number + color: colorspec + } + } + +It can also be applied to a single series, like this: + + $.plot( $("#placeholder"), [{ + data: [ ... ], + threshold: { ... } + }]) + +An array can be passed for multiple thresholding, like this: + + threshold: [{ + below: number1 + color: color1 + },{ + below: number2 + color: color2 + }] + +These multiple threshold objects can be passed in any order since they are +sorted by the processing function. + +The data points below "below" are drawn with the specified color. This makes +it easy to mark points below 0, e.g. for budget data. + +Internally, the plugin works by splitting the data into two series, above and +below the threshold. The extra series below the threshold will have its label +cleared and the special "originSeries" attribute set to the original series. +You may need to check for this in hover events. + +*/ + +(function ($) { + var options = { + series: { threshold: null } // or { below: number, color: color spec} + }; + + function init(plot) { + function thresholdData(plot, s, datapoints, below, color) { + var ps = datapoints.pointsize, i, x, y, p, prevp, + thresholded = $.extend({}, s); // note: shallow copy + + thresholded.datapoints = { points: [], pointsize: ps, format: datapoints.format }; + thresholded.label = null; + thresholded.color = color; + thresholded.threshold = null; + thresholded.originSeries = s; + thresholded.data = []; + + var origpoints = datapoints.points, + addCrossingPoints = s.lines.show; + + var threspoints = []; + var newpoints = []; + var m; + + for (i = 0; i < origpoints.length; i += ps) { + x = origpoints[i]; + y = origpoints[i + 1]; + + prevp = p; + if (y < below) p = threspoints; + else p = newpoints; + + if (addCrossingPoints && prevp !== p && + x !== null && i > 0 && + origpoints[i - ps] != null) { + var interx = x + (below - y) * (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]); + prevp.push(interx); + prevp.push(below); + for (m = 2; m < ps; ++m) { + prevp.push(origpoints[i + m]); + } + + p.push(null); // start new segment + p.push(null); + for (m = 2; m < ps; ++m) { + p.push(origpoints[i + m]); + } + + p.push(interx); + p.push(below); + for (m = 2; m < ps; ++m) { + p.push(origpoints[i + m]); + } + } + + p.push(x); + p.push(y); + for (m = 2; m < ps; ++m) { + p.push(origpoints[i + m]); + } + } + + datapoints.points = newpoints; + thresholded.datapoints.points = threspoints; + + if (thresholded.datapoints.points.length > 0) { + var origIndex = $.inArray(s, plot.getData()); + // Insert newly-generated series right after original one (to prevent it from becoming top-most) + plot.getData().splice(origIndex + 1, 0, thresholded); + } + + // FIXME: there are probably some edge cases left in bars + } + + function processThresholds(plot, s, datapoints) { + if (!s.threshold) return; + if (s.threshold instanceof Array) { + s.threshold.sort(function(a, b) { + return a.below - b.below; + }); + + $(s.threshold).each(function(i, th) { + thresholdData(plot, s, datapoints, th.below, th.color); + }); + } else { + thresholdData(plot, s, datapoints, s.threshold.below, s.threshold.color); + } + } + + plot.hooks.processDatapoints.push(processThresholds); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'threshold', + version: '1.2' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.time.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.time.js new file mode 100644 index 0000000..e8e5a38 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.time.js @@ -0,0 +1,587 @@ +/* Pretty handling of time axes. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +Set axis.mode to "time" to enable. See the section "Time series data" in +API.txt for details. +*/ + +(function($) { + 'use strict'; + + var options = { + xaxis: { + timezone: null, // "browser" for local to the client or timezone for timezone-js + timeformat: null, // format string to use + twelveHourClock: false, // 12 or 24 time in time mode + monthNames: null, // list of names of months + timeBase: 'seconds' // are the values in given in mircoseconds, milliseconds or seconds + }, + yaxis: { + timeBase: 'seconds' + } + }; + + var floorInBase = $.plot.saturated.floorInBase; + + // Method to provide microsecond support to Date like classes. + var CreateMicroSecondDate = function(DateType, microEpoch) { + var newDate = new DateType(microEpoch); + + var oldSetTime = newDate.setTime.bind(newDate); + newDate.update = function(microEpoch) { + oldSetTime(microEpoch); + + // Round epoch to 3 decimal accuracy + microEpoch = Math.round(microEpoch * 1000) / 1000; + + // Microseconds are stored as integers + this.microseconds = 1000 * (microEpoch - Math.floor(microEpoch)); + }; + + var oldGetTime = newDate.getTime.bind(newDate); + newDate.getTime = function () { + var microEpoch = oldGetTime() + this.microseconds / 1000; + return microEpoch; + }; + + newDate.setTime = function (microEpoch) { + this.update(microEpoch); + }; + + newDate.getMicroseconds = function() { + return this.microseconds; + }; + + newDate.setMicroseconds = function(microseconds) { + var epochWithoutMicroseconds = oldGetTime(); + var newEpoch = epochWithoutMicroseconds + microseconds / 1000; + this.update(newEpoch); + }; + + newDate.setUTCMicroseconds = function(microseconds) { this.setMicroseconds(microseconds); } + + newDate.getUTCMicroseconds = function() { return this.getMicroseconds(); } + + newDate.microseconds = null; + newDate.microEpoch = null; + newDate.update(microEpoch); + return newDate; + } + + // Returns a string with the date d formatted according to fmt. + // A subset of the Open Group's strftime format is supported. + + function formatDate(d, fmt, monthNames, dayNames) { + if (typeof d.strftime === "function") { + return d.strftime(fmt); + } + + var leftPad = function(n, pad) { + n = "" + n; + pad = "" + (pad == null ? "0" : pad); + return n.length === 1 ? pad + n : n; + }; + + var formatSubSeconds = function(milliseconds, microseconds, numberDecimalPlaces) { + var totalMicroseconds = milliseconds * 1000 + microseconds; + var formattedString; + if (numberDecimalPlaces < 6 && numberDecimalPlaces > 0) { + var magnitude = parseFloat('1e' + (numberDecimalPlaces - 6)); + totalMicroseconds = Math.round(Math.round(totalMicroseconds * magnitude) / magnitude); + formattedString = ('00000' + totalMicroseconds).slice(-6, -(6 - numberDecimalPlaces)); + } else { + totalMicroseconds = Math.round(totalMicroseconds) + formattedString = ('00000' + totalMicroseconds).slice(-6); + } + return formattedString; + }; + + var r = []; + var escape = false; + var hours = d.getHours(); + var isAM = hours < 12; + + if (!monthNames) { + monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + } + + if (!dayNames) { + dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; + } + + var hours12; + if (hours > 12) { + hours12 = hours - 12; + } else if (hours === 0) { + hours12 = 12; + } else { + hours12 = hours; + } + + var decimals = -1; + for (var i = 0; i < fmt.length; ++i) { + var c = fmt.charAt(i); + + if (!isNaN(Number(c)) && Number(c) > 0) { + decimals = Number(c); + } else if (escape) { + switch (c) { + case 'a': c = "" + dayNames[d.getDay()]; break; + case 'b': c = "" + monthNames[d.getMonth()]; break; + case 'd': c = leftPad(d.getDate()); break; + case 'e': c = leftPad(d.getDate(), " "); break; + case 'h': // For back-compat with 0.7; remove in 1.0 + case 'H': c = leftPad(hours); break; + case 'I': c = leftPad(hours12); break; + case 'l': c = leftPad(hours12, " "); break; + case 'm': c = leftPad(d.getMonth() + 1); break; + case 'M': c = leftPad(d.getMinutes()); break; + // quarters not in Open Group's strftime specification + case 'q': + c = "" + (Math.floor(d.getMonth() / 3) + 1); break; + case 'S': c = leftPad(d.getSeconds()); break; + case 's': c = "" + formatSubSeconds(d.getMilliseconds(), d.getMicroseconds(), decimals); break; + case 'y': c = leftPad(d.getFullYear() % 100); break; + case 'Y': c = "" + d.getFullYear(); break; + case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break; + case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break; + case 'w': c = "" + d.getDay(); break; + } + r.push(c); + escape = false; + } else { + if (c === "%") { + escape = true; + } else { + r.push(c); + } + } + } + + return r.join(""); + } + + // To have a consistent view of time-based data independent of which time + // zone the client happens to be in we need a date-like object independent + // of time zones. This is done through a wrapper that only calls the UTC + // versions of the accessor methods. + + function makeUtcWrapper(d) { + function addProxyMethod(sourceObj, sourceMethod, targetObj, targetMethod) { + sourceObj[sourceMethod] = function() { + return targetObj[targetMethod].apply(targetObj, arguments); + }; + } + + var utc = { + date: d + }; + + // support strftime, if found + if (d.strftime !== undefined) { + addProxyMethod(utc, "strftime", d, "strftime"); + } + + addProxyMethod(utc, "getTime", d, "getTime"); + addProxyMethod(utc, "setTime", d, "setTime"); + + var props = ["Date", "Day", "FullYear", "Hours", "Minutes", "Month", "Seconds", "Milliseconds", "Microseconds"]; + + for (var p = 0; p < props.length; p++) { + addProxyMethod(utc, "get" + props[p], d, "getUTC" + props[p]); + addProxyMethod(utc, "set" + props[p], d, "setUTC" + props[p]); + } + + return utc; + } + + // select time zone strategy. This returns a date-like object tied to the + // desired timezone + function dateGenerator(ts, opts) { + var maxDateValue = 8640000000000000; + + if (opts && opts.timeBase === 'seconds') { + ts *= 1000; + } else if (opts.timeBase === 'microseconds') { + ts /= 1000; + } + + if (ts > maxDateValue) { + ts = maxDateValue; + } else if (ts < -maxDateValue) { + ts = -maxDateValue; + } + + if (opts.timezone === "browser") { + return CreateMicroSecondDate(Date, ts); + } else if (!opts.timezone || opts.timezone === "utc") { + return makeUtcWrapper(CreateMicroSecondDate(Date, ts)); + } else if (typeof timezoneJS !== "undefined" && typeof timezoneJS.Date !== "undefined") { + var d = CreateMicroSecondDate(timezoneJS.Date, ts); + // timezone-js is fickle, so be sure to set the time zone before + // setting the time. + d.setTimezone(opts.timezone); + d.setTime(ts); + return d; + } else { + return makeUtcWrapper(CreateMicroSecondDate(Date, ts)); + } + } + + // map of app. size of time units in seconds + var timeUnitSizeSeconds = { + "microsecond": 0.000001, + "millisecond": 0.001, + "second": 1, + "minute": 60, + "hour": 60 * 60, + "day": 24 * 60 * 60, + "month": 30 * 24 * 60 * 60, + "quarter": 3 * 30 * 24 * 60 * 60, + "year": 365.2425 * 24 * 60 * 60 + }; + + // map of app. size of time units in milliseconds + var timeUnitSizeMilliseconds = { + "microsecond": 0.001, + "millisecond": 1, + "second": 1000, + "minute": 60 * 1000, + "hour": 60 * 60 * 1000, + "day": 24 * 60 * 60 * 1000, + "month": 30 * 24 * 60 * 60 * 1000, + "quarter": 3 * 30 * 24 * 60 * 60 * 1000, + "year": 365.2425 * 24 * 60 * 60 * 1000 + }; + + // map of app. size of time units in microseconds + var timeUnitSizeMicroseconds = { + "microsecond": 1, + "millisecond": 1000, + "second": 1000000, + "minute": 60 * 1000000, + "hour": 60 * 60 * 1000000, + "day": 24 * 60 * 60 * 1000000, + "month": 30 * 24 * 60 * 60 * 1000000, + "quarter": 3 * 30 * 24 * 60 * 60 * 1000000, + "year": 365.2425 * 24 * 60 * 60 * 1000000 + }; + + // the allowed tick sizes, after 1 year we use + // an integer algorithm + + var baseSpec = [ + [1, "microsecond"], [2, "microsecond"], [5, "microsecond"], [10, "microsecond"], + [25, "microsecond"], [50, "microsecond"], [100, "microsecond"], [250, "microsecond"], [500, "microsecond"], + [1, "millisecond"], [2, "millisecond"], [5, "millisecond"], [10, "millisecond"], + [25, "millisecond"], [50, "millisecond"], [100, "millisecond"], [250, "millisecond"], [500, "millisecond"], + [1, "second"], [2, "second"], [5, "second"], [10, "second"], + [30, "second"], + [1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], + [30, "minute"], + [1, "hour"], [2, "hour"], [4, "hour"], + [8, "hour"], [12, "hour"], + [1, "day"], [2, "day"], [3, "day"], + [0.25, "month"], [0.5, "month"], [1, "month"], + [2, "month"] + ]; + + // we don't know which variant(s) we'll need yet, but generating both is + // cheap + + var specMonths = baseSpec.concat([[3, "month"], [6, "month"], + [1, "year"]]); + var specQuarters = baseSpec.concat([[1, "quarter"], [2, "quarter"], + [1, "year"]]); + + function dateTickGenerator(axis) { + var opts = axis.options, + ticks = [], + d = dateGenerator(axis.min, opts), + minSize = 0; + + // make quarter use a possibility if quarters are + // mentioned in either of these options + var spec = (opts.tickSize && opts.tickSize[1] === + "quarter") || + (opts.minTickSize && opts.minTickSize[1] === + "quarter") ? specQuarters : specMonths; + + var timeUnitSize; + if (opts.timeBase === 'seconds') { + timeUnitSize = timeUnitSizeSeconds; + } else if (opts.timeBase === 'microseconds') { + timeUnitSize = timeUnitSizeMicroseconds; + } else { + timeUnitSize = timeUnitSizeMilliseconds; + } + + if (opts.minTickSize !== null && opts.minTickSize !== undefined) { + if (typeof opts.tickSize === "number") { + minSize = opts.tickSize; + } else { + minSize = opts.minTickSize[0] * timeUnitSize[opts.minTickSize[1]]; + } + } + + for (var i = 0; i < spec.length - 1; ++i) { + if (axis.delta < (spec[i][0] * timeUnitSize[spec[i][1]] + + spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 && + spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) { + break; + } + } + + var size = spec[i][0]; + var unit = spec[i][1]; + // special-case the possibility of several years + if (unit === "year") { + // if given a minTickSize in years, just use it, + // ensuring that it's an integer + + if (opts.minTickSize !== null && opts.minTickSize !== undefined && opts.minTickSize[1] === "year") { + size = Math.floor(opts.minTickSize[0]); + } else { + var magn = parseFloat('1e' + Math.floor(Math.log(axis.delta / timeUnitSize.year) / Math.LN10)); + var norm = (axis.delta / timeUnitSize.year) / magn; + + if (norm < 1.5) { + size = 1; + } else if (norm < 3) { + size = 2; + } else if (norm < 7.5) { + size = 5; + } else { + size = 10; + } + + size *= magn; + } + + // minimum size for years is 1 + + if (size < 1) { + size = 1; + } + } + + axis.tickSize = opts.tickSize || [size, unit]; + var tickSize = axis.tickSize[0]; + unit = axis.tickSize[1]; + + var step = tickSize * timeUnitSize[unit]; + + if (unit === "microsecond") { + d.setMicroseconds(floorInBase(d.getMicroseconds(), tickSize)); + } else if (unit === "millisecond") { + d.setMilliseconds(floorInBase(d.getMilliseconds(), tickSize)); + } else if (unit === "second") { + d.setSeconds(floorInBase(d.getSeconds(), tickSize)); + } else if (unit === "minute") { + d.setMinutes(floorInBase(d.getMinutes(), tickSize)); + } else if (unit === "hour") { + d.setHours(floorInBase(d.getHours(), tickSize)); + } else if (unit === "month") { + d.setMonth(floorInBase(d.getMonth(), tickSize)); + } else if (unit === "quarter") { + d.setMonth(3 * floorInBase(d.getMonth() / 3, + tickSize)); + } else if (unit === "year") { + d.setFullYear(floorInBase(d.getFullYear(), tickSize)); + } + + // reset smaller components + + if (step >= timeUnitSize.millisecond) { + if (step >= timeUnitSize.second) { + d.setMicroseconds(0); + } else { + d.setMicroseconds(d.getMilliseconds() * 1000); + } + } + if (step >= timeUnitSize.minute) { + d.setSeconds(0); + } + if (step >= timeUnitSize.hour) { + d.setMinutes(0); + } + if (step >= timeUnitSize.day) { + d.setHours(0); + } + if (step >= timeUnitSize.day * 4) { + d.setDate(1); + } + if (step >= timeUnitSize.month * 2) { + d.setMonth(floorInBase(d.getMonth(), 3)); + } + if (step >= timeUnitSize.quarter * 2) { + d.setMonth(floorInBase(d.getMonth(), 6)); + } + if (step >= timeUnitSize.year) { + d.setMonth(0); + } + + var carry = 0; + var v = Number.NaN; + var v1000; + var prev; + do { + prev = v; + v1000 = d.getTime(); + if (opts && opts.timeBase === 'seconds') { + v = v1000 / 1000; + } else if (opts && opts.timeBase === 'microseconds') { + v = v1000 * 1000; + } else { + v = v1000; + } + + ticks.push(v); + + if (unit === "month" || unit === "quarter") { + if (tickSize < 1) { + // a bit complicated - we'll divide the + // month/quarter up but we need to take + // care of fractions so we don't end up in + // the middle of a day + d.setDate(1); + var start = d.getTime(); + d.setMonth(d.getMonth() + + (unit === "quarter" ? 3 : 1)); + var end = d.getTime(); + d.setTime((v + carry * timeUnitSize.hour + (end - start) * tickSize)); + carry = d.getHours(); + d.setHours(0); + } else { + d.setMonth(d.getMonth() + + tickSize * (unit === "quarter" ? 3 : 1)); + } + } else if (unit === "year") { + d.setFullYear(d.getFullYear() + tickSize); + } else { + if (opts.timeBase === 'seconds') { + d.setTime((v + step) * 1000); + } else if (opts.timeBase === 'microseconds') { + d.setTime((v + step) / 1000); + } else { + d.setTime(v + step); + } + } + } while (v < axis.max && v !== prev); + + return ticks; + }; + + function init(plot) { + plot.hooks.processOptions.push(function (plot) { + $.each(plot.getAxes(), function(axisName, axis) { + var opts = axis.options; + if (opts.mode === "time") { + axis.tickGenerator = dateTickGenerator; + + // if a tick formatter is already provided do not overwrite it + if ('tickFormatter' in opts && typeof opts.tickFormatter === 'function') return; + + axis.tickFormatter = function (v, axis) { + var d = dateGenerator(v, axis.options); + + // first check global format + if (opts.timeformat != null) { + return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames); + } + + // possibly use quarters if quarters are mentioned in + // any of these places + var useQuarters = (axis.options.tickSize && + axis.options.tickSize[1] === "quarter") || + (axis.options.minTickSize && + axis.options.minTickSize[1] === "quarter"); + + var timeUnitSize; + if (opts.timeBase === 'seconds') { + timeUnitSize = timeUnitSizeSeconds; + } else if (opts.timeBase === 'microseconds') { + timeUnitSize = timeUnitSizeMicroseconds; + } else { + timeUnitSize = timeUnitSizeMilliseconds; + } + + var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; + var span = axis.max - axis.min; + var suffix = (opts.twelveHourClock) ? " %p" : ""; + var hourCode = (opts.twelveHourClock) ? "%I" : "%H"; + var factor; + var fmt; + + if (opts.timeBase === 'seconds') { + factor = 1; + } else if (opts.timeBase === 'microseconds') { + factor = 1000000 + } else { + factor = 1000; + } + + if (t < timeUnitSize.second) { + var decimals = -Math.floor(Math.log10(t / factor)) + + // the two-and-halves require an additional decimal + if (String(t).indexOf('25') > -1) { + decimals++; + } + + fmt = "%S.%" + decimals + "s"; + } else + if (t < timeUnitSize.minute) { + fmt = hourCode + ":%M:%S" + suffix; + } else if (t < timeUnitSize.day) { + if (span < 2 * timeUnitSize.day) { + fmt = hourCode + ":%M" + suffix; + } else { + fmt = "%b %d " + hourCode + ":%M" + suffix; + } + } else if (t < timeUnitSize.month) { + fmt = "%b %d"; + } else if ((useQuarters && t < timeUnitSize.quarter) || + (!useQuarters && t < timeUnitSize.year)) { + if (span < timeUnitSize.year) { + fmt = "%b"; + } else { + fmt = "%b %Y"; + } + } else if (useQuarters && t < timeUnitSize.year) { + if (span < timeUnitSize.year) { + fmt = "Q%q"; + } else { + fmt = "Q%q %Y"; + } + } else { + fmt = "%Y"; + } + + var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames); + + return rt; + }; + } + }); + }); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'time', + version: '1.0' + }); + + // Time-axis support used to be in Flot core, which exposed the + // formatDate function on the plot object. Various plugins depend + // on the function, so we need to re-expose it here. + + $.plot.formatDate = formatDate; + $.plot.dateGenerator = dateGenerator; + $.plot.dateTickGenerator = dateTickGenerator; + $.plot.makeUtcWrapper = makeUtcWrapper; +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.touch.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.touch.js new file mode 100644 index 0000000..492cf68 --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.touch.js @@ -0,0 +1,320 @@ + +/* global jQuery */ + +(function($) { + 'use strict'; + + var options = { + propagateSupportedGesture: false + }; + + function init(plot) { + plot.hooks.processOptions.push(initTouchNavigation); + } + + function initTouchNavigation(plot, options) { + var gestureState = { + twoTouches: false, + currentTapStart: { x: 0, y: 0 }, + currentTapEnd: { x: 0, y: 0 }, + prevTap: { x: 0, y: 0 }, + currentTap: { x: 0, y: 0 }, + interceptedLongTap: false, + isUnsupportedGesture: false, + prevTapTime: null, + tapStartTime: null, + longTapTriggerId: null + }, + maxDistanceBetweenTaps = 20, + maxIntervalBetweenTaps = 500, + maxLongTapDistance = 20, + minLongTapDuration = 1500, + pressedTapDuration = 125, + mainEventHolder; + + function interpretGestures(e) { + var o = plot.getOptions(); + + if (!o.pan.active && !o.zoom.active) { + return; + } + + updateOnMultipleTouches(e); + mainEventHolder.dispatchEvent(new CustomEvent('touchevent', { detail: e })); + + if (isPinchEvent(e)) { + executeAction(e, 'pinch'); + } else { + executeAction(e, 'pan'); + if (!wasPinchEvent(e)) { + if (isDoubleTap(e)) { + executeAction(e, 'doubleTap'); + } + executeAction(e, 'tap'); + executeAction(e, 'longTap'); + } + } + } + + function executeAction(e, gesture) { + switch (gesture) { + case 'pan': + pan[e.type](e); + break; + case 'pinch': + pinch[e.type](e); + break; + case 'doubleTap': + doubleTap.onDoubleTap(e); + break; + case 'longTap': + longTap[e.type](e); + break; + case 'tap': + tap[e.type](e); + break; + } + } + + function bindEvents(plot, eventHolder) { + mainEventHolder = eventHolder[0]; + eventHolder[0].addEventListener('touchstart', interpretGestures, false); + eventHolder[0].addEventListener('touchmove', interpretGestures, false); + eventHolder[0].addEventListener('touchend', interpretGestures, false); + } + + function shutdown(plot, eventHolder) { + eventHolder[0].removeEventListener('touchstart', interpretGestures); + eventHolder[0].removeEventListener('touchmove', interpretGestures); + eventHolder[0].removeEventListener('touchend', interpretGestures); + if (gestureState.longTapTriggerId) { + clearTimeout(gestureState.longTapTriggerId); + gestureState.longTapTriggerId = null; + } + } + + var pan = { + touchstart: function(e) { + updatePrevForDoubleTap(); + updateCurrentForDoubleTap(e); + updateStateForLongTapStart(e); + + mainEventHolder.dispatchEvent(new CustomEvent('panstart', { detail: e })); + }, + + touchmove: function(e) { + preventEventBehaviors(e); + + updateCurrentForDoubleTap(e); + updateStateForLongTapEnd(e); + + if (!gestureState.isUnsupportedGesture) { + mainEventHolder.dispatchEvent(new CustomEvent('pandrag', { detail: e })); + } + }, + + touchend: function(e) { + preventEventBehaviors(e); + + if (wasPinchEvent(e)) { + mainEventHolder.dispatchEvent(new CustomEvent('pinchend', { detail: e })); + mainEventHolder.dispatchEvent(new CustomEvent('panstart', { detail: e })); + } else if (noTouchActive(e)) { + mainEventHolder.dispatchEvent(new CustomEvent('panend', { detail: e })); + } + } + }; + + var pinch = { + touchstart: function(e) { + mainEventHolder.dispatchEvent(new CustomEvent('pinchstart', { detail: e })); + }, + + touchmove: function(e) { + preventEventBehaviors(e); + gestureState.twoTouches = isPinchEvent(e); + if (!gestureState.isUnsupportedGesture) { + mainEventHolder.dispatchEvent(new CustomEvent('pinchdrag', { detail: e })); + } + }, + + touchend: function(e) { + preventEventBehaviors(e); + } + }; + + var doubleTap = { + onDoubleTap: function(e) { + preventEventBehaviors(e); + mainEventHolder.dispatchEvent(new CustomEvent('doubletap', { detail: e })); + } + }; + + var longTap = { + touchstart: function(e) { + longTap.waitForLongTap(e); + }, + + touchmove: function(e) { + }, + + touchend: function(e) { + if (gestureState.longTapTriggerId) { + clearTimeout(gestureState.longTapTriggerId); + gestureState.longTapTriggerId = null; + } + }, + + isLongTap: function(e) { + var currentTime = new Date().getTime(), + tapDuration = currentTime - gestureState.tapStartTime; + if (tapDuration >= minLongTapDuration && !gestureState.interceptedLongTap) { + if (distance(gestureState.currentTapStart.x, gestureState.currentTapStart.y, gestureState.currentTapEnd.x, gestureState.currentTapEnd.y) < maxLongTapDistance) { + gestureState.interceptedLongTap = true; + return true; + } + } + return false; + }, + + waitForLongTap: function(e) { + var longTapTrigger = function() { + if (longTap.isLongTap(e)) { + mainEventHolder.dispatchEvent(new CustomEvent('longtap', { detail: e })); + } + gestureState.longTapTriggerId = null; + }; + if (!gestureState.longTapTriggerId) { + gestureState.longTapTriggerId = setTimeout(longTapTrigger, minLongTapDuration); + } + } + }; + + var tap = { + touchstart: function(e) { + gestureState.tapStartTime = new Date().getTime(); + }, + + touchmove: function(e) { + }, + + touchend: function(e) { + if (tap.isTap(e)) { + mainEventHolder.dispatchEvent(new CustomEvent('tap', { detail: e })); + preventEventBehaviors(e); + } + }, + + isTap: function(e) { + var currentTime = new Date().getTime(), + tapDuration = currentTime - gestureState.tapStartTime; + if (tapDuration <= pressedTapDuration) { + if (distance(gestureState.currentTapStart.x, gestureState.currentTapStart.y, gestureState.currentTapEnd.x, gestureState.currentTapEnd.y) < maxLongTapDistance) { + return true; + } + } + return false; + } + }; + + if (options.pan.enableTouch === true || options.zoom.enableTouch) { + plot.hooks.bindEvents.push(bindEvents); + plot.hooks.shutdown.push(shutdown); + }; + + function updatePrevForDoubleTap() { + gestureState.prevTap = { + x: gestureState.currentTap.x, + y: gestureState.currentTap.y + }; + }; + + function updateCurrentForDoubleTap(e) { + gestureState.currentTap = { + x: e.touches[0].pageX, + y: e.touches[0].pageY + }; + } + + function updateStateForLongTapStart(e) { + gestureState.tapStartTime = new Date().getTime(); + gestureState.interceptedLongTap = false; + gestureState.currentTapStart = { + x: e.touches[0].pageX, + y: e.touches[0].pageY + }; + gestureState.currentTapEnd = { + x: e.touches[0].pageX, + y: e.touches[0].pageY + }; + }; + + function updateStateForLongTapEnd(e) { + gestureState.currentTapEnd = { + x: e.touches[0].pageX, + y: e.touches[0].pageY + }; + }; + + function isDoubleTap(e) { + var currentTime = new Date().getTime(), + intervalBetweenTaps = currentTime - gestureState.prevTapTime; + + if (intervalBetweenTaps >= 0 && intervalBetweenTaps < maxIntervalBetweenTaps) { + if (distance(gestureState.prevTap.x, gestureState.prevTap.y, gestureState.currentTap.x, gestureState.currentTap.y) < maxDistanceBetweenTaps) { + e.firstTouch = gestureState.prevTap; + e.secondTouch = gestureState.currentTap; + return true; + } + } + gestureState.prevTapTime = currentTime; + return false; + } + + function preventEventBehaviors(e) { + if (!gestureState.isUnsupportedGesture) { + e.preventDefault(); + if (!plot.getOptions().propagateSupportedGesture) { + e.stopPropagation(); + } + } + } + + function distance(x1, y1, x2, y2) { + return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); + } + + function noTouchActive(e) { + return (e.touches && e.touches.length === 0); + } + + function wasPinchEvent(e) { + return (gestureState.twoTouches && e.touches.length === 1); + } + + function updateOnMultipleTouches(e) { + if (e.touches.length >= 3) { + gestureState.isUnsupportedGesture = true; + } else { + gestureState.isUnsupportedGesture = false; + } + } + + function isPinchEvent(e) { + if (e.touches && e.touches.length >= 2) { + if (e.touches[0].target === plot.getEventHolder() && + e.touches[1].target === plot.getEventHolder()) { + return true; + } + } + return false; + } + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'navigateTouch', + version: '0.3' + }); +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.touchNavigate.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.touchNavigate.js new file mode 100644 index 0000000..67298ed --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.touchNavigate.js @@ -0,0 +1,360 @@ +/* global jQuery */ + +(function($) { + 'use strict'; + + var options = { + zoom: { + enableTouch: false + }, + pan: { + enableTouch: false, + touchMode: 'manual' + }, + recenter: { + enableTouch: true + } + }; + + var ZOOM_DISTANCE_MARGIN = $.plot.uiConstants.ZOOM_DISTANCE_MARGIN; + + function init(plot) { + plot.hooks.processOptions.push(initTouchNavigation); + } + + function initTouchNavigation(plot, options) { + var gestureState = { + zoomEnable: false, + prevDistance: null, + prevTapTime: 0, + prevPanPosition: { x: 0, y: 0 }, + prevTapPosition: { x: 0, y: 0 } + }, + navigationState = { + prevTouchedAxis: 'none', + currentTouchedAxis: 'none', + touchedAxis: null, + navigationConstraint: 'unconstrained', + initialState: null + }, + useManualPan = options.pan.interactive && options.pan.touchMode === 'manual', + smartPanLock = options.pan.touchMode === 'smartLock', + useSmartPan = options.pan.interactive && (smartPanLock || options.pan.touchMode === 'smart'), + pan, pinch, doubleTap; + + function bindEvents(plot, eventHolder) { + var o = plot.getOptions(); + + if (o.zoom.interactive && o.zoom.enableTouch) { + eventHolder[0].addEventListener('pinchstart', pinch.start, false); + eventHolder[0].addEventListener('pinchdrag', pinch.drag, false); + eventHolder[0].addEventListener('pinchend', pinch.end, false); + } + + if (o.pan.interactive && o.pan.enableTouch) { + eventHolder[0].addEventListener('panstart', pan.start, false); + eventHolder[0].addEventListener('pandrag', pan.drag, false); + eventHolder[0].addEventListener('panend', pan.end, false); + } + + if ((o.recenter.interactive && o.recenter.enableTouch)) { + eventHolder[0].addEventListener('doubletap', doubleTap.recenterPlot, false); + } + } + + function shutdown(plot, eventHolder) { + eventHolder[0].removeEventListener('panstart', pan.start); + eventHolder[0].removeEventListener('pandrag', pan.drag); + eventHolder[0].removeEventListener('panend', pan.end); + eventHolder[0].removeEventListener('pinchstart', pinch.start); + eventHolder[0].removeEventListener('pinchdrag', pinch.drag); + eventHolder[0].removeEventListener('pinchend', pinch.end); + eventHolder[0].removeEventListener('doubletap', doubleTap.recenterPlot); + } + + pan = { + start: function(e) { + presetNavigationState(e, 'pan', gestureState); + updateData(e, 'pan', gestureState, navigationState); + + if (useSmartPan) { + var point = getPoint(e, 'pan'); + navigationState.initialState = plot.navigationState(point.x, point.y); + } + }, + + drag: function(e) { + presetNavigationState(e, 'pan', gestureState); + + if (useSmartPan) { + var point = getPoint(e, 'pan'); + plot.smartPan({ + x: navigationState.initialState.startPageX - point.x, + y: navigationState.initialState.startPageY - point.y + }, navigationState.initialState, navigationState.touchedAxis, false, smartPanLock); + } else if (useManualPan) { + plot.pan({ + left: -delta(e, 'pan', gestureState).x, + top: -delta(e, 'pan', gestureState).y, + axes: navigationState.touchedAxis + }); + updatePrevPanPosition(e, 'pan', gestureState, navigationState); + } + }, + + end: function(e) { + presetNavigationState(e, 'pan', gestureState); + + if (useSmartPan) { + plot.smartPan.end(); + } + + if (wasPinchEvent(e, gestureState)) { + updateprevPanPosition(e, 'pan', gestureState, navigationState); + } + } + }; + + var pinchDragTimeout; + pinch = { + start: function(e) { + if (pinchDragTimeout) { + clearTimeout(pinchDragTimeout); + pinchDragTimeout = null; + } + presetNavigationState(e, 'pinch', gestureState); + setPrevDistance(e, gestureState); + updateData(e, 'pinch', gestureState, navigationState); + }, + + drag: function(e) { + if (pinchDragTimeout) { + return; + } + pinchDragTimeout = setTimeout(function() { + presetNavigationState(e, 'pinch', gestureState); + plot.pan({ + left: -delta(e, 'pinch', gestureState).x, + top: -delta(e, 'pinch', gestureState).y, + axes: navigationState.touchedAxis + }); + updatePrevPanPosition(e, 'pinch', gestureState, navigationState); + + var dist = pinchDistance(e); + + if (gestureState.zoomEnable || Math.abs(dist - gestureState.prevDistance) > ZOOM_DISTANCE_MARGIN) { + zoomPlot(plot, e, gestureState, navigationState); + + //activate zoom mode + gestureState.zoomEnable = true; + } + pinchDragTimeout = null; + }, 1000 / 60); + }, + + end: function(e) { + if (pinchDragTimeout) { + clearTimeout(pinchDragTimeout); + pinchDragTimeout = null; + } + presetNavigationState(e, 'pinch', gestureState); + gestureState.prevDistance = null; + } + }; + + doubleTap = { + recenterPlot: function(e) { + if (e && e.detail && e.detail.type === 'touchstart') { + // only do not recenter for touch start; + recenterPlotOnDoubleTap(plot, e, gestureState, navigationState); + } + } + }; + + if (options.pan.enableTouch === true || options.zoom.enableTouch === true) { + plot.hooks.bindEvents.push(bindEvents); + plot.hooks.shutdown.push(shutdown); + } + + function presetNavigationState(e, gesture, gestureState) { + navigationState.touchedAxis = getAxis(plot, e, gesture, navigationState); + if (noAxisTouched(navigationState)) { + navigationState.navigationConstraint = 'unconstrained'; + } else { + navigationState.navigationConstraint = 'axisConstrained'; + } + } + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'navigateTouch', + version: '0.3' + }); + + function recenterPlotOnDoubleTap(plot, e, gestureState, navigationState) { + checkAxesForDoubleTap(plot, e, navigationState); + if ((navigationState.currentTouchedAxis === 'x' && navigationState.prevTouchedAxis === 'x') || + (navigationState.currentTouchedAxis === 'y' && navigationState.prevTouchedAxis === 'y') || + (navigationState.currentTouchedAxis === 'none' && navigationState.prevTouchedAxis === 'none')) { + var event; + + plot.recenter({ axes: navigationState.touchedAxis }); + + if (navigationState.touchedAxis) { + event = new $.Event('re-center', { detail: { axisTouched: navigationState.touchedAxis } }); + } else { + event = new $.Event('re-center', { detail: e }); + } + plot.getPlaceholder().trigger(event); + } + } + + function checkAxesForDoubleTap(plot, e, navigationState) { + var axis = plot.getTouchedAxis(e.detail.firstTouch.x, e.detail.firstTouch.y); + if (axis[0] !== undefined) { + navigationState.prevTouchedAxis = axis[0].direction; + } + + axis = plot.getTouchedAxis(e.detail.secondTouch.x, e.detail.secondTouch.y); + if (axis[0] !== undefined) { + navigationState.touchedAxis = axis; + navigationState.currentTouchedAxis = axis[0].direction; + } + + if (noAxisTouched(navigationState)) { + navigationState.touchedAxis = null; + navigationState.prevTouchedAxis = 'none'; + navigationState.currentTouchedAxis = 'none'; + } + } + + function zoomPlot(plot, e, gestureState, navigationState) { + var offset = plot.offset(), + center = { + left: 0, + top: 0 + }, + zoomAmount = pinchDistance(e) / gestureState.prevDistance, + dist = pinchDistance(e); + + center.left = getPoint(e, 'pinch').x - offset.left; + center.top = getPoint(e, 'pinch').y - offset.top; + + // send the computed touched axis to the zoom function so that it only zooms on that one + plot.zoom({ + center: center, + amount: zoomAmount, + axes: navigationState.touchedAxis + }); + gestureState.prevDistance = dist; + } + + function wasPinchEvent(e, gestureState) { + return (gestureState.zoomEnable && e.detail.touches.length === 1); + } + + function getAxis(plot, e, gesture, navigationState) { + if (e.type === 'pinchstart') { + var axisTouch1 = plot.getTouchedAxis(e.detail.touches[0].pageX, e.detail.touches[0].pageY); + var axisTouch2 = plot.getTouchedAxis(e.detail.touches[1].pageX, e.detail.touches[1].pageY); + + if (axisTouch1.length === axisTouch2.length && axisTouch1.toString() === axisTouch2.toString()) { + return axisTouch1; + } + } else if (e.type === 'panstart') { + return plot.getTouchedAxis(e.detail.touches[0].pageX, e.detail.touches[0].pageY); + } else if (e.type === 'pinchend') { + //update axis since instead on pinch, a pan event is made + return plot.getTouchedAxis(e.detail.touches[0].pageX, e.detail.touches[0].pageY); + } else { + return navigationState.touchedAxis; + } + } + + function noAxisTouched(navigationState) { + return (!navigationState.touchedAxis || navigationState.touchedAxis.length === 0); + } + + function setPrevDistance(e, gestureState) { + gestureState.prevDistance = pinchDistance(e); + } + + function updateData(e, gesture, gestureState, navigationState) { + var axisDir, + point = getPoint(e, gesture); + + switch (navigationState.navigationConstraint) { + case 'unconstrained': + navigationState.touchedAxis = null; + gestureState.prevTapPosition = { + x: gestureState.prevPanPosition.x, + y: gestureState.prevPanPosition.y + }; + gestureState.prevPanPosition = { + x: point.x, + y: point.y + }; + break; + case 'axisConstrained': + axisDir = navigationState.touchedAxis[0].direction; + navigationState.currentTouchedAxis = axisDir; + gestureState.prevTapPosition[axisDir] = gestureState.prevPanPosition[axisDir]; + gestureState.prevPanPosition[axisDir] = point[axisDir]; + break; + default: + break; + } + } + + function distance(x1, y1, x2, y2) { + return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); + } + + function pinchDistance(e) { + var t1 = e.detail.touches[0], + t2 = e.detail.touches[1]; + return distance(t1.pageX, t1.pageY, t2.pageX, t2.pageY); + } + + function updatePrevPanPosition(e, gesture, gestureState, navigationState) { + var point = getPoint(e, gesture); + + switch (navigationState.navigationConstraint) { + case 'unconstrained': + gestureState.prevPanPosition.x = point.x; + gestureState.prevPanPosition.y = point.y; + break; + case 'axisConstrained': + gestureState.prevPanPosition[navigationState.currentTouchedAxis] = + point[navigationState.currentTouchedAxis]; + break; + default: + break; + } + } + + function delta(e, gesture, gestureState) { + var point = getPoint(e, gesture); + + return { + x: point.x - gestureState.prevPanPosition.x, + y: point.y - gestureState.prevPanPosition.y + } + } + + function getPoint(e, gesture) { + if (gesture === 'pinch') { + return { + x: (e.detail.touches[0].pageX + e.detail.touches[1].pageX) / 2, + y: (e.detail.touches[0].pageY + e.detail.touches[1].pageY) / 2 + } + } else { + return { + x: e.detail.touches[0].pageX, + y: e.detail.touches[0].pageY + } + } + } +})(jQuery); diff --git a/src/main/resources/static/plugins/flot/plugins/jquery.flot.uiConstants.js b/src/main/resources/static/plugins/flot/plugins/jquery.flot.uiConstants.js new file mode 100644 index 0000000..627847d --- /dev/null +++ b/src/main/resources/static/plugins/flot/plugins/jquery.flot.uiConstants.js @@ -0,0 +1,10 @@ +(function ($) { + 'use strict'; + $.plot.uiConstants = { + SNAPPING_CONSTANT: 20, + PANHINT_LENGTH_CONSTANT: 10, + MINOR_TICKS_COUNT_CONSTANT: 4, + TICK_LENGTH_CONSTANT: 10, + ZOOM_DISTANCE_MARGIN: 25 + }; +})(jQuery); -- cgit v1.2.3