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.17',

  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

  // Compatibility mappings to look up the d3v4 functions for d3v3 strings.
  var curves = {
    basis: d3.curveBasis,
    'basis-closed': d3.curveBasisClosed,
    'basis-open': d3.curveBasisOpen,
    bundle: d3.curveBundle,
    cardinal: d3.curveCardinal,
    'cardinal-closed': d3.curveCardinalClosed,
    'cardinal-open': d3.curveCardinalOpen,
    linear: d3.curveLinear,
    monotone: d3.curveMonotoneX,
    'step-after': d3.curveStepAfter,
    'step-before': d3.curveStepBefore
  }
  var offsets = {
    zero: d3.stackOffsetNone,
    wiggle: d3.stackOffsetWiggle,
    expand: d3.stackOffsetExpand,
    silhouette: d3.stackOffsetSilhouette
  }
  var orderings = {
    'inside-out': d3.stackOrderInsideOut,
    reverse: d3.stackOrderReverse,
    default: d3.stackOrderNone
  }

  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: d3.stackOffsetNone,
      min: undefined,
      max: undefined,
      preserve: false,
      xScale: undefined,
      yScale: undefined,
      stack: true
    }

    this._loadRenderers()
    this.configure(args)
    this.setSeries(args.series)
    this.setBands(args.bands)

    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() {
    this._bandRenderer = new Rickshaw.Graph.Band({ graph: self })

    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.validateBands = function(bands) {
    if (!Array.isArray(bands)) {
      var seriesSignature = Object.prototype.toString.apply(bands)
      throw 'bands is not an array: ' + seriesSignature
    }

    bands.forEach(function(b) {
      if (!(b instanceof Object)) {
        throw 'bands element is not an object: ' + b
      }
      if (!b.from) {
        throw 'series has no from value: ' + JSON.stringify(b)
      }
      if (!b.to) {
        throw 'series has no to value: ' + JSON.stringify(b)
      }

      // TODO: What to do about opacity and color? Define defaults
      // or throw errors for them here.
    }, this)
  }

  this.setBands = function(bands) {
    this.bands = bands || []
    this.validateBands(this.bands)
    this.bands.active = function() {
      return self.bands.filter(function(s) {
        return !s.disabled
      })
    }
  }

  this.renderBands = function() {
    this._bandRenderer.render()
  }

  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.scaleLinear())
      .copy()
      .domain(domain.x)
      .range([0, this.width])
    this.y = (this.yScale || d3.scaleLinear())
      .copy()
      .domain(domain.y)
      .range([this.height, 0])

    this.x.magnitude = d3
      .scaleLinear()
      .domain([domain.x[0] - domain.x[0], domain.x[1] - domain.x[0]])
      .range([0, this.width])

    this.y.magnitude = d3
      .scaleLinear()
      .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.renderBands()

    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()
      stackedData = Rickshaw.stack(data, this.offset || d3.stackOffsetNone)
    } else {
      data.forEach(function(seriesData) {
        seriesData.forEach(function(d) {
          d.y0 = d.y0 === undefined ? 0 : d.y0
        })
      })
      stackedData = data
    }

    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)
    this.curve = curves[this.interpolation] || this.interpolation
    if (this.interpolation === 'cardinal' && this.tension) {
      this.curve = this.curve.tension(this.tension)
    }
    this.offset = offsets[this.offset] || this.offset
    this.order = orderings[this.order] || this.order

    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 (args.width && args.height) {
      // use explicitly specified size
      this.width = args.width
      this.height = args.height
    } else {
      // calc size (will cause layout reflow)
      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() {
  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 this.months[d.getUTCMonth()]
      }.bind(this)
    },
    {
      name: 'week',
      seconds: 86400 * 7,
      formatter: function(d) {
        return this.formatDate(d)
      }.bind(this)
    },
    {
      name: 'day',
      seconds: 86400,
      formatter: function(d) {
        return d.getUTCDate()
      }
    },
    {
      name: '6 hour',
      seconds: 3600 * 6,
      formatter: function(d) {
        return this.formatTime(d)
      }.bind(this)
    },
    {
      name: 'hour',
      seconds: 3600,
      formatter: function(d) {
        return this.formatTime(d)
      }.bind(this)
    },
    {
      name: '15 minute',
      seconds: 60 * 15,
      formatter: function(d) {
        return this.formatTime(d)
      }.bind(this)
    },
    {
      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.timeFormat('%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() + 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() {
  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 this.months[d.getMonth()]
      }.bind(this)
    },
    {
      name: 'week',
      seconds: 86400 * 7,
      formatter: function(d) {
        return this.formatDate(d)
      }.bind(this)
    },
    {
      name: 'day',
      seconds: 86400,
      formatter: function(d) {
        return d.getDate()
      }
    },
    {
      name: '6 hour',
      seconds: 3600 * 6,
      formatter: function(d) {
        return this.formatTime(d)
      }.bind(this)
    },
    {
      name: 'hour',
      seconds: 3600,
      formatter: function(d) {
        return this.formatTime(d)
      }.bind(this)
    },
    {
      name: '15 minute',
      seconds: 60 * 15,
      formatter: function(d) {
        return this.formatTime(d)
      }.bind(this)
    },
    {
      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.timeFormat('%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)
      nearFuture.setHours(0, 0, 0, 0)
      return nearFuture.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() + 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).toFixed(2) + 'T'
  } else if (abs_y >= 1000000000) {
    return (y / 1000000000).toFixed(2) + 'B'
  } else if (abs_y >= 1000000) {
    return (y / 1000000).toFixed(2) + 'M'
  } else if (abs_y >= 1000) {
    return (y / 1000).toFixed(2) + 'K'
  } else if (abs_y < 1 && abs_y > 0) {
    return y.toFixed(2)
  } else if (abs_y === 0) {
    return '0'
  } else {
    return y
  }
}

