ela 3.2.0 → 3.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 931596436e4c496baf811835178c70761fe4e7b2
-  data.tar.gz: b548f627ac5a723a0f1ae3ee43afda8e525b5825
+SHA256:
+  metadata.gz: 0a2f4ca90c26f32467f5e7d3821d25a853273455ef4c9b7a254064bf570af599
+  data.tar.gz: 45df5d9aa6cbd546d0c373b22d1eee98fcbc41faf5ab058b6ea55e0e79e99ce6
 SHA512:
-  metadata.gz: 827290ddd153f81e11049c5096feba7ac9fbeeeff00d034cd047a337cbd73c8a6c1c2ef00ec96b6590655e196e056cea2706c4a88d4fcc09747534c779d83997
-  data.tar.gz: ce6769b30ce2a1acf84265feaec2c703714eac5140f9698179466ab2cfce4179f4b43534a6c28ed83f39044e162a0e31e09059cb11b7b855450aaa2b7cba5c1a
+  metadata.gz: fbb3da9beeeb1451c1dca8f9ac9209c3c65ea4ed37688233b21e5c232b2eaa8d524aa7d1abf42b493781ad42d167e54f76c3aad38be78b538ebc4570738e565d
+  data.tar.gz: 4f640623e209d40d9e1f42f22698dccfab2b8b212a0ecda8589da3e13fe2d43851d4982841e26174f09ba1e572c6a150317750503cada4e25fe43c197f0ab7dc

data/app/js/lib/models/base_app.coffee

@@ -10,11 +10,12 @@ class ELA.Models.BaseApp extends ELA.Models.BaseAppModel
     @handlePath()
 
   handlePath: =>
-    path = @get('path')?[0]
-    if path is 'help'
-      @set showHelp: true
-    else
-      @set showHelp: false
+    path = @get('path')
+
+    @set(showHelp: _.last(path) is 'help')
+
+    first = _.first(path)
+    @set(layout: first) if first? and first isnt 'help'
 
   helpTextName: =>
     @path.replace('/', '_')

data/app/js/lib/models/canvas_params.coffee

@@ -0,0 +1,11 @@
+ELA.Models ?= {}
+class ELA.Models.CanvasParams extends Backbone.Model
+  serialize: -> {}
+  deserialize: ->
+
+  constructor: (attributes, options) ->
+    @app = attributes.app
+    delete attributes.app
+    # Special behavior: initial attributes overwrite defaults
+    @defaults = _.defaults(_.clone(@defaults), attributes)
+    super({}, options)

data/app/js/lib/models/graph_params.coffee

