/*-----------------Rickshaw.js---------------------*/ /* jshint -W079 */ var Rickshaw = { namespace: function(namespace, obj) { var parts = namespace.split('.'); var parent = Rickshaw; for (var i = 1, length = parts.length; i < length; i++) { var currentPart = parts[i]; parent[currentPart] = parent[currentPart] || {}; parent = parent[currentPart]; } return parent; }, keys: function(obj) { var keys = []; for (var key in obj) keys.push(key); return keys; }, extend: function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; }, clone: function(obj) { return JSON.parse(JSON.stringify(obj)); } }; /*-----------------rickshaw.min.js---------------------*/ (function(root,factory){if(typeof define==="function"&&define.amd){define(["d3"],function(d3){return root.Rickshaw=factory(d3)})}else if(typeof exports==="object"){module.exports=factory(require("d3"))}else{root.Rickshaw=factory(d3)}})(this,function(d3){var Rickshaw={namespace:function(namespace,obj){var parts=namespace.split(".");var parent=Rickshaw;for(var i=1,length=parts.length;i0){var x=s.data[0].x;var y=s.data[0].y;if(typeof x!="number"||typeof y!="number"&&y!==null){throw"x and y properties of points should be numbers instead of "+typeof x+" and "+typeof y}}if(s.data.length>=3){if(s.data[2].xthis.window.xMax)isInRange=false;return isInRange}return true};this.onUpdate=function(callback){this.updateCallbacks.push(callback)};this.onConfigure=function(callback){this.configureCallbacks.push(callback)};this.registerRenderer=function(renderer){this._renderers=this._renderers||{};this._renderers[renderer.name]=renderer};this.configure=function(args){this.config=this.config||{};if(args.width||args.height){this.setSize(args)}Rickshaw.keys(this.defaults).forEach(function(k){this.config[k]=k in args?args[k]:k in this?this[k]:this.defaults[k]},this);Rickshaw.keys(this.config).forEach(function(k){this[k]=this.config[k]},this);if("stack"in args)args.unstack=!args.stack;var renderer=args.renderer||this.renderer&&this.renderer.name||"stack";this.setRenderer(renderer,args);this.configureCallbacks.forEach(function(callback){callback(args)})};this.setRenderer=function(r,args){if(typeof r=="function"){this.renderer=new r({graph:self});this.registerRenderer(this.renderer)}else{if(!this._renderers[r]){throw"couldn't find renderer "+r}this.renderer=this._renderers[r]}if(typeof args=="object"){this.renderer.configure(args)}};this.setSize=function(args){args=args||{};if(typeof window!==undefined){var style=window.getComputedStyle(this.element,null);var elementWidth=parseInt(style.getPropertyValue("width"),10);var elementHeight=parseInt(style.getPropertyValue("height"),10)}this.width=args.width||elementWidth||400;this.height=args.height||elementHeight||250;this.vis&&this.vis.attr("width",this.width).attr("height",this.height)};this.initialize(args)};Rickshaw.namespace("Rickshaw.Fixtures.Color");Rickshaw.Fixtures.Color=function(){this.schemes={};this.schemes.spectrum14=["#ecb796","#dc8f70","#b2a470","#92875a","#716c49","#d2ed82","#bbe468","#a1d05d","#e7cbe6","#d8aad6","#a888c2","#9dc2d3","#649eb9","#387aa3"].reverse();this.schemes.spectrum2000=["#57306f","#514c76","#646583","#738394","#6b9c7d","#84b665","#a7ca50","#bfe746","#e2f528","#fff726","#ecdd00","#d4b11d","#de8800","#de4800","#c91515","#9a0000","#7b0429","#580839","#31082b"];this.schemes.spectrum2001=["#2f243f","#3c2c55","#4a3768","#565270","#6b6b7c","#72957f","#86ad6e","#a1bc5e","#b8d954","#d3e04e","#ccad2a","#cc8412","#c1521d","#ad3821","#8a1010","#681717","#531e1e","#3d1818","#320a1b"];this.schemes.classic9=["#423d4f","#4a6860","#848f39","#a2b73c","#ddcb53","#c5a32f","#7d5836","#963b20","#7c2626","#491d37","#2f254a"].reverse();this.schemes.httpStatus={503:"#ea5029",502:"#d23f14",500:"#bf3613",410:"#efacea",409:"#e291dc",403:"#f457e8",408:"#e121d2",401:"#b92dae",405:"#f47ceb",404:"#a82a9f",400:"#b263c6",301:"#6fa024",302:"#87c32b",307:"#a0d84c",304:"#28b55c",200:"#1a4f74",206:"#27839f",201:"#52adc9",202:"#7c979f",203:"#a5b8bd",204:"#c1cdd1"};this.schemes.colorwheel=["#b5b6a9","#858772","#785f43","#96557e","#4682b4","#65b9ac","#73c03a","#cb513a"].reverse();this.schemes.cool=["#5e9d2f","#73c03a","#4682b4","#7bc3b8","#a9884e","#c1b266","#a47493","#c09fb5"];this.schemes.munin=["#00cc00","#0066b3","#ff8000","#ffcc00","#330099","#990099","#ccff00","#ff0000","#808080","#008f00","#00487d","#b35a00","#b38f00","#6b006b","#8fb300","#b30000","#bebebe","#80ff80","#80c9ff","#ffc080","#ffe680","#aa80ff","#ee00cc","#ff8080","#666600","#ffbfff","#00ffcc","#cc6699","#999900"]};Rickshaw.namespace("Rickshaw.Fixtures.RandomData");Rickshaw.Fixtures.RandomData=function(timeInterval){var addData;timeInterval=timeInterval||1;var lastRandomValue=200;var timeBase=Math.floor((new Date).getTime()/1e3);this.addData=function(data){var randomValue=Math.random()*100+15+lastRandomValue;var index=data[0].length;var counter=1;data.forEach(function(series){var randomVariance=Math.random()*20;var v=randomValue/25+counter++ +(Math.cos(index*counter*11/960)+2)*15+(Math.cos(index/7)+2)*7+(Math.cos(index/17)+2)*1;series.push({x:index*timeInterval+timeBase,y:v+randomVariance})});lastRandomValue=randomValue*.85};this.removeData=function(data){data.forEach(function(series){series.shift()});timeBase+=timeInterval}};Rickshaw.namespace("Rickshaw.Fixtures.Time");Rickshaw.Fixtures.Time=function(){var self=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];this.units=[{name:"decade",seconds:86400*365.25*10,formatter:function(d){return parseInt(d.getUTCFullYear()/10,10)*10}},{name:"year",seconds:86400*365.25,formatter:function(d){return d.getUTCFullYear()}},{name:"month",seconds:86400*30.5,formatter:function(d){return self.months[d.getUTCMonth()]}},{name:"week",seconds:86400*7,formatter:function(d){return self.formatDate(d)}},{name:"day",seconds:86400,formatter:function(d){return d.getUTCDate()}},{name:"6 hour",seconds:3600*6,formatter:function(d){return self.formatTime(d)}},{name:"hour",seconds:3600,formatter:function(d){return self.formatTime(d)}},{name:"15 minute",seconds:60*15,formatter:function(d){return self.formatTime(d)}},{name:"minute",seconds:60,formatter:function(d){return d.getUTCMinutes()}},{name:"15 second",seconds:15,formatter:function(d){return d.getUTCSeconds()+"s"}},{name:"second",seconds:1,formatter:function(d){return d.getUTCSeconds()+"s"}},{name:"decisecond",seconds:1/10,formatter:function(d){return d.getUTCMilliseconds()+"ms"}},{name:"centisecond",seconds:1/100,formatter:function(d){return d.getUTCMilliseconds()+"ms"}}];this.unit=function(unitName){return this.units.filter(function(unit){return unitName==unit.name}).shift()};this.formatDate=function(d){return d3.time.format("%b %e")(d)};this.formatTime=function(d){return d.toUTCString().match(/(\d+:\d+):/)[1]};this.ceil=function(time,unit){var date,floor,year;if(unit.name=="month"){date=new Date(time*1e3);floor=Date.UTC(date.getUTCFullYear(),date.getUTCMonth())/1e3;if(floor==time)return time;year=date.getUTCFullYear();var month=date.getUTCMonth();if(month==11){month=0;year=year+1}else{month+=1}return Date.UTC(year,month)/1e3}if(unit.name=="year"){date=new Date(time*1e3);floor=Date.UTC(date.getUTCFullYear(),0)/1e3;if(floor==time)return time;year=date.getUTCFullYear()+1;return Date.UTC(year,0)/1e3}return Math.ceil(time/unit.seconds)*unit.seconds}};Rickshaw.namespace("Rickshaw.Fixtures.Time.Local");Rickshaw.Fixtures.Time.Local=function(){var self=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];this.units=[{name:"decade",seconds:86400*365.25*10,formatter:function(d){return parseInt(d.getFullYear()/10,10)*10}},{name:"year",seconds:86400*365.25,formatter:function(d){return d.getFullYear()}},{name:"month",seconds:86400*30.5,formatter:function(d){return self.months[d.getMonth()]}},{name:"week",seconds:86400*7,formatter:function(d){return self.formatDate(d)}},{name:"day",seconds:86400,formatter:function(d){return d.getDate()}},{name:"6 hour",seconds:3600*6,formatter:function(d){return self.formatTime(d)}},{name:"hour",seconds:3600,formatter:function(d){return self.formatTime(d)}},{name:"15 minute",seconds:60*15,formatter:function(d){return self.formatTime(d)}},{name:"minute",seconds:60,formatter:function(d){return d.getMinutes()}},{name:"15 second",seconds:15,formatter:function(d){return d.getSeconds()+"s"}},{name:"second",seconds:1,formatter:function(d){return d.getSeconds()+"s"}},{name:"decisecond",seconds:1/10,formatter:function(d){return d.getMilliseconds()+"ms"}},{name:"centisecond",seconds:1/100,formatter:function(d){return d.getMilliseconds()+"ms"}}];this.unit=function(unitName){return this.units.filter(function(unit){return unitName==unit.name}).shift()};this.formatDate=function(d){return d3.time.format("%b %e")(d)};this.formatTime=function(d){return d.toString().match(/(\d+:\d+):/)[1]};this.ceil=function(time,unit){var date,floor,year;if(unit.name=="day"){var nearFuture=new Date((time+unit.seconds-1)*1e3);var rounded=new Date(0);rounded.setMilliseconds(0);rounded.setSeconds(0);rounded.setMinutes(0);rounded.setHours(0);rounded.setDate(nearFuture.getDate());rounded.setMonth(nearFuture.getMonth());rounded.setFullYear(nearFuture.getFullYear());return rounded.getTime()/1e3}if(unit.name=="month"){date=new Date(time*1e3);floor=new Date(date.getFullYear(),date.getMonth()).getTime()/1e3;if(floor==time)return time;year=date.getFullYear();var month=date.getMonth();if(month==11){month=0;year=year+1}else{month+=1}return new Date(year,month).getTime()/1e3}if(unit.name=="year"){date=new Date(time*1e3);floor=new Date(date.getUTCFullYear(),0).getTime()/1e3;if(floor==time)return time;year=date.getFullYear()+1;return new Date(year,0).getTime()/1e3}return Math.ceil(time/unit.seconds)*unit.seconds}};Rickshaw.namespace("Rickshaw.Fixtures.Number");Rickshaw.Fixtures.Number.formatKMBT=function(y){var abs_y=Math.abs(y);if(abs_y>=1e12){return y/1e12+"T"}else if(abs_y>=1e9){return y/1e9+"B"}else if(abs_y>=1e6){return y/1e6+"M"}else if(abs_y>=1e3){return y/1e3+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y===0){return""}else{return y}};Rickshaw.Fixtures.Number.formatBase1024KMGTP=function(y){var abs_y=Math.abs(y);if(abs_y>=0x4000000000000){return y/0x4000000000000+"P"}else if(abs_y>=1099511627776){return y/1099511627776+"T"}else if(abs_y>=1073741824){return y/1073741824+"G"}else if(abs_y>=1048576){return y/1048576+"M"}else if(abs_y>=1024){return y/1024+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y===0){return""}else{return y}};Rickshaw.namespace("Rickshaw.Color.Palette");Rickshaw.Color.Palette=function(args){var color=new Rickshaw.Fixtures.Color;args=args||{};this.schemes={};this.scheme=color.schemes[args.scheme]||args.scheme||color.schemes.colorwheel;this.runningIndex=0;this.generatorIndex=0;if(args.interpolatedStopCount){var schemeCount=this.scheme.length-1;var i,j,scheme=[];for(i=0;iself.graph.x.range()[1]){if(annotation.element){annotation.line.classList.add("offscreen");annotation.element.style.display="none"}annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.add("offscreen")});return}if(!annotation.element){var element=annotation.element=document.createElement("div");element.classList.add("annotation");this.elements.timeline.appendChild(element);element.addEventListener("click",function(e){element.classList.toggle("active");annotation.line.classList.toggle("active");annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.toggle("active")})},false)}annotation.element.style.left=left+"px";annotation.element.style.display="block";annotation.boxes.forEach(function(box){var element=box.element;if(!element){element=box.element=document.createElement("div");element.classList.add("content");element.innerHTML=box.content;annotation.element.appendChild(element);annotation.line=document.createElement("div");annotation.line.classList.add("annotation_line");self.graph.element.appendChild(annotation.line);if(box.end){box.rangeElement=document.createElement("div");box.rangeElement.classList.add("annotation_range");self.graph.element.appendChild(box.rangeElement)}}if(box.end){var annotationRangeStart=left;var annotationRangeEnd=Math.min(self.graph.x(box.end),self.graph.x.range()[1]);if(annotationRangeStart>annotationRangeEnd){annotationRangeEnd=left;annotationRangeStart=Math.max(self.graph.x(box.end),self.graph.x.range()[0])}var annotationRangeWidth=annotationRangeEnd-annotationRangeStart;box.rangeElement.style.left=annotationRangeStart+"px";box.rangeElement.style.width=annotationRangeWidth+"px";box.rangeElement.classList.remove("offscreen")}annotation.line.classList.remove("offscreen");annotation.line.style.left=left+"px"})},this)};this.graph.onUpdate(function(){self.update()})};Rickshaw.namespace("Rickshaw.Graph.Axis.Time");Rickshaw.Graph.Axis.Time=function(args){var self=this;this.graph=args.graph;this.elements=[];this.ticksTreatment=args.ticksTreatment||"plain";this.fixedTimeUnit=args.timeUnit;var time=args.timeFixture||new Rickshaw.Fixtures.Time;this.appropriateTimeUnit=function(){var unit;var units=time.units;var domain=this.graph.x.domain();var rangeSeconds=domain[1]-domain[0];units.forEach(function(u){if(Math.floor(rangeSeconds/u.seconds)>=2){unit=unit||u}});return unit||time.units[time.units.length-1]};this.tickOffsets=function(){var domain=this.graph.x.domain();var unit=this.fixedTimeUnit||this.appropriateTimeUnit();var count=Math.ceil((domain[1]-domain[0])/unit.seconds);var runningTick=domain[0];var offsets=[];for(var i=0;iself.graph.x.range()[1])return;var element=document.createElement("div");element.style.left=self.graph.x(o.value)+"px";element.classList.add("x_tick");element.classList.add(self.ticksTreatment);var title=document.createElement("div");title.classList.add("title");title.innerHTML=o.unit.formatter(new Date(o.value*1e3));element.appendChild(title);self.graph.element.appendChild(element);self.elements.push(element)})};this.graph.onUpdate(function(){self.render()})};Rickshaw.namespace("Rickshaw.Graph.Axis.X");Rickshaw.Graph.Axis.X=function(args){var self=this;var berthRate=.1;this.initialize=function(args){this.graph=args.graph;this.orientation=args.orientation||"top";this.pixelsPerTick=args.pixelsPerTick||75;if(args.ticks)this.staticTicks=args.ticks;if(args.tickValues)this.tickValues=args.tickValues;this.tickSize=args.tickSize||4;this.ticksTreatment=args.ticksTreatment||"plain";if(args.element){this.element=args.element;this._discoverSize(args.element,args);this.vis=d3.select(args.element).append("svg:svg").attr("height",this.height).attr("width",this.width).attr("class","rickshaw_graph x_axis_d3");this.element=this.vis[0][0];this.element.style.position="relative";this.setSize({width:args.width,height:args.height})}else{this.vis=this.graph.vis}this.graph.onUpdate(function(){self.render()})};this.setSize=function(args){args=args||{};if(!this.element)return;this._discoverSize(this.element.parentNode,args);this.vis.attr("height",this.height).attr("width",this.width*(1+berthRate));var berth=Math.floor(this.width*berthRate/2);this.element.style.left=-1*berth+"px"};this.render=function(){if(this._renderWidth!==undefined&&this.graph.width!==this._renderWidth)this.setSize({auto:true});var axis=d3.svg.axis().scale(this.graph.x).orient(this.orientation);axis.tickFormat(args.tickFormat||function(x){return x});if(this.tickValues)axis.tickValues(this.tickValues);this.ticks=this.staticTicks||Math.floor(this.graph.width/this.pixelsPerTick);var berth=Math.floor(this.width*berthRate/2)||0;var transform;if(this.orientation=="top"){var yOffset=this.height||this.graph.height;transform="translate("+berth+","+yOffset+")"}else{transform="translate("+berth+", 0)"}if(this.element){this.vis.selectAll("*").remove()}this.vis.append("svg:g").attr("class",["x_ticks_d3",this.ticksTreatment].join(" ")).attr("transform",transform).call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var gridSize=(this.orientation=="bottom"?1:-1)*this.graph.height;this.graph.vis.append("svg:g").attr("class","x_grid_d3").call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize)).selectAll("text").each(function(){this.parentNode.setAttribute("data-x-value",this.textContent)});this._renderHeight=this.graph.height};this._discoverSize=function(element,args){if(typeof window!=="undefined"){var style=window.getComputedStyle(element,null);var elementHeight=parseInt(style.getPropertyValue("height"),10);if(!args.auto){var elementWidth=parseInt(style.getPropertyValue("width"),10)}}this.width=(args.width||elementWidth||this.graph.width)*(1+berthRate);this.height=args.height||elementHeight||40};this.initialize(args)};Rickshaw.namespace("Rickshaw.Graph.Axis.Y");Rickshaw.Graph.Axis.Y=Rickshaw.Class.create({initialize:function(args){this.graph=args.graph;this.orientation=args.orientation||"right";this.pixelsPerTick=args.pixelsPerTick||75;if(args.ticks)this.staticTicks=args.ticks;if(args.tickValues)this.tickValues=args.tickValues;this.tickSize=args.tickSize||4;this.ticksTreatment=args.ticksTreatment||"plain";this.tickFormat=args.tickFormat||function(y){return y};this.berthRate=.1;if(args.element){this.element=args.element;this.vis=d3.select(args.element).append("svg:svg").attr("class","rickshaw_graph y_axis");this.element=this.vis[0][0];this.element.style.position="relative";this.setSize({width:args.width,height:args.height})}else{this.vis=this.graph.vis}var self=this;this.graph.onUpdate(function(){self.render()})},setSize:function(args){args=args||{};if(!this.element)return;if(typeof window!=="undefined"){var style=window.getComputedStyle(this.element.parentNode,null);var elementWidth=parseInt(style.getPropertyValue("width"),10);if(!args.auto){var elementHeight=parseInt(style.getPropertyValue("height"),10)}}this.width=args.width||elementWidth||this.graph.width*this.berthRate;this.height=args.height||elementHeight||this.graph.height;this.vis.attr("width",this.width).attr("height",this.height*(1+this.berthRate));var berth=this.height*this.berthRate;if(this.orientation=="left"){this.element.style.top=-1*berth+"px"}},render:function(){if(this._renderHeight!==undefined&&this.graph.height!==this._renderHeight)this.setSize({auto:true});this.ticks=this.staticTicks||Math.floor(this.graph.height/this.pixelsPerTick);var axis=this._drawAxis(this.graph.y);this._drawGrid(axis);this._renderHeight=this.graph.height},_drawAxis:function(scale){var axis=d3.svg.axis().scale(scale).orient(this.orientation);axis.tickFormat(this.tickFormat);if(this.tickValues)axis.tickValues(this.tickValues);if(this.orientation=="left"){var berth=this.height*this.berthRate;var transform="translate("+this.width+", "+berth+")"}if(this.element){this.vis.selectAll("*").remove()}this.vis.append("svg:g").attr("class",["y_ticks",this.ticksTreatment].join(" ")).attr("transform",transform).call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));return axis},_drawGrid:function(axis){var gridSize=(this.orientation=="right"?1:-1)*this.graph.width;this.graph.vis.append("svg:g").attr("class","y_grid").call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize)).selectAll("text").each(function(){this.parentNode.setAttribute("data-y-value",this.textContent) })}});Rickshaw.namespace("Rickshaw.Graph.Axis.Y.Scaled");Rickshaw.Graph.Axis.Y.Scaled=Rickshaw.Class.create(Rickshaw.Graph.Axis.Y,{initialize:function($super,args){if(typeof args.scale==="undefined"){throw new Error("Scaled requires scale")}this.scale=args.scale;if(typeof args.grid==="undefined"){this.grid=true}else{this.grid=args.grid}$super(args)},_drawAxis:function($super,scale){var domain=this.scale.domain();var renderDomain=this.graph.renderer.domain().y;var extents=[Math.min.apply(Math,domain),Math.max.apply(Math,domain)];var extentMap=d3.scale.linear().domain([0,1]).range(extents);var adjExtents=[extentMap(renderDomain[0]),extentMap(renderDomain[1])];var adjustment=d3.scale.linear().domain(extents).range(adjExtents);var adjustedScale=this.scale.copy().domain(domain.map(adjustment)).range(scale.range());return $super(adjustedScale)},_drawGrid:function($super,axis){if(this.grid){$super(axis)}}});Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Highlight");Rickshaw.Graph.Behavior.Series.Highlight=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;var colorSafe={};var activeLine=null;var disabledColor=args.disabledColor||function(seriesColor){return d3.interpolateRgb(seriesColor,d3.rgb("#d8d8d8"))(.8).toString()};this.addHighlightEvents=function(l){l.element.addEventListener("mouseover",function(e){if(activeLine)return;else activeLine=l;self.legend.lines.forEach(function(line){if(l===line){if(self.graph.renderer.unstack&&(line.series.renderer?line.series.renderer.unstack:true)){var seriesIndex=self.graph.series.indexOf(line.series);line.originalIndex=seriesIndex;var series=self.graph.series.splice(seriesIndex,1)[0];self.graph.series.push(series)}return}colorSafe[line.series.name]=colorSafe[line.series.name]||line.series.color;line.series.color=disabledColor(line.series.color)});self.graph.update()},false);l.element.addEventListener("mouseout",function(e){if(!activeLine)return;else activeLine=null;self.legend.lines.forEach(function(line){if(l===line&&line.hasOwnProperty("originalIndex")){var series=self.graph.series.pop();self.graph.series.splice(line.originalIndex,0,series);delete line.originalIndex}if(colorSafe[line.series.name]){line.series.color=colorSafe[line.series.name]}});self.graph.update()},false)};if(this.legend){this.legend.lines.forEach(function(l){self.addHighlightEvents(l)})}};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Order");Rickshaw.Graph.Behavior.Series.Order=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;if(typeof window.jQuery=="undefined"){throw"couldn't find jQuery at window.jQuery"}if(typeof window.jQuery.ui=="undefined"){throw"couldn't find jQuery UI at window.jQuery.ui"}jQuery(function(){jQuery(self.legend.list).sortable({containment:"parent",tolerance:"pointer",update:function(event,ui){var series=[];jQuery(self.legend.list).find("li").each(function(index,item){if(!item.series)return;series.push(item.series)});for(var i=self.graph.series.length-1;i>=0;i--){self.graph.series[i]=series.shift()}self.graph.update()}});jQuery(self.legend.list).disableSelection()});this.graph.onUpdate(function(){var h=window.getComputedStyle(self.legend.element).height;self.legend.element.style.height=h})};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle");Rickshaw.Graph.Behavior.Series.Toggle=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;this.addAnchor=function(line){var anchor=document.createElement("a");anchor.innerHTML="✔";anchor.classList.add("action");line.element.insertBefore(anchor,line.element.firstChild);anchor.onclick=function(e){if(line.series.disabled){line.series.enable();line.element.classList.remove("disabled")}else{if(this.graph.series.filter(function(s){return!s.disabled}).length<=1)return;line.series.disable();line.element.classList.add("disabled")}self.graph.update()}.bind(this);var label=line.element.getElementsByTagName("span")[0];label.onclick=function(e){var disableAllOtherLines=line.series.disabled;if(!disableAllOtherLines){for(var i=0;idomainX){dataIndex=Math.abs(domainX-data[i].x)0){alignables.forEach(function(el){el.classList.remove("left");el.classList.add("right")});var rightAlignError=this._calcLayoutError(alignables);if(rightAlignError>leftAlignError){alignables.forEach(function(el){el.classList.remove("right");el.classList.add("left")})}}if(typeof this.onRender=="function"){this.onRender(args)}},_calcLayoutError:function(alignables){var parentRect=this.element.parentNode.getBoundingClientRect();var error=0;var alignRight=alignables.forEach(function(el){var rect=el.getBoundingClientRect();if(!rect.width){return}if(rect.right>parentRect.right){error+=rect.right-parentRect.right}if(rect.left=self.previewWidth){frameAfterDrag[0]-=frameAfterDrag[1]-self.previewWidth;frameAfterDrag[1]=self.previewWidth}}self.graphs.forEach(function(graph){var domainScale=d3.scale.linear().interpolate(d3.interpolateNumber).domain([0,self.previewWidth]).range(graph.dataDomain());var windowAfterDrag=[domainScale(frameAfterDrag[0]),domainScale(frameAfterDrag[1])];self.slideCallbacks.forEach(function(callback){callback(graph,windowAfterDrag[0],windowAfterDrag[1])});if(frameAfterDrag[0]===0){windowAfterDrag[0]=undefined}if(frameAfterDrag[1]===self.previewWidth){windowAfterDrag[1]=undefined}graph.window.xMin=windowAfterDrag[0];graph.window.xMax=windowAfterDrag[1];graph.update()})}function onMousedown(){drag.target=d3.event.target;drag.start=self._getClientXFromEvent(d3.event,drag);self.frameBeforeDrag=self.currentFrame.slice();d3.event.preventDefault?d3.event.preventDefault():d3.event.returnValue=false;d3.select(document).on("mousemove.rickshaw_range_slider_preview",onMousemove);d3.select(document).on("mouseup.rickshaw_range_slider_preview",onMouseup);d3.select(document).on("touchmove.rickshaw_range_slider_preview",onMousemove);d3.select(document).on("touchend.rickshaw_range_slider_preview",onMouseup);d3.select(document).on("touchcancel.rickshaw_range_slider_preview",onMouseup)}function onMousedownLeftHandle(datum,index){drag.left=true;onMousedown()}function onMousedownRightHandle(datum,index){drag.right=true;onMousedown()}function onMousedownMiddleHandle(datum,index){drag.left=true;drag.right=true;drag.rigid=true;onMousedown()}function onMouseup(datum,index){d3.select(document).on("mousemove.rickshaw_range_slider_preview",null);d3.select(document).on("mouseup.rickshaw_range_slider_preview",null);d3.select(document).on("touchmove.rickshaw_range_slider_preview",null);d3.select(document).on("touchend.rickshaw_range_slider_preview",null);d3.select(document).on("touchcancel.rickshaw_range_slider_preview",null);delete self.frameBeforeDrag;drag.left=false;drag.right=false;drag.rigid=false}element.select("rect.left_handle").on("mousedown",onMousedownLeftHandle);element.select("rect.right_handle").on("mousedown",onMousedownRightHandle);element.select("rect.middle_handle").on("mousedown",onMousedownMiddleHandle);element.select("rect.left_handle").on("touchstart",onMousedownLeftHandle);element.select("rect.right_handle").on("touchstart",onMousedownRightHandle);element.select("rect.middle_handle").on("touchstart",onMousedownMiddleHandle)},_getClientXFromEvent:function(event,drag){switch(event.type){case"touchstart":case"touchmove":var touchList=event.changedTouches;var touch=null;for(var touchIndex=0;touchIndexyMax)yMax=y});if(!series.length)return;if(series[0].xxMax)xMax=series[series.length-1].x});xMin-=(xMax-xMin)*this.padding.left;xMax+=(xMax-xMin)*this.padding.right;yMin=this.graph.min==="auto"?yMin:this.graph.min||0;yMax=this.graph.max===undefined?yMax:this.graph.max;if(this.graph.min==="auto"||yMin<0){yMin-=(yMax-yMin)*this.padding.bottom}if(this.graph.max===undefined){yMax+=(yMax-yMin)*this.padding.top}return{x:[xMin,xMax],y:[yMin,yMax]}},render:function(args){args=args||{};var graph=this.graph;var series=args.series||graph.series;var vis=args.vis||graph.vis;vis.selectAll("*").remove();var data=series.filter(function(s){return!s.disabled}).map(function(s){return s.stack});var pathNodes=vis.selectAll("path.path").data(data).enter().append("svg:path").classed("path",true).attr("d",this.seriesPathFactory());if(this.stroke){var strokeNodes=vis.selectAll("path.stroke").data(data).enter().append("svg:path").classed("stroke",true).attr("d",this.seriesStrokeFactory())}var i=0;series.forEach(function(series){if(series.disabled)return;series.path=pathNodes[0][i];if(this.stroke)series.stroke=strokeNodes[0][i];this._styleSeries(series);i++},this)},_styleSeries:function(series){var fill=this.fill?series.color:"none";var stroke=this.stroke?series.color:"none";series.path.setAttribute("fill",fill);series.path.setAttribute("stroke",stroke);series.path.setAttribute("stroke-width",this.strokeWidth);if(series.className){d3.select(series.path).classed(series.className,true)}if(series.className&&this.stroke){d3.select(series.stroke).classed(series.className,true)}},configure:function(args){args=args||{};Rickshaw.keys(this.defaults()).forEach(function(key){if(!args.hasOwnProperty(key)){this[key]=this[key]||this.graph[key]||this.defaults()[key];return}if(typeof this.defaults()[key]=="object"){Rickshaw.keys(this.defaults()[key]).forEach(function(k){this[key][k]=args[key][k]!==undefined?args[key][k]:this[key][k]!==undefined?this[key][k]:this.defaults()[key][k]},this)}else{this[key]=args[key]!==undefined?args[key]:this[key]!==undefined?this[key]:this.graph[key]!==undefined?this.graph[key]:this.defaults()[key]}},this)},setStrokeWidth:function(strokeWidth){if(strokeWidth!==undefined){this.strokeWidth=strokeWidth}},setTension:function(tension){if(tension!==undefined){this.tension=tension}}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Line");Rickshaw.Graph.Renderer.Line=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"line",defaults:function($super){return Rickshaw.extend($super(),{unstack:true,fill:false,stroke:true})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.line().x(function(d){return graph.x(d.x)}).y(function(d){return graph.y(d.y)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Stack");Rickshaw.Graph.Renderer.Stack=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"stack",defaults:function($super){return Rickshaw.extend($super(),{fill:true,stroke:false,unstack:false})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.area().x(function(d){return graph.x(d.x)}).y0(function(d){return graph.y(d.y0)}).y1(function(d){return graph.y(d.y+d.y0)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Bar");Rickshaw.Graph.Renderer.Bar=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"bar",defaults:function($super){var defaults=Rickshaw.extend($super(),{gapSize:.05,unstack:false});delete defaults.tension;return defaults},initialize:function($super,args){args=args||{};this.gapSize=args.gapSize||this.gapSize;$super(args)},domain:function($super){var domain=$super();var frequentInterval=this._frequentInterval(this.graph.stackedData.slice(-1).shift());domain.x[1]+=Number(frequentInterval.magnitude);return domain},barWidth:function(series){var frequentInterval=this._frequentInterval(series.stack);var barWidth=this.graph.x.magnitude(frequentInterval.magnitude)*(1-this.gapSize);return barWidth},render:function(args){args=args||{};var graph=this.graph;var series=args.series||graph.series;var vis=args.vis||graph.vis;vis.selectAll("*").remove();var barWidth=this.barWidth(series.active()[0]);var barXOffset=0;var activeSeriesCount=series.filter(function(s){return!s.disabled}).length;var seriesBarWidth=this.unstack?barWidth/activeSeriesCount:barWidth;var transform=function(d){var matrix=[1,0,0,d.y<0?-1:1,0,d.y<0?graph.y.magnitude(Math.abs(d.y))*2:0];return"matrix("+matrix.join(",")+")"};series.forEach(function(series){if(series.disabled)return;var barWidth=this.barWidth(series);var nodes=vis.selectAll("path").data(series.stack.filter(function(d){return d.y!==null})).enter().append("svg:rect").attr("x",function(d){return graph.x(d.x)+barXOffset}).attr("y",function(d){return graph.y(d.y0+Math.abs(d.y))*(d.y<0?-1:1)}).attr("width",seriesBarWidth).attr("height",function(d){return graph.y.magnitude(Math.abs(d.y))}).attr("transform",transform);Array.prototype.forEach.call(nodes[0],function(n){n.setAttribute("fill",series.color)});if(this.unstack)barXOffset+=seriesBarWidth},this)},_frequentInterval:function(data){var intervalCounts={};for(var i=0;i0){this[0].data.forEach(function(plot){item.data.push({x:plot.x,y:0})})}else if(item.data.length===0){item.data.push({x:this.timeBase-(this.timeInterval||0),y:0})}this.push(item);if(this.legend){this.legend.addLine(this.itemByName(item.name))}},addData:function(data,x){var index=this.getIndex();Rickshaw.keys(data).forEach(function(name){if(!this.itemByName(name)){this.addItem({name:name})}},this);this.forEach(function(item){item.data.push({x:x||(index*this.timeInterval||1)+this.timeBase,y:data[item.name]||0})},this)},getIndex:function(){return this[0]&&this[0].data&&this[0].data.length?this[0].data.length:0},itemByName:function(name){for(var i=0;i1;i--){this.currentSize+=1;this.currentIndex+=1;this.forEach(function(item){item.data.unshift({x:((i-1)*this.timeInterval||1)+this.timeBase,y:0,i:i})},this)}}},addData:function($super,data,x){$super(data,x);this.currentSize+=1;this.currentIndex+=1;if(this.maxDataPoints!==undefined){while(this.currentSize>this.maxDataPoints){this.dropData()}}},dropData:function(){this.forEach(function(item){item.data.splice(0,1)});this.currentSize-=1},getIndex:function(){return this.currentIndex}});return Rickshaw}); /*-----------------Rickshaw.Class.js---------------------*/ (function(globalContext) { var _toString = Object.prototype.toString, NULL_TYPE = 'Null', UNDEFINED_TYPE = 'Undefined', BOOLEAN_TYPE = 'Boolean', NUMBER_TYPE = 'Number', STRING_TYPE = 'String', OBJECT_TYPE = 'Object', FUNCTION_CLASS = '[object Function]'; function isFunction(object) { return _toString.call(object) === FUNCTION_CLASS; } function extend(destination, source) { for (var property in source) if (source.hasOwnProperty(property)) // modify protect primitive slaughter destination[property] = source[property]; return destination; } function keys(object) { if (Type(object) !== OBJECT_TYPE) { throw new TypeError(); } var results = []; for (var property in object) { if (object.hasOwnProperty(property)) { results.push(property); } } return results; } function Type(o) { switch(o) { case null: return NULL_TYPE; case (void 0): return UNDEFINED_TYPE; } var type = typeof o; switch(type) { case 'boolean': return BOOLEAN_TYPE; case 'number': return NUMBER_TYPE; case 'string': return STRING_TYPE; } return OBJECT_TYPE; } function isUndefined(object) { return typeof object === "undefined"; } /* ------------------------------------ */ /* Import from Function.js */ /* ------------------------------------ */ var slice = Array.prototype.slice; function argumentNames(fn) { var names = fn.toString().match(/^[\s\(]*function[^(]*\(([^)]*)\)/)[1] .replace(/\/\/.*?[\r\n]|\/\*(?:.|[\r\n])*?\*\//g, '') .replace(/\s+/g, '').split(','); return names.length == 1 && !names[0] ? [] : names; } function wrap(fn, wrapper) { var __method = fn; return function() { var a = update([bind(__method, this)], arguments); return wrapper.apply(this, a); } } function update(array, args) { var arrayLength = array.length, length = args.length; while (length--) array[arrayLength + length] = args[length]; return array; } function merge(array, args) { array = slice.call(array, 0); return update(array, args); } function bind(fn, context) { if (arguments.length < 2 && isUndefined(arguments[0])) return this; var __method = fn, args = slice.call(arguments, 2); return function() { var a = merge(args, arguments); return __method.apply(context, a); } } /* ------------------------------------ */ /* Import from Prototype.js */ /* ------------------------------------ */ var emptyFunction = function(){}; var Class = (function() { // Some versions of JScript fail to enumerate over properties, names of which // correspond to non-enumerable properties in the prototype chain var IS_DONTENUM_BUGGY = (function(){ for (var p in { toString: 1 }) { // check actual property name, so that it works with augmented Object.prototype if (p === 'toString') return false; } return true; })(); function subclass() {}; function create() { var parent = null, properties = [].slice.apply(arguments); if (isFunction(properties[0])) parent = properties.shift(); function klass() { this.initialize.apply(this, arguments); } extend(klass, Class.Methods); klass.superclass = parent; klass.subclasses = []; if (parent) { subclass.prototype = parent.prototype; klass.prototype = new subclass; try { parent.subclasses.push(klass) } catch(e) {} } for (var i = 0, length = properties.length; i < length; i++) klass.addMethods(properties[i]); if (!klass.prototype.initialize) klass.prototype.initialize = emptyFunction; klass.prototype.constructor = klass; return klass; } function addMethods(source) { var ancestor = this.superclass && this.superclass.prototype, properties = keys(source); // IE6 doesn't enumerate `toString` and `valueOf` (among other built-in `Object.prototype`) properties, // Force copy if they're not Object.prototype ones. // Do not copy other Object.prototype.* for performance reasons if (IS_DONTENUM_BUGGY) { if (source.toString != Object.prototype.toString) properties.push("toString"); if (source.valueOf != Object.prototype.valueOf) properties.push("valueOf"); } for (var i = 0, length = properties.length; i < length; i++) { var property = properties[i], value = source[property]; if (ancestor && isFunction(value) && argumentNames(value)[0] == "$super") { var method = value; value = wrap((function(m) { return function() { return ancestor[m].apply(this, arguments); }; })(property), method); value.valueOf = bind(method.valueOf, method); value.toString = bind(method.toString, method); } this.prototype[property] = value; } return this; } return { create: create, Methods: { addMethods: addMethods } }; })(); if (globalContext.exports) { globalContext.exports.Class = Class; } else { globalContext.Class = Class; } })(Rickshaw); /*-------------- Rickshaw Compat Classlist -----------------*/ Rickshaw.namespace('Rickshaw.Compat.ClassList'); Rickshaw.Compat.ClassList = function() { /* adapted from http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) { (function (view) { "use strict"; var classListProp = "classList" , protoProp = "prototype" , elemCtrProto = (view.HTMLElement || view.Element)[protoProp] , objCtr = Object , strTrim = String[protoProp].trim || function () { return this.replace(/^\s+|\s+$/g, ""); } , arrIndexOf = Array[protoProp].indexOf || function (item) { var i = 0 , len = this.length ; for (; i < len; i++) { if (i in this && this[i] === item) { return i; } } return -1; } // Vendors: please allow content code to instantiate DOMExceptions , DOMEx = function (type, message) { this.name = type; this.code = DOMException[type]; this.message = message; } , checkTokenAndGetIndex = function (classList, token) { if (token === "") { throw new DOMEx( "SYNTAX_ERR" , "An invalid or illegal string was specified" ); } if (/\s/.test(token)) { throw new DOMEx( "INVALID_CHARACTER_ERR" , "String contains an invalid character" ); } return arrIndexOf.call(classList, token); } , ClassList = function (elem) { var trimmedClasses = strTrim.call(elem.className) , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] , i = 0 , len = classes.length ; for (; i < len; i++) { this.push(classes[i]); } this._updateClassName = function () { elem.className = this.toString(); }; } , classListProto = ClassList[protoProp] = [] , classListGetter = function () { return new ClassList(this); } ; // Most DOMException implementations don't allow calling DOMException's toString() // on non-DOMExceptions. Error's toString() is sufficient here. DOMEx[protoProp] = Error[protoProp]; classListProto.item = function (i) { return this[i] || null; }; classListProto.contains = function (token) { token += ""; return checkTokenAndGetIndex(this, token) !== -1; }; classListProto.add = function (token) { token += ""; if (checkTokenAndGetIndex(this, token) === -1) { this.push(token); this._updateClassName(); } }; classListProto.remove = function (token) { token += ""; var index = checkTokenAndGetIndex(this, token); if (index !== -1) { this.splice(index, 1); this._updateClassName(); } }; classListProto.toggle = function (token) { token += ""; if (checkTokenAndGetIndex(this, token) === -1) { this.add(token); } else { this.remove(token); } }; classListProto.toString = function () { return this.join(" "); }; if (objCtr.defineProperty) { var classListPropDesc = { get: classListGetter , enumerable: true , configurable: true }; try { objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); } catch (ex) { // IE 8 doesn't support enumerable:true if (ex.number === -0x7FF5EC54) { classListPropDesc.enumerable = false; objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); } } } else if (objCtr[protoProp].__defineGetter__) { elemCtrProto.__defineGetter__(classListProp, classListGetter); } }(window)); } }; if ( (typeof RICKSHAW_NO_COMPAT !== "undefined" && !RICKSHAW_NO_COMPAT) || typeof RICKSHAW_NO_COMPAT === "undefined") { new Rickshaw.Compat.ClassList(); } /*-----------------Rickshaw.Graph.js---------------------*/ Rickshaw.namespace('Rickshaw.Graph'); Rickshaw.Graph = function(args) { var self = this; this.initialize = function(args) { if (!args.element) throw "Rickshaw.Graph needs a reference to an element"; if (args.element.nodeType !== 1) throw "Rickshaw.Graph element was defined but not an HTML element"; this.element = args.element; this.series = args.series; this.window = {}; this.updateCallbacks = []; this.configureCallbacks = []; this.defaults = { interpolation: 'cardinal', offset: 'zero', min: undefined, max: undefined, preserve: false, xScale: undefined, yScale: undefined, stack: true }; this._loadRenderers(); this.configure(args); this.validateSeries(args.series); this.series.active = function() { return self.series.filter( function(s) { return !s.disabled } ) }; this.setSize({ width: args.width, height: args.height }); this.element.classList.add('rickshaw_graph'); this.vis = d3.select(this.element) .append("svg:svg") .attr('width', this.width) .attr('height', this.height); this.discoverRange(); }; this._loadRenderers = function() { for (var name in Rickshaw.Graph.Renderer) { if (!name || !Rickshaw.Graph.Renderer.hasOwnProperty(name)) continue; var r = Rickshaw.Graph.Renderer[name]; if (!r || !r.prototype || !r.prototype.render) continue; self.registerRenderer(new r( { graph: self } )); } }; this.validateSeries = function(series) { if (!Array.isArray(series) && !(series instanceof Rickshaw.Series)) { var seriesSignature = Object.prototype.toString.apply(series); throw "series is not an array: " + seriesSignature; } var pointsCount; series.forEach( function(s) { if (!(s instanceof Object)) { throw "series element is not an object: " + s; } if (!(s.data)) { throw "series has no data: " + JSON.stringify(s); } if (!Array.isArray(s.data)) { throw "series data is not an array: " + JSON.stringify(s.data); } if (s.data.length > 0) { var x = s.data[0].x; var y = s.data[0].y; if (typeof x != 'number' || ( typeof y != 'number' && y !== null ) ) { throw "x and y properties of points should be numbers instead of " + (typeof x) + " and " + (typeof y); } } if (s.data.length >= 3) { // probe to sanity check sort order if (s.data[2].x < s.data[1].x || s.data[1].x < s.data[0].x || s.data[s.data.length - 1].x < s.data[0].x) { throw "series data needs to be sorted on x values for series name: " + s.name; } } }, this ); }; this.dataDomain = function() { var data = this.series.map( function(s) { return s.data } ); var min = d3.min( data.map( function(d) { return d[0].x } ) ); var max = d3.max( data.map( function(d) { return d[d.length - 1].x } ) ); return [min, max]; }; this.discoverRange = function() { var domain = this.renderer.domain(); // this.*Scale is coming from the configuration dictionary // which may be referenced by the Graph creator, or shared // with other Graphs. We need to ensure we copy the scale // so that our mutations do not change the object given to us. // Hence the .copy() this.x = (this.xScale || d3.scale.linear()).copy().domain(domain.x).range([0, this.width]); this.y = (this.yScale || d3.scale.linear()).copy().domain(domain.y).range([this.height, 0]); this.x.magnitude = d3.scale.linear() .domain([domain.x[0] - domain.x[0], domain.x[1] - domain.x[0]]) .range([0, this.width]); this.y.magnitude = d3.scale.linear() .domain([domain.y[0] - domain.y[0], domain.y[1] - domain.y[0]]) .range([0, this.height]); }; this.render = function() { var stackedData = this.stackData(); this.discoverRange(); this.renderer.render(); this.updateCallbacks.forEach( function(callback) { callback(); } ); }; this.update = this.render; this.stackData = function() { var data = this.series.active() .map( function(d) { return d.data } ) .map( function(d) { return d.filter( function(d) { return this._slice(d) }, this ) }, this); var preserve = this.preserve; if (!preserve) { this.series.forEach( function(series) { if (series.scale) { // data must be preserved when a scale is used preserve = true; } } ); } data = preserve ? Rickshaw.clone(data) : data; this.series.active().forEach( function(series, index) { if (series.scale) { // apply scale to each series var seriesData = data[index]; if(seriesData) { seriesData.forEach( function(d) { d.y = series.scale(d.y); } ); } } } ); this.stackData.hooks.data.forEach( function(entry) { data = entry.f.apply(self, [data]); } ); var stackedData; if (!this.renderer.unstack) { this._validateStackable(); var layout = d3.layout.stack(); layout.offset( self.offset ); stackedData = layout(data); } stackedData = stackedData || data; if (this.renderer.unstack) { stackedData.forEach( function(seriesData) { seriesData.forEach( function(d) { d.y0 = d.y0 === undefined ? 0 : d.y0; } ); } ); } this.stackData.hooks.after.forEach( function(entry) { stackedData = entry.f.apply(self, [data]); } ); var i = 0; this.series.forEach( function(series) { if (series.disabled) return; series.stack = stackedData[i++]; } ); this.stackedData = stackedData; return stackedData; }; this._validateStackable = function() { var series = this.series; var pointsCount; series.forEach( function(s) { pointsCount = pointsCount || s.data.length; if (pointsCount && s.data.length != pointsCount) { throw "stacked series cannot have differing numbers of points: " + pointsCount + " vs " + s.data.length + "; see Rickshaw.Series.fill()"; } }, this ); }; this.stackData.hooks = { data: [], after: [] }; this._slice = function(d) { if (this.window.xMin || this.window.xMax) { var isInRange = true; if (this.window.xMin && d.x < this.window.xMin) isInRange = false; if (this.window.xMax && d.x > this.window.xMax) isInRange = false; return isInRange; } return true; }; this.onUpdate = function(callback) { this.updateCallbacks.push(callback); }; this.onConfigure = function(callback) { this.configureCallbacks.push(callback); }; this.registerRenderer = function(renderer) { this._renderers = this._renderers || {}; this._renderers[renderer.name] = renderer; }; this.configure = function(args) { this.config = this.config || {}; if (args.width || args.height) { this.setSize(args); } Rickshaw.keys(this.defaults).forEach( function(k) { this.config[k] = k in args ? args[k] : k in this ? this[k] : this.defaults[k]; }, this ); Rickshaw.keys(this.config).forEach( function(k) { this[k] = this.config[k]; }, this ); if ('stack' in args) args.unstack = !args.stack; var renderer = args.renderer || (this.renderer && this.renderer.name) || 'stack'; this.setRenderer(renderer, args); this.configureCallbacks.forEach( function(callback) { callback(args); } ); }; this.setRenderer = function(r, args) { if (typeof r == 'function') { this.renderer = new r( { graph: self } ); this.registerRenderer(this.renderer); } else { if (!this._renderers[r]) { throw "couldn't find renderer " + r; } this.renderer = this._renderers[r]; } if (typeof args == 'object') { this.renderer.configure(args); } }; this.setSize = function(args) { args = args || {}; if (typeof window !== undefined) { var style = window.getComputedStyle(this.element, null); var elementWidth = parseInt(style.getPropertyValue('width'), 10); var elementHeight = parseInt(style.getPropertyValue('height'), 10); } this.width = args.width || elementWidth || 400; this.height = args.height || elementHeight || 250; this.vis && this.vis .attr('width', this.width) .attr('height', this.height); }; this.initialize(args); }; /*--------------- Rickshaw.Graph.Renderer---------------------*/ Rickshaw.namespace("Rickshaw.Graph.Renderer"); Rickshaw.Graph.Renderer = Rickshaw.Class.create( { initialize: function(args) { this.graph = args.graph; this.tension = args.tension || this.tension; this.configure(args); }, seriesPathFactory: function() { //implement in subclass }, seriesStrokeFactory: function() { // implement in subclass }, defaults: function() { return { tension: 0.8, strokeWidth: 2, unstack: true, padding: { top: 0.01, right: 0, bottom: 0.01, left: 0 }, stroke: false, fill: false }; }, domain: function(data) { // Requires that at least one series contains some data var stackedData = data || this.graph.stackedData || this.graph.stackData(); var xMin = +Infinity; var xMax = -Infinity; var yMin = +Infinity; var yMax = -Infinity; stackedData.forEach( function(series) { series.forEach( function(d) { if (d.y == null) return; var y = d.y + d.y0; if (y < yMin) yMin = y; if (y > yMax) yMax = y; } ); if (!series.length) return; if (series[0].x < xMin) xMin = series[0].x; if (series[series.length - 1].x > xMax) xMax = series[series.length - 1].x; } ); xMin -= (xMax - xMin) * this.padding.left; xMax += (xMax - xMin) * this.padding.right; yMin = this.graph.min === 'auto' ? yMin : this.graph.min || 0; yMax = this.graph.max === undefined ? yMax : this.graph.max; if (this.graph.min === 'auto' || yMin < 0) { yMin -= (yMax - yMin) * this.padding.bottom; } if (this.graph.max === undefined) { yMax += (yMax - yMin) * this.padding.top; } return { x: [xMin, xMax], y: [yMin, yMax] }; }, render: function(args) { args = args || {}; var graph = this.graph; var series = args.series || graph.series; var vis = args.vis || graph.vis; vis.selectAll('*').remove(); var data = series .filter(function(s) { return !s.disabled }) .map(function(s) { return s.stack }); var pathNodes = vis.selectAll("path.path") .data(data) .enter().append("svg:path") .classed('path', true) .attr("d", this.seriesPathFactory()); if (this.stroke) { var strokeNodes = vis.selectAll('path.stroke') .data(data) .enter().append("svg:path") .classed('stroke', true) .attr("d", this.seriesStrokeFactory()); } var i = 0; series.forEach( function(series) { if (series.disabled) return; series.path = pathNodes[0][i]; if (this.stroke) series.stroke = strokeNodes[0][i]; this._styleSeries(series); i++; }, this ); }, _styleSeries: function(series) { var fill = this.fill ? series.color : 'none'; var stroke = this.stroke ? series.color : 'none'; series.path.setAttribute('fill', fill); series.path.setAttribute('stroke', stroke); series.path.setAttribute('stroke-width', this.strokeWidth); if (series.className) { d3.select(series.path).classed(series.className, true); } if (series.className && this.stroke) { d3.select(series.stroke).classed(series.className, true); } }, configure: function(args) { args = args || {}; Rickshaw.keys(this.defaults()).forEach( function(key) { if (!args.hasOwnProperty(key)) { this[key] = this[key] || this.graph[key] || this.defaults()[key]; return; } if (typeof this.defaults()[key] == 'object') { Rickshaw.keys(this.defaults()[key]).forEach( function(k) { this[key][k] = args[key][k] !== undefined ? args[key][k] : this[key][k] !== undefined ? this[key][k] : this.defaults()[key][k]; }, this ); } else { this[key] = args[key] !== undefined ? args[key] : this[key] !== undefined ? this[key] : this.graph[key] !== undefined ? this.graph[key] : this.defaults()[key]; } }, this ); }, setStrokeWidth: function(strokeWidth) { if (strokeWidth !== undefined) { this.strokeWidth = strokeWidth; } }, setTension: function(tension) { if (tension !== undefined) { this.tension = tension; } } } ); /*---------Rickshaw.Graph.Renderer.Area.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Renderer.Area'); Rickshaw.Graph.Renderer.Area = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { name: 'area', defaults: function($super) { return Rickshaw.extend( $super(), { unstack: false, fill: false, stroke: false } ); }, seriesPathFactory: function() { var graph = this.graph; var factory = d3.svg.area() .x( function(d) { return graph.x(d.x) } ) .y0( function(d) { return graph.y(d.y0) } ) .y1( function(d) { return graph.y(d.y + d.y0) } ) .interpolate(graph.interpolation).tension(this.tension); factory.defined && factory.defined( function(d) { return d.y !== null } ); return factory; }, seriesStrokeFactory: function() { var graph = this.graph; var factory = d3.svg.line() .x( function(d) { return graph.x(d.x) } ) .y( function(d) { return graph.y(d.y + d.y0) } ) .interpolate(graph.interpolation).tension(this.tension); factory.defined && factory.defined( function(d) { return d.y !== null } ); return factory; }, render: function(args) { args = args || {}; var graph = this.graph; var series = args.series || graph.series; var vis = args.vis || graph.vis; vis.selectAll('*').remove(); // insert or stacked areas so strokes lay on top of areas var method = this.unstack ? 'append' : 'insert'; var data = series .filter(function(s) { return !s.disabled }) .map(function(s) { return s.stack }); var nodes = vis.selectAll("path") .data(data) .enter()[method]("svg:g", 'g'); nodes.append("svg:path") .attr("d", this.seriesPathFactory()) .attr("class", 'area'); if (this.stroke) { nodes.append("svg:path") .attr("d", this.seriesStrokeFactory()) .attr("class", 'line'); } var i = 0; series.forEach( function(series) { if (series.disabled) return; series.path = nodes[0][i++]; this._styleSeries(series); }, this ); }, _styleSeries: function(series) { if (!series.path) return; d3.select(series.path).select('.area') .attr('fill', series.color); if (this.stroke) { d3.select(series.path).select('.line') .attr('fill', 'none') .attr('stroke', series.stroke || d3.interpolateRgb(series.color, 'black')(0.125)) .attr('stroke-width', this.strokeWidth); } if (series.className) { series.path.setAttribute('class', series.className); } } } ); /*---------Rickshaw.Graph.Renderer.Line.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Renderer.Line'); Rickshaw.Graph.Renderer.Line = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { name: 'line', defaults: function($super) { return Rickshaw.extend( $super(), { unstack: true, fill: false, stroke: true } ); }, seriesPathFactory: function() { var graph = this.graph; var factory = d3.svg.line() .x( function(d) { return graph.x(d.x) } ) .y( function(d) { return graph.y(d.y) } ) .interpolate(this.graph.interpolation).tension(this.tension); factory.defined && factory.defined( function(d) { return d.y !== null } ); return factory; } } ); /*---------Rickshaw.Graph.Renderer.Bar.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Renderer.Bar'); Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { name: 'bar', defaults: function($super) { var defaults = Rickshaw.extend( $super(), { gapSize: 0.05, unstack: false } ); delete defaults.tension; return defaults; }, initialize: function($super, args) { args = args || {}; this.gapSize = args.gapSize || this.gapSize; $super(args); }, domain: function($super) { var domain = $super(); var frequentInterval = this._frequentInterval(this.graph.stackedData.slice(-1).shift()); domain.x[1] += Number(frequentInterval.magnitude); return domain; }, barWidth: function(series) { var frequentInterval = this._frequentInterval(series.stack); var barWidth = this.graph.x.magnitude(frequentInterval.magnitude) * (1 - this.gapSize); return barWidth; }, render: function(args) { args = args || {}; var graph = this.graph; var series = args.series || graph.series; var vis = args.vis || graph.vis; vis.selectAll('*').remove(); var barWidth = this.barWidth(series.active()[0]); var barXOffset = 0; var activeSeriesCount = series.filter( function(s) { return !s.disabled; } ).length; var seriesBarWidth = this.unstack ? barWidth / activeSeriesCount : barWidth; var transform = function(d) { // add a matrix transform for negative values var matrix = [ 1, 0, 0, (d.y < 0 ? -1 : 1), 0, (d.y < 0 ? graph.y.magnitude(Math.abs(d.y)) * 2 : 0) ]; return "matrix(" + matrix.join(',') + ")"; }; series.forEach( function(series) { if (series.disabled) return; var barWidth = this.barWidth(series); var nodes = vis.selectAll("path") .data(series.stack.filter( function(d) { return d.y !== null } )) .enter().append("svg:rect") .attr("x", function(d) { return graph.x(d.x) + barXOffset }) .attr("y", function(d) { return (graph.y(d.y0 + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 ) }) .attr("width", seriesBarWidth) .attr("height", function(d) { return graph.y.magnitude(Math.abs(d.y)) }) .attr("transform", transform); Array.prototype.forEach.call(nodes[0], function(n) { n.setAttribute('fill', series.color); } ); if (this.unstack) barXOffset += seriesBarWidth; }, this ); }, _frequentInterval: function(data) { var intervalCounts = {}; for (var i = 0; i < data.length - 1; i++) { var interval = data[i + 1].x - data[i].x; intervalCounts[interval] = intervalCounts[interval] || 0; intervalCounts[interval]++; } var frequentInterval = { count: 0, magnitude: 1 }; Rickshaw.keys(intervalCounts).forEach( function(i) { if (frequentInterval.count < intervalCounts[i]) { frequentInterval = { count: intervalCounts[i], magnitude: i }; } } ); return frequentInterval; } } ); /*---------Rickshaw.Graph.Renderer.ScatterPlot.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Renderer.ScatterPlot'); Rickshaw.Graph.Renderer.ScatterPlot = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { name: 'scatterplot', defaults: function($super) { return Rickshaw.extend( $super(), { unstack: true, fill: true, stroke: false, padding:{ top: 0.01, right: 0.01, bottom: 0.01, left: 0.01 }, dotSize: 4 } ); }, initialize: function($super, args) { $super(args); }, render: function(args) { args = args || {}; var graph = this.graph; var series = args.series || graph.series; var vis = args.vis || graph.vis; var dotSize = this.dotSize; vis.selectAll('*').remove(); series.forEach( function(series) { if (series.disabled) return; var nodes = vis.selectAll("path") .data(series.stack.filter( function(d) { return d.y !== null } )) .enter().append("svg:circle") .attr("cx", function(d) { return graph.x(d.x) }) .attr("cy", function(d) { return graph.y(d.y) }) .attr("r", function(d) { return ("r" in d) ? d.r : dotSize}); if (series.className) { nodes.classed(series.className, true); } Array.prototype.forEach.call(nodes[0], function(n) { n.setAttribute('fill', series.color); } ); }, this ); } } ); /*---------Rickshaw.Graph.Renderer.Stack.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Renderer.Stack'); Rickshaw.Graph.Renderer.Stack = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { name: 'stack', defaults: function($super) { return Rickshaw.extend( $super(), { fill: true, stroke: false, unstack: false } ); }, seriesPathFactory: function() { var graph = this.graph; var factory = d3.svg.area() .x( function(d) { return graph.x(d.x) } ) .y0( function(d) { return graph.y(d.y0) } ) .y1( function(d) { return graph.y(d.y + d.y0) } ) .interpolate(this.graph.interpolation).tension(this.tension); factory.defined && factory.defined( function(d) { return d.y !== null } ); return factory; } } ); /*---------Rickshaw.Graph.RangeSlider.js---------*/ Rickshaw.namespace('Rickshaw.Graph.RangeSlider'); Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({ initialize: function(args) { var element = this.element = args.element; var graph = this.graph = args.graph; this.slideCallbacks = []; this.build(); graph.onUpdate( function() { this.update() }.bind(this) ); }, build: function() { var element = this.element; var graph = this.graph; var $ = jQuery; var domain = graph.dataDomain(); var self = this; $( function() { $(element).slider( { range: true, min: domain[0], max: domain[1], values: [ domain[0], domain[1] ], slide: function( event, ui ) { if (ui.values[1] <= ui.values[0]) return; graph.window.xMin = ui.values[0]; graph.window.xMax = ui.values[1]; graph.update(); var domain = graph.dataDomain(); // if we're at an extreme, stick there if (domain[0] == ui.values[0]) { graph.window.xMin = undefined; } if (domain[1] == ui.values[1]) { graph.window.xMax = undefined; } self.slideCallbacks.forEach(function(callback) { callback(graph, graph.window.xMin, graph.window.xMax); }); } } ); } ); $(element)[0].style.width = graph.width + 'px'; }, update: function() { var element = this.element; var graph = this.graph; var $ = jQuery; var values = $(element).slider('option', 'values'); var domain = graph.dataDomain(); $(element).slider('option', 'min', domain[0]); $(element).slider('option', 'max', domain[1]); if (graph.window.xMin == null) { values[0] = domain[0]; } if (graph.window.xMax == null) { values[1] = domain[1]; } $(element).slider('option', 'values', values); }, onSlide: function(callback) { this.slideCallbacks.push(callback); } }); /*---------Rickshaw.Graph.RangeSlider.Preview.js---------*/ Rickshaw.namespace('Rickshaw.Graph.RangeSlider.Preview'); Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({ initialize: function(args) { if (!args.element) throw "Rickshaw.Graph.RangeSlider.Preview needs a reference to an element"; if (!args.graph && !args.graphs) throw "Rickshaw.Graph.RangeSlider.Preview needs a reference to an graph or an array of graphs"; this.element = args.element; this.element.style.position = 'relative'; this.graphs = args.graph ? [ args.graph ] : args.graphs; this.defaults = { height: 75, width: 400, gripperColor: undefined, frameTopThickness: 3, frameHandleThickness: 10, frameColor: "#d4d4d4", frameOpacity: 1, minimumFrameWidth: 0, heightRatio: 0.2 }; this.heightRatio = args.heightRatio || this.defaults.heightRatio; this.defaults.gripperColor = d3.rgb(this.defaults.frameColor).darker().toString(); this.configureCallbacks = []; this.slideCallbacks = []; this.previews = []; if (!args.width) this.widthFromGraph = true; if (!args.height) this.heightFromGraph = true; if (this.widthFromGraph || this.heightFromGraph) { this.graphs[0].onConfigure(function () { this.configure(args); this.render(); }.bind(this)); } args.width = args.width || this.graphs[0].width || this.defaults.width; args.height = args.height || this.graphs[0].height * this.heightRatio || this.defaults.height; this.configure(args); this.render(); }, onSlide: function(callback) { this.slideCallbacks.push(callback); }, onConfigure: function(callback) { this.configureCallbacks.push(callback); }, configure: function(args) { this.config = this.config || {}; this.configureCallbacks.forEach(function(callback) { callback(args); }); Rickshaw.keys(this.defaults).forEach(function(k) { this.config[k] = k in args ? args[k] : k in this.config ? this.config[k] : this.defaults[k]; }, this); if ('width' in args || 'height' in args) { if (this.widthFromGraph) { this.config.width = this.graphs[0].width; } if (this.heightFromGraph) { this.config.height = this.graphs[0].height * this.heightRatio; this.previewHeight = this.config.height; } this.previews.forEach(function(preview) { var height = this.previewHeight / this.graphs.length - this.config.frameTopThickness * 2; var width = this.config.width - this.config.frameHandleThickness * 2; preview.setSize({ width: width, height: height }); if (this.svg) { var svgHeight = height + this.config.frameHandleThickness * 2; var svgWidth = width + this.config.frameHandleThickness * 2; this.svg.style("width", svgWidth + "px"); this.svg.style("height", svgHeight + "px"); } }, this); } }, render: function() { var self = this; this.svg = d3.select(this.element) .selectAll("svg.rickshaw_range_slider_preview") .data([null]); this.previewHeight = this.config.height - (this.config.frameTopThickness * 2); this.previewWidth = this.config.width - (this.config.frameHandleThickness * 2); this.currentFrame = [0, this.previewWidth]; var buildGraph = function(parent, index) { var graphArgs = Rickshaw.extend({}, parent.config); var height = self.previewHeight / self.graphs.length; var renderer = parent.renderer.name; Rickshaw.extend(graphArgs, { element: this.appendChild(document.createElement("div")), height: height, width: self.previewWidth, series: parent.series, renderer: renderer }); var graph = new Rickshaw.Graph(graphArgs); self.previews.push(graph); parent.onUpdate(function() { graph.render(); self.render() }); parent.onConfigure(function(args) { // don't propagate height delete args.height; args.width = args.width - self.config.frameHandleThickness * 2; graph.configure(args); graph.render(); }); graph.render(); }; var graphContainer = d3.select(this.element) .selectAll("div.rickshaw_range_slider_preview_container") .data(this.graphs); var translateCommand = "translate(" + this.config.frameHandleThickness + "px, " + this.config.frameTopThickness + "px)"; graphContainer.enter() .append("div") .classed("rickshaw_range_slider_preview_container", true) .style("-webkit-transform", translateCommand) .style("-moz-transform", translateCommand) .style("-ms-transform", translateCommand) .style("transform", translateCommand) .each(buildGraph); graphContainer.exit() .remove(); // Use the first graph as the "master" for the frame state var masterGraph = this.graphs[0]; var domainScale = d3.scale.linear() .domain([0, this.previewWidth]) .range(masterGraph.dataDomain()); var currentWindow = [masterGraph.window.xMin, masterGraph.window.xMax]; this.currentFrame[0] = currentWindow[0] === undefined ? 0 : Math.round(domainScale.invert(currentWindow[0])); if (this.currentFrame[0] < 0) this.currentFrame[0] = 0; this.currentFrame[1] = currentWindow[1] === undefined ? this.previewWidth : domainScale.invert(currentWindow[1]); if (this.currentFrame[1] - this.currentFrame[0] < self.config.minimumFrameWidth) { this.currentFrame[1] = (this.currentFrame[0] || 0) + self.config.minimumFrameWidth; } this.svg.enter() .append("svg") .classed("rickshaw_range_slider_preview", true) .style("height", this.config.height + "px") .style("width", this.config.width + "px") .style("position", "absolute") .style("top", 0); this._renderDimming(); this._renderFrame(); this._renderGrippers(); this._renderHandles(); this._renderMiddle(); this._registerMouseEvents(); }, _renderDimming: function() { var element = this.svg .selectAll("path.dimming") .data([null]); element.enter() .append("path") .attr("fill", "white") .attr("fill-opacity", "0.7") .attr("fill-rule", "evenodd") .classed("dimming", true); var path = ""; path += " M " + this.config.frameHandleThickness + " " + this.config.frameTopThickness; path += " h " + this.previewWidth; path += " v " + this.previewHeight; path += " h " + -this.previewWidth; path += " z "; path += " M " + Math.max(this.currentFrame[0], this.config.frameHandleThickness) + " " + this.config.frameTopThickness; path += " H " + Math.min(this.currentFrame[1] + this.config.frameHandleThickness * 2, this.previewWidth + this.config.frameHandleThickness); path += " v " + this.previewHeight; path += " H " + Math.max(this.currentFrame[0], this.config.frameHandleThickness); path += " z"; element.attr("d", path); }, _renderFrame: function() { var element = this.svg .selectAll("path.frame") .data([null]); element.enter() .append("path") .attr("stroke", "white") .attr("stroke-width", "1px") .attr("stroke-linejoin", "round") .attr("fill", this.config.frameColor) .attr("fill-opacity", this.config.frameOpacity) .attr("fill-rule", "evenodd") .classed("frame", true); var path = ""; path += " M " + this.currentFrame[0] + " 0"; path += " H " + (this.currentFrame[1] + (this.config.frameHandleThickness * 2)); path += " V " + this.config.height; path += " H " + (this.currentFrame[0]); path += " z"; path += " M " + (this.currentFrame[0] + this.config.frameHandleThickness) + " " + this.config.frameTopThickness; path += " H " + (this.currentFrame[1] + this.config.frameHandleThickness); path += " v " + this.previewHeight; path += " H " + (this.currentFrame[0] + this.config.frameHandleThickness); path += " z"; element.attr("d", path); }, _renderGrippers: function() { var gripper = this.svg.selectAll("path.gripper") .data([null]); gripper.enter() .append("path") .attr("stroke", this.config.gripperColor) .classed("gripper", true); var path = ""; [0.4, 0.6].forEach(function(spacing) { path += " M " + Math.round((this.currentFrame[0] + (this.config.frameHandleThickness * spacing))) + " " + Math.round(this.config.height * 0.3); path += " V " + Math.round(this.config.height * 0.7); path += " M " + Math.round((this.currentFrame[1] + (this.config.frameHandleThickness * (1 + spacing)))) + " " + Math.round(this.config.height * 0.3); path += " V " + Math.round(this.config.height * 0.7); }.bind(this)); gripper.attr("d", path); }, _renderHandles: function() { var leftHandle = this.svg.selectAll("rect.left_handle") .data([null]); leftHandle.enter() .append("rect") .attr('width', this.config.frameHandleThickness) .style("cursor", "ew-resize") .style("fill-opacity", "0") .classed("left_handle", true); leftHandle .attr('x', this.currentFrame[0]) .attr('height', this.config.height); var rightHandle = this.svg.selectAll("rect.right_handle") .data([null]); rightHandle.enter() .append("rect") .attr('width', this.config.frameHandleThickness) .style("cursor", "ew-resize") .style("fill-opacity", "0") .classed("right_handle", true); rightHandle .attr('x', this.currentFrame[1] + this.config.frameHandleThickness) .attr('height', this.config.height); }, _renderMiddle: function() { var middleHandle = this.svg.selectAll("rect.middle_handle") .data([null]); middleHandle.enter() .append("rect") .style("cursor", "move") .style("fill-opacity", "0") .classed("middle_handle", true); middleHandle .attr('width', Math.max(0, this.currentFrame[1] - this.currentFrame[0])) .attr('x', this.currentFrame[0] + this.config.frameHandleThickness) .attr('height', this.config.height); }, _registerMouseEvents: function() { var element = d3.select(this.element); var drag = { target: null, start: null, stop: null, left: false, right: false, rigid: false }; var self = this; function onMousemove(datum, index) { drag.stop = self._getClientXFromEvent(d3.event, drag); var distanceTraveled = drag.stop - drag.start; var frameAfterDrag = self.frameBeforeDrag.slice(0); var minimumFrameWidth = self.config.minimumFrameWidth; if (drag.rigid) { minimumFrameWidth = self.frameBeforeDrag[1] - self.frameBeforeDrag[0]; } if (drag.left) { frameAfterDrag[0] = Math.max(frameAfterDrag[0] + distanceTraveled, 0); } if (drag.right) { frameAfterDrag[1] = Math.min(frameAfterDrag[1] + distanceTraveled, self.previewWidth); } var currentFrameWidth = frameAfterDrag[1] - frameAfterDrag[0]; if (currentFrameWidth <= minimumFrameWidth) { if (drag.left) { frameAfterDrag[0] = frameAfterDrag[1] - minimumFrameWidth; } if (drag.right) { frameAfterDrag[1] = frameAfterDrag[0] + minimumFrameWidth; } if (frameAfterDrag[0] <= 0) { frameAfterDrag[1] -= frameAfterDrag[0]; frameAfterDrag[0] = 0; } if (frameAfterDrag[1] >= self.previewWidth) { frameAfterDrag[0] -= (frameAfterDrag[1] - self.previewWidth); frameAfterDrag[1] = self.previewWidth; } } self.graphs.forEach(function(graph) { var domainScale = d3.scale.linear() .interpolate(d3.interpolateNumber) .domain([0, self.previewWidth]) .range(graph.dataDomain()); var windowAfterDrag = [ domainScale(frameAfterDrag[0]), domainScale(frameAfterDrag[1]) ]; self.slideCallbacks.forEach(function(callback) { callback(graph, windowAfterDrag[0], windowAfterDrag[1]); }); if (frameAfterDrag[0] === 0) { windowAfterDrag[0] = undefined; } if (frameAfterDrag[1] === self.previewWidth) { windowAfterDrag[1] = undefined; } graph.window.xMin = windowAfterDrag[0]; graph.window.xMax = windowAfterDrag[1]; graph.update(); }); } function onMousedown() { drag.target = d3.event.target; drag.start = self._getClientXFromEvent(d3.event, drag); self.frameBeforeDrag = self.currentFrame.slice(); d3.event.preventDefault ? d3.event.preventDefault() : d3.event.returnValue = false; d3.select(document).on("mousemove.rickshaw_range_slider_preview", onMousemove); d3.select(document).on("mouseup.rickshaw_range_slider_preview", onMouseup); d3.select(document).on("touchmove.rickshaw_range_slider_preview", onMousemove); d3.select(document).on("touchend.rickshaw_range_slider_preview", onMouseup); d3.select(document).on("touchcancel.rickshaw_range_slider_preview", onMouseup); } function onMousedownLeftHandle(datum, index) { drag.left = true; onMousedown(); } function onMousedownRightHandle(datum, index) { drag.right = true; onMousedown(); } function onMousedownMiddleHandle(datum, index) { drag.left = true; drag.right = true; drag.rigid = true; onMousedown(); } function onMouseup(datum, index) { d3.select(document).on("mousemove.rickshaw_range_slider_preview", null); d3.select(document).on("mouseup.rickshaw_range_slider_preview", null); d3.select(document).on("touchmove.rickshaw_range_slider_preview", null); d3.select(document).on("touchend.rickshaw_range_slider_preview", null); d3.select(document).on("touchcancel.rickshaw_range_slider_preview", null); delete self.frameBeforeDrag; drag.left = false; drag.right = false; drag.rigid = false; } element.select("rect.left_handle").on("mousedown", onMousedownLeftHandle); element.select("rect.right_handle").on("mousedown", onMousedownRightHandle); element.select("rect.middle_handle").on("mousedown", onMousedownMiddleHandle); element.select("rect.left_handle").on("touchstart", onMousedownLeftHandle); element.select("rect.right_handle").on("touchstart", onMousedownRightHandle); element.select("rect.middle_handle").on("touchstart", onMousedownMiddleHandle); }, _getClientXFromEvent: function(event, drag) { switch (event.type) { case 'touchstart': case 'touchmove': var touchList = event.changedTouches; var touch = null; for (var touchIndex = 0; touchIndex < touchList.length; touchIndex++) { if (touchList[touchIndex].target === drag.target) { touch = touchList[touchIndex]; break; } } return touch !== null ? touch.clientX : undefined; default: return event.clientX; } } }); /*---------Rickshaw.Graph.HoverDetail.js---------*/ Rickshaw.namespace('Rickshaw.Graph.HoverDetail'); Rickshaw.Graph.HoverDetail = Rickshaw.Class.create({ initialize: function(args) { var graph = this.graph = args.graph; this.xFormatter = args.xFormatter || function(x) { return new Date( x * 1000 ).toUTCString(); }; this.yFormatter = args.yFormatter || function(y) { return y === null ? y : y.toFixed(2); }; var element = this.element = document.createElement('div'); element.className = 'detail'; this.visible = true; graph.element.appendChild(element); this.lastEvent = null; this._addListeners(); this.onShow = args.onShow; this.onHide = args.onHide; this.onRender = args.onRender; this.formatter = args.formatter || this.formatter; }, formatter: function(series, x, y, formattedX, formattedY, d) { return series.name + ': ' + formattedY; }, update: function(e) { e = e || this.lastEvent; if (!e) return; this.lastEvent = e; if (!e.target.nodeName.match(/^(path|svg|rect|circle)$/)) return; var graph = this.graph; var eventX = e.offsetX || e.layerX; var eventY = e.offsetY || e.layerY; var j = 0; var points = []; var nearestPoint; this.graph.series.active().forEach( function(series) { var data = this.graph.stackedData[j++]; if (!data.length) return; var domainX = graph.x.invert(eventX); var domainIndexScale = d3.scale.linear() .domain([data[0].x, data.slice(-1)[0].x]) .range([0, data.length - 1]); var approximateIndex = Math.round(domainIndexScale(domainX)); if (approximateIndex == data.length - 1) approximateIndex--; var dataIndex = Math.min(approximateIndex || 0, data.length - 1); for (var i = approximateIndex; i < data.length - 1;) { if (!data[i] || !data[i + 1]) break; if (data[i].x <= domainX && data[i + 1].x > domainX) { dataIndex = Math.abs(domainX - data[i].x) < Math.abs(domainX - data[i + 1].x) ? i : i + 1; break; } if (data[i + 1].x <= domainX) { i++ } else { i-- } } if (dataIndex < 0) dataIndex = 0; var value = data[dataIndex]; var distance = Math.sqrt( Math.pow(Math.abs(graph.x(value.x) - eventX), 2) + Math.pow(Math.abs(graph.y(value.y + value.y0) - eventY), 2) ); var xFormatter = series.xFormatter || this.xFormatter; var yFormatter = series.yFormatter || this.yFormatter; var point = { formattedXValue: xFormatter(value.x), formattedYValue: yFormatter(series.scale ? series.scale.invert(value.y) : value.y), series: series, value: value, distance: distance, order: j, name: series.name }; if (!nearestPoint || distance < nearestPoint.distance) { nearestPoint = point; } points.push(point); }, this ); if (!nearestPoint) return; nearestPoint.active = true; var domainX = nearestPoint.value.x; var formattedXValue = nearestPoint.formattedXValue; this.element.innerHTML = ''; this.element.style.left = graph.x(domainX) + 'px'; this.visible && this.render( { points: points, detail: points, // for backwards compatibility mouseX: eventX, mouseY: eventY, formattedXValue: formattedXValue, domainX: domainX } ); }, hide: function() { this.visible = false; this.element.classList.add('inactive'); if (typeof this.onHide == 'function') { this.onHide(); } }, show: function() { this.visible = true; this.element.classList.remove('inactive'); if (typeof this.onShow == 'function') { this.onShow(); } }, render: function(args) { var graph = this.graph; var points = args.points; var point = points.filter( function(p) { return p.active } ).shift(); if (point.value.y === null) return; var formattedXValue = point.formattedXValue; var formattedYValue = point.formattedYValue; this.element.innerHTML = ''; this.element.style.left = graph.x(point.value.x) + 'px'; var xLabel = document.createElement('div'); xLabel.className = 'x_label'; xLabel.innerHTML = formattedXValue; this.element.appendChild(xLabel); var item = document.createElement('div'); item.className = 'item'; // invert the scale if this series displays using a scale var series = point.series; var actualY = series.scale ? series.scale.invert(point.value.y) : point.value.y; item.innerHTML = this.formatter(series, point.value.x, actualY, formattedXValue, formattedYValue, point); item.style.top = this.graph.y(point.value.y0 + point.value.y) + 'px'; this.element.appendChild(item); var dot = document.createElement('div'); dot.className = 'dot'; dot.style.top = item.style.top; dot.style.borderColor = series.color; this.element.appendChild(dot); if (point.active) { item.classList.add('active'); dot.classList.add('active'); } // Assume left alignment until the element has been displayed and // bounding box calculations are possible. var alignables = [xLabel, item]; alignables.forEach(function(el) { el.classList.add('left'); }); this.show(); // If left-alignment results in any error, try right-alignment. var leftAlignError = this._calcLayoutError(alignables); if (leftAlignError > 0) { alignables.forEach(function(el) { el.classList.remove('left'); el.classList.add('right'); }); // If right-alignment is worse than left alignment, switch back. var rightAlignError = this._calcLayoutError(alignables); if (rightAlignError > leftAlignError) { alignables.forEach(function(el) { el.classList.remove('right'); el.classList.add('left'); }); } } if (typeof this.onRender == 'function') { this.onRender(args); } }, _calcLayoutError: function(alignables) { // Layout error is calculated as the number of linear pixels by which // an alignable extends past the left or right edge of the parent. var parentRect = this.element.parentNode.getBoundingClientRect(); var error = 0; var alignRight = alignables.forEach(function(el) { var rect = el.getBoundingClientRect(); if (!rect.width) { return; } if (rect.right > parentRect.right) { error += rect.right - parentRect.right; } if (rect.left < parentRect.left) { error += parentRect.left - rect.left; } }); return error; }, _addListeners: function() { this.graph.element.addEventListener( 'mousemove', function(e) { this.visible = true; this.update(e); }.bind(this), false ); this.graph.onUpdate( function() { this.update() }.bind(this) ); this.graph.element.addEventListener( 'mouseout', function(e) { if (e.relatedTarget && !(e.relatedTarget.compareDocumentPosition(this.graph.element) & Node.DOCUMENT_POSITION_CONTAINS)) { this.hide(); } }.bind(this), false ); } }); /*---------Rickshaw.Graph.Annotate.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Annotate'); Rickshaw.Graph.Annotate = function(args) { var graph = this.graph = args.graph; this.elements = { timeline: args.element }; var self = this; this.data = {}; this.elements.timeline.classList.add('rickshaw_annotation_timeline'); this.add = function(time, content, end_time) { self.data[time] = self.data[time] || {'boxes': []}; self.data[time].boxes.push({content: content, end: end_time}); }; this.update = function() { Rickshaw.keys(self.data).forEach( function(time) { var annotation = self.data[time]; var left = self.graph.x(time); if (left < 0 || left > self.graph.x.range()[1]) { if (annotation.element) { annotation.line.classList.add('offscreen'); annotation.element.style.display = 'none'; } annotation.boxes.forEach( function(box) { if ( box.rangeElement ) box.rangeElement.classList.add('offscreen'); }); return; } if (!annotation.element) { var element = annotation.element = document.createElement('div'); element.classList.add('annotation'); this.elements.timeline.appendChild(element); element.addEventListener('click', function(e) { element.classList.toggle('active'); annotation.line.classList.toggle('active'); annotation.boxes.forEach( function(box) { if ( box.rangeElement ) box.rangeElement.classList.toggle('active'); }); }, false); } annotation.element.style.left = left + 'px'; annotation.element.style.display = 'block'; annotation.boxes.forEach( function(box) { var element = box.element; if (!element) { element = box.element = document.createElement('div'); element.classList.add('content'); element.innerHTML = box.content; annotation.element.appendChild(element); annotation.line = document.createElement('div'); annotation.line.classList.add('annotation_line'); self.graph.element.appendChild(annotation.line); if ( box.end ) { box.rangeElement = document.createElement('div'); box.rangeElement.classList.add('annotation_range'); self.graph.element.appendChild(box.rangeElement); } } if ( box.end ) { var annotationRangeStart = left; var annotationRangeEnd = Math.min( self.graph.x(box.end), self.graph.x.range()[1] ); // annotation makes more sense at end if ( annotationRangeStart > annotationRangeEnd ) { annotationRangeEnd = left; annotationRangeStart = Math.max( self.graph.x(box.end), self.graph.x.range()[0] ); } var annotationRangeWidth = annotationRangeEnd - annotationRangeStart; box.rangeElement.style.left = annotationRangeStart + 'px'; box.rangeElement.style.width = annotationRangeWidth + 'px'; box.rangeElement.classList.remove('offscreen'); } annotation.line.classList.remove('offscreen'); annotation.line.style.left = left + 'px'; } ); }, this ); }; this.graph.onUpdate( function() { self.update() } ); }; /*---------Rickshaw.Graph.Legend.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Legend'); Rickshaw.Graph.Legend = Rickshaw.Class.create( { className: 'rickshaw_legend', initialize: function(args) { this.element = args.element; this.graph = args.graph; this.naturalOrder = args.naturalOrder; this.element.classList.add(this.className); this.list = document.createElement('ul'); this.element.appendChild(this.list); this.render(); // we could bind this.render.bind(this) here // but triggering the re-render would lose the added // behavior of the series toggle this.graph.onUpdate( function() {} ); }, render: function() { var self = this; while ( this.list.firstChild ) { this.list.removeChild( this.list.firstChild ); } this.lines = []; var series = this.graph.series .map( function(s) { return s } ); if (!this.naturalOrder) { series = series.reverse(); } series.forEach( function(s) { self.addLine(s); } ); }, addLine: function (series) { var line = document.createElement('li'); line.className = 'line'; if (series.disabled) { line.className += ' disabled'; } if (series.className) { d3.select(line).classed(series.className, true); } var swatch = document.createElement('div'); swatch.className = 'swatch'; swatch.style.backgroundColor = series.color; line.appendChild(swatch); var label = document.createElement('span'); label.className = 'label'; label.innerHTML = series.name; line.appendChild(label); this.list.appendChild(line); line.series = series; if (series.noLegend) { line.style.display = 'none'; } var _line = { element: line, series: series }; if (this.shelving) { this.shelving.addAnchor(_line); this.shelving.updateBehaviour(); } if (this.highlighter) { this.highlighter.addHighlightEvents(_line); } this.lines.push(_line); return line; } } ); /*---------Rickshaw.Graph.Axis.Time.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Axis.Time'); Rickshaw.Graph.Axis.Time = function(args) { var self = this; this.graph = args.graph; this.elements = []; this.ticksTreatment = args.ticksTreatment || 'plain'; this.fixedTimeUnit = args.timeUnit; var time = args.timeFixture || new Rickshaw.Fixtures.Time(); this.appropriateTimeUnit = function() { var unit; var units = time.units; var domain = this.graph.x.domain(); var rangeSeconds = domain[1] - domain[0]; units.forEach( function(u) { if (Math.floor(rangeSeconds / u.seconds) >= 2) { unit = unit || u; } } ); return (unit || time.units[time.units.length - 1]); }; this.tickOffsets = function() { var domain = this.graph.x.domain(); var unit = this.fixedTimeUnit || this.appropriateTimeUnit(); var count = Math.ceil((domain[1] - domain[0]) / unit.seconds); var runningTick = domain[0]; var offsets = []; for (var i = 0; i < count; i++) { var tickValue = time.ceil(runningTick, unit); runningTick = tickValue + unit.seconds / 2; offsets.push( { value: tickValue, unit: unit } ); } return offsets; }; this.render = function() { this.elements.forEach( function(e) { e.parentNode.removeChild(e); } ); this.elements = []; var offsets = this.tickOffsets(); offsets.forEach( function(o) { if (self.graph.x(o.value) > self.graph.x.range()[1]) return; var element = document.createElement('div'); element.style.left = self.graph.x(o.value) + 'px'; element.classList.add('x_tick'); element.classList.add(self.ticksTreatment); var title = document.createElement('div'); title.classList.add('title'); title.innerHTML = o.unit.formatter(new Date(o.value * 1000)); element.appendChild(title); self.graph.element.appendChild(element); self.elements.push(element); } ); }; this.graph.onUpdate( function() { self.render() } ); }; /*---------Rickshaw.Graph.Behavior.Series.Toggle.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Behavior.Series.Toggle'); Rickshaw.Graph.Behavior.Series.Toggle = function(args) { this.graph = args.graph; this.legend = args.legend; var self = this; this.addAnchor = function(line) { var anchor = document.createElement('a'); anchor.innerHTML = '✔'; anchor.classList.add('action'); line.element.insertBefore(anchor, line.element.firstChild); anchor.onclick = function(e) { if (line.series.disabled) { line.series.enable(); line.element.classList.remove('disabled'); } else { if (this.graph.series.filter(function(s) { return !s.disabled }).length <= 1) return; line.series.disable(); line.element.classList.add('disabled'); } self.graph.update(); }.bind(this); var label = line.element.getElementsByTagName('span')[0]; label.onclick = function(e){ var disableAllOtherLines = line.series.disabled; if ( ! disableAllOtherLines ) { for ( var i = 0; i < self.legend.lines.length; i++ ) { var l = self.legend.lines[i]; if ( line.series === l.series ) { // noop } else if ( l.series.disabled ) { // noop } else { disableAllOtherLines = true; break; } } } // show all or none if ( disableAllOtherLines ) { // these must happen first or else we try ( and probably fail ) to make a no line graph line.series.enable(); line.element.classList.remove('disabled'); self.legend.lines.forEach(function(l){ if ( line.series === l.series ) { // noop } else { l.series.disable(); l.element.classList.add('disabled'); } }); } else { self.legend.lines.forEach(function(l){ l.series.enable(); l.element.classList.remove('disabled'); }); } self.graph.update(); }; }; if (this.legend) { var $ = jQuery; if (typeof $ != 'undefined' && $(this.legend.list).sortable) { $(this.legend.list).sortable( { start: function(event, ui) { ui.item.bind('no.onclick', function(event) { event.preventDefault(); } ); }, stop: function(event, ui) { setTimeout(function(){ ui.item.unbind('no.onclick'); }, 250); } }); } this.legend.lines.forEach( function(l) { self.addAnchor(l); } ); } this._addBehavior = function() { this.graph.series.forEach( function(s) { s.disable = function() { if (self.graph.series.length <= 1) { throw('only one series left'); } s.disabled = true; }; s.enable = function() { s.disabled = false; }; } ); }; this._addBehavior(); this.updateBehaviour = function () { this._addBehavior() }; }; /*---------Rickshaw.Graph.Behavior.Series.Order.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Behavior.Series.Order'); Rickshaw.Graph.Behavior.Series.Order = function(args) { this.graph = args.graph; this.legend = args.legend; var self = this; if (typeof window.jQuery == 'undefined') { throw "couldn't find jQuery at window.jQuery"; } if (typeof window.jQuery.ui == 'undefined') { throw "couldn't find jQuery UI at window.jQuery.ui"; } jQuery(function() { jQuery(self.legend.list).sortable( { containment: 'parent', tolerance: 'pointer', update: function( event, ui ) { var series = []; jQuery(self.legend.list).find('li').each( function(index, item) { if (!item.series) return; series.push(item.series); } ); for (var i = self.graph.series.length - 1; i >= 0; i--) { self.graph.series[i] = series.shift(); } self.graph.update(); } } ); jQuery(self.legend.list).disableSelection(); }); //hack to make jquery-ui sortable behave this.graph.onUpdate( function() { var h = window.getComputedStyle(self.legend.element).height; self.legend.element.style.height = h; } ); }; /*---------Rickshaw.Graph.Behavior.Series.Highlight.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Behavior.Series.Highlight'); Rickshaw.Graph.Behavior.Series.Highlight = function(args) { this.graph = args.graph; this.legend = args.legend; var self = this; var colorSafe = {}; var activeLine = null; var disabledColor = args.disabledColor || function(seriesColor) { return d3.interpolateRgb(seriesColor, d3.rgb('#d8d8d8'))(0.8).toString(); }; this.addHighlightEvents = function (l) { l.element.addEventListener( 'mouseover', function(e) { if (activeLine) return; else activeLine = l; self.legend.lines.forEach( function(line) { if (l === line) { // if we're not in a stacked renderer bring active line to the top if (self.graph.renderer.unstack && (line.series.renderer ? line.series.renderer.unstack : true)) { var seriesIndex = self.graph.series.indexOf(line.series); line.originalIndex = seriesIndex; var series = self.graph.series.splice(seriesIndex, 1)[0]; self.graph.series.push(series); } return; } colorSafe[line.series.name] = colorSafe[line.series.name] || line.series.color; line.series.color = disabledColor(line.series.color); } ); self.graph.update(); }, false ); l.element.addEventListener( 'mouseout', function(e) { if (!activeLine) return; else activeLine = null; self.legend.lines.forEach( function(line) { // return reordered series to its original place if (l === line && line.hasOwnProperty('originalIndex')) { var series = self.graph.series.pop(); self.graph.series.splice(line.originalIndex, 0, series); delete line.originalIndex; } if (colorSafe[line.series.name]) { line.series.color = colorSafe[line.series.name]; } } ); self.graph.update(); }, false ); }; if (this.legend) { this.legend.lines.forEach( function(l) { self.addHighlightEvents(l); } ); } }; /*---------Rickshaw.Graph.Smoother.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Smoother'); Rickshaw.Graph.Smoother = Rickshaw.Class.create({ initialize: function(args) { this.graph = args.graph; this.element = args.element; this.aggregationScale = 1; this.build(); this.graph.stackData.hooks.data.push( { name: 'smoother', orderPosition: 50, f: this.transformer.bind(this) } ); }, build: function() { var self = this; var $ = jQuery; if (this.element) { $( function() { $(self.element).slider( { min: 1, max: 100, slide: function( event, ui ) { self.setScale(ui.value); } } ); } ); } }, setScale: function(scale) { if (scale < 1) { throw "scale out of range: " + scale; } this.aggregationScale = scale; this.graph.update(); }, transformer: function(data) { if (this.aggregationScale == 1) return data; var aggregatedData = []; data.forEach( function(seriesData) { var aggregatedSeriesData = []; while (seriesData.length) { var avgX = 0, avgY = 0; var slice = seriesData.splice(0, this.aggregationScale); slice.forEach( function(d) { avgX += d.x / slice.length; avgY += d.y / slice.length; } ); aggregatedSeriesData.push( { x: avgX, y: avgY } ); } aggregatedData.push(aggregatedSeriesData); }.bind(this) ); return aggregatedData; } }); /*---------Rickshaw.Fixtures.Time.js---------*/ Rickshaw.namespace('Rickshaw.Fixtures.Time'); Rickshaw.Fixtures.Time = function() { var self = this; this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; this.units = [ { name: 'decade', seconds: 86400 * 365.25 * 10, formatter: function(d) { return (parseInt(d.getUTCFullYear() / 10, 10) * 10) } }, { name: 'year', seconds: 86400 * 365.25, formatter: function(d) { return d.getUTCFullYear() } }, { name: 'month', seconds: 86400 * 30.5, formatter: function(d) { return self.months[d.getUTCMonth()] } }, { name: 'week', seconds: 86400 * 7, formatter: function(d) { return self.formatDate(d) } }, { name: 'day', seconds: 86400, formatter: function(d) { return d.getUTCDate() } }, { name: '6 hour', seconds: 3600 * 6, formatter: function(d) { return self.formatTime(d) } }, { name: 'hour', seconds: 3600, formatter: function(d) { return self.formatTime(d) } }, { name: '15 minute', seconds: 60 * 15, formatter: function(d) { return self.formatTime(d) } }, { name: 'minute', seconds: 60, formatter: function(d) { return d.getUTCMinutes() } }, { name: '15 second', seconds: 15, formatter: function(d) { return d.getUTCSeconds() + 's' } }, { name: 'second', seconds: 1, formatter: function(d) { return d.getUTCSeconds() + 's' } }, { name: 'decisecond', seconds: 1/10, formatter: function(d) { return d.getUTCMilliseconds() + 'ms' } }, { name: 'centisecond', seconds: 1/100, formatter: function(d) { return d.getUTCMilliseconds() + 'ms' } } ]; this.unit = function(unitName) { return this.units.filter( function(unit) { return unitName == unit.name } ).shift(); }; this.formatDate = function(d) { return d3.time.format('%b %e')(d); }; this.formatTime = function(d) { return d.toUTCString().match(/(\d+:\d+):/)[1]; }; this.ceil = function(time, unit) { var date, floor, year; if (unit.name == 'month') { date = new Date(time * 1000); floor = Date.UTC(date.getUTCFullYear(), date.getUTCMonth()) / 1000; if (floor == time) return time; year = date.getUTCFullYear(); var month = date.getUTCMonth(); if (month == 11) { month = 0; year = year + 1; } else { month += 1; } return Date.UTC(year, month) / 1000; } if (unit.name == 'year') { date = new Date(time * 1000); floor = Date.UTC(date.getUTCFullYear(), 0) / 1000; if (floor == time) return time; year = date.getUTCFullYear() + 1; return Date.UTC(year, 0) / 1000; } return Math.ceil(time / unit.seconds) * unit.seconds; }; }; /*---------Rickshaw.Fixtures.Time.Local.js---------*/ Rickshaw.namespace('Rickshaw.Fixtures.Time.Local'); Rickshaw.Fixtures.Time.Local = function() { var self = this; this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; this.units = [ { name: 'decade', seconds: 86400 * 365.25 * 10, formatter: function(d) { return (parseInt(d.getFullYear() / 10, 10) * 10) } }, { name: 'year', seconds: 86400 * 365.25, formatter: function(d) { return d.getFullYear() } }, { name: 'month', seconds: 86400 * 30.5, formatter: function(d) { return self.months[d.getMonth()] } }, { name: 'week', seconds: 86400 * 7, formatter: function(d) { return self.formatDate(d) } }, { name: 'day', seconds: 86400, formatter: function(d) { return d.getDate() } }, { name: '6 hour', seconds: 3600 * 6, formatter: function(d) { return self.formatTime(d) } }, { name: 'hour', seconds: 3600, formatter: function(d) { return self.formatTime(d) } }, { name: '15 minute', seconds: 60 * 15, formatter: function(d) { return self.formatTime(d) } }, { name: 'minute', seconds: 60, formatter: function(d) { return d.getMinutes() } }, { name: '15 second', seconds: 15, formatter: function(d) { return d.getSeconds() + 's' } }, { name: 'second', seconds: 1, formatter: function(d) { return d.getSeconds() + 's' } }, { name: 'decisecond', seconds: 1/10, formatter: function(d) { return d.getMilliseconds() + 'ms' } }, { name: 'centisecond', seconds: 1/100, formatter: function(d) { return d.getMilliseconds() + 'ms' } } ]; this.unit = function(unitName) { return this.units.filter( function(unit) { return unitName == unit.name } ).shift(); }; this.formatDate = function(d) { return d3.time.format('%b %e')(d); }; this.formatTime = function(d) { return d.toString().match(/(\d+:\d+):/)[1]; }; this.ceil = function(time, unit) { var date, floor, year; if (unit.name == 'day') { var nearFuture = new Date((time + unit.seconds - 1) * 1000); var rounded = new Date(0); rounded.setMilliseconds(0); rounded.setSeconds(0); rounded.setMinutes(0); rounded.setHours(0); rounded.setDate(nearFuture.getDate()); rounded.setMonth(nearFuture.getMonth()); rounded.setFullYear(nearFuture.getFullYear()); return rounded.getTime() / 1000; } if (unit.name == 'month') { date = new Date(time * 1000); floor = new Date(date.getFullYear(), date.getMonth()).getTime() / 1000; if (floor == time) return time; year = date.getFullYear(); var month = date.getMonth(); if (month == 11) { month = 0; year = year + 1; } else { month += 1; } return new Date(year, month).getTime() / 1000; } if (unit.name == 'year') { date = new Date(time * 1000); floor = new Date(date.getUTCFullYear(), 0).getTime() / 1000; if (floor == time) return time; year = date.getFullYear() + 1; return new Date(year, 0).getTime() / 1000; } return Math.ceil(time / unit.seconds) * unit.seconds; }; }; /*---------Rickshaw.Fixtures.Number.js---------*/ Rickshaw.namespace('Rickshaw.Fixtures.Number'); Rickshaw.Fixtures.Number.formatKMBT = function(y) { var abs_y = Math.abs(y); if (abs_y >= 1000000000000) { return y / 1000000000000 + "T" } else if (abs_y >= 1000000000) { return y / 1000000000 + "B" } else if (abs_y >= 1000000) { return y / 1000000 + "M" } else if (abs_y >= 1000) { return y / 1000 + "K" } else if (abs_y < 1 && y > 0) { return y.toFixed(2) } else if (abs_y === 0) { return '' } else { return y } }; Rickshaw.Fixtures.Number.formatBase1024KMGTP = function(y) { var abs_y = Math.abs(y); if (abs_y >= 1125899906842624) { return y / 1125899906842624 + "P" } else if (abs_y >= 1099511627776){ return y / 1099511627776 + "T" } else if (abs_y >= 1073741824) { return y / 1073741824 + "G" } else if (abs_y >= 1048576) { return y / 1048576 + "M" } else if (abs_y >= 1024) { return y / 1024 + "K" } else if (abs_y < 1 && y > 0) { return y.toFixed(2) } else if (abs_y === 0) { return '' } else { return y } }; /*---------Rickshaw.Fixtures.RandomData.js---------*/ Rickshaw.namespace('Rickshaw.Fixtures.RandomData'); Rickshaw.Fixtures.RandomData = function(timeInterval) { var addData; timeInterval = timeInterval || 1; var lastRandomValue = 200; var timeBase = Math.floor(new Date().getTime() / 1000); this.addData = function(data) { var randomValue = Math.random() * 100 + 15 + lastRandomValue; var index = data[0].length; var counter = 1; data.forEach( function(series) { var randomVariance = Math.random() * 20; var v = randomValue / 25 + counter++ + (Math.cos((index * counter * 11) / 960) + 2) * 15 + (Math.cos(index / 7) + 2) * 7 + (Math.cos(index / 17) + 2) * 1; series.push( { x: (index * timeInterval) + timeBase, y: v + randomVariance } ); } ); lastRandomValue = randomValue * 0.85; }; this.removeData = function(data) { data.forEach( function(series) { series.shift(); } ); timeBase += timeInterval; }; }; /*---------Rickshaw.Fixtures.Color.js---------*/ Rickshaw.namespace('Rickshaw.Fixtures.Color'); Rickshaw.Fixtures.Color = function() { this.schemes = {}; this.schemes.spectrum14 = [ '#ecb796', '#dc8f70', '#b2a470', '#92875a', '#716c49', '#d2ed82', '#bbe468', '#a1d05d', '#e7cbe6', '#d8aad6', '#a888c2', '#9dc2d3', '#649eb9', '#387aa3' ].reverse(); this.schemes.spectrum2000 = [ '#57306f', '#514c76', '#646583', '#738394', '#6b9c7d', '#84b665', '#a7ca50', '#bfe746', '#e2f528', '#fff726', '#ecdd00', '#d4b11d', '#de8800', '#de4800', '#c91515', '#9a0000', '#7b0429', '#580839', '#31082b' ]; this.schemes.spectrum2001 = [ '#2f243f', '#3c2c55', '#4a3768', '#565270', '#6b6b7c', '#72957f', '#86ad6e', '#a1bc5e', '#b8d954', '#d3e04e', '#ccad2a', '#cc8412', '#c1521d', '#ad3821', '#8a1010', '#681717', '#531e1e', '#3d1818', '#320a1b' ]; this.schemes.classic9 = [ '#423d4f', '#4a6860', '#848f39', '#a2b73c', '#ddcb53', '#c5a32f', '#7d5836', '#963b20', '#7c2626', '#491d37', '#2f254a' ].reverse(); this.schemes.httpStatus = { 503: '#ea5029', 502: '#d23f14', 500: '#bf3613', 410: '#efacea', 409: '#e291dc', 403: '#f457e8', 408: '#e121d2', 401: '#b92dae', 405: '#f47ceb', 404: '#a82a9f', 400: '#b263c6', 301: '#6fa024', 302: '#87c32b', 307: '#a0d84c', 304: '#28b55c', 200: '#1a4f74', 206: '#27839f', 201: '#52adc9', 202: '#7c979f', 203: '#a5b8bd', 204: '#c1cdd1' }; this.schemes.colorwheel = [ '#b5b6a9', '#858772', '#785f43', '#96557e', '#4682b4', '#65b9ac', '#73c03a', '#cb513a' ].reverse(); this.schemes.cool = [ '#5e9d2f', '#73c03a', '#4682b4', '#7bc3b8', '#a9884e', '#c1b266', '#a47493', '#c09fb5' ]; this.schemes.munin = [ '#00cc00', '#0066b3', '#ff8000', '#ffcc00', '#330099', '#990099', '#ccff00', '#ff0000', '#808080', '#008f00', '#00487d', '#b35a00', '#b38f00', '#6b006b', '#8fb300', '#b30000', '#bebebe', '#80ff80', '#80c9ff', '#ffc080', '#ffe680', '#aa80ff', '#ee00cc', '#ff8080', '#666600', '#ffbfff', '#00ffcc', '#cc6699', '#999900' ]; }; /*---------Rickshaw.Color.Palette.js---------*/ Rickshaw.namespace("Rickshaw.Color.Palette"); Rickshaw.Color.Palette = function(args) { var color = new Rickshaw.Fixtures.Color(); args = args || {}; this.schemes = {}; this.scheme = color.schemes[args.scheme] || args.scheme || color.schemes.colorwheel; this.runningIndex = 0; this.generatorIndex = 0; if (args.interpolatedStopCount) { var schemeCount = this.scheme.length - 1; var i, j, scheme = []; for (i = 0; i < schemeCount; i++) { scheme.push(this.scheme[i]); var generator = d3.interpolateHsl(this.scheme[i], this.scheme[i + 1]); for (j = 1; j < args.interpolatedStopCount; j++) { scheme.push(generator((1 / args.interpolatedStopCount) * j)); } } scheme.push(this.scheme[this.scheme.length - 1]); this.scheme = scheme; } this.rotateCount = this.scheme.length; this.color = function(key) { return this.scheme[key] || this.scheme[this.runningIndex++] || this.interpolateColor() || '#808080'; }; this.interpolateColor = function() { if (!Array.isArray(this.scheme)) return; var color; if (this.generatorIndex == this.rotateCount * 2 - 1) { color = d3.interpolateHsl(this.scheme[this.generatorIndex], this.scheme[0])(0.5); this.generatorIndex = 0; this.rotateCount *= 2; } else { color = d3.interpolateHsl(this.scheme[this.generatorIndex], this.scheme[this.generatorIndex + 1])(0.5); this.generatorIndex++; } this.scheme.push(color); return color; }; }; /*---------Rickshaw.Graph.Axis.Y.js---------*/ Rickshaw.namespace('Rickshaw.Graph.Axis.Y'); Rickshaw.Graph.Axis.Y = Rickshaw.Class.create( { initialize: function(args) { this.graph = args.graph; this.orientation = args.orientation || 'right'; this.pixelsPerTick = args.pixelsPerTick || 75; if (args.ticks) this.staticTicks = args.ticks; if (args.tickValues) this.tickValues = args.tickValues; this.tickSize = args.tickSize || 4; this.ticksTreatment = args.ticksTreatment || 'plain'; this.tickFormat = args.tickFormat || function(y) { return y }; this.berthRate = 0.10; if (args.element) { this.element = args.element; this.vis = d3.select(args.element) .append("svg:svg") .attr('class', 'rickshaw_graph y_axis'); this.element = this.vis[0][0]; this.element.style.position = 'relative'; this.setSize({ width: args.width, height: args.height }); } else { this.vis = this.graph.vis; } var self = this; this.graph.onUpdate( function() { self.render() } ); }, setSize: function(args) { args = args || {}; if (!this.element) return; if (typeof window !== 'undefined') { var style = window.getComputedStyle(this.element.parentNode, null); var elementWidth = parseInt(style.getPropertyValue('width'), 10); if (!args.auto) { var elementHeight = parseInt(style.getPropertyValue('height'), 10); } } this.width = args.width || elementWidth || this.graph.width * this.berthRate; this.height = args.height || elementHeight || this.graph.height; this.vis .attr('width', this.width) .attr('height', this.height * (1 + this.berthRate)); var berth = this.height * this.berthRate; if (this.orientation == 'left') { this.element.style.top = -1 * berth + 'px'; } }, render: function() { if (this._renderHeight !== undefined && this.graph.height !== this._renderHeight) this.setSize({ auto: true }); this.ticks = this.staticTicks || Math.floor(this.graph.height / this.pixelsPerTick); var axis = this._drawAxis(this.graph.y); this._drawGrid(axis); this._renderHeight = this.graph.height; }, _drawAxis: function(scale) { var axis = d3.svg.axis().scale(scale).orient(this.orientation); axis.tickFormat(this.tickFormat); if (this.tickValues) axis.tickValues(this.tickValues); if (this.orientation == 'left') { var berth = this.height * this.berthRate; var transform = 'translate(' + this.width + ', ' + berth + ')'; } if (this.element) { this.vis.selectAll('*').remove(); } this.vis .append("svg:g") .attr("class", ["y_ticks", this.ticksTreatment].join(" ")) .attr("transform", transform) .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize)); return axis; }, _drawGrid: function(axis) { var gridSize = (this.orientation == 'right' ? 1 : -1) * this.graph.width; this.graph.vis .append("svg:g") .attr("class", "y_grid") .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize)) .selectAll('text') .each(function() { this.parentNode.setAttribute('data-y-value', this.textContent) }); } } ); /*---------extensions.js---------*/ var RenderControls = function(args) { var $ = jQuery; this.initialize = function() { this.element = args.element; this.graph = args.graph; this.settings = this.serialize(); this.inputs = { renderer: this.element.elements.renderer, interpolation: this.element.elements.interpolation, offset: this.element.elements.offset }; this.element.addEventListener('change', function(e) { this.settings = this.serialize(); if (e.target.name == 'renderer') { this.setDefaultOffset(e.target.value); } this.syncOptions(); this.settings = this.serialize(); var config = { renderer: this.settings.renderer, interpolation: this.settings.interpolation }; if (this.settings.offset == 'value') { config.unstack = true; config.offset = 'zero'; } else if (this.settings.offset == 'expand') { config.unstack = false; config.offset = this.settings.offset; } else { config.unstack = false; config.offset = this.settings.offset; } this.graph.configure(config); this.graph.render(); }.bind(this), false); } this.serialize = function() { var values = {}; var pairs = $(this.element).serializeArray(); pairs.forEach( function(pair) { values[pair.name] = pair.value; } ); return values; }; this.syncOptions = function() { var options = this.rendererOptions[this.settings.renderer]; Array.prototype.forEach.call(this.inputs.interpolation, function(input) { if (options.interpolation) { input.disabled = false; input.parentNode.classList.remove('disabled'); } else { input.disabled = true; input.parentNode.classList.add('disabled'); } }); Array.prototype.forEach.call(this.inputs.offset, function(input) { if (options.offset.filter( function(o) { return o == input.value } ).length) { input.disabled = false; input.parentNode.classList.remove('disabled'); } else { input.disabled = true; input.parentNode.classList.add('disabled'); } }.bind(this)); }; this.setDefaultOffset = function(renderer) { var options = this.rendererOptions[renderer]; if (options.defaults && options.defaults.offset) { Array.prototype.forEach.call(this.inputs.offset, function(input) { if (input.value == options.defaults.offset) { input.checked = true; } else { input.checked = false; } }.bind(this)); } }; this.rendererOptions = { area: { interpolation: true, offset: ['zero', 'wiggle', 'expand', 'value'], defaults: { offset: 'zero' } }, line: { interpolation: true, offset: ['expand', 'value'], defaults: { offset: 'value' } }, bar: { interpolation: false, offset: ['zero', 'wiggle', 'expand', 'value'], defaults: { offset: 'zero' } }, scatterplot: { interpolation: false, offset: ['value'], defaults: { offset: 'value' } } }; this.initialize(); }; /*---------Rickshaw.Series.js---------*/ Rickshaw.namespace('Rickshaw.Series'); Rickshaw.Series = Rickshaw.Class.create( Array, { initialize: function (data, palette, options) { options = options || {}; this.palette = new Rickshaw.Color.Palette(palette); this.timeBase = typeof(options.timeBase) === 'undefined' ? Math.floor(new Date().getTime() / 1000) : options.timeBase; var timeInterval = typeof(options.timeInterval) == 'undefined' ? 1000 : options.timeInterval; this.setTimeInterval(timeInterval); if (data && (typeof(data) == "object") && Array.isArray(data)) { data.forEach( function(item) { this.addItem(item) }, this ); } }, addItem: function(item) { if (typeof(item.name) === 'undefined') { throw('addItem() needs a name'); } item.color = (item.color || this.palette.color(item.name)); item.data = (item.data || []); // backfill, if necessary if ((item.data.length === 0) && this.length && (this.getIndex() > 0)) { this[0].data.forEach( function(plot) { item.data.push({ x: plot.x, y: 0 }); } ); } else if (item.data.length === 0) { item.data.push({ x: this.timeBase - (this.timeInterval || 0), y: 0 }); } this.push(item); if (this.legend) { this.legend.addLine(this.itemByName(item.name)); } }, addData: function(data, x) { var index = this.getIndex(); Rickshaw.keys(data).forEach( function(name) { if (! this.itemByName(name)) { this.addItem({ name: name }); } }, this ); this.forEach( function(item) { item.data.push({ x: x || (index * this.timeInterval || 1) + this.timeBase, y: (data[item.name] || 0) }); }, this ); }, getIndex: function () { return (this[0] && this[0].data && this[0].data.length) ? this[0].data.length : 0; }, itemByName: function(name) { for (var i = 0; i < this.length; i++) { if (this[i].name == name) return this[i]; } }, setTimeInterval: function(iv) { this.timeInterval = iv / 1000; }, setTimeBase: function (t) { this.timeBase = t; }, dump: function() { var data = { timeBase: this.timeBase, timeInterval: this.timeInterval, items: [] }; this.forEach( function(item) { var newItem = { color: item.color, name: item.name, data: [] }; item.data.forEach( function(plot) { newItem.data.push({ x: plot.x, y: plot.y }); } ); data.items.push(newItem); } ); return data; }, load: function(data) { if (data.timeInterval) { this.timeInterval = data.timeInterval; } if (data.timeBase) { this.timeBase = data.timeBase; } if (data.items) { data.items.forEach( function(item) { this.push(item); if (this.legend) { this.legend.addLine(this.itemByName(item.name)); } }, this ); } } } ); Rickshaw.Series.zeroFill = function(series) { Rickshaw.Series.fill(series, 0); }; Rickshaw.Series.fill = function(series, fill) { var x; var i = 0; var data = series.map( function(s) { return s.data } ); while ( i < Math.max.apply(null, data.map( function(d) { return d.length } )) ) { x = Math.min.apply( null, data .filter(function(d) { return d[i] }) .map(function(d) { return d[i].x }) ); data.forEach( function(d) { if (!d[i] || d[i].x != x) { d.splice(i, 0, { x: x, y: fill }); } } ); i++; } };