Rickshaw.Fixtures.Number.formatBase1024KMGTP = function(y) {
  var abs_y = Math.abs(y)
  if (abs_y >= 1125899906842624) {
    return (y / 1125899906842624).toFixed(2) + 'P'
  } else if (abs_y >= 1099511627776) {
    return (y / 1099511627776).toFixed(2) + 'T'
  } else if (abs_y >= 1073741824) {
    return (y / 1073741824).toFixed(2) + 'G'
  } else if (abs_y >= 1048576) {
    return (y / 1048576).toFixed(2) + 'M'
  } else if (abs_y >= 1024) {
    return (y / 1024).toFixed(2) + 'K'
  } else if (abs_y < 1 && abs_y > 0) {
    return y.toFixed(2)
  } else if (abs_y === 0) {
    return '0'
  } 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 }

  this.data = {}

  this.elements.timeline.classList.add('rickshaw_annotation_timeline')

  this.add = function(time, content, end_time) {
    this.data[time] = this.data[time] || { boxes: [] }
    this.data[time].boxes.push({ content: content, end: end_time })
  }.bind(this)

  this.update = function() {
    Rickshaw.keys(this.data).forEach(function(time) {
      var annotation = this.data[time]
      var left = this.graph.x(time)

      if (left < 0 || left > this.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')
          this.graph.element.appendChild(annotation.line)

          if (box.end) {
            box.rangeElement = document.createElement('div')
            box.rangeElement.classList.add('annotation_range')
            this.graph.element.appendChild(box.rangeElement)
          }
        }

        if (box.end) {
          var annotationRangeStart = left
          var annotationRangeEnd = Math.min(
            this.graph.x(box.end),
            this.graph.x.range()[1]
          )

          // annotation makes more sense at end
          if (annotationRangeStart > annotationRangeEnd) {
            annotationRangeEnd = left
            annotationRangeStart = Math.max(
              this.graph.x(box.end),
              this.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)
  }

  this.graph.onUpdate(
    function() {
      this.update()
    }.bind(this)
  )
}
Rickshaw.namespace('Rickshaw.Graph.Axis.Time')

Rickshaw.Graph.Axis.Time = function(args) {
  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 (this.graph.x(o.value) > this.graph.x.range()[1]) return

        var element = document.createElement('div')
        element.style.left = this.graph.x(o.value) + 'px'
        element.classList.add('x_tick')
        element.classList.add(this.ticksTreatment)

        var title = document.createElement('div')
        title.classList.add('title')
        title.innerHTML = o.unit.formatter(new Date(o.value * 1000))
        element.appendChild(title)

        this.graph.element.appendChild(element)
        this.elements.push(element)
      }.bind(this)
    )
  }

  this.graph.onUpdate(
    function() {
      this.render()
    }.bind(this)
  )
}
Rickshaw.namespace('Rickshaw.Graph.Axis.X')