@@ -0,0 +1,167 @@
+ELA.Models ?= {}
+class ELA.Models.GraphParams extends ELA.Models.CanvasParams
+  defaults:
+    xScale: 1.1 # display 10% more than the configured xRange
+    yScale: 1.1 # display 10% more than the configured yRange
+    xOrigin: 30
+    yOrigin: 0
+    xOriginAnchor: 'left'
+    yOriginAnchor: 'bottom'
+    xOriginRatio: null
+    yOriginRatio: null
+    yOffset: 0
+    debug: {}
+    xLabelPosition: 'top'
+    yLabelPosition: 'right'
+    xPanLocked: false
+    yPanLocked: false
+    xPinchLocked: false
+    yPinchLocked: false
+    scaleLink: false
+    xAxis: { y: 0 }
+    yAxis: { x: 0 }
+
+  constructor: ->
+    super
+
+    if @defaults.xOriginRatio? and @defaults.xOriginAnchor is 'right'
+      @defaults.xOriginRatio = 1 - @defaults.xOriginRatio
+      @defaults.xOriginAnchor = 'left'
+
+    if @defaults.yOriginRatio? and @defaults.yOriginAnchor is 'bottom'
+      @defaults.yOriginRatio = 1 - @defaults.yOriginRatio
+      @defaults.yOriginAnchor = 'top'
+
+  initialize: ->
+    # Place origin when width and height are being set for the first
+    # time
+    @once('change:width change:height', @reset)
+    @on('change:width change:height', @resize)
+
+    # @calculateRanges changes params.xyRange
+    @on('change:xScale', @calculateRangeX)
+    @on('change:yScale', @calculateRangeY)
+
+    @calculateRanges()
+    @bindCalculatorEvents()
+    @listenTo(@app.curves, 'change:selected', @bindCalculatorEvents)
+    @listenTo @app, 'change:calculators', ->
+      @calculateRanges()
+      @bindCalculatorEvents()
+
+  bindCalculatorEvents: ->
+    # Remove current callbacks, add new ones for each curve
+    @stopListening(@app.previous('calculators'))
+
+    for calc in @app.get('calculators')
+      filteredCurves = @filteredCurves()
+      for curve in filteredCurves
+        @listenTo calc, "change:#{curve.get('function')}", @requestRepaint
+
+      @listenTo(calc, 'change:maxX change:xRange', @calculateRangeX)
+      @listenTo(calc, 'change:maxY change:yRange', @calculateRangeY)
+      # TODO: Add dynamic dependencies to calculator, so that we can
+      # actually only listen to maxY changes and recalculate ranges.
+      oldestCurve = filteredCurves[0]
+      if oldestCurve?
+        @listenTo(calc,
+          "change:#{oldestCurve.get('function')}"
+          @calculateRanges
+        )
+
+  reset: ->
+    if (xOriginRatio = @get('xOriginRatio'))?
+      @set(xOrigin: @get('width') * xOriginRatio)
+    else if @get('xOriginAnchor') is 'left'
+      @set(xOrigin: @defaults.xOrigin)
+    else
+      @set(xOrigin: @get('width') - @defaults.xOrigin)
+
+    if (yOriginRatio = @get('yOriginRatio'))?
+      @set(yOrigin: @get('height') * yOriginRatio)
+    else if @defaults.yOriginAnchor is 'bottom'
+      @set(yOrigin: @get('height') - @defaults.yOrigin)
+    else
+      @set(yOrigin: @defaults.yOrigin)
+
+    if @get('scaleLink')
+      # axis with less pixels per unit length should define scale
+      if @get('width') / @maxRangeX(null, 1) < @params.get('height') / @maxRangeY(null, 1)
+        @set(yScale: @linkedYScale(xScale))
+      else
+        @set(xScale: @linkedXScale(yScale))
+
+  resize: ->
+    previous = @previousAttributes()
+    if previous.width? and previous.height?
+      previousXOrigin = if previous.xOrigin?
+        previous.xOrigin
+      else
+        @get('xOrigin')
+      previousYOrigin = if previous.yOrigin?
+        previous.yOrigin
+      else
+        @get('yOrigin')
+      @set
+        xOrigin: previousXOrigin * @get('width') / previous.width
+        yOrigin: previousYOrigin * @get('height') / previous.height
+
+      switch @get('scaleLink')
+        when 'x'
+          @set xScale: @linkedXScale()
+        when 'y'
+          @set yScale: @linkedYScale()
+    else
+      @reset()
+
+  calculateRanges: ->
+    @set
+      xRange: @maxRangeX()
+      yRange: @maxRangeY()
+
+  maxRangeX: (func, xScale = @get('xScale')) ->
+    func = @get('axisLabelingForCurve')?.get('function') unless func?
+    ranges = (calc.xRange(func) for calc in @app.get('calculators'))
+    Math.max.apply(Math, _.compact(ranges)) * xScale
+
+  maxRangeY: (func, yScale = @get('yScale')) ->
+    func = @get('axisLabelingForCurve')?.get('function') unless func?
+    ranges = (calc.yRange(func) for calc in @app.get('calculators'))
+    Math.max.apply(Math, _.compact(ranges)) * yScale
+
+  linkedXScale: (yScale) ->
+    # calculate xScale to fulfill the following equation:
+      # (width / maxRangeX) / xScale = height / maxRangeY
+    (@get('width') / @maxRangeX(null, 1)) /
+    (@get('height') / @maxRangeY(null, yScale))
+
+  linkedYScale: (xScale) ->
+    # calculate yScale to fulfill the following equation:
+      # (height / maxRangeY) / yScale = width / maxRangeX
+    (@get('height') / @maxRangeY(null, 1)) /
+    (@get('width') / @maxRangeX(null, xScale))
+
+  filteredCurves: ->
+    curves = @app.curves.history
+    if graphCurves = @get('curves')
+      _.filter curves, (curve) ->
+        graphCurves.indexOf(curve.get('function')) >= 0
+    else
+      curves
+
+  sortedCurves: ->
+    _.sortBy @filteredCurves(), (curve) ->
+      curve.get('zIndex')
+
+  serialize: ->
+    xScale: @get('xScale')
+    yScale: @get('yScale')
+    xOriginRatio: @get('xOrigin') / @get('width')
+    yOriginRatio: @get('yOrigin')  / @get('height')
+
+  deserialize: (attributes) ->
+    @set
+      xScale: attributes.xScale
+      yScale: attributes.yScale
+      xOrigin: @get('width') * attributes.xOriginRatio
+      yOrigin: @get('height') * attributes.yOriginRatio

