epoch-charting/src/time/area.coffee

A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.

# Real-time stacked area chart implementation.
class Epoch.Time.Area extends Epoch.Time.Stack
  constructor: (@options={}) ->
    @options.type ?= 'time.area'
    super(@options)
    @draw()

  # Sets the appropriate styles to the graphics context given a particular layer.
  # @param [Object] layer Layer for which to set the styles.
  setStyles: (layer) ->
    if layer? && layer.className?
      styles = @getStyles "g.#{layer.className.replace(/\s/g,'.')} path.area"
    else
      styles = @getStyles "g path.area"
    @ctx.fillStyle = styles.fill
    if styles.stroke?
      @ctx.strokeStyle = styles.stroke
    if styles['stroke-width']?
      @ctx.lineWidth = styles['stroke-width'].replace('px', '')

  # Draws areas for the chart
  _drawAreas: (delta=0) ->
    [y, w, layers] = [@y(), @w(), @getVisibleLayers()]

    for i in [layers.length-1..0]
      continue unless (layer = layers[i])

      @setStyles layer
      @ctx.beginPath()

      [j, k, trans] = [@options.windowSize, layer.values.length, @inTransition()]
      firstX = null
      while (--j >= -2) and (--k >= 0)
        entry = layer.values[k]
        args = [(j+1)*w+delta, y(entry.y + entry.y0)]
        args[0] += w if trans
        if i == @options.windowSize - 1
          @ctx.moveTo.apply @ctx, args
        else
          @ctx.lineTo.apply @ctx, args

      if trans
        borderX = (j+3)*w+delta
      else
        borderX = (j+2)*w+delta

      @ctx.lineTo(borderX, @innerHeight())
      @ctx.lineTo(@width*@pixelRatio+w+delta, @innerHeight())
      @ctx.closePath()
      @ctx.fill()

  # Draws strokes for the chart
  _drawStrokes: (delta=0) ->
    [y, w, layers] = [@y(), @w(), @getVisibleLayers()]

    for i in [layers.length-1..0]
      continue unless (layer = layers[i])
      @setStyles layer
      @ctx.beginPath()

      [i, k, trans] = [@options.windowSize, layer.values.length, @inTransition()]
      firstX = null
      while (--i >= -2) and (--k >= 0)
        entry = layer.values[k]
        args = [(i+1)*w+delta, y(entry.y + entry.y0)]
        args[0] += w if trans
        if i == @options.windowSize - 1
          @ctx.moveTo.apply @ctx, args
        else
          @ctx.lineTo.apply @ctx, args

      @ctx.stroke()

  # Draws the area chart.
  draw: (delta=0) ->
    @clear()
    @_drawAreas(delta)
    @_drawStrokes(delta)
    super()