Rickshaw.Graph.Axis.X = function(args) {
  var berthRate = 0.1

  this.initialize = function(args) {
    this.graph = args.graph
    this.orientation = args.orientation || 'top'

    this.pixelsPerTick = args.pixelsPerTick || 75
    if (args.ticks) this.staticTicks = args.ticks
    if (args.tickValues) this.tickValues = args.tickValues

    this.tickSize = args.tickSize || 4
    this.ticksTreatment = args.ticksTreatment || 'plain'

    if (args.element) {
      this.element = args.element
      this._discoverSize(args.element, args)

      this.vis = d3
        .select(args.element)
        .append('svg:svg')
        .attr('height', this.height)
        .attr('width', this.width)
        .attr('class', 'rickshaw_graph x_axis_d3')

      this.element = this.vis._groups[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() {
        this.render()
      }.bind(this)
    )
  }

  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
    if (this.orientation === 'bottom') {
      axis = d3.axisBottom(this.graph.x)
    } else {
      axis = d3.axisTop(this.graph.x)
    }
    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).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).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.1

    if (args.element) {
      this.element = args.element
      this.vis = d3
        .select(args.element)
        .append('svg:svg')
        .attr('class', 'rickshaw_graph y_axis')

      this.element = this.vis._groups[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() {
        this.render()
      }.bind(this)
    )
  },

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

  },

  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 = this._makeAxis(scale)
    axis.tickFormat(this.tickFormat)
    if (this.tickValues) axis.tickValues(this.tickValues)

    if (this.orientation == 'left') {
      var transform = 'translate(' + (this.width - 1) + ')'
    }

    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).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).tickSize(gridSize))
      .selectAll('text')
      .each(function() {
        this.parentNode.setAttribute('data-y-value', this.textContent)
      })
  },

  _makeAxis: function(scale) {
    if (this.orientation === 'left') {
      return d3.axisLeft(scale)
    }
    return d3.axisRight(scale)
  }
})
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
      .scaleLinear()
      .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
      .scaleLinear()
      .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.Band')