data/app/js/lib/views/base_app.coffee

@@ -1,6 +1,7 @@
 ELA.Views ?= {}
 class ELA.Views.BaseApp extends Backbone.Poised.View
   template: JST['general/app']
+  headlineTemplate: JST['general/app_headline']
 
   id: -> @model.name.toDash()
   tagName: 'section'
@@ -22,11 +23,12 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
     'tap header .share-form button': 'copyShareLink'
     'submit header .share-form form': (e) -> e.preventDefault()
     'tap header *[data-toggle-aside]': 'setCurrentAside'
-    'tap header .poised.subapps.select': 'viewSubappOptions'
-    'tap header .poised.subapps.select .option': 'openSubapp'
+    'tap header .poised.subviews.select': 'viewSubviewOptions'
+    'tap header .poised.subviews.select .option.subapp': 'openSubapp'
+    'tap header .poised.subviews.select .option.layout': 'openLayout'
     'tap header .context.icon': 'toggleContextMenu'
     'tap article.graph:has(~ aside.active)': 'hideAsides'
-    'tap section:has(.subapps.select.view)': 'hideSubappOptions'
+    'tap section:has(.subviews.select.view)': 'hideSubappOptions'
     'tap section:has(.menu.view)': 'hideMenus'
 
   hammerjs: true
@@ -43,13 +45,28 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
     for aside in @asides
       aside.link ?= 'icon'
 
+    $(window).on('resize', @renderHeadlineHtml)
+    $(window).on('resize', @checkLayout)
+    @checkLayout()
+
     @model.displayParams ?= {}
 
-  viewSubappOptions: =>
-    @$('.subapps.select').toggleClass('view')
+  remove: ->
+    super
+    $(window).off('resize', @renderHeadlineHtml)
+    $(window).off('resize', @checkLayout)
+
+  checkLayout: =>
+    availableLayouts = @availableLayouts()
+    if availableLayouts.indexOf(@model.get('layout')) < 0
+      ELA.router.navigate "app/#{@model.path}/#{availableLayouts[0]}",
+        trigger: true
 
-  hideSubappOptions: =>
-    @$('.subapps.select').removeClass('view')
+  viewSubviewOptions: =>
+    @$('.subviews.select').toggleClass('view')
+
+  hideSubviewOptions: =>
+    @$('.subviews.select').removeClass('view')
 
   toggleContextMenu: =>
     @$('.menu:has(.icon.context)').toggleClass('view')
@@ -65,6 +82,11 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
     $target = $(e.target)
     ELA.router.navigate("app/#{$target.data('path')}", trigger: true)
 
+  openLayout: (e) =>
+    $target = $(e.target)
+    ELA.router.navigate "app/#{@model.path}/#{$target.data('path')}",
+      trigger: true
+
   showHelp: =>
     ELA.router.navigate("app/#{@model.path}/help", trigger: true)
 
@@ -153,20 +175,41 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
       @subviews.help?.setActive(showHelp)
       @$app.toggleClass('active', not showHelp)
 
-  render: =>
-    @$el.html @template
+  availableLayouts: ->
+    names = []
+    for name, layout of @layouts
+      if layout.minWidth
+        continue if layout.minWidth > $(window).width()
+      if layout.minHeight
+        continue if layout.minHeight > $(window).height()
+      names.push(name)
+    names
+
+  headlineHtml: ->
+    @headlineTemplate
       name: @model.name
       path: @model.path
+      relatedApps: @relatedApps()
+      availableLayouts: @availableLayouts()
+
+  renderHeadlineHtml: =>
+    @$('header h2').html(@headlineHtml())
+
+  render: =>
+    @$el.html @template
       hasHelpText: @model.hasHelpText
       iconAsideNames: @iconAsideNames()
       contextAsides: @contextAsides()
-      relatedApps: @relatedApps()
+      views: view.name for view in @views
       currentPath: @model.path
+      headlineHtml: @headlineHtml()
     @$shareLink = @$('li.share-link')
     @$shareForm = @$('li.share-form')
     @$shareUrlInput = @$shareForm.find('input')
     @$shareCopyButton = @$shareForm.find('button')
 
