shutterstock / rickshaw / 117

pending completion

Build # 117

Build Type

Pull #607

travis-ci

Committed by

web-flow

Commit Message

Fix positioning of hoverdetail in chrome when zooming

This commit changes the calculation of the current mouse position to use
`MouseEvent.clientX/Y` (mouse position in relation to the viewport) and
`Element.getBoundingClientRect()` (element position in relation to the
viewport).

`event.layerX/Y` is non-standard and seems to return different values
than we are expecting if there is zooming involved in Chrome.

Demo, zoom in and hover the square:
https://jsfiddle.net/6gnpL75j/

An earlier commit reverted the order of layer vs offset and fixed a
positioning bug in Firefox while introducing this new one in Chrome:
https://github.com/shutterstock/rickshaw/commit/c81f03768
I looked around for that Firefox positioning bug in v1.6.0 which I found
in: http://code.shutterstock.com/rickshaw/examples/extensions.html
With this PR, both Chrome and Firefox show labels in the correct spot.

More information:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX

Chromium issue:
https://bugs.chromium.org/p/chromium/issues/detail?id=323518

Pull Request Pull Request #607: Fix positioning of hoverdetail in chrome when zooming

Run Details

514 of 979 branches covered (52.5%)

1178 of 1873 relevant lines covered (62.89%)

99.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

62.89