Rickshaw.Graph.Band = Rickshaw.Class.create({
  initialize: function(args) {
    this.graph = args.graph
  },

  render: function(args) {
    args = args || {}

    var graph = this.graph
    var bands = args.bands || graph.bands
    var vis = args.vis || graph.vis

    var config = graph.renderer.config
    var configRenderer = !!config && config.renderer

    bands.forEach(function(band, i) {
      vis.select('#band-' + i).remove()
      vis.select('#band-text-' + i).remove()

      var width = graph.x(band.to) - graph.x(band.from)
      vis
        .insert('rect', ':first-child')
        .attr('id', 'band-' + i)
        .attr('x', graph.x(band.from))
        .attr('y', 0)
        .attr('width', width)
        .attr('height', '100%')
        .attr('opacity', band.opacity)
        .attr('fill', band.color)
      if (band.name) {
        vis
          .insert('text', ':first-child')
          .attr('id', 'band-text-' + i)
          .attr('x', graph.x(band.from) + width / 2)
          .attr('y', 0)
          .attr('width', width)
          .attr('dy', '1.2em')
          .style('text-anchor', 'middle')
          .style('font-size', '12px')
          .style('fill', '#000000')
          .style('opacity', '0.5')
          .text(band.name)
      }
    }, this)
  }
})
Rickshaw.namespace('Rickshaw.Graph.Behavior.Series.Highlight')

Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
  this.graph = args.graph
  this.legend = args.legend

  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

        this.legend.lines.forEach(
          function(line) {
            if (l === line) {
              // if we're not in a stacked renderer bring active line to the top
              if (
                this.graph.renderer.unstack &&
                (line.series.renderer ? line.series.renderer.unstack : true)
              ) {
                var seriesIndex = this.graph.series.indexOf(line.series)
                line.originalIndex = seriesIndex

                var series = this.graph.series.splice(seriesIndex, 1)[0]
                this.graph.series.push(series)
              }
              return
            }

            colorSafe[line.series.name] =
              colorSafe[line.series.name] || line.series.color
            line.series.color = disabledColor(line.series.color)
          }.bind(this)
        )

        this.graph.update()
      }.bind(this),
      false
    )

    l.element.addEventListener(
      'mouseout',
      function(e) {
        if (!activeLine) return
        else activeLine = null

        this.legend.lines.forEach(
          function(line) {
            // return reordered series to its original place
            if (l === line && line.hasOwnProperty('originalIndex')) {
              var series = this.graph.series.pop()
              this.graph.series.splice(line.originalIndex, 0, series)
              delete line.originalIndex
            }

            if (colorSafe[line.series.name]) {
              line.series.color = colorSafe[line.series.name]
            }
          }.bind(this)
        )

        this.graph.update()
      }.bind(this),
      false
    )
  }

  if (this.legend) {
    this.legend.lines.forEach(
      function(l) {
        this.addHighlightEvents(l)
      }.bind(this)
    )
  }
}
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

  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')
      }

      this.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 < this.legend.lines.length; i++) {
          var l = this.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')

        this.legend.lines.forEach(function(l) {
          if (line.series === l.series) {
            // noop
          } else {
            l.series.disable()
            l.element.classList.add('disabled')
          }
        })
      } else {
        this.legend.lines.forEach(function(l) {
          l.series.enable()
          l.element.classList.remove('disabled')
        })
      }

      this.graph.update()
    }.bind(this)
  }

  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) {
        this.addAnchor(l)
      }.bind(this)
    )
  }

  this._addBehavior = function() {
    this.graph.series.forEach(function(s) {
      s.disable = function() {
        if (this.graph.series.length <= 1) {
          throw 'only one series left'
        }

        s.disabled = true
      }.bind(this)

      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)

      var range = windowAfterDrag[1] - windowAfterDrag[0]

      reset(this)

      if (range < self.minimumTimeSelection || isNaN(range)) {
        return
      }

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

      var endTime = self.graph.window.xMax

      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
        .style('opacity', self.opacity)
        .attr('fill', self.fill)
        .attr('x', limits[0])
        .attr('width', selectionWidth)
    }

    function onMousedown() {
      var el = d3.select(this)
      rectangle = el
        .append('rect')
        .style('opacity', 0)
        .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 rect = graph.element.getBoundingClientRect()
    var eventX = e.clientX - rect.left
    var eventY = e.clientY - rect.top

    var j = 0
    var points = []
    var nearestPoint

    this.graph.series.active().forEach(function(series) {
      var data = series.stack

      if (!data.length) return

      var domainX = graph.x.invert(eventX)

      var domainIndexScale = d3
        .scaleLinear()
        .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
    )

    var topInt = this.graph.y(point.value.y0 + point.value.y)
    var topIntAdjusted = topInt
    var xLabelsize = xLabel.getBoundingClientRect()
    //account for the xLabel's padding
    var xLabelPadding = 12
    if (topInt < xLabelsize.height + xLabelPadding) {
      topIntAdjusted = xLabelsize.height + xLabelPadding
    }

    item.style.top = topIntAdjusted + 'px'

    this.element.appendChild(item)

    var dot = document.createElement('div')

    dot.className = 'dot'
    dot.style.top = topInt + 'px'
    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 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() {
          this.update()
        }.bind(this)
      )

      graphs[i].onConfigure(
        function(graph) {
          $(element)[0].style.width = graph.width + 'px'
        }.bind(this, graphs[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
      var container = document.querySelector(
        '.rickshaw_range_slider_preview_container'
      )

      if (self.previews.length > 0) {
        return
      }

      while (container.hasChildNodes()) {
        container.removeChild(container.firstChild)
      }

      Rickshaw.extend(graphArgs, {
        element: container.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(self.render.bind(self))

      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)

    graphContainer
      .enter()
      .append('div')
      .classed('rickshaw_range_slider_preview_container', true)
      .merge(graphContainer)
      .style('padding-left', this.config.frameHandleThickness + 'px')
      .style('padding-top', this.config.frameTopThickness + 'px')
      .each(buildGraph)

    graphContainer.exit().remove()

    // Use the first graph as the "master" for the frame state
    var masterGraph = this.graphs[0]

    var domainScale = d3
      .scaleLinear()
      .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 = this.svg
      .enter()
      .append('svg')
      .classed('rickshaw_range_slider_preview', true)
      .merge(this.svg)
      .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 = element
      .enter()
      .append('path')
      .classed('dimming', true)
      .merge(element)
      .attr('fill', 'white')
      .attr('fill-opacity', '0.7')
      .attr('fill-rule', 'evenodd')

    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 = element
      .enter()
      .append('path')
      .classed('frame', true)
      .merge(element)
      .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')

    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 = gripper
      .enter()
      .append('path')
      .classed('gripper', true)
      .merge(gripper)
      .attr('stroke', this.config.gripperColor)

    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 = leftHandle
      .enter()
      .append('rect')
      .classed('left_handle', true)
      .merge(leftHandle)
      .attr('width', this.config.frameHandleThickness)
      .style('cursor', 'ew-resize')
      .style('fill-opacity', '0')
      .attr('x', this.currentFrame[0])
      .attr('height', this.config.height)

    var rightHandle = this.svg.selectAll('rect.right_handle').data([null])

    rightHandle = rightHandle
      .enter()
      .append('rect')
      .classed('right_handle', true)
      .merge(rightHandle)
      .attr('width', this.config.frameHandleThickness)
      .style('cursor', 'ew-resize')
      .style('fill-opacity', '0')
      .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 = middleHandle
      .enter()
      .append('rect')
      .classed('middle_handle', true)
      .merge(middleHandle)
      .style('cursor', 'move')
      .style('fill-opacity', '0')
      .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
          .scaleLinear()
          .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._groups[0][i]
      if (this.stroke) series.stroke = strokeNodes._groups[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 === undefined ? this.opacity : series.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

    return d3
      .line()
      .x(function(d) {
        return graph.x(d.x)
      })
      .y(function(d) {
        return graph.y(d.y)
      })
      .curve(this.graph.curve)
      .defined(function(d) {
        return d.y !== null
      })
  }
})
Rickshaw.namespace('Rickshaw.Graph.Renderer.Stack')

Rickshaw.Graph.Renderer.Stack = Rickshaw.Class.create(Rickshaw.Graph.Renderer, {
  name: 'stack',

  render: function($super, args) {
    // TODO(butterflyhug): I have absolutely no idea why we need to explicitly
    //     override the superclass in order to call its implementation here.
    $super(args)
  },

  defaults: function($super) {
    return Rickshaw.extend($super(), {
      fill: true,
      stroke: false,
      unstack: false
    })
  },

  seriesPathFactory: function() {
    var graph = this.graph

    return d3
      .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)
      })
      .curve(graph.curve)
      .defined(function(d) {
        return d.y !== null
      })
  }
})
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._groups[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
  }
})
/* jshint -W014 */
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

    return d3
      .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)
      })
      .curve(graph.curve)
      .defined(function(d) {
        return d.y !== null
      })
  },

  seriesStrokeFactory: function() {
    var graph = this.graph

    return d3
      .line()
      .x(function(d) {
        return graph.x(d.x)
      })
      .y(function(d) {
        return graph.y(d.y + d.y0)
      })
      .curve(graph.curve)
      .defined(function(d) {
        return d.y !== null
      })
  },

  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._groups[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
      })
    },

    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 === undefined ? 1 : series.opacity

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

        nodes.nodes().forEach(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._groups[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) {
      if (group.renderer.unstack) {
        group.series.forEach(function(series) {
          series.stack = series.stack.map(function(d) {
            return Rickshaw.extend({ y0: 0 }, d)
          })
        })
        return
      }

      var series = group.series.filter(function(series) {
        return !series.disabled
      })

      var data = series.map(function(series) {
        return series.stack
      })

      var stackedData = Rickshaw.stack(
        data,
        group.renderer.offset || d3.stackOffsetNone
      )

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

      return d3
        .line()
        .x(function(d) {
          return graph.x(d.x)
        })
        .y(function(d) {
          return graph.y(d.y)
        })
        .curve(this.graph.curve)
        .defined(function(d) {
          return d.y !== null
        })
    },

    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._groups[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._groups[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() {
    io.connect(this.dataURL).on('rickshaw', this.success.bind(this))
  }
})
Rickshaw.namespace('Rickshaw.Graph.TapZoom')

Rickshaw.Graph.TapZoom = Rickshaw.Class.create({
  initialize: function(args) {
    if (!args || !args.graph) {
      throw new Error('Rickshaw.Graph.TapZoom needs a reference to a graph')
    }
    var defaults = {
      zoomAmount: 50,
      maxZoomed: 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.zoomAmount = args.zoomAmount || defaults.zoomAmount
    this.maxZoomed = args.maxZoomed || defaults.maxZoomed
    this.callback = args.callback || defaults.callback

    this.registerTouchEvents()
  },

  registerTouchEvents: function() {
    var self = this
    //for caching timestamp values
    //when last two values are within target time range, triggers the zoom effect
    var taps = []
    var doubleTapTimeLimit = 300
    var domain = this.graph.dataDomain()

    var chart = d3
      .select('.rickshaw_graph')
      .style('touch-action', 'manipulation')

    this.svg.on('touchstart', onTouchStart)

    function onTouchStart() {
      taps.push(d3.event.timeStamp)

      var withinTimeLimit =
        taps.length > 1 &&
        taps[taps.length - 1] - taps[taps.length - 2] < doubleTapTimeLimit

      if (self.graph.window.xMin === undefined) {
        self.graph.window.xMin = domain[0]
      }

      if (self.graph.window.xMax === undefined) {
        self.graph.window.xMax = domain[1]
      }

      if (withinTimeLimit) {
        zoomChart()
      }
    }

    function zoomChart() {
      self.graph.window.xMin = self.graph.window.xMin + self.zoomAmount
      self.graph.window.xMax = self.graph.window.xMax - self.zoomAmount
      if (self.graph.window.xMax - self.graph.window.xMin < self.maxZoomed) {
        return
      }

      self.graph.update()
      taps = []
      self.callback()
    }
  }
})
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
  }
})
Rickshaw.namespace('Rickshaw.stack')

// A function that works like d3 v3's d3.layout.stack(),
// implemented using d3 v4's d3.stack().
Rickshaw.stack = function(data, offsetFn) {
  offsetFn = offsetFn || d3.stackOffsetNone

  var layout = d3
    .stack()
    .keys(Object.keys(data))
    .value(function(d, i) {
      return d[i].y
    })
    .offset(offsetFn)
  var transposed = d3.transpose(data)
  var stackedData = layout(transposed)
  stackedData.forEach(function(series, i) {
    stackedData[i] = series.map(function(d) {
      return { x: d.data[0].x, y0: d[0], y: d[1] - d[0] }
    })
  })
  return stackedData
}
	return Rickshaw;
}));