+    _.delay(@renderHeadlineHtml)
+
     @$app = @$('section.app')
     for aside in @asides
       AsideView = aside.view.toFunction()
@@ -188,7 +231,7 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
         model: @model
         parentView: this
         views: @views
-        layout: @layout
+        layouts: @layouts
         localePrefix: @localePrefix
       @$('.viewport').replaceWith(view.render().el)
 

data/app/js/lib/views/canvas.coffee

@@ -1,10 +1,8 @@
 ELA.Views ?= {}
 class ELA.Views.Canvas extends Backbone.Poised.View
-  tagName: 'canvas'
+  @Params: ELA.Models.CanvasParams
 
-  class @Params extends Backbone.Model
-    serialize: -> {}
-    deserialize: ->
+  tagName: 'canvas'
 
   # True if an animation frame request is currently pending
   animationFrameRequested: false
@@ -15,15 +13,9 @@ class ELA.Views.Canvas extends Backbone.Poised.View
     @defaultFont = "#{fontWeight} 12px Roboto"
 
   initialize: (options = {}) ->
-    # Make sure we got the parameters model for holding view specific information
-    @defaults = _.defaults(options.defaults, @defaults) if options.defaults?
-    if options.params?
-      @params = options.params
-      @params.set(@defaults)
-    else
-      @model.displayParams ?= {}
-      @params = new @constructor.Params(@defaults)
-      @model.displayParams[options.name] = @params
+    # Make sure we got the parameters model for holding view specific
+    # information
+    @params = options.params
 
     @setCanvasResolution()
 
@@ -44,9 +36,10 @@ class ELA.Views.Canvas extends Backbone.Poised.View
     # Do not take scale into account here, otherwise
     # non-active subapps will get initialized with wrong size
     # because they have a css scale of 0.75
-    @params.set
-      width: $parent[0].clientWidth
-      height: $parent[0].clientHeight
+    if $parent.length > 0
+      @params.set
+        width: $parent[0].clientWidth
+        height: $parent[0].clientHeight
 
   setCanvasResolution: ->
     width = @params.get('width')

data/app/js/lib/views/{base_graph.coffee → graph.coffee}

@@ -1,18 +1,6 @@
 ELA.Views ?= {}
-class ELA.Views.BaseGraph extends ELA.Views.Canvas
-  class @Params extends Backbone.Model
-    serialize: ->
-      xScale: @get('xScale')
-      yScale: @get('yScale')
-      xOriginRatio: @get('xOrigin') / @get('width')
-      yOriginRatio: @get('yOrigin')  / @get('height')
-
-    deserialize: (attributes) ->
-      @set
-        xScale: attributes.xScale
-        yScale: attributes.yScale
-        xOrigin: @get('width') * attributes.xOriginRatio
-        yOrigin: @get('height') * attributes.yOriginRatio
+class ELA.Views.Graph extends ELA.Views.Canvas
+  @Params: ELA.Models.GraphParams
 
   # A variable that contains temporary information about the pinch
   # or pan action that is currently performed.
@@ -24,75 +12,33 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
   # We need to cache current pixelRatio to reset the canvas scale.
   pixelRatio: null
 
-  # Defaults for the view params model.
-  defaults:
-    xScale: 1.1 # display 10% more than the configured xRange
-    yScale: 1.1 # display 10% more than the configured yRange
-    xOrigin: 30
-    yOrigin: 0
-    xOriginAnchor: 'left'
-    yOriginAnchor: 'bottom'
-    xOriginRatio: null
-    yOriginRatio: null
-    yOffset: 0
-    debug: {}
-    xLabelPosition: 'top'
-    yLabelPosition: 'right'
-    xPanLocked: false
-    yPanLocked: false
-    xPinchLocked: false
-    yPinchLocked: false
-    scaleLink: false
-    xAxis: { y: 0 }
-    yAxis: { x: 0 }
-
   initialize: ->
     super
 
