summaryrefslogtreecommitdiffstats
path: root/src_js/rickshaw.js
diff options
context:
space:
mode:
Diffstat (limited to 'src_js/rickshaw.js')
-rw-r--r--src_js/rickshaw.js4068
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 = '&#10004;';
+ 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 + ':&nbsp;' + 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;
+}));