Started the layout of the dashboard
Project: http://git-wip-us.apache.org/repos/asf/incubator-blur/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-blur/commit/39a1367b Tree: http://git-wip-us.apache.org/repos/asf/incubator-blur/tree/39a1367b Diff: http://git-wip-us.apache.org/repos/asf/incubator-blur/diff/39a1367b Branch: refs/heads/blur-console-v2 Commit: 39a1367bf9da2ea5492729a1531c4a9ce92aacb6 Parents: 688e9d0 Author: Chris Rohr <[email protected]> Authored: Tue Oct 1 16:54:10 2013 -0400 Committer: Chris Rohr <[email protected]> Committed: Tue Oct 1 16:54:10 2013 -0400 ---------------------------------------------------------------------- .../apache/blur/console/webapp/css/console.css | 46 +- .../org/apache/blur/console/webapp/index.html | 59 +- .../org/apache/blur/console/webapp/js/Chart.js | 1426 +++++++ .../apache/blur/console/webapp/js/dashboard.js | 3 + .../webapp/js/ui-bootstrap-tpls-0.6.0.js | 3573 ++++++++++++++++++ 5 files changed, 5095 insertions(+), 12 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/39a1367b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/css/console.css ---------------------------------------------------------------------- diff --git a/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/css/console.css b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/css/console.css index 243ce0c..2d835c2 100644 --- a/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/css/console.css +++ b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/css/console.css @@ -1,2 +1,46 @@ body { padding-top: 70px; } -.nav, .pagination, .carousel a { cursor: pointer; } \ No newline at end of file +.nav, .pagination, .carousel a { cursor: pointer; } + +.app { padding: 0 10px; } + +.tab-content { + overflow: auto; /* prevent content from running below tabs */ +} + +/* Remove border on bottom, left, right */ +.tabs-left > .nav-tabs { border-bottom: 0; } + +/* Show/hide tabbable areas */ +.tab-content > .tab-pane { display: none; } +.tab-content > .active { display: block; } + +.tabs-left > .nav-tabs > li { + float: none; +} +.tabs-left > .nav-tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +.tabs-left > .nav-tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} +.tabs-left > .nav-tabs > li > a { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +.tabs-left > .nav-tabs > li > a:hover, +.tabs-left > .nav-tabs > li > a:focus { + border-color: #eee #ddd #eee #eee; +} +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover, +.tabs-left > .nav-tabs .active > a:focus { + border-color: #ddd transparent #ddd #ddd; + *border-right-color: #fff; +} http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/39a1367b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/index.html ---------------------------------------------------------------------- diff --git a/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/index.html b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/index.html index 442a7a6..dd1c55c 100644 --- a/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/index.html +++ b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/index.html @@ -12,17 +12,54 @@ <li><a href="#"><i class="icon icon-cog"></i></a></li> </ul> </nav> - <div class="tabbable tabs-left"> - <ul class="nav nav-tabs" data-tabs="tabs"> - <li class="active"><a href="#dashboardTab">Dashboard</a></li> - <li><a href="#searchTab">Search</a></li> - </ul> - <div class="tab-content"> - <div id="dashboardTab" class="tab-pane fade in active">Whoo</div> - <div id="searchTab" class="tab-pane fade">Hoo</div> - </div> - </div> + + <div class="app" ng-app="blurApp"> + <tabset vertical="true" class="tabs-left"> + <tab> + <tab-heading><i class="icon icon-dashboard" title="Dashboard"></i> Dashboard</tab-heading> + <div ng-controller="DashboardCtrl"> + <div id="slow-query-warnings" class="alert alert-danger hidden">Warning</div> + <div class="row"> + <div class="col-md-4"> + <h3>Controllers</h3> + </div> + <div class="col-md-4"> + <h3>Shards</h3> + </div> + <div class="col-md-4"> + <h3>Tables</h3> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <h3>Queries By Cluster By Minute</h3> + </div> + <div class="col-md-6"> + <h3>Average Query Performance By Cluster By Minute</h3> + </div> + </div> + </div> + </tab> + <tab> + <tab-heading><i class="icon icon-table" title="Tables"></i> Tables</tab-heading> + Table + </tab> + <tab> + <tab-heading><i class="icon icon-tasks" title="Recent Queries"></i> Queries</tab-heading> + Queries + </tab> + <tab> + <tab-heading><i class="icon icon-search" title="Search"></i> Search</tab-heading> + Search + </tab> + </tabset> + </div> + + <script type="text/javascript" src="js/angular.js"></script> - <script type="text/javascript" src="js/ui-bootstrap-0.6.0.js"></script> + <script type="text/javascript" src="js/ui-bootstrap-tpls-0.6.0.js"></script> + <script type="text/javascript" src="js/Chart.js"></script> + <script type="text/javascript" src="js/app.js"></script> + <script type="text/javascript" src="js/dashboard.js"></script> </body> </html> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/39a1367b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/Chart.js ---------------------------------------------------------------------- diff --git a/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/Chart.js b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/Chart.js new file mode 100644 index 0000000..ffbe16f --- /dev/null +++ b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/Chart.js @@ -0,0 +1,1426 @@ +/*! + * Chart.js + * http://chartjs.org/ + * + * Copyright 2013 Nick Downie + * Released under the MIT license + * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md + */ + +//Define the global Chart Variable as a class. +window.Chart = function(context){ + + var chart = this; + + + //Easing functions adapted from Robert Penner's easing equations + //http://www.robertpenner.com/easing/ + + var animationOptions = { + linear : function (t){ + return t; + }, + easeInQuad: function (t) { + return t*t; + }, + easeOutQuad: function (t) { + return -1 *t*(t-2); + }, + easeInOutQuad: function (t) { + if ((t/=1/2) < 1) return 1/2*t*t; + return -1/2 * ((--t)*(t-2) - 1); + }, + easeInCubic: function (t) { + return t*t*t; + }, + easeOutCubic: function (t) { + return 1*((t=t/1-1)*t*t + 1); + }, + easeInOutCubic: function (t) { + if ((t/=1/2) < 1) return 1/2*t*t*t; + return 1/2*((t-=2)*t*t + 2); + }, + easeInQuart: function (t) { + return t*t*t*t; + }, + easeOutQuart: function (t) { + return -1 * ((t=t/1-1)*t*t*t - 1); + }, + easeInOutQuart: function (t) { + if ((t/=1/2) < 1) return 1/2*t*t*t*t; + return -1/2 * ((t-=2)*t*t*t - 2); + }, + easeInQuint: function (t) { + return 1*(t/=1)*t*t*t*t; + }, + easeOutQuint: function (t) { + return 1*((t=t/1-1)*t*t*t*t + 1); + }, + easeInOutQuint: function (t) { + if ((t/=1/2) < 1) return 1/2*t*t*t*t*t; + return 1/2*((t-=2)*t*t*t*t + 2); + }, + easeInSine: function (t) { + return -1 * Math.cos(t/1 * (Math.PI/2)) + 1; + }, + easeOutSine: function (t) { + return 1 * Math.sin(t/1 * (Math.PI/2)); + }, + easeInOutSine: function (t) { + return -1/2 * (Math.cos(Math.PI*t/1) - 1); + }, + easeInExpo: function (t) { + return (t==0) ? 1 : 1 * Math.pow(2, 10 * (t/1 - 1)); + }, + easeOutExpo: function (t) { + return (t==1) ? 1 : 1 * (-Math.pow(2, -10 * t/1) + 1); + }, + easeInOutExpo: function (t) { + if (t==0) return 0; + if (t==1) return 1; + if ((t/=1/2) < 1) return 1/2 * Math.pow(2, 10 * (t - 1)); + return 1/2 * (-Math.pow(2, -10 * --t) + 2); + }, + easeInCirc: function (t) { + if (t>=1) return t; + return -1 * (Math.sqrt(1 - (t/=1)*t) - 1); + }, + easeOutCirc: function (t) { + return 1 * Math.sqrt(1 - (t=t/1-1)*t); + }, + easeInOutCirc: function (t) { + if ((t/=1/2) < 1) return -1/2 * (Math.sqrt(1 - t*t) - 1); + return 1/2 * (Math.sqrt(1 - (t-=2)*t) + 1); + }, + easeInElastic: function (t) { + var s=1.70158;var p=0;var a=1; + if (t==0) return 0; if ((t/=1)==1) return 1; if (!p) p=1*.3; + if (a < Math.abs(1)) { a=1; var s=p/4; } + else var s = p/(2*Math.PI) * Math.asin (1/a); + return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p )); + }, + easeOutElastic: function (t) { + var s=1.70158;var p=0;var a=1; + if (t==0) return 0; if ((t/=1)==1) return 1; if (!p) p=1*.3; + if (a < Math.abs(1)) { a=1; var s=p/4; } + else var s = p/(2*Math.PI) * Math.asin (1/a); + return a*Math.pow(2,-10*t) * Math.sin( (t*1-s)*(2*Math.PI)/p ) + 1; + }, + easeInOutElastic: function (t) { + var s=1.70158;var p=0;var a=1; + if (t==0) return 0; if ((t/=1/2)==2) return 1; if (!p) p=1*(.3*1.5); + if (a < Math.abs(1)) { a=1; var s=p/4; } + else var s = p/(2*Math.PI) * Math.asin (1/a); + if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p )); + return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p )*.5 + 1; + }, + easeInBack: function (t) { + var s = 1.70158; + return 1*(t/=1)*t*((s+1)*t - s); + }, + easeOutBack: function (t) { + var s = 1.70158; + return 1*((t=t/1-1)*t*((s+1)*t + s) + 1); + }, + easeInOutBack: function (t) { + var s = 1.70158; + if ((t/=1/2) < 1) return 1/2*(t*t*(((s*=(1.525))+1)*t - s)); + return 1/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2); + }, + easeInBounce: function (t) { + return 1 - animationOptions.easeOutBounce (1-t); + }, + easeOutBounce: function (t) { + if ((t/=1) < (1/2.75)) { + return 1*(7.5625*t*t); + } else if (t < (2/2.75)) { + return 1*(7.5625*(t-=(1.5/2.75))*t + .75); + } else if (t < (2.5/2.75)) { + return 1*(7.5625*(t-=(2.25/2.75))*t + .9375); + } else { + return 1*(7.5625*(t-=(2.625/2.75))*t + .984375); + } + }, + easeInOutBounce: function (t) { + if (t < 1/2) return animationOptions.easeInBounce (t*2) * .5; + return animationOptions.easeOutBounce (t*2-1) * .5 + 1*.5; + } + }; + + //Variables global to the chart + var width = context.canvas.width; + var height = context.canvas.height; + + + //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale. + if (window.devicePixelRatio) { + context.canvas.style.width = width + "px"; + context.canvas.style.height = height + "px"; + context.canvas.height = height * window.devicePixelRatio; + context.canvas.width = width * window.devicePixelRatio; + context.scale(window.devicePixelRatio, window.devicePixelRatio); + } + + this.PolarArea = function(data,options){ + + chart.PolarArea.defaults = { + scaleOverlay : true, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleShowLine : true, + scaleLineColor : "rgba(0,0,0,.1)", + scaleLineWidth : 1, + scaleShowLabels : true, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Arial'", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "#666", + scaleShowLabelBackdrop : true, + scaleBackdropColor : "rgba(255,255,255,0.75)", + scaleBackdropPaddingY : 2, + scaleBackdropPaddingX : 2, + segmentShowStroke : true, + segmentStrokeColor : "#fff", + segmentStrokeWidth : 2, + animation : true, + animationSteps : 100, + animationEasing : "easeOutBounce", + animateRotate : true, + animateScale : false, + onAnimationComplete : null + }; + + var config = (options)? mergeChartConfig(chart.PolarArea.defaults,options) : chart.PolarArea.defaults; + + return new PolarArea(data,config,context); + }; + + this.Radar = function(data,options){ + + chart.Radar.defaults = { + scaleOverlay : false, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleShowLine : true, + scaleLineColor : "rgba(0,0,0,.1)", + scaleLineWidth : 1, + scaleShowLabels : false, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Arial'", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "#666", + scaleShowLabelBackdrop : true, + scaleBackdropColor : "rgba(255,255,255,0.75)", + scaleBackdropPaddingY : 2, + scaleBackdropPaddingX : 2, + angleShowLineOut : true, + angleLineColor : "rgba(0,0,0,.1)", + angleLineWidth : 1, + pointLabelFontFamily : "'Arial'", + pointLabelFontStyle : "normal", + pointLabelFontSize : 12, + pointLabelFontColor : "#666", + pointDot : true, + pointDotRadius : 3, + pointDotStrokeWidth : 1, + datasetStroke : true, + datasetStrokeWidth : 2, + datasetFill : true, + animation : true, + animationSteps : 60, + animationEasing : "easeOutQuart", + onAnimationComplete : null + }; + + var config = (options)? mergeChartConfig(chart.Radar.defaults,options) : chart.Radar.defaults; + + return new Radar(data,config,context); + }; + + this.Pie = function(data,options){ + chart.Pie.defaults = { + segmentShowStroke : true, + segmentStrokeColor : "#fff", + segmentStrokeWidth : 2, + animation : true, + animationSteps : 100, + animationEasing : "easeOutBounce", + animateRotate : true, + animateScale : false, + onAnimationComplete : null + }; + + var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults; + + return new Pie(data,config,context); + }; + + this.Doughnut = function(data,options){ + + chart.Doughnut.defaults = { + segmentShowStroke : true, + segmentStrokeColor : "#fff", + segmentStrokeWidth : 2, + percentageInnerCutout : 50, + animation : true, + animationSteps : 100, + animationEasing : "easeOutBounce", + animateRotate : true, + animateScale : false, + onAnimationComplete : null + }; + + var config = (options)? mergeChartConfig(chart.Doughnut.defaults,options) : chart.Doughnut.defaults; + + return new Doughnut(data,config,context); + + }; + + this.Line = function(data,options){ + + chart.Line.defaults = { + scaleOverlay : false, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleLineColor : "rgba(0,0,0,.1)", + scaleLineWidth : 1, + scaleShowLabels : true, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Arial'", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "#666", + scaleShowGridLines : true, + scaleGridLineColor : "rgba(0,0,0,.05)", + scaleGridLineWidth : 1, + bezierCurve : true, + pointDot : true, + pointDotRadius : 4, + pointDotStrokeWidth : 2, + datasetStroke : true, + datasetStrokeWidth : 2, + datasetFill : true, + animation : true, + animationSteps : 60, + animationEasing : "easeOutQuart", + onAnimationComplete : null + }; + var config = (options) ? mergeChartConfig(chart.Line.defaults,options) : chart.Line.defaults; + + return new Line(data,config,context); + } + + this.Bar = function(data,options){ + chart.Bar.defaults = { + scaleOverlay : false, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleLineColor : "rgba(0,0,0,.1)", + scaleLineWidth : 1, + scaleShowLabels : true, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Arial'", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "#666", + scaleShowGridLines : true, + scaleGridLineColor : "rgba(0,0,0,.05)", + scaleGridLineWidth : 1, + barShowStroke : true, + barStrokeWidth : 2, + barValueSpacing : 5, + barDatasetSpacing : 1, + animation : true, + animationSteps : 60, + animationEasing : "easeOutQuart", + onAnimationComplete : null + }; + var config = (options) ? mergeChartConfig(chart.Bar.defaults,options) : chart.Bar.defaults; + + return new Bar(data,config,context); + } + + var clear = function(c){ + c.clearRect(0, 0, width, height); + }; + + var PolarArea = function(data,config,ctx){ + var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString; + + + calculateDrawingSizes(); + + valueBounds = getValueBounds(); + + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null; + + //Check and set the scale + if (!config.scaleOverride){ + + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } + + scaleHop = maxSize/(calculatedScale.steps); + + //Wrap in an animation loop wrapper + animationLoop(config,drawScale,drawAllSegments,ctx); + + function calculateDrawingSizes(){ + maxSize = (Min([width,height])/2); + //Remove whatever is larger - the font size or line width. + + maxSize -= Max([config.scaleFontSize*0.5,config.scaleLineWidth*0.5]); + + labelHeight = config.scaleFontSize*2; + //If we're drawing the backdrop - add the Y padding to the label height and remove from drawing region. + if (config.scaleShowLabelBackdrop){ + labelHeight += (2 * config.scaleBackdropPaddingY); + maxSize -= config.scaleBackdropPaddingY*1.5; + } + + scaleHeight = maxSize; + //If the label height is less than 5, set it to 5 so we don't have lines on top of each other. + labelHeight = Default(labelHeight,5); + } + function drawScale(){ + for (var i=0; i<calculatedScale.steps; i++){ + //If the line object is there + if (config.scaleShowLine){ + ctx.beginPath(); + ctx.arc(width/2, height/2, scaleHop * (i + 1), 0, (Math.PI * 2), true); + ctx.strokeStyle = config.scaleLineColor; + ctx.lineWidth = config.scaleLineWidth; + ctx.stroke(); + } + + if (config.scaleShowLabels){ + ctx.textAlign = "center"; + ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily; + var label = calculatedScale.labels[i]; + //If the backdrop object is within the font object + if (config.scaleShowLabelBackdrop){ + var textWidth = ctx.measureText(label).width; + ctx.fillStyle = config.scaleBackdropColor; + ctx.beginPath(); + ctx.rect( + Math.round(width/2 - textWidth/2 - config.scaleBackdropPaddingX), //X + Math.round(height/2 - (scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y + Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width + Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height + ); + ctx.fill(); + } + ctx.textBaseline = "middle"; + ctx.fillStyle = config.scaleFontColor; + ctx.fillText(label,width/2,height/2 - (scaleHop * (i + 1))); + } + } + } + function drawAllSegments(animationDecimal){ + var startAngle = -Math.PI/2, + angleStep = (Math.PI*2)/data.length, + scaleAnimation = 1, + rotateAnimation = 1; + if (config.animation) { + if (config.animateScale) { + scaleAnimation = animationDecimal; + } + if (config.animateRotate){ + rotateAnimation = animationDecimal; + } + } + + for (var i=0; i<data.length; i++){ + + ctx.beginPath(); + ctx.arc(width/2,height/2,scaleAnimation * calculateOffset(data[i].value,calculatedScale,scaleHop),startAngle, startAngle + rotateAnimation*angleStep, false); + ctx.lineTo(width/2,height/2); + ctx.closePath(); + ctx.fillStyle = data[i].color; + ctx.fill(); + + if(config.segmentShowStroke){ + ctx.strokeStyle = config.segmentStrokeColor; + ctx.lineWidth = config.segmentStrokeWidth; + ctx.stroke(); + } + startAngle += rotateAnimation*angleStep; + } + } + function getValueBounds() { + var upperValue = Number.MIN_VALUE; + var lowerValue = Number.MAX_VALUE; + for (var i=0; i<data.length; i++){ + if (data[i].value > upperValue) {upperValue = data[i].value;} + if (data[i].value < lowerValue) {lowerValue = data[i].value;} + }; + + var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66))); + var minSteps = Math.floor((scaleHeight / labelHeight*0.5)); + + return { + maxValue : upperValue, + minValue : lowerValue, + maxSteps : maxSteps, + minSteps : minSteps + }; + + + } + } + + var Radar = function (data,config,ctx) { + var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString; + + //If no labels are defined set to an empty array, so referencing length for looping doesn't blow up. + if (!data.labels) data.labels = []; + + calculateDrawingSizes(); + + var valueBounds = getValueBounds(); + + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null; + + //Check and set the scale + if (!config.scaleOverride){ + + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } + + scaleHop = maxSize/(calculatedScale.steps); + + animationLoop(config,drawScale,drawAllDataPoints,ctx); + + //Radar specific functions. + function drawAllDataPoints(animationDecimal){ + var rotationDegree = (2*Math.PI)/data.datasets[0].data.length; + + ctx.save(); + //translate to the centre of the canvas. + ctx.translate(width/2,height/2); + + //We accept multiple data sets for radar charts, so show loop through each set + for (var i=0; i<data.datasets.length; i++){ + ctx.beginPath(); + + ctx.moveTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop))); + for (var j=1; j<data.datasets[i].data.length; j++){ + ctx.rotate(rotationDegree); + ctx.lineTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop))); + + } + ctx.closePath(); + + + ctx.fillStyle = data.datasets[i].fillColor; + ctx.strokeStyle = data.datasets[i].strokeColor; + ctx.lineWidth = config.datasetStrokeWidth; + ctx.fill(); + ctx.stroke(); + + + if (config.pointDot){ + ctx.fillStyle = data.datasets[i].pointColor; + ctx.strokeStyle = data.datasets[i].pointStrokeColor; + ctx.lineWidth = config.pointDotStrokeWidth; + for (var k=0; k<data.datasets[i].data.length; k++){ + ctx.rotate(rotationDegree); + ctx.beginPath(); + ctx.arc(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,2*Math.PI,false); + ctx.fill(); + ctx.stroke(); + } + + } + ctx.rotate(rotationDegree); + + } + ctx.restore(); + + + } + function drawScale(){ + var rotationDegree = (2*Math.PI)/data.datasets[0].data.length; + ctx.save(); + ctx.translate(width / 2, height / 2); + + if (config.angleShowLineOut){ + ctx.strokeStyle = config.angleLineColor; + ctx.lineWidth = config.angleLineWidth; + for (var h=0; h<data.datasets[0].data.length; h++){ + + ctx.rotate(rotationDegree); + ctx.beginPath(); + ctx.moveTo(0,0); + ctx.lineTo(0,-maxSize); + ctx.stroke(); + } + } + + for (var i=0; i<calculatedScale.steps; i++){ + ctx.beginPath(); + + if(config.scaleShowLine){ + ctx.strokeStyle = config.scaleLineColor; + ctx.lineWidth = config.scaleLineWidth; + ctx.moveTo(0,-scaleHop * (i+1)); + for (var j=0; j<data.datasets[0].data.length; j++){ + ctx.rotate(rotationDegree); + ctx.lineTo(0,-scaleHop * (i+1)); + } + ctx.closePath(); + ctx.stroke(); + + } + + if (config.scaleShowLabels){ + ctx.textAlign = 'center'; + ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; + ctx.textBaseline = "middle"; + + if (config.scaleShowLabelBackdrop){ + var textWidth = ctx.measureText(calculatedScale.labels[i]).width; + ctx.fillStyle = config.scaleBackdropColor; + ctx.beginPath(); + ctx.rect( + Math.round(- textWidth/2 - config.scaleBackdropPaddingX), //X + Math.round((-scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y + Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width + Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height + ); + ctx.fill(); + } + ctx.fillStyle = config.scaleFontColor; + ctx.fillText(calculatedScale.labels[i],0,-scaleHop*(i+1)); + } + + } + for (var k=0; k<data.labels.length; k++){ + ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily; + ctx.fillStyle = config.pointLabelFontColor; + var opposite = Math.sin(rotationDegree*k) * (maxSize + config.pointLabelFontSize); + var adjacent = Math.cos(rotationDegree*k) * (maxSize + config.pointLabelFontSize); + + if(rotationDegree*k == Math.PI || rotationDegree*k == 0){ + ctx.textAlign = "center"; + } + else if(rotationDegree*k > Math.PI){ + ctx.textAlign = "right"; + } + else{ + ctx.textAlign = "left"; + } + + ctx.textBaseline = "middle"; + + ctx.fillText(data.labels[k],opposite,-adjacent); + + } + ctx.restore(); + }; + function calculateDrawingSizes(){ + maxSize = (Min([width,height])/2); + + labelHeight = config.scaleFontSize*2; + + var labelLength = 0; + for (var i=0; i<data.labels.length; i++){ + ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily; + var textMeasurement = ctx.measureText(data.labels[i]).width; + if(textMeasurement>labelLength) labelLength = textMeasurement; + } + + //Figure out whats the largest - the height of the text or the width of what's there, and minus it from the maximum usable size. + maxSize -= Max([labelLength,((config.pointLabelFontSize/2)*1.5)]); + + maxSize -= config.pointLabelFontSize; + maxSize = CapValue(maxSize, null, 0); + scaleHeight = maxSize; + //If the label height is less than 5, set it to 5 so we don't have lines on top of each other. + labelHeight = Default(labelHeight,5); + }; + function getValueBounds() { + var upperValue = Number.MIN_VALUE; + var lowerValue = Number.MAX_VALUE; + + for (var i=0; i<data.datasets.length; i++){ + for (var j=0; j<data.datasets[i].data.length; j++){ + if (data.datasets[i].data[j] > upperValue){upperValue = data.datasets[i].data[j]} + if (data.datasets[i].data[j] < lowerValue){lowerValue = data.datasets[i].data[j]} + } + } + + var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66))); + var minSteps = Math.floor((scaleHeight / labelHeight*0.5)); + + return { + maxValue : upperValue, + minValue : lowerValue, + maxSteps : maxSteps, + minSteps : minSteps + }; + + + } + } + + var Pie = function(data,config,ctx){ + var segmentTotal = 0; + + //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge. + var pieRadius = Min([height/2,width/2]) - 5; + + for (var i=0; i<data.length; i++){ + segmentTotal += data[i].value; + } + + + animationLoop(config,null,drawPieSegments,ctx); + + function drawPieSegments (animationDecimal){ + var cumulativeAngle = -Math.PI/2, + scaleAnimation = 1, + rotateAnimation = 1; + if (config.animation) { + if (config.animateScale) { + scaleAnimation = animationDecimal; + } + if (config.animateRotate){ + rotateAnimation = animationDecimal; + } + } + for (var i=0; i<data.length; i++){ + var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2)); + ctx.beginPath(); + ctx.arc(width/2,height/2,scaleAnimation * pieRadius,cumulativeAngle,cumulativeAngle + segmentAngle); + ctx.lineTo(width/2,height/2); + ctx.closePath(); + ctx.fillStyle = data[i].color; + ctx.fill(); + + if(config.segmentShowStroke){ + ctx.lineWidth = config.segmentStrokeWidth; + ctx.strokeStyle = config.segmentStrokeColor; + ctx.stroke(); + } + cumulativeAngle += segmentAngle; + } + } + } + + var Doughnut = function(data,config,ctx){ + var segmentTotal = 0; + + //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge. + var doughnutRadius = Min([height/2,width/2]) - 5; + + var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100); + + for (var i=0; i<data.length; i++){ + segmentTotal += data[i].value; + } + + + animationLoop(config,null,drawPieSegments,ctx); + + + function drawPieSegments (animationDecimal){ + var cumulativeAngle = -Math.PI/2, + scaleAnimation = 1, + rotateAnimation = 1; + if (config.animation) { + if (config.animateScale) { + scaleAnimation = animationDecimal; + } + if (config.animateRotate){ + rotateAnimation = animationDecimal; + } + } + for (var i=0; i<data.length; i++){ + var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2)); + ctx.beginPath(); + ctx.arc(width/2,height/2,scaleAnimation * doughnutRadius,cumulativeAngle,cumulativeAngle + segmentAngle,false); + ctx.arc(width/2,height/2,scaleAnimation * cutoutRadius,cumulativeAngle + segmentAngle,cumulativeAngle,true); + ctx.closePath(); + ctx.fillStyle = data[i].color; + ctx.fill(); + + if(config.segmentShowStroke){ + ctx.lineWidth = config.segmentStrokeWidth; + ctx.strokeStyle = config.segmentStrokeColor; + ctx.stroke(); + } + cumulativeAngle += segmentAngle; + } + } + + + + } + + var Line = function(data,config,ctx){ + var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY, rotateLabels = 0; + + calculateDrawingSizes(); + + valueBounds = getValueBounds(); + //Check and set the scale + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : ""; + if (!config.scaleOverride){ + + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } + + scaleHop = Math.floor(scaleHeight/calculatedScale.steps); + calculateXAxisSize(); + animationLoop(config,drawScale,drawLines,ctx); + + function drawLines(animPc){ + for (var i=0; i<data.datasets.length; i++){ + ctx.strokeStyle = data.datasets[i].strokeColor; + ctx.lineWidth = config.datasetStrokeWidth; + ctx.beginPath(); + ctx.moveTo(yAxisPosX, xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop))) + + for (var j=1; j<data.datasets[i].data.length; j++){ + if (config.bezierCurve){ + ctx.bezierCurveTo(xPos(j-0.5),yPos(i,j-1),xPos(j-0.5),yPos(i,j),xPos(j),yPos(i,j)); + } + else{ + ctx.lineTo(xPos(j),yPos(i,j)); + } + } + ctx.stroke(); + if (config.datasetFill){ + ctx.lineTo(yAxisPosX + (valueHop*(data.datasets[i].data.length-1)),xAxisPosY); + ctx.lineTo(yAxisPosX,xAxisPosY); + ctx.closePath(); + ctx.fillStyle = data.datasets[i].fillColor; + ctx.fill(); + } + else{ + ctx.closePath(); + } + if(config.pointDot){ + ctx.fillStyle = data.datasets[i].pointColor; + ctx.strokeStyle = data.datasets[i].pointStrokeColor; + ctx.lineWidth = config.pointDotStrokeWidth; + for (var k=0; k<data.datasets[i].data.length; k++){ + ctx.beginPath(); + ctx.arc(yAxisPosX + (valueHop *k),xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,0,Math.PI*2,true); + ctx.fill(); + ctx.stroke(); + } + } + } + + function yPos(dataSet,iteration){ + return xAxisPosY - animPc*(calculateOffset(data.datasets[dataSet].data[iteration],calculatedScale,scaleHop)); + } + function xPos(iteration){ + return yAxisPosX + (valueHop * iteration); + } + } + function drawScale(){ + //X axis line + ctx.lineWidth = config.scaleLineWidth; + ctx.strokeStyle = config.scaleLineColor; + ctx.beginPath(); + ctx.moveTo(width-widestXLabel/2+5,xAxisPosY); + ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY); + ctx.stroke(); + + + if (rotateLabels > 0){ + ctx.save(); + ctx.textAlign = "right"; + } + else{ + ctx.textAlign = "center"; + } + ctx.fillStyle = config.scaleFontColor; + for (var i=0; i<data.labels.length; i++){ + ctx.save(); + if (rotateLabels > 0){ + ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize); + ctx.rotate(-(rotateLabels * (Math.PI/180))); + ctx.fillText(data.labels[i], 0,0); + ctx.restore(); + } + + else{ + ctx.fillText(data.labels[i], yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize+3); + } + + ctx.beginPath(); + ctx.moveTo(yAxisPosX + i * valueHop, xAxisPosY+3); + + //Check i isnt 0, so we dont go over the Y axis twice. + if(config.scaleShowGridLines && i>0){ + ctx.lineWidth = config.scaleGridLineWidth; + ctx.strokeStyle = config.scaleGridLineColor; + ctx.lineTo(yAxisPosX + i * valueHop, 5); + } + else{ + ctx.lineTo(yAxisPosX + i * valueHop, xAxisPosY+3); + } + ctx.stroke(); + } + + //Y axis + ctx.lineWidth = config.scaleLineWidth; + ctx.strokeStyle = config.scaleLineColor; + ctx.beginPath(); + ctx.moveTo(yAxisPosX,xAxisPosY+5); + ctx.lineTo(yAxisPosX,5); + ctx.stroke(); + + ctx.textAlign = "right"; + ctx.textBaseline = "middle"; + for (var j=0; j<calculatedScale.steps; j++){ + ctx.beginPath(); + ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop)); + if (config.scaleShowGridLines){ + ctx.lineWidth = config.scaleGridLineWidth; + ctx.strokeStyle = config.scaleGridLineColor; + ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop)); + } + else{ + ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop)); + } + + ctx.stroke(); + + if (config.scaleShowLabels){ + ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop)); + } + } + + + } + function calculateXAxisSize(){ + var longestText = 1; + //if we are showing the labels + if (config.scaleShowLabels){ + ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; + for (var i=0; i<calculatedScale.labels.length; i++){ + var measuredText = ctx.measureText(calculatedScale.labels[i]).width; + longestText = (measuredText > longestText)? measuredText : longestText; + } + //Add a little extra padding from the y axis + longestText +=10; + } + xAxisLength = width - longestText - widestXLabel; + valueHop = Math.floor(xAxisLength/(data.labels.length-1)); + + yAxisPosX = width-widestXLabel/2-xAxisLength; + xAxisPosY = scaleHeight + config.scaleFontSize/2; + } + function calculateDrawingSizes(){ + maxSize = height; + + //Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees. + ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; + widestXLabel = 1; + for (var i=0; i<data.labels.length; i++){ + var textLength = ctx.measureText(data.labels[i]).width; + //If the text length is longer - make that equal to longest text! + widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel; + } + if (width/data.labels.length < widestXLabel){ + rotateLabels = 45; + if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){ + rotateLabels = 90; + maxSize -= widestXLabel; + } + else{ + maxSize -= Math.sin(rotateLabels) * widestXLabel; + } + } + else{ + maxSize -= config.scaleFontSize; + } + + //Add a little padding between the x line and the text + maxSize -= 5; + + + labelHeight = config.scaleFontSize; + + maxSize -= labelHeight; + //Set 5 pixels greater than the font size to allow for a little padding from the X axis. + + scaleHeight = maxSize; + + //Then get the area above we can safely draw on. + + } + function getValueBounds() { + var upperValue = Number.MIN_VALUE; + var lowerValue = Number.MAX_VALUE; + for (var i=0; i<data.datasets.length; i++){ + for (var j=0; j<data.datasets[i].data.length; j++){ + if ( data.datasets[i].data[j] > upperValue) { upperValue = data.datasets[i].data[j] }; + if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] }; + } + }; + + var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66))); + var minSteps = Math.floor((scaleHeight / labelHeight*0.5)); + + return { + maxValue : upperValue, + minValue : lowerValue, + maxSteps : maxSteps, + minSteps : minSteps + }; + + + } + + + } + + var Bar = function(data,config,ctx){ + var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY,barWidth, rotateLabels = 0; + + calculateDrawingSizes(); + + valueBounds = getValueBounds(); + //Check and set the scale + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : ""; + if (!config.scaleOverride){ + + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } + + scaleHop = Math.floor(scaleHeight/calculatedScale.steps); + calculateXAxisSize(); + animationLoop(config,drawScale,drawBars,ctx); + + function drawBars(animPc){ + ctx.lineWidth = config.barStrokeWidth; + for (var i=0; i<data.datasets.length; i++){ + ctx.fillStyle = data.datasets[i].fillColor; + ctx.strokeStyle = data.datasets[i].strokeColor; + for (var j=0; j<data.datasets[i].data.length; j++){ + var barOffset = yAxisPosX + config.barValueSpacing + valueHop*j + barWidth*i + config.barDatasetSpacing*i + config.barStrokeWidth*i; + + ctx.beginPath(); + ctx.moveTo(barOffset, xAxisPosY); + ctx.lineTo(barOffset, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2)); + ctx.lineTo(barOffset + barWidth, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2)); + ctx.lineTo(barOffset + barWidth, xAxisPosY); + if(config.barShowStroke){ + ctx.stroke(); + } + ctx.closePath(); + ctx.fill(); + } + } + + } + function drawScale(){ + //X axis line + ctx.lineWidth = config.scaleLineWidth; + ctx.strokeStyle = config.scaleLineColor; + ctx.beginPath(); + ctx.moveTo(width-widestXLabel/2+5,xAxisPosY); + ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY); + ctx.stroke(); + + + if (rotateLabels > 0){ + ctx.save(); + ctx.textAlign = "right"; + } + else{ + ctx.textAlign = "center"; + } + ctx.fillStyle = config.scaleFontColor; + for (var i=0; i<data.labels.length; i++){ + ctx.save(); + if (rotateLabels > 0){ + ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize); + ctx.rotate(-(rotateLabels * (Math.PI/180))); + ctx.fillText(data.labels[i], 0,0); + ctx.restore(); + } + + else{ + ctx.fillText(data.labels[i], yAxisPosX + i*valueHop + valueHop/2,xAxisPosY + config.scaleFontSize+3); + } + + ctx.beginPath(); + ctx.moveTo(yAxisPosX + (i+1) * valueHop, xAxisPosY+3); + + //Check i isnt 0, so we dont go over the Y axis twice. + ctx.lineWidth = config.scaleGridLineWidth; + ctx.strokeStyle = config.scaleGridLineColor; + ctx.lineTo(yAxisPosX + (i+1) * valueHop, 5); + ctx.stroke(); + } + + //Y axis + ctx.lineWidth = config.scaleLineWidth; + ctx.strokeStyle = config.scaleLineColor; + ctx.beginPath(); + ctx.moveTo(yAxisPosX,xAxisPosY+5); + ctx.lineTo(yAxisPosX,5); + ctx.stroke(); + + ctx.textAlign = "right"; + ctx.textBaseline = "middle"; + for (var j=0; j<calculatedScale.steps; j++){ + ctx.beginPath(); + ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop)); + if (config.scaleShowGridLines){ + ctx.lineWidth = config.scaleGridLineWidth; + ctx.strokeStyle = config.scaleGridLineColor; + ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop)); + } + else{ + ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop)); + } + + ctx.stroke(); + if (config.scaleShowLabels){ + ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop)); + } + } + + + } + function calculateXAxisSize(){ + var longestText = 1; + //if we are showing the labels + if (config.scaleShowLabels){ + ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; + for (var i=0; i<calculatedScale.labels.length; i++){ + var measuredText = ctx.measureText(calculatedScale.labels[i]).width; + longestText = (measuredText > longestText)? measuredText : longestText; + } + //Add a little extra padding from the y axis + longestText +=10; + } + xAxisLength = width - longestText - widestXLabel; + valueHop = Math.floor(xAxisLength/(data.labels.length)); + + barWidth = (valueHop - config.scaleGridLineWidth*2 - (config.barValueSpacing*2) - (config.barDatasetSpacing*data.datasets.length-1) - ((config.barStrokeWidth/2)*data.datasets.length-1))/data.datasets.length; + + yAxisPosX = width-widestXLabel/2-xAxisLength; + xAxisPosY = scaleHeight + config.scaleFontSize/2; + } + function calculateDrawingSizes(){ + maxSize = height; + + //Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees. + ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; + widestXLabel = 1; + for (var i=0; i<data.labels.length; i++){ + var textLength = ctx.measureText(data.labels[i]).width; + //If the text length is longer - make that equal to longest text! + widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel; + } + if (width/data.labels.length < widestXLabel){ + rotateLabels = 45; + if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){ + rotateLabels = 90; + maxSize -= widestXLabel; + } + else{ + maxSize -= Math.sin(rotateLabels) * widestXLabel; + } + } + else{ + maxSize -= config.scaleFontSize; + } + + //Add a little padding between the x line and the text + maxSize -= 5; + + + labelHeight = config.scaleFontSize; + + maxSize -= labelHeight; + //Set 5 pixels greater than the font size to allow for a little padding from the X axis. + + scaleHeight = maxSize; + + //Then get the area above we can safely draw on. + + } + function getValueBounds() { + var upperValue = Number.MIN_VALUE; + var lowerValue = Number.MAX_VALUE; + for (var i=0; i<data.datasets.length; i++){ + for (var j=0; j<data.datasets[i].data.length; j++){ + if ( data.datasets[i].data[j] > upperValue) { upperValue = data.datasets[i].data[j] }; + if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] }; + } + }; + + var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66))); + var minSteps = Math.floor((scaleHeight / labelHeight*0.5)); + + return { + maxValue : upperValue, + minValue : lowerValue, + maxSteps : maxSteps, + minSteps : minSteps + }; + + + } + } + + function calculateOffset(val,calculatedScale,scaleHop){ + var outerValue = calculatedScale.steps * calculatedScale.stepValue; + var adjustedValue = val - calculatedScale.graphMin; + var scalingFactor = CapValue(adjustedValue/outerValue,1,0); + return (scaleHop*calculatedScale.steps) * scalingFactor; + } + + function animationLoop(config,drawScale,drawData,ctx){ + var animFrameAmount = (config.animation)? 1/CapValue(config.animationSteps,Number.MAX_VALUE,1) : 1, + easingFunction = animationOptions[config.animationEasing], + percentAnimComplete =(config.animation)? 0 : 1; + + + + if (typeof drawScale !== "function") drawScale = function(){}; + + requestAnimFrame(animLoop); + + function animateFrame(){ + var easeAdjustedAnimationPercent =(config.animation)? CapValue(easingFunction(percentAnimComplete),null,0) : 1; + clear(ctx); + if(config.scaleOverlay){ + drawData(easeAdjustedAnimationPercent); + drawScale(); + } else { + drawScale(); + drawData(easeAdjustedAnimationPercent); + } + } + function animLoop(){ + //We need to check if the animation is incomplete (less than 1), or complete (1). + percentAnimComplete += animFrameAmount; + animateFrame(); + //Stop the loop continuing forever + if (percentAnimComplete <= 1){ + requestAnimFrame(animLoop); + } + else{ + if (typeof config.onAnimationComplete == "function") config.onAnimationComplete(); + } + + } + + } + + //Declare global functions to be called within this namespace here. + + + // shim layer with setTimeout fallback + var requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback) { + window.setTimeout(callback, 1000 / 60); + }; + })(); + + function calculateScale(drawingHeight,maxSteps,minSteps,maxValue,minValue,labelTemplateString){ + var graphMin,graphMax,graphRange,stepValue,numberOfSteps,valueRange,rangeOrderOfMagnitude,decimalNum; + + valueRange = maxValue - minValue; + + rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange); + + graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude); + + graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude); + + graphRange = graphMax - graphMin; + + stepValue = Math.pow(10, rangeOrderOfMagnitude); + + numberOfSteps = Math.round(graphRange / stepValue); + + //Compare number of steps to the max and min for that size graph, and add in half steps if need be. + while(numberOfSteps < minSteps || numberOfSteps > maxSteps) { + if (numberOfSteps < minSteps){ + stepValue /= 2; + numberOfSteps = Math.round(graphRange/stepValue); + } + else{ + stepValue *=2; + numberOfSteps = Math.round(graphRange/stepValue); + } + }; + + var labels = []; + populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue); + + return { + steps : numberOfSteps, + stepValue : stepValue, + graphMin : graphMin, + labels : labels + + } + + function calculateOrderOfMagnitude(val){ + return Math.floor(Math.log(val) / Math.LN10); + } + + + } + + //Populate an array of all the labels by interpolating the string. + function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) { + if (labelTemplateString) { + //Fix floating point errors by setting to fixed the on the same decimal as the stepValue. + for (var i = 1; i < numberOfSteps + 1; i++) { + labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))})); + } + } + } + + //Max value from array + function Max( array ){ + return Math.max.apply( Math, array ); + }; + //Min value from array + function Min( array ){ + return Math.min.apply( Math, array ); + }; + //Default if undefined + function Default(userDeclared,valueIfFalse){ + if(!userDeclared){ + return valueIfFalse; + } else { + return userDeclared; + } + }; + //Is a number function + function isNumber(n) { + return !isNaN(parseFloat(n)) && isFinite(n); + } + //Apply cap a value at a high or low number + function CapValue(valueToCap, maxValue, minValue){ + if(isNumber(maxValue)) { + if( valueToCap > maxValue ) { + return maxValue; + } + } + if(isNumber(minValue)){ + if ( valueToCap < minValue ){ + return minValue; + } + } + return valueToCap; + } + function getDecimalPlaces (num){ + var numberOfDecimalPlaces; + if (num%1!=0){ + return num.toString().split(".")[1].length + } + else{ + return 0; + } + + } + + function mergeChartConfig(defaults,userDefined){ + var returnObj = {}; + for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; } + for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; } + return returnObj; + } + + //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/ + var cache = {}; + + function tmpl(str, data){ + // Figure out if we're getting a template, or if we need to + // load the template - and be sure to cache the result. + var fn = !/\W/.test(str) ? + cache[str] = cache[str] || + tmpl(document.getElementById(str).innerHTML) : + + // Generate a reusable function that will serve as a template + // generator (and which will be cached). + new Function("obj", + "var p=[],print=function(){p.push.apply(p,arguments);};" + + + // Introduce the data as local variables using with(){} + "with(obj){p.push('" + + + // Convert the template into pure JavaScript + str + .replace(/[\r\t\n]/g, " ") + .split("<%").join("\t") + .replace(/((^|%>)[^\t]*)'/g, "$1\r") + .replace(/\t=(.*?)%>/g, "',$1,'") + .split("\t").join("');") + .split("%>").join("p.push('") + .split("\r").join("\\'") + + "');}return p.join('');"); + + // Provide some basic currying to the user + return data ? fn( data ) : fn; + }; +} + + http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/39a1367b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/dashboard.js ---------------------------------------------------------------------- diff --git a/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/dashboard.js b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/dashboard.js index e69de29..eb9d578 100644 --- a/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/dashboard.js +++ b/contrib/blur-console/src/main/resources/org/apache/blur/console/webapp/js/dashboard.js @@ -0,0 +1,3 @@ +blurApp.controller('DashboardCtrl', function($scope) { + +}) \ No newline at end of file
