ela 1.1.0

data/app/js/lib/router.coffee

@@ -0,0 +1,26 @@
+class ELA.Router extends Backbone.Router
+  routes:
+    '': 'index'
+    '(app/)*path': 'load'
+
+  initialize: ->
+    ELA.store = new Persist.Store('ilr_app')
+    ELA.app = new ELA.Models.App()
+    ELA.view = new ELA.Views.App
+      model: ELA.app
+      el: $('#app')
+    ELA.view.render()
+
+  index: ->
+    ELA.app.set(path: null)
+
+  load: (path, params) ->
+    if params?
+      try
+        params = JSON.parse(decodeURI(params))
+      catch
+        alert(t('messages.invalidParameters'))
+        params = null
+    ELA.app.set
+      path: path.split('/')
+      params: params

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

@@ -0,0 +1,56 @@
+ELA.Views ?= {}
+class ELA.Views.App extends Backbone.View
+  initialize: ->
+    @subviews = {}
+    @listenTo @model, 'change:currentAppModel', @render
+    @listenTo @model, 'change:showAbout', @renderAbout
+
+  # @returns BaseApp or BaseSubappContainer
+  currentAppModel: -> @model.currentAppModel()
+
+  activateSubviews: =>
+    if @currentAppModel()
+      @subviews.index?.deactivate()
+      @subviews.app?.activate()
+    else
+      @subviews.index?.activate()
+      @subviews.app?.deactivate()
+
+  loadedViewName: ->
+    @subviews.app?.model.name
+
+  currentAppModelName: ->
+    @model.currentAppModel()?.name
+
+  renderAbout: =>
+    showAbout = @model.get('showAbout')
+    if showAbout and not @subviews.help?
+      @subviews.help = view = new ELA.Views.Help
+        model: @model
+      @$el.append(view.render().el)
+
+    delay =>
+      @subviews.help?.setActive(showAbout)
+      @subviews.index?.setActive(not showAbout)
+
+  render: =>
+    unless @subviews.index?
+      @subviews.index = new ELA.Views.Overview()
+      @$el.append(@subviews.index.render().el)
+
+    if @subviews.app and @loadedViewName() isnt @currentAppModelName()
+      @subviews.app.remove()
+      delete @subviews.app
+
+    if @model.currentAppModel() and not @subviews.app?
+      AppView = @model.currentNamespace().Views.App
+      @subviews.app = view = new AppView
+        model: @model.currentAppModel()
+        localePrefix: @model.currentAppModel().localePrefix()
+      @$el.append(view.render().el)
+
+    @renderAbout()
+
+    delay @activateSubviews
+
+    this

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