/rickshaw.js

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['d3'], function (d3) {
            return (root.Rickshaw = factory(d3));
        });
    } else if (typeof exports === 'object') {
        module.exports = factory(require('d3'));
    } else {
        root.Rickshaw = factory(d3);
    }
}(this, function (d3) {
/* jshint -W079 */

var Rickshaw = {
        version: '1.6.4',

        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.setSeries(args.series);

                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.setSeries = function(series) {
                this.validateSeries(series);
                this.series = series;
                this.series.active = function() { return self.series.filter( function(s) { return !s.disabled } ) };
        };

        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() + 'm' }
                }, {
                        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, offset;

                if (unit.name == 'day') {

                        var nearFuture = new Date((time + unit.seconds - 1) * 1000);

                        var rounded = new Date(0);
                        rounded.setFullYear(nearFuture.getFullYear());
                        rounded.setMonth(nearFuture.getMonth());
                        rounded.setDate(nearFuture.getDate());
                        rounded.setMilliseconds(0);
                        rounded.setSeconds(0);
                        rounded.setMinutes(0);
                        rounded.setHours(0);

                        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;
                }
                offset = new Date(time * 1000).getTimezoneOffset() * 60;
                return Math.ceil((time - offset) / unit.seconds) * unit.seconds + offset;
        };
};
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 && abs_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 && abs_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 bar_offset = this.graph.renderer.name == "bar" && Math.ceil(this.graph.width * 0.95 / this.graph.series[0].data.length / 2) || 0;

                var transform;

                if (this.orientation == 'top') {
                        var yOffset = this.height || this.graph.height;
                        transform = 'translate(' + (berth + bar_offset) + ',' + yOffset + ')';
                } else {
                        transform = 'translate(' + (berth + bar_offset) + ', 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) {

                if (typeof jQuery != 'undefined' && jQuery(this.legend.list).sortable) {
                        jQuery(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.DragZoom');

Rickshaw.Graph.DragZoom = Rickshaw.Class.create({

        initialize: function(args) {
                if (!args || !args.graph) {
                        throw new Error("Rickshaw.Graph.DragZoom needs a reference to a graph");
                }
                var defaults = {
                        opacity: 0.5,
                        fill: 'steelblue',
                        minimumTimeSelection: 60,
                        callback: function() {}
                };

                this.graph = args.graph;
                this.svg = d3.select(this.graph.element).select("svg");
                this.svgWidth = parseInt(this.svg.attr("width"), 10);
                this.opacity = args.opacity || defaults.opacity;
                this.fill = args.fill || defaults.fill;
                this.minimumTimeSelection = args.minimumTimeSelection || defaults.minimumTimeSelection;
                this.callback = args.callback || defaults.callback;

                this.registerMouseEvents();
        },

        registerMouseEvents: function() {
                var self = this;
                var ESCAPE_KEYCODE = 27;
                var rectangle;

                var drag = {
                        startDt: null,
                        stopDt: null,
                        startPX: null,
                        stopPX: null
                };

                this.svg.on("mousedown", onMousedown);

                function onMouseup(datum, index) {
                        drag.stopDt = pointAsDate(d3.event);
                        var windowAfterDrag = [
                                drag.startDt,
                                drag.stopDt
                        ].sort(compareNumbers);

                        self.graph.window.xMin = windowAfterDrag[0];
                        self.graph.window.xMax = windowAfterDrag[1];

                        var endTime = self.graph.window.xMax;
                        var range = self.graph.window.xMax - self.graph.window.xMin;

                        reset(this);

                        if (range < self.minimumTimeSelection || isNaN(range)) {
                                return;
                        }
                        self.graph.update();
                        self.callback({range: range, endTime: endTime});
                }

                function onMousemove() {
                        var offset = drag.stopPX = (d3.event.offsetX || d3.event.layerX);
                        if (offset > (self.svgWidth - 1) || offset < 1) {
                                return;
                        }

                        var limits = [drag.startPX, offset].sort(compareNumbers);
                        var selectionWidth = limits[1]-limits[0];
                        if (isNaN(selectionWidth)) {
                                return reset(this);
                        }
                        rectangle.attr("fill", self.fill)
                        .attr("x", limits[0])
                        .attr("width", selectionWidth);
                }

                function onMousedown() {
                        var el = d3.select(this);
                        rectangle = el.append("rect")
                        .style("opacity", self.opacity)
                        .attr("y", 0)
                        .attr("height", "100%");

                        if(d3.event.preventDefault) {
                                d3.event.preventDefault();
                        } else {
                                d3.event.returnValue = false;
                        }
                        drag.target = d3.event.target;
                        drag.startDt = pointAsDate(d3.event);
                        drag.startPX = d3.event.offsetX || d3.event.layerX;
                        el.on("mousemove", onMousemove);
                        d3.select(document).on("mouseup", onMouseup);
                        d3.select(document).on("keyup", function() {
                                if (d3.event.keyCode === ESCAPE_KEYCODE) {
                                        reset(this);
                                }
                        });
                }

                function reset(el) {
                        var s = d3.select(el);
                        s.on("mousemove", null);
                        d3.select(document).on("mouseup", null);
                        drag = {};
                        rectangle.remove();
                }

                function compareNumbers(a, b) {
                        return a - b;
                }

                function pointAsDate(e) {
                        return Math.floor(self.graph.x.invert(e.offsetX || e.layerX));
                }
        }
});
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 inactive';

                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.layerX || e.offsetX;
                var eventY = e.layerY || e.offsetY;

                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() {

                // Keep reference for later removal.
                this.mousemoveListener = function(e) {
                        this.visible = true;
                        this.update(e);
                }.bind(this);

                // Add listener.
                this.graph.element.addEventListener(
                        'mousemove',
                        this.mousemoveListener,
                        false
                );

                this.graph.onUpdate( function() { this.update() }.bind(this) );

                // Keep reference for later removal.
                this.mouseoutListener = function(e) {
                        if (e.relatedTarget && !(e.relatedTarget.compareDocumentPosition(this.graph.element) & Node.DOCUMENT_POSITION_CONTAINS)) {
                                this.hide();
                        }
                }.bind(this);

                // Add listener.
                this.graph.element.addEventListener(
                        'mouseout',
                        this.mouseoutListener,
                        false
                );
        },

        _removeListeners: function() {
                if (this.mousemoveListener) {
                        this.graph.element.removeEventListener('mousemove', this.mousemoveListener, false);
                }
                if (this.mouseoutListener) {
                        this.graph.element.removeEventListener('mouseout', this.mouseoutListener, 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 $ = jQuery;
                var self = this;
                var element = this.element = args.element;
                var graphs = this.graphs = args.graphs;
                if (!graphs) {
                        graphs = this.graph = args.graph;
                }
                if (graphs.constructor !== Array) {
                        graphs = [graphs];
                }
                this.graph = graphs[0];

                this.slideCallbacks = [];

                this.build();

                for (var i = 0; i < graphs.length; i++) {
                        graphs[i].onUpdate(function() {
                                self.update();
                        }.bind(self));

                        (function(idx){
                                graphs[idx].onConfigure(function() {
                                        $(this.element)[0].style.width = graphs[idx].width + 'px';
                                }.bind(self));
                        })(i);
                }

        },

        build: function() {

                var domain;
                var element = this.element;
                var $ = jQuery;
                var self = this;
                var graphs = this.graphs || this.graph;

                if (graphs.constructor !== Array) {
                        graphs = [graphs];
                }

                // base the slider's min/max on the first graph
                this.graph = graphs[0];
                domain = graphs[0].dataDomain();

                $(function() {
                        $(element).slider({
                                range: true,
                                min: domain[0],
                                max: domain[1],
                                values: [
                                        domain[0],
                                        domain[1]
                                ],
                                start: function(event, ui) {
                                        self.slideStarted({ event: event, ui: ui });
                                },
                                stop: function(event, ui) {
                                        self.slideFinished({ event: event, ui: ui });
                                },
                                slide: function(event, ui) {
                                        if (!self.slideShouldUpdate(event, ui))
                                                return;

                                        if (ui.values[1] <= ui.values[0]) return;

                                        for (var i = 0; i < graphs.length; i++) {
                                                self.processSlideChange({
                                                        event: event,
                                                        ui: ui,
                                                        graph: graphs[i]
                                                });
                                        }
                                }
                        } );
                } );

                graphs[0].onConfigure(function() {
                        $(this.element)[0].style.width = graphs[0].width + 'px';
                }.bind(this));

        },

        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);
        },

        processSlideChange: function(args) {
                var event = args.event;
                var ui = args.ui;
                var graph = args.graph;

                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;
                }

                this.slideCallbacks.forEach(function(callback) {
                        callback(graph, graph.window.xMin, graph.window.xMax);
                });

        },

        // allows the slide updates to bail out if sliding is not permitted
        slideShouldUpdate: function() {
                return true;
        },

        slideStarted: function() {
                return;
        },

        slideFinished: function() {
                return;
        }
});

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,
                        opacity: 1
                };
        },

        domain: function(data) {
                // Requires that at least one series contains some data
                var stackedData = data || this.graph.stackedData || this.graph.stackData();

                // filter out any series that may be empty in the current x-domain
                stackedData = stackedData.filter(function (a) { return a && a.length !== 0; });

                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';
                var strokeWidth = series.strokeWidth ? series.strokeWidth : this.strokeWidth;
                var opacity = series.opacity ? series.opacity : this.opacity;

                series.path.setAttribute('fill', fill);
                series.path.setAttribute('stroke', stroke);
                series.path.setAttribute('stroke-width', strokeWidth);
                series.path.setAttribute('opacity', opacity);

                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,
                        opacity: 1.0
                } );

                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("opacity", series.opacity)
                                .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 };
                
                // Sorting object's keys returned to guarantee consistency when iterating over
                // Keys order in `for .. in` loop is not specified and browsers behave differently here
                // This results with different invterval value being calculated for different browsers
                // See last but one section here: http://www.ecma-international.org/ecma-262/5.1/#sec-12.6.4
                var keysSorted = Rickshaw.keys(intervalCounts).sort(function asc(a, b) { return Number(a) - Number(b); });
                keysSorted.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 opacity = series.opacity ? series.opacity : 1;

                        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})
                                        .attr("opacity", function(d) { return ("opacity" in d) ? d.opacity : opacity});
                        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;
}));

shutterstock / rickshaw / 117

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous