diff options
Diffstat (limited to 'src_js/rickshaw.js')
| -rw-r--r-- | src_js/rickshaw.js | 4068 |
1 files changed, 4068 insertions, 0 deletions
diff --git a/src_js/rickshaw.js b/src_js/rickshaw.js new file mode 100644 index 0000000..c2d5519 --- /dev/null +++ b/src_js/rickshaw.js @@ -0,0 +1,4068 @@ +(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) { +/* 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)); + } +}; +/* Adapted from https://github.com/Jakobo/PTClass */ + +/* +Copyright (c) 2005-2010 Sam Stephenson + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ +/* Based on Alex Arnell's inheritance implementation. */ +/** section: Language + * class Class + * + * Manages Prototype's class-based OOP system. + * + * Refer to Prototype's web site for a [tutorial on classes and + * inheritance](http://prototypejs.org/learn/class-inheritance). +**/ +(function(globalContext) { +/* ------------------------------------ */ +/* Import from object.js */ +/* ------------------------------------ */ +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.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.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.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() / 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.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.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.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.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.namespace('Rickshaw.Graph.Ajax'); + +Rickshaw.Graph.Ajax = Rickshaw.Class.create( { + + initialize: function(args) { + + this.dataURL = args.dataURL; + + this.onData = args.onData || function(d) { return d }; + this.onComplete = args.onComplete || function() {}; + this.onError = args.onError || function() {}; + + this.args = args; // pass through to Rickshaw.Graph + + this.request(); + }, + + request: function() { + + jQuery.ajax( { + url: this.dataURL, + dataType: 'json', + success: this.success.bind(this), + error: this.error.bind(this) + } ); + }, + + error: function() { + + console.log("error loading dataURL: " + this.dataURL); + this.onError(this); + }, + + success: function(data, status) { + + data = this.onData(data); + this.args.series = this._splice({ data: data, series: this.args.series }); + + this.graph = this.graph || new Rickshaw.Graph(this.args); + this.graph.render(); + + this.onComplete(this); + }, + + _splice: function(args) { + + var data = args.data; + var series = args.series; + + if (!args.series) return data; + + series.forEach( function(s) { + + var seriesKey = s.key || s.name; + if (!seriesKey) throw "series needs a key or a name"; + + data.forEach( function(d) { + + var dataKey = d.key || d.name; + if (!dataKey) throw "data needs a key or a name"; + + if (seriesKey == dataKey) { + var properties = ['color', 'name', 'data']; + properties.forEach( function(p) { + if (d[p]) s[p] = d[p]; + } ); + } + } ); + } ); + + return series; + } +} ); + +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.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.namespace('Rickshaw.Graph.Axis.X'); + +Rickshaw.Graph.Axis.X = function(args) { + + var self = this; + var berthRate = 0.10; + + 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 = 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) }); + } +} ); +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) { + // Adjust scale's domain to compensate for adjustments to the + // renderer's domain (e.g. padding). + var domain = this.scale.domain(); + var renderDomain = this.graph.renderer.domain().y; + + var extents = [ + Math.min.apply(Math, domain), + Math.max.apply(Math, domain)]; + + // A mapping from the ideal render domain [0, 1] to the extent + // of the original scale's domain. This is used to calculate + // the extents of the adjusted domain. + var extentMap = d3.scale.linear().domain([0, 1]).range(extents); + + var adjExtents = [ + extentMap(renderDomain[0]), + extentMap(renderDomain[1])]; + + // A mapping from the original domain to the adjusted domain. + var adjustment = d3.scale.linear().domain(extents).range(adjExtents); + + // Make a copy of the custom scale, apply the adjusted domain, and + // copy the range to match the graph's scale. + var adjustedScale = this.scale.copy() + .domain(domain.map(adjustment)) + .range(scale.range()); + + return $super(adjustedScale); + }, + + _drawGrid: function($super, axis) { + if (this.grid) { + // only draw the axis if the grid option is true + $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'))(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.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.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.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.namespace('Rickshaw.Graph.JSONP'); + +Rickshaw.Graph.JSONP = Rickshaw.Class.create( Rickshaw.Graph.Ajax, { + + request: function() { + + jQuery.ajax( { + url: this.dataURL, + dataType: 'jsonp', + success: this.success.bind(this), + error: this.error.bind(this) + } ); + } +} ); +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.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.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.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.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: 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.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.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.namespace('Rickshaw.Graph.Renderer.Multi'); + +Rickshaw.Graph.Renderer.Multi = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { + + name: 'multi', + + initialize: function($super, args) { + + $super(args); + }, + + defaults: function($super) { + + return Rickshaw.extend( $super(), { + unstack: true, + fill: false, + stroke: true + } ); + }, + + configure: function($super, args) { + + args = args || {}; + this.config = args; + $super(args); + }, + + domain: function($super) { + + this.graph.stackData(); + + var domains = []; + + var groups = this._groups(); + this._stack(groups); + + groups.forEach( function(group) { + + var data = group.series + .filter( function(s) { return !s.disabled } ) + .map( function(s) { return s.stack }); + + if (!data.length) return; + + var domain = null; + if (group.renderer && group.renderer.domain) { + domain = group.renderer.domain(data); + } + else { + domain = $super(data); + } + domains.push(domain); + }); + + var xMin = d3.min(domains.map( function(d) { return d.x[0] } )); + var xMax = d3.max(domains.map( function(d) { return d.x[1] } )); + var yMin = d3.min(domains.map( function(d) { return d.y[0] } )); + var yMax = d3.max(domains.map( function(d) { return d.y[1] } )); + + return { x: [xMin, xMax], y: [yMin, yMax] }; + }, + + _groups: function() { + + var graph = this.graph; + + var renderGroups = {}; + + graph.series.forEach( function(series) { + + if (series.disabled) return; + + if (!renderGroups[series.renderer]) { + + var ns = "http://www.w3.org/2000/svg"; + var vis = document.createElementNS(ns, 'g'); + + graph.vis[0][0].appendChild(vis); + + var renderer = graph._renderers[series.renderer]; + + var config = {}; + + var defaults = [ this.defaults(), renderer.defaults(), this.config, this.graph ]; + defaults.forEach(function(d) { Rickshaw.extend(config, d) }); + + renderer.configure(config); + + renderGroups[series.renderer] = { + renderer: renderer, + series: [], + vis: d3.select(vis) + }; + } + + renderGroups[series.renderer].series.push(series); + + }, this); + + var groups = []; + + Object.keys(renderGroups).forEach( function(key) { + var group = renderGroups[key]; + groups.push(group); + }); + + return groups; + }, + + _stack: function(groups) { + + groups.forEach( function(group) { + + var series = group.series + .filter( function(series) { return !series.disabled } ); + + var data = series + .map( function(series) { return series.stack } ); + + if (!group.renderer.unstack) { + + var layout = d3.layout.stack(); + var stackedData = Rickshaw.clone(layout(data)); + + series.forEach( function(series, index) { + series._stack = Rickshaw.clone(stackedData[index]); + }); + } + + }, this ); + + return groups; + + }, + + render: function() { + + this.graph.series.forEach( function(series) { + if (!series.renderer) { + throw new Error("Each series needs a renderer for graph 'multi' renderer"); + } + }); + + this.graph.vis.selectAll('*').remove(); + + var groups = this._groups(); + groups = this._stack(groups); + + groups.forEach( function(group) { + + var series = group.series + .filter( function(series) { return !series.disabled } ); + + series.active = function() { return series }; + + group.renderer.render({ series: series, vis: group.vis }); + series.forEach(function(s) { s.stack = s._stack || s.stack || s.data; }); + }); + } + +} ); +Rickshaw.namespace('Rickshaw.Graph.Renderer.LinePlot'); + +Rickshaw.Graph.Renderer.LinePlot = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { + + name: 'lineplot', + + defaults: function($super) { + + return Rickshaw.extend( $super(), { + unstack: true, + fill: false, + stroke: true, + padding:{ top: 0.01, right: 0.01, bottom: 0.01, left: 0.01 }, + dotSize: 3, + strokeWidth: 2 + } ); + }, + + 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; + }, + + 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(); + + var data = series + .filter(function(s) { return !s.disabled }) + .map(function(s) { return s.stack }); + + var nodes = vis.selectAll("path") + .data(data) + .enter().append("svg:path") + .attr("d", this.seriesPathFactory()); + + var i = 0; + series.forEach(function(series) { + if (series.disabled) return; + series.path = nodes[0][i++]; + this._styleSeries(series); + }, this); + + series.forEach(function(series) { + + if (series.disabled) return; + + var nodes = vis.selectAll("x") + .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}); + + Array.prototype.forEach.call(nodes[0], function(n) { + if (!n) return; + n.setAttribute('data-color', series.color); + n.setAttribute('fill', 'white'); + n.setAttribute('stroke', series.color); + n.setAttribute('stroke-width', this.strokeWidth); + + }.bind(this)); + + }, this); + } +} ); + +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.namespace('Rickshaw.Graph.Socketio'); + +Rickshaw.Graph.Socketio = Rickshaw.Class.create( Rickshaw.Graph.Ajax, { + request: function() { + var socket = io.connect(this.dataURL); + var self = this; + socket.on('rickshaw', function (data) { + self.success(data); + }); + } +} ); +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++; + } +}; + +Rickshaw.namespace('Rickshaw.Series.FixedDuration'); + +Rickshaw.Series.FixedDuration = Rickshaw.Class.create(Rickshaw.Series, { + + initialize: function (data, palette, options) { + + options = options || {}; + + if (typeof(options.timeInterval) === 'undefined') { + throw new Error('FixedDuration series requires timeInterval'); + } + + if (typeof(options.maxDataPoints) === 'undefined') { + throw new Error('FixedDuration series requires maxDataPoints'); + } + + this.palette = new Rickshaw.Color.Palette(palette); + this.timeBase = typeof(options.timeBase) === 'undefined' ? Math.floor(new Date().getTime() / 1000) : options.timeBase; + this.setTimeInterval(options.timeInterval); + + if (this[0] && this[0].data && this[0].data.length) { + this.currentSize = this[0].data.length; + this.currentIndex = this[0].data.length; + } else { + this.currentSize = 0; + this.currentIndex = 0; + } + + this.maxDataPoints = options.maxDataPoints; + + + if (data && (typeof(data) == "object") && Array.isArray(data)) { + data.forEach( function (item) { this.addItem(item) }, this ); + this.currentSize += 1; + this.currentIndex += 1; + } + + // reset timeBase for zero-filled values if needed + this.timeBase -= (this.maxDataPoints - this.currentSize) * this.timeInterval; + + // zero-fill up to maxDataPoints size if we don't have that much data yet + if ((typeof(this.maxDataPoints) !== 'undefined') && (this.currentSize < this.maxDataPoints)) { + for (var i = this.maxDataPoints - this.currentSize - 1; i > 1; 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; +})); |