@@ -0,0 +1,274 @@
+ELA.Views ?= {}
+class ELA.Views.BaseApp extends Backbone.Poised.View
+  template: JST['general/app']
+
+  id: -> @model.name.toDash()
+  tagName: 'section'
+  className: 'active'
+
+  # Typically in a subclass we override the list of asides. This may
+  # be a list of classes inheriting from ELA.Views.BaseAside or an
+  # object with `name` and `klass` attributes.
+  asideViews: []
+
+  legendView: null
+
+  graphView: null
+  graphOverlayView: null
+  graphDefaults: {}
+
+  rangeHandlerView: null
+
+  # TODO: Rename valueAtRange name pattern to something like selectValue
+  # TODO: use correct attribute in every app instead of generic valueAtRange
+  valueAtRange: null
+  valueAtRangeAxis: 'x'
+  valueAtRangeAttribute: 'valueAtRange'
+  valueAtRangePrecision: null
+
+  legendValueAtRange: null
+  legendValueAtRangeAxis: null
+  legendValueAtRangeAttribute: null
+
+  useHeadup: false
+
+  events:
+    'tap header .overview.icon': 'backToOverview'
+    'tap header .help': 'showHelp'
+    'tap header .share-link': 'share'
+    'tap header .share-form input': 'selectShareLink'
+    '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 .context.icon': 'toggleContextMenu'
+    'tap article.graph:has(~ aside.active)': 'hideAsides'
+    'tap section:has(.subapps.select.view)': 'hideSubappOptions'
+    'tap section:has(.menu.view)': 'hideMenus'
+
+  hammerjs: true
+
+  remove: =>
+    @$el.afterTransitionForRemovingClass 'active', => super
+
+  initialize: ->
+    @listenTo @model, 'change:currentAside', @toggleAside
+    @listenTo @model, 'change:showHelp', @renderHelp
+    if @useHeadup
+      @on 'controlLiveChangeStart', @liveChangeStart
+      @on 'controlLiveChangeEnd', @liveChangeEnd
+
+    for asideView in @asideViews
+      asideView.link ?= 'icon'
+
+    if @graphView?
+      GraphParams = @graphView.toFunction()['Params']
+      @model.displayParams = new GraphParams if GraphParams?
+
+  viewSubappOptions: =>
+    @$('.subapps.select').toggleClass('view')
+
+  hideSubappOptions: =>
+    @$('.subapps.select').removeClass('view')
+
+  toggleContextMenu: =>
+    @$('.menu:has(.icon.context)').toggleClass('view')
+
+  hideMenus: (e) =>
+    unless e? and $(e.target).closest(@$shareLink.add(@$shareForm)).length
+      @$('.menu').removeClass('view')
+      @$shareForm.addClass('hidden')
+      @$shareCopyButton.removeClass('success failure').addClass('copy')
+      @$shareLink.removeClass('hidden')
+
+  openSubapp: (e) =>
+    $target = $(e.target)
+    ELA.router.navigate("app/#{$target.data('path')}", trigger: true)
+
+  showHelp: =>
+    ELA.router.navigate("app/#{@model.path}/help", trigger: true)
+
+  share: =>
+    @$shareUrlInput.val(ELA.app.url())
+    @$shareLink.addClass('hidden')
+    @$shareForm.removeClass('hidden')
+
+  selectShareLink: =>
+    @$shareUrlInput.select()
+
+  copyShareLink: =>
+    @selectShareLink()
+    if document.execCommand('copy')
+      @$shareCopyButton.removeClass('copy').addClass('success')
+    else
+      @$shareCopyButton.removeClass('copy').addClass('failure')
+
+  setCurrentAside: (e) =>
+    asideToToggle = $(e.currentTarget).data('toggle-aside')
+    currentAside = @model.get('currentAside')
+    if currentAside is asideToToggle
+      @model.set currentAside: null
+    else
+      @model.set currentAside: asideToToggle
+
+  hideAsides: =>
+    @model.set currentAside: null
+
+  iconAsideNames: ->
+    @_iconAsideNames ?= do =>
+      _.compact(_.map(@asideViews, (asideView) ->
+        asideView.name if asideView.link is 'icon'
+      ))
+
+  contextAsides: ->
+    @_contextAsideNames ?= do =>
+      _.compact(_.map(@asideViews, (asideView) =>
+        if asideView.link is 'contextMenu'
+          name: asideView.name
+          label: @loadLocale("contextMenu.#{asideView.name}")
+      ))
+
+  backToOverview: =>
+    ELA.router.navigate('/', trigger: true)
+
+  toggleAside: (model, value) =>
+    previous = model.previousAttributes().currentAside
+    if previous?
+      @$("header .#{previous}.aside.icon").toggleClass('active', false)
+      @$("aside.#{previous}").toggleClass('active', false)
+    if value?
+      @$("header .#{value}.aside.icon").toggleClass('active', true)
+      @$("aside.#{value}").toggleClass('active', true)
+
+  liveChangeStart: (slider) =>
+    if $(window).width() <= 768
+      @$('aside.active').addClass('hidden')
+      @subviews.headup.activate(slider)
+
+  liveChangeEnd: =>
+    if $(window).width() <= 768
+      @$('aside.active').removeClass('hidden')
+      @subviews.headup.deactivate()
+
+  setActive: (active) =>
+    @$el.toggleClass('active', active)
+
+  activate: =>
+    @$el.toggleClass('active', true)
+
+  deactivate: =>
+    @$el.toggleClass('active', false)
+
+  relatedApps: =>
+    @model.parentApp?.subappInfo() or []
+
+  renderHelp: =>
+    showHelp = @model.get('showHelp')
+    if showHelp and not @subviews.help?
+      @subviews.help = view = new ELA.Views.Help
+        model: @model
+      @$el.append(view.render().el)
+
+    delay =>
+      @subviews.help?.setActive(showHelp)
+      @$app.toggleClass('active', not showHelp)
+
+  render: =>
+    @$el.html @template
+      name: @model.name
+      path: @model.path
+      hasHelpText: @model.hasHelpText
+      iconAsideNames: @iconAsideNames()
+      contextAsides: @contextAsides()
+      legendView: @legendView?
+      graphOverlayView: @graphOverlayView?
+      graphView: @graphView?
+      rangeHandlerView: @rangeHandlerView?
+      useHeadup: @useHeadup
+      relatedApps: @relatedApps()
+      currentPath: @model.path
+    @$shareLink = @$('li.share-link')
+    @$shareForm = @$('li.share-form')
+    @$shareUrlInput = @$shareForm.find('input')
+    @$shareCopyButton = @$shareForm.find('button')
+
+    @$app = @$('section.app')
+    for aside in @asideViews
+      AsideView = aside.view.toFunction()
+      view = @subviews[aside.name] = new AsideView
+        model: @model
+        parentView: this
+        name: aside.name
+        localePrefix: @localePrefix
+      @$app.append(view.render().el)
+
+    if @legendView? and not @subviews.legend
+      @$legend = @$('article .legend')
+      LegendView = @legendView.toFunction()
+      @subviews.legend = view = new LegendView
+        model: @model
+        parentView: this
+        el: @$legend
+        useValueAtRange: @legendValueAtRange or @valueAtRange or @rangeHandlerView?
+        valueAtRangeAxis: @legendValueAtRangeAxis or @valueAtRangeAxis
+        valueAtRangeAttribute: @legendValueAtRangeAttribute or @valueAtRangeAttribute
+        localePrefix: @localePrefix
+      view.render()
+
+    if @graphOverlayView? and not @subviews.graphOverlayView
+      @$graphOverlay = @$('article .graph-overlay')
+      GraphOverlayView = @graphOverlayView.toFunction()
+      @subviews.graphOverlayView = view = new GraphOverlayView
+        model: @model
+        parentView: this
+        el: @$graphOverlay
+        localPrefix: @localePrefix
+      view.render()
+
+    if @rangeHandlerView? and not @subviews.rangeHandler?
+      @$rangeHandler = @$('article .range-handler')
+      RangeHandlerView = @rangeHandlerView.toFunction()
+      @subviews.rangeHandler = view = new RangeHandlerView
+        model: @model
+        parentView: this
+        el: @$rangeHandler
+        axis: @valueAtRangeAxis
+        attribute: @valueAtRangeAttribute
+        precision: @valueAtRangePrecision
+        localePrefix: @localePrefix
+      view.render()
+
+    if @useHeadup and not @subviews.headup?
+      @$headup = @$('aside.headup')
+      @subviews.headup = new ELA.Views.Headup
+        el: @$headup
+        localePrefix: @localePrefix
+
+    delay =>
+      if @graphView? and not @subviews.graph
+        @$graph = @$('article .graph')
+        GraphView = @graphView.toFunction()
+        @subviews.graph = view = new GraphView
+          model: @model
+          parentView: this
+          params: @model.displayParams
+          defaults: _.defaults
+            # Taken from ELA.Views.Canvas::readCanvasResolution
+            width: @$graph[0].clientWidth
+            height: @$graph[0].clientHeight
+            valueAtRangeAxis: @valueAtRangeAxis
+            valueAtRangeAttribute: @valueAtRangeAttribute
+          , @graphDefaults
+          localePrefix: @localePrefix
+        @$graph.html(view.render().el)
+
+        # If the legend uses the value at range feature, it's height
+        # may change with updated calculators
+        if @subviews.legend?.useValueAtRange
+          @listenTo(@model, 'change:calculators', view.readCanvasResolution)
+
+    @renderHelp()
+    @toggleAside(@model, @model.get('currentAside'))
+
+    this

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