-    if @defaults.xOriginRatio? and @defaults.xOriginAnchor isnt 'left'
-      @defaults.xOriginRatio = 1 - @defaults.xOriginRatio
-      @defaults.xOriginAnchor = 'left'
-
-    if @defaults.yOriginRatio? and @defaults.yOriginAnchor is 'bottom'
-      @defaults.yOriginRatio = 1 - @defaults.yOriginRatio
-      @defaults.yOriginAnchor = 'top'
-
-    @resetCanvas()
-
-    # @calculateRanges changes params.xyRange
-    @params.on 'change:xScale', @calculateRangeX
-    @params.on 'change:yScale', @calculateRangeY
-    # When xyRange change we need to repaint
-    @params.on 'change:xOrigin change:yOrigin change:yRange change:xRange change:width change:height', @requestRepaint
-
-    @calculateRanges()
-
-  calculateRangeX: =>
-    @params.set xRange: @maxRangeX()
-
-  calculateRangeY: =>
-    @params.set yRange: @maxRangeY()
-
-  calculateRanges: =>
-    @calculateRangeX()
-    @calculateRangeY()
+    @listenTo(@params,
+      'change:xOrigin change:yOrigin ' +
+      'change:yRange change:xRange ' +
+      'change:width change:height ' +
+      'change:axisLabelingForCurve'
+      @requestRepaint
+    )
 
-  maxRangeX: (func, xScale = @params.get('xScale')) =>
-    xScale * 5
+    @listenTo(@model.curves, 'change:selected', @requestRepaint)
+    @listenTo(@model, 'change:calculators', @requestRepaint)
 
-  maxRangeY: (func, yScale = @params.get('yScale')) =>
-    yScale * 5
+    for guide in @params.get('guides')
+      @listenTo(@model, "change:#{guide.attribute}", @requestRepaint)
 
   events:
-    'pan': 'pan',
-    'panstart': 'panstart'
-    'panend': 'panend'
-    'pinchstart': 'pinchstart'
-    'pinch': 'pinch'
-    'pinchend': 'pinchend'
-    'doubletap': 'resetCanvas'
-    'mousewheel': 'mousewheel'
-    'DOMMouseScroll': 'mousewheel'
+    pan: 'pan'
+    panstart: 'panstart'
+    panend: 'panend'
+    pinchstart: 'pinchstart'
+    pinch: 'pinch'
+    pinchend: 'pinchend'
+    doubletap: 'resetCanvas'
+    mousewheel: 'mousewheel'
+    DOMMouseScroll: 'mousewheel'
 
   hammerjs:
     recognizers: [
@@ -119,46 +65,7 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
   # Set xScale/yScale and xOrigin/yOrigin to their default values.
   resetCanvas: =>
     clearTimeout(@panendTimeout)
-
-    if @defaults.xOriginRatio?
-      xOrigin = @params.get('width') * @defaults.xOriginRatio
-    else if @defaults.xOriginAnchor is 'left'
-      xOrigin = @defaults.xOrigin
-    else
-      xOrigin = @params.get('width') - @defaults.xOrigin
-
-    if @defaults.yOriginRatio?
-      yOrigin = @params.get('height') * @defaults.yOriginRatio
-    else if @defaults.yOriginAnchor is 'bottom'
-      yOrigin = @params.get('height') - @defaults.yOrigin
-    else
-      yOrigin = @defaults.yOrigin
-
-    xScale = @defaults.xScale
-    yScale = @defaults.yScale
-
-    if @params.get('scaleLink')
-      # axis with less pixels per unit length should define scale
-      if @params.get('width') / @maxRangeX(null, 1) < @params.get('height') / @maxRangeY(null, 1)
-         yScale = @linkedYScale(xScale)
-      else
-         xScale = @linkedXScale(yScale)
-
-    @params.set
-      xScale: xScale
-      yScale: yScale
-      xOrigin: xOrigin
-      yOrigin: yOrigin
-
-  linkedXScale: (yScale) =>
-    # calculate xScale to fulfill the following equation:
-    # (width / maxRangeX) / xScale = height / maxRangeY
-    (@params.get('width') / @maxRangeX(null, 1)) / (@params.get('height') / @maxRangeY(null, yScale))
-
-  linkedYScale: (xScale) =>
-    # calculate yScale to fulfill the following equation:
-    # (height / maxRangeY) / yScale = width / maxRangeX
-    (@params.get('height') / @maxRangeY(null, 1)) / (@params.get('width') / @maxRangeX(null, xScale))
+    @params.reset()
 
   debugCircle: (context, color, x, y, radius = 20) =>
     context.beginPath()
@@ -282,46 +189,39 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
     precision += 1 while stepSize and stepSize*Math.pow(10, precision) < 1
     value.toFixed(precision)
 
-  setCanvasResolution: (params) ->
-    super
-
-    # Recalculate xOrigin/yOrigin if we're in a width/height change
-    # callback. Otherwise, we're initializing and we should skip that.
-    if params?
-      previous = @params.previousAttributes()
-      previousXOrigin = if previous.xOrigin? then previous.xOrigin else @params.get('xOrigin')
-      previousYOrigin = if previous.yOrigin? then previous.yOrigin else @params.get('yOrigin')
-      @params.set
-        xOrigin: previousXOrigin * @params.get('width') / previous.width
-        yOrigin: previousYOrigin * @params.get('height') / previous.height
-
-      # We don't need that during initialisation as well because it's
-      # done by resetCanvas
-      switch @params.get('scaleLink')
-        when 'x'
-          @params.set xScale: @linkedXScale()
-        when 'y'
-          @params.set yScale: @linkedYScale()
-
   xAxisValueLabel: (val, stepsize) ->
     @axisLabel(val, stepsize)
 
   yAxisValueLabel: (val, stepsize) ->
+    curve = @params.get('axisLabelingForCurve')
+    if curve?
+      curvePresenter = @Present(curve)
+      val = curvePresenter.unitValue(val)
+      stepsize = curvePresenter.unitValue(stepsize)
     @axisLabel(val - @params.get('yOffset'), stepsize)
 
-  _axisLabel: (label) ->
-    if typeof label is 'function'
-      label.call(this)
-    else if label?
-      label
-    else
-      ''
+  genericAxisLabel: (axis) ->
+    axisLabel = @params.get("#{axis}AxisLabel")
+    return axisLabel.call(this) if axisLabel? and _.isFunction(axisLabel)
+    return axisLabel if axisLabel?
 
-  xAxisLabel: -> @_axisLabel(@params.get('xAxisLabel'))
-  yAxisLabel: -> @_axisLabel(@params.get('yAxisLabel'))
+    axisLabelLocale = @params.get("#{axis}AxisLabelLocale")
+    return @loadLocale(axisLabelLocale) if axisLabelLocale?
 
-  renderCurves: ->
-    # stub
+    curve = @params.get('axisLabelingForCurve')
+    if curve?
+      return @Present(curve).fullXAxisLabel() if axis is 'x'
+      return @Present(curve).fullYAxisLabel() if axis is 'y'
+
+    @loadLocale("graph.#{axis}AxisLabel", defaultValue: '')
+
+  xAxisLabel: -> @genericAxisLabel('x')
+  yAxisLabel: -> @genericAxisLabel('y')
+
+  # Stubs
+  beforeRenderCurves: ->
+  afterRenderCurves: ->
+  beforeRender: ->
 
   renderXAxis: (y) ->
     @context.setLineDash []
@@ -347,7 +247,7 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
       @context.textBaseline = 'middle'
       @context.textAlign = 'center'
 
-      xRange = @maxRangeX()
+      xRange = @params.maxRangeX()
       xMin = -@xOrigin * xRange / @width
       xMax = (@width - @xOrigin) * xRange / @width
       xStepSize = @roundStepSize(100 * xRange / @width)
@@ -395,7 +295,7 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
         @context.textAlign = 'right'
       @context.textBaseline = 'middle'
 
-      yRange = @maxRangeY()
+      yRange = @params.maxRangeY()
       yMin = -(@height - @yOrigin) * yRange / @height
       yMax = @yOrigin * yRange / @height
       yStepSize = @roundStepSize(100 * yRange / @height)
@@ -426,7 +326,7 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
     @context.beginPath()
 
     unless @params.get('xLabelPosition') is 'none'
-      xRange = @maxRangeX() unless xRange?
+      xRange = @params.maxRangeX() unless xRange?
       xMin = -@xOrigin * xRange / @width
       xMax = (@width - @xOrigin) * xRange / @width
       xStepSize = @roundStepSize(100 * xRange / @width)
@@ -436,7 +336,7 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
         @context.lineTo(xPos, @height)
 
     unless @params.get('yLabelPosition') is 'none'
-      yRange = @maxRangeY() unless yRange?
+      yRange = @params.maxRangeY() unless yRange?
       yMin = -(@height - @yOrigin) * yRange / @height
       yMax = @yOrigin * yRange / @height
       yStepSize = @roundStepSize(100 * yRange / @height)
@@ -448,8 +348,201 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
     @context.stroke()
     @context.closePath()
 
-  beforeRender: ->
-    # Stub to execute code before rendering...
+  getControlPoints: (x0, y0, x1, y1, x2, y2, tension) ->
+    d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2))
+    d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+    fa = tension * d01 / (d01 + d12)
+    fb = tension - fa
+    p1x = x1 + fa * (x0 - x2)
+    p1y = y1 + fa * (y0 - y2)
+    p2x = x1 - fb * (x0 - x2)
+    p2y = y1 - fb * (y0 - y2)
+    [p1x, p1y, p2x, p2y]
+
+  drawSpline: (points, t, closed, xPos = ((x) -> x), yPos = ((y) -> y)) ->
+    if points.length <= 4
+      @context.moveTo(xPos(points[0]), yPos(points[1]))
+      @context.lineTo(xPos(points[2]), yPos(points[3]))
+    else
+      cp = []
+      n = points.length
+      points = _.clone(points)
+      if closed
+        points.push points[0], points[1], points[2], points[3]
+        points.unshift points[n - 1]
+        points.unshift points[n - 1]
+        for i in [0..n] by 2
+          cp = cp.concat(@getControlPoints(points[i], points[i+1], points[i+2], points[i+3], points[i+4], points[i+5], t))
+        cp = cp.concat(cp[0], cp[1])
+        for i in [0..n] by 2
+          @context.moveTo(xPos(points[i]), yPos(points[i+1]))
+          @context.bezierCurveTo(xPos(cp[2*i-2]), yPos(cp[2*i-1]), xPos(cp[2*i]), yPos(cp[2*i+1]), xPos(points[i+2]), yPos(points[i+3]))
+      else
+        for i in [0..(n-4)] by 2
+          cp = cp.concat(@getControlPoints(points[i], points[i+1], points[i+2], points[i+3], points[i+4], points[i+5], t))
+
+        @context.moveTo(xPos(points[0]), yPos(points[1]))
+        @context.quadraticCurveTo(xPos(cp[0]), yPos(cp[1]), xPos(points[2]), yPos(points[3]))
+        for i in [2..(n-3)] by 2
+          @context.moveTo(xPos(points[i]), yPos(points[i+1]))
+          @context.bezierCurveTo(xPos(cp[2*i-2]), yPos(cp[2*i-1]), xPos(cp[2*i]), yPos(cp[2*i+1]), xPos(points[i+2]), yPos(points[i+3]))
+        @context.moveTo(xPos(points[n-2]), yPos(points[n-1]))
+        @context.quadraticCurveTo(xPos(cp[2*n-10]), yPos(cp[2*n-9]), xPos(points[n-4]), yPos(points[n-3]))
+
+  drawCurve: (points, tension = 0, closed = false, xPos = ((x) -> x), yPos = ((y) -> y)) ->
+    if tension is 0
+      beginning = true
+      if points.length >= 2
+        @context.moveTo(xPos(points[0]), yPos(points[1]))
+        for i in [2...points.length] by 2
+          @context.lineTo(xPos(points[i]), yPos(points[i+1]))
+    else
+      @drawSpline(points, tension, closed, xPos, yPos)
+
+  renderCurves: ->
+    resultCurves = []
+    for calc, i in @model.get('calculators')
+      for curve, j in @params.sortedCurves()
+        func = curve.get('function')
+        resultCurves.push
+          curve: curve
+          result: calc[func](@xMin, @xMax)
+          yRange: @params.maxRangeY(func)
+          xRange: @params.maxRangeX(func)
+          calculatorIdx: i
+
+    @beforeRenderCurves(resultCurves)
+
+    for resultCurve in resultCurves
+      curve = resultCurve.curve
+      result = resultCurve.result
+      yRange = resultCurve.yRange
+      xRange = resultCurve.xRange
+      if _.isObject(result)
+        xPos = (x) => @xOrigin + x * @width / xRange
+        yPos = (y) => @yOrigin - (y + @yOffset) * @height / yRange
+
+        if curve.hasSubcurves()
+          for name, subcurve of curve.subcurves()
+            if result[name].points?
+              @renderCurve(subcurve, result[name], xPos, yPos, resultCurve.calculatorIdx)
+            else if result[name].radius?
+              @renderCircle(subcurve, result[name], xPos, yPos, resultCurve.calculatorIdx)
+        else
+          if result.points?
+            @renderCurve(curve, result, xPos, yPos, resultCurve.calculatorIdx)
+          else if result.radius?
+            @renderCircle(curve, result, xPos, yPos, resultCurve.calculatorIdx)
+
+    @afterRenderCurves(resultCurves)
+
+  renderCircle: (curve, result, xPos, yPos, calculatorIdx) ->
+    func = curve.get('function')
+    yRange = @maxRangeY(func)
+    @context.beginPath()
+    width  = Math.abs(xPos(2*result.radius) - @xOrigin)
+    height = Math.abs(yPos(2*result.radius) - @yOrigin)
+    centerX = xPos(result.center[0])
+    centerY = yPos(result.center[1])
+
+    aX = centerX - width/2
+    aY = centerY - height/2
+    hB = (width / 2) * .5522848
+    vB = (height / 2) * .5522848
+    eX = aX + width
+    eY = aY + height
+    mX = aX + width / 2
+    mY = aY + height / 2
+    @context.moveTo(aX, mY);
+    @context.bezierCurveTo(aX, mY - vB, mX - hB, aY, mX, aY);
+    @context.bezierCurveTo(mX + hB, aY, eX, mY - vB, eX, mY);
+    @context.bezierCurveTo(eX, mY + vB, mX + hB, eY, mX, eY);
+    @context.bezierCurveTo(mX - hB, eY, aX, mY + vB, aX, mY);
+
+    @context.setLineDash(curve.lineDash(calculatorIdx))
+    if curve.strokeStyle()
+      @context.lineWidth = curve.get('lineWidth')
+      @context.strokeStyle = curve.strokeStyle()
+      @context.stroke()
+    if fillStyle = curve.get('fillStyle')
+      @context.fillStyle = fillStyle
+      @context.fill()
+    @context.closePath()
+
+  renderCurve: (curve, result, xPos, yPos, calculatorIdx) ->
+    @context.beginPath()
+    @context.setLineDash(curve.lineDash(calculatorIdx))
+    if result.multiplePaths
+      for setOfPoints, i in result.points
+        @drawCurve(setOfPoints, result.tension, false, xPos, yPos)
+    else
+      @drawCurve(result.points, result.tension, false, xPos, yPos)
+    if curve.strokeStyle()
+      @context.lineWidth = curve.get('lineWidth')
+      @context.strokeStyle = curve.strokeStyle()
+      @context.stroke()
+    if fillStyle = curve.get('fillStyle')
+      @context.fillStyle = fillStyle
+      @context.fill()
+    @context.closePath()
+
+  renderGuide: (guide) ->
+    valueAtPoint = @model.get(guide.attribute)
+
+    @context.beginPath()
+    @context.setLineDash []
+    @context.strokeStyle = '#999999'
+    @context.lineWidth = 2
+
+    # Border below legend
+    @context.moveTo(@width, 0)
+    @context.lineTo(0, 0)
+
+    if guide.orientation is 'vertical'
+      # Border next to range handler
+      @context.moveTo(0, @height)
+      @context.lineTo(@width, @height)
+      @context.lineTo(@width, @height-10)
+
+      # Range handler line
+      xPos = @xOrigin + valueAtPoint * @width / @xRange
+      @context.moveTo(xPos, 0)
+      @context.lineTo(xPos, @height)
+    else
+      # Border next to range handler
+      @context.lineTo(0, @height)
+
+      # Range handler line
+      yPos = - valueAtPoint * @height / @yRange + @yOrigin
+      @context.moveTo(0, yPos)
+      @context.lineTo(@width, yPos)
+
+    @context.stroke()
+    @context.closePath()
+
+    @context.beginPath()
+    # The fillStyle of the triangle should match the color of the
+    # background set for the legend and range handler in screen.styl:
+    @context.fillStyle = "#f2f2f2"
+    @context.lineWidth = 1
+
+    if guide.orientation is 'vertical'
+      @context.moveTo(xPos + 8, 0)
+      @context.lineTo(xPos, 8)
+      @context.lineTo(xPos - 8, 0)
+      @context.moveTo(xPos - 8, @height)
+      @context.lineTo(xPos, @height - 8)
+      @context.lineTo(xPos + 8, @height)
+    else
+      @context.moveTo(0, yPos - 8)
+      @context.lineTo(8, yPos)
+      @context.lineTo(0, yPos + 8)
+      @context.moveTo(@width, yPos - 8)
+      @context.lineTo(@width - 8, yPos)
+      @context.lineTo(@width, yPos + 8)
+    @context.stroke()
+    @context.fill()
+    @context.closePath()
 
   render: =>
     @width = @params.get('width')
@@ -485,5 +578,8 @@ class ELA.Views.BaseGraph extends ELA.Views.Canvas
     else
       @renderYAxis(yAxis.x)
     @renderCurves()
+    
+    for guide in @params.get('guides')
+      @renderGuide(guide)
 
     this