@@ -0,0 +1,9 @@
+ELA.Views ?= {}
+class ELA.Views.BaseAside extends Backbone.Poised.View
+  tagName: 'aside'
+  className: ->
+    "#{@asideName} right"
+
+  constructor: (options = {}) ->
+    @asideName = options.name
+    super

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

@@ -0,0 +1,477 @@
+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
+
+  # A variable that contains temporary information about the pinch
+  # or pan action that is currently performed.
+  start: {}
+
+  # Contains all view specific parameters that do not belong in the model.
+  params: null
+
+  # 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
+
+  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()
+
+  maxRangeX: (func, xScale = @params.get('xScale')) =>
+    xScale * 5
+
+  maxRangeY: (func, yScale = @params.get('yScale')) =>
+    yScale * 5
+
+  events:
+    'pan': 'pan',
+    'panstart': 'panstart'
+    'panend': 'panend'
+    'pinchstart': 'pinchstart'
+    'pinch': 'pinch'
+    'pinchend': 'pinchend'
+    'doubletap': 'resetCanvas'
+    'mousewheel': 'mousewheel'
+    'DOMMouseScroll': 'mousewheel'
+
+  hammerjs:
+    recognizers: [
+      [Hammer.Rotate, { enable: false }],
+      [Hammer.Pinch, {}, ['rotate']],
+      [Hammer.Swipe,{ enable: false }],
+      [Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 1 }, ['swipe']],
+      [Hammer.Tap, { threshold: 5 }],
+      [Hammer.Tap, { event: 'doubletap', taps: 2, posThreshold: 20, threshold: 5 }, ['tap']],
+      [Hammer.Press, { enable: false }]
+    ]
+
+  mousewheel: (e) =>
+    e.preventDefault()
+    if e.originalEvent.wheelDelta > 0 or e.originalEvent.detail < 0
+      factor = 1.05
+    else
+      factor = 0.95
+    if not @params.get('xPinchLocked') and (not window.keys.ALT or window.keys.SHIFT or @params.get('scaleLink'))
+      @params.set xScale: @params.get('xScale') * factor
+    if not @params.get('yPinchLocked') and (@params.get('scaleLink') or window.keys.ALT or window.keys.SHIFT)
+      @params.set yScale: @params.get('yScale') * factor
+
+  # 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))
+
+  debugCircle: (context, color, x, y, radius = 20) =>
+    context.beginPath()
+    context.arc(x,y,radius,0,2*Math.PI,false)
+    context.fillStyle = color
+    context.fill()
+    context.closePath()
+
+  centerBetweenTouches: (t1, t2) ->
+    @centerBetweenPoints(t1.clientX, t1.clientY, t2.clientX, t2.clientY)
+
+  centerBetweenPoints: (x1, y1, x2, y2) ->
+    centerX = null
+    if x1 <= x2
+      centerX = x1 + (x2 - x1) / 2
+    else
+      centerX = x2 + (x1 - x2) / 2
+    centerY = null
+    if y1 <= y2
+      centerY = y1 + (y2 - y1) / 2
+    else
+      centerY = y2 + (y1 - y2) / 2
+    { x: centerX, y: centerY }
+
+  pinchstart: (e) =>
+    center = @centerBetweenTouches(e.gesture.pointers[0], e.gesture.pointers[1])
+    @start.centerX = center.x
+    @start.centerY = center.y
+    @start.xOrigin = @params.get('xOrigin')
+    @start.yOrigin = @params.get('yOrigin')
+    @start.touchDistanceX = Math.max(50, Math.abs(e.gesture.pointers[0].clientX - e.gesture.pointers[1].clientX))
+    @start.touchDistanceY = Math.max(50, Math.abs(e.gesture.pointers[0].clientY - e.gesture.pointers[1].clientY))
+    @start.xScale = @params.get('xScale')
+    @start.yScale = @params.get('yScale')
+
+  pinch: (e) =>
+    center = @centerBetweenTouches(e.gesture.pointers[0], e.gesture.pointers[1])
+    deltaX = -(@start.centerX - center.x)
+    deltaY = -(@start.centerY - center.y)
+
+    touchDistanceX = Math.max(50, Math.abs(e.gesture.pointers[0].clientX - e.gesture.pointers[1].clientX))
+    touchDistanceY = Math.max(50, Math.abs(e.gesture.pointers[0].clientY - e.gesture.pointers[1].clientY))
+    xScale = touchDistanceX / @start.touchDistanceX
+    yScale = touchDistanceY / @start.touchDistanceY
+
+    xScale = yScale = (xScale + yScale)/2 if @params.get('scaleLink')
+
+    unless @params.get('xPinchLocked')
+      @params.set 'xScale', @start.xScale / xScale
+    unless @params.get('yPinchLocked')
+      @params.set 'yScale', @start.yScale / yScale
+    unless @params.get('xPanLocked')
+      @params.set xOrigin: @start.centerX + (@start.xOrigin - @start.centerX) * xScale + deltaX
+    unless @params.get('yPanLocked')
+      @params.set yOrigin: @start.centerY + (@start.yOrigin - @start.centerY) * yScale + deltaY
+
+  pinchend: (e) =>
+    # Do not call pan events on transformend
+    @hammer.stop()
+    # Reset temporary transform variables
+    @start = {}
+
+  panstart: =>
+    clearTimeout(@panendTimeout)
+    @start.xOrigin = @params.get('xOrigin')
+    @start.yOrigin = @params.get('yOrigin')
+
+  pan: (e) =>
+    @start.xOrigin ||= @params.get('xOrigin')
+    @start.yOrigin ||= @params.get('yOrigin')
+    unless @params.get('xPanLocked')
+      @params.set xOrigin: @start.xOrigin + e.gesture.deltaX
+    unless @params.get('yPanLocked')
+      @params.set yOrigin: @start.yOrigin + e.gesture.deltaY
+
+  panend: (e) =>
+    # Reset temporary transform variables
+    @start = {}
+    velocityX = e.gesture.velocityX * 10
+    velocityY = e.gesture.velocityY * 10
+
+    slowdown = =>
+      if Math.abs(velocityX) > 0 and not @params.get('xPanLocked')
+        @params.set xOrigin: @params.get('xOrigin') + velocityX
+        velocityX *= 0.9
+      if Math.abs(velocityY) > 0 and not @params.get('yPanLocked')
+        @params.set yOrigin: @params.get('yOrigin') + velocityY
+        velocityY *= 0.9
+      if Math.abs(velocityY) > 0.2 or Math.abs(velocityX) > 0.2
+        @panendTimeout = setTimeout(slowdown, 8)
+
+    slowdown()
+
+  # TODO: Create clever loops to fit with very small grids like
+  # (0.00001) and very large grids like (10^10 or alike).
+  roundStepSize: (stepSize) ->
+    validStepSize = stepSize? and isFinite(stepSize)
+    if validStepSize and stepSize > 0.5
+      factor = 1
+      loop
+        for breakpoint in [1, 2, 5]
+          roundedStepSize = breakpoint*factor
+          return roundedStepSize if roundedStepSize > stepSize
+        factor *= 10
+    else if validStepSize and 0 < stepSize <= 0.5
+      denominator = 10
+      lastRoundedStepSize = null
+      loop
+        for breakpoint in [5, 2, 1]
+          roundedStepSize = breakpoint/denominator
+          if stepSize > roundedStepSize
+            return lastRoundedStepSize or roundedStepSize
+          else
+            lastRoundedStepSize = roundedStepSize
+        denominator *= 10
+    else
+      stepSize
+
+  axisLabel: (value, stepSize) ->
+    precision = 0
+    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) ->
+    @axisLabel(val - @params.get('yOffset'), stepsize)
+
+  _axisLabel: (label) ->
+    if typeof label is 'function'
+      label.call(this)
+    else if label?
+      label
+    else
+      ''
+
+  xAxisLabel: -> @_axisLabel(@params.get('xAxisLabel'))
+  yAxisLabel: -> @_axisLabel(@params.get('yAxisLabel'))
+
+  renderCurves: ->
+    # stub
+
+  renderXAxis: ->
+    @context.setLineDash []
+    @context.font = @defaultFont
+    @context.strokeStyle = "#999999"
+    @context.fillStyle = "#000000"
+    @context.lineWidth = 2
+
+    @context.beginPath()
+    @context.moveTo(0, @yOrigin)
+    @context.lineTo(@width, @yOrigin)
+
+    unless @params.get('xLabelPosition') is 'none'
+      labelY = dashY = 0
+      if @params.get('xLabelPosition') is 'bottom'
+        labelY = @yOrigin + 15
+        dashY = @yOrigin + 5
+      else
+        labelY = @yOrigin - 15
+        dashY = @yOrigin - 5
+
+      @context.textBaseline = 'middle'
+      @context.textAlign = 'center'
+
+      xRange = @maxRangeX() unless xRange?
+      xMin = -@xOrigin * xRange / @width
+      xMax = (@width - @xOrigin) * xRange / @width
+      xStepSize = @roundStepSize(100 * xRange / @width)
+      for x in [(xMin - xMin % xStepSize) .. xMax] by xStepSize
+        if x <= (0 - xStepSize / 2) or (0 + xStepSize / 2) <= x
+          xPos = @xOrigin + x * @width / xRange
+          @context.moveTo(xPos, @yOrigin)
+          @context.lineTo(xPos, dashY)
+          @context.fillText("#{@xAxisValueLabel(x, xStepSize)}", xPos, labelY)
+
+    @context.save()
+    xPos = if @xOrigin <= @width/2
+      (@xOrigin + @width)/2
+    else
+      @xOrigin/2
+    xPos = Math.round(xPos) if @context.pixelRatio is 1
+    @context.translate(xPos, @yOrigin + 15)
+    MarkupText.render(@context, @xAxisLabel(), @defaultFont)
+    @context.restore()
+
+    @context.stroke()
+    @context.closePath()
+
+  renderYAxis: (yRange) ->
+    @context.setLineDash []
+    @context.font = @defaultFont
+    @context.strokeStyle = "#999999"
+    @context.fillStyle = "#000000"
+    @context.lineWidth = 2
+
+    @context.beginPath()
+    @context.moveTo(@xOrigin, 0)
+    @context.lineTo(@xOrigin, @height)
+
+    unless @params.get('yLabelPosition') is 'none'
+      labelX = dashX = 0
+      if @params.get('yLabelPosition') is 'right'
+        labelX = @xOrigin + 10
+        dashX = @xOrigin + 5
+        @context.textAlign = 'left'
+      else
+        labelX = @xOrigin - 10
+        dashX = @xOrigin - 5
+        @context.textAlign = 'right'
+      @context.textBaseline = 'middle'
+
+      yRange = @maxRangeY() unless yRange?
+      yMin = -(@height - @yOrigin) * yRange / @height
+      yMax = @yOrigin * yRange / @height
+      yStepSize = @roundStepSize(100 * yRange / @height)
+      for y in [(yMin - yMin % yStepSize) .. yMax] by yStepSize
+        if y <= (0 - yStepSize / 2) or y >= (0 + yStepSize / 2)
+          yPos = @yOrigin - y * @height / yRange
+          @context.moveTo(@xOrigin, yPos)
+          @context.lineTo(dashX, yPos)
+          @context.fillText(@yAxisValueLabel(y, yStepSize), labelX, yPos)
+
+    @context.save();
+    yPos = if @yOrigin < @height/2
+      (@yOrigin + @height)/2
+    else
+      @yOrigin/2
+    yPos = Math.round(yPos) if @context.pixelRatio is 1
+    @context.translate(@xOrigin - 15, yPos);
+    @context.rotate(-Math.PI / 2);
+    MarkupText.render(@context, @yAxisLabel(), @defaultFont)
+    @context.restore()
+
+    @context.stroke()
+    @context.closePath()
+
+  renderGrid: ->
+    @context.strokeStyle = '#eeeeee'
+    @context.lineWidth = 1
+    @context.beginPath()
+
+    unless @params.get('xLabelPosition') is 'none'
+      xRange = @maxRangeX() unless xRange?
+      xMin = -@xOrigin * xRange / @width
+      xMax = (@width - @xOrigin) * xRange / @width
+      xStepSize = @roundStepSize(100 * xRange / @width)
+      for x in [(xMin - xMin % xStepSize) .. xMax] by xStepSize
+        xPos = @xOrigin + x * @width / xRange
+        @context.moveTo(xPos, 0)
+        @context.lineTo(xPos, @height)
+
+    unless @params.get('yLabelPosition') is 'none'
+      yRange = @maxRangeY() unless yRange?
+      yMin = -(@height - @yOrigin) * yRange / @height
+      yMax = @yOrigin * yRange / @height
+      yStepSize = @roundStepSize(100 * yRange / @height)
+      for y in [(yMin - yMin % yStepSize) .. yMax] by yStepSize
+        yPos = @yOrigin - y * @height / yRange
+        @context.moveTo(0, yPos)
+        @context.lineTo(@width, yPos)
+
+    @context.stroke()
+    @context.closePath()
+
+  beforeRender: ->
+    # Stub to execute code before rendering...
+
+  render: =>
+    @width = @params.get('width')
+    @height = @params.get('height')
+    @xOrigin = @params.get('xOrigin')
+    @yOrigin = @params.get('yOrigin')
+    @yOffset = @params.get('yOffset')
+    @xRange = @params.get('xRange')
+    @yRange = @params.get('yRange')
+
+    @xMin = -@xOrigin * @xRange / @width
+    @xMax = (@width - @xOrigin) * @xRange / @width
+
+    @yMin = -(@height - @yOrigin) * @yRange / @height
+    @yMax = @yOrigin * @yRange / @height
+
+    return this if @width == null and @height == null
+
+    @context ||= @el.getContext('2d')
+    @context.clearRect(0, 0, @width, @height)
+
+    @beforeRender()
+
+    @renderGrid()
+    @renderXAxis()
+    @renderYAxis()
+    @renderCurves()
+
+    this