morris-rails 0.4.2

data/app/assets/javascripts/morris.donut.coffee

@@ -0,0 +1,182 @@
+# Donut charts.
+#
+# @example
+#   Morris.Donut({
+#     el: $('#donut-container'),
+#     data: [
+#       { label: 'yin',  value: 50 },
+#       { label: 'yang', value: 50 }
+#     ]
+#   });
+class Morris.Donut
+  defaults:
+    colors: [
+      '#0B62A4'
+      '#3980B5'
+      '#679DC6'
+      '#95BBD7'
+      '#B0CCE1'
+      '#095791'
+      '#095085'
+      '#083E67'
+      '#052C48'
+      '#042135'
+    ],
+    backgroundColor: '#FFFFFF', 
+    labelColor: '#000000',
+    formatter: Morris.commas
+
+  # Create and render a donut chart.
+  #
+  constructor: (options) ->
+    if not (this instanceof Morris.Donut)
+      return new Morris.Donut(options)
+
+    if typeof options.element is 'string'
+      @el = $ document.getElementById(options.element)
+    else
+      @el = $ options.element
+
+    @options = $.extend {}, @defaults, options
+
+    if @el == null || @el.length == 0
+      throw new Error("Graph placeholder not found.")
+
+    # bail if there's no data
+    if options.data is undefined or options.data.length is 0
+      return
+    @data = options.data
+
+    @redraw()
+
+  # Clear and redraw the chart.
+  #
+  # If you need to re-size your charts, call this method after changing the
+  # size of the container element.
+  redraw: ->
+    @el.empty()
+
+    @raphael = new Raphael(@el[0])
+
+    cx = @el.width() / 2
+    cy = @el.height() / 2
+    w = (Math.min(cx, cy) - 10) / 3
+
+    total = 0
+    total += x.value for x in @data
+
+    min = 5 / (2 * w)
+    C = 1.9999 * Math.PI - min * @data.length
+
+    last = 0
+    idx = 0
+    @segments = []
+    for d in @data
+      next = last + min + C * (d.value / total)
+      seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @options.colors[idx % @options.colors.length], @options.backgroundColor, d, @raphael)
+      seg.render()
+      @segments.push seg
+      seg.on 'hover', @select
+      last = next
+      idx += 1
+    @text1 = @drawEmptyDonutLabel(cx, cy - 10, @options.labelColor, 15, 800)
+    @text2 = @drawEmptyDonutLabel(cx, cy + 10, @options.labelColor, 14)
+    max_value = Math.max.apply(null, d.value for d in @data)
+    idx = 0
+    for d in @data
+      if d.value == max_value
+        @select idx
+        break
+      idx += 1
+
+  # Select the segment at the given index.
+  select: (idx) =>
+    s.deselect() for s in @segments
+    if typeof idx is 'number' then segment = @segments[idx] else segment = idx
+    segment.select()
+    @setLabels segment.data.label, @options.formatter(segment.data.value, segment.data)
+
+  # @private
+  setLabels: (label1, label2) ->
+    inner = (Math.min(@el.width() / 2, @el.height() / 2) - 10) * 2 / 3
+    maxWidth = 1.8 * inner
+    maxHeightTop = inner / 2
+    maxHeightBottom = inner / 3
+    @text1.attr(text: label1, transform: '')
+    text1bbox = @text1.getBBox()
+    text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height)
+    @text1.attr(transform: "S#{text1scale},#{text1scale},#{text1bbox.x + text1bbox.width / 2},#{text1bbox.y + text1bbox.height}")
+    @text2.attr(text: label2, transform: '')
+    text2bbox = @text2.getBBox()
+    text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height)
+    @text2.attr(transform: "S#{text2scale},#{text2scale},#{text2bbox.x + text2bbox.width / 2},#{text2bbox.y}")
+
+  drawEmptyDonutLabel: (xPos, yPos, color, fontSize, fontWeight) ->
+    text = @raphael.text(xPos, yPos, '')
+      .attr('font-size', fontSize)
+      .attr('fill', color)
+    text.attr('font-weight', fontWeight) if fontWeight?
+    return text
+
+
+# A segment within a donut chart.
+#
+# @private
+class Morris.DonutSegment extends Morris.EventEmitter
+  constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @backgroundColor, @data, @raphael) ->
+    @sin_p0 = Math.sin(p0)
+    @cos_p0 = Math.cos(p0)
+    @sin_p1 = Math.sin(p1)
+    @cos_p1 = Math.cos(p1)
+    @is_long = if (p1 - p0) > Math.PI then 1 else 0
+    @path = @calcSegment(@inner + 3, @inner + @outer - 5)
+    @selectedPath = @calcSegment(@inner + 3, @inner + @outer)
+    @hilight = @calcArc(@inner)
+
+  calcArcPoints: (r) ->
+    return [
+      @cx + r * @sin_p0,
+      @cy + r * @cos_p0,
+      @cx + r * @sin_p1,
+      @cy + r * @cos_p1]
+
+  calcSegment: (r1, r2) ->
+    [ix0, iy0, ix1, iy1] = @calcArcPoints(r1)
+    [ox0, oy0, ox1, oy1] = @calcArcPoints(r2)
+    return (
+      "M#{ix0},#{iy0}" +
+      "A#{r1},#{r1},0,#{@is_long},0,#{ix1},#{iy1}" +
+      "L#{ox1},#{oy1}" +
+      "A#{r2},#{r2},0,#{@is_long},1,#{ox0},#{oy0}" +
+      "Z")
+
+  calcArc: (r) ->
+    [ix0, iy0, ix1, iy1] = @calcArcPoints(r)
+    return (
+      "M#{ix0},#{iy0}" +
+      "A#{r},#{r},0,#{@is_long},0,#{ix1},#{iy1}")
+
+  render: ->
+    @arc = @drawDonutArc(@hilight, @color)
+    @seg = @drawDonutSegment(@path, @color, @backgroundColor, => @fire('hover', @))
+
+  drawDonutArc: (path, color) ->
+    @raphael.path(path)
+      .attr(stroke: color, 'stroke-width': 2, opacity: 0)
+
+  drawDonutSegment: (path, fillColor, strokeColor, hoverFunction) ->
+    @raphael.path(path)
+      .attr(fill: fillColor, stroke: strokeColor, 'stroke-width': 3)
+      .hover(hoverFunction)
+
+  select: =>
+    unless @selected
+      @seg.animate(path: @selectedPath, 150, '<>')
+      @arc.animate(opacity: 1, 150, '<>')
+      @selected = true
+
+  deselect: =>
+    if @selected
+      @seg.animate(path: @path, 150, '<>')
+      @arc.animate(opacity: 0, 150, '<>')
+      @selected = false

data/app/assets/javascripts/morris.grid.coffee

@@ -0,0 +1,392 @@
+class Morris.Grid extends Morris.EventEmitter
+  # A generic pair of axes for line/area/bar charts.
+  #
+  # Draws grid lines and axis labels.
+  #
+  constructor: (options) ->
+    # find the container to draw the graph in
+    if typeof options.element is 'string'
+      @el = $ document.getElementById(options.element)
+    else
+      @el = $ options.element
+    if not @el? or @el.length == 0
+      throw new Error("Graph container element not found")
+
+    if @el.css('position') == 'static'
+      @el.css('position', 'relative')
+
+    @options = $.extend {}, @gridDefaults, (@defaults || {}), options
+
+    # backwards compatibility for units -> postUnits
+    if typeof @options.units is 'string'
+      @options.postUnits = options.units
+
+    # the raphael drawing instance
+    @raphael = new Raphael(@el[0])
+
+    # some redraw stuff
+    @elementWidth = null
+    @elementHeight = null
+    @dirty = false
+
+    # more stuff
+    @init() if @init
+
+    # load data
+    @setData @options.data
+
+    # hover
+    @el.bind 'mousemove', (evt) =>
+      offset = @el.offset()
+      @fire 'hovermove', evt.pageX - offset.left, evt.pageY - offset.top
+
+    @el.bind 'mouseout', (evt) =>
+      @fire 'hoverout'
+
+    @el.bind 'touchstart touchmove touchend', (evt) =>
+      touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0]
+      offset = @el.offset()
+      @fire 'hover', touch.pageX - offset.left, touch.pageY - offset.top
+      touch
+
+    @postInit() if @postInit
+
+  # Default options
+  #
+  gridDefaults:
+    dateFormat: null
+    axes: true
+    grid: true
+    gridLineColor: '#aaa'
+    gridStrokeWidth: 0.5
+    gridTextColor: '#888'
+    gridTextSize: 12
+    hideHover: false
+    yLabelFormat: null
+    numLines: 5
+    padding: 25
+    parseTime: true
+    postUnits: ''
+    preUnits: ''
+    ymax: 'auto'
+    ymin: 'auto 0'
+    goals: []
+    goalStrokeWidth: 1.0
+    goalLineColors: [
+      '#666633'
+      '#999966'
+      '#cc6666'
+      '#663333'
+    ]
+    events: []
+    eventStrokeWidth: 1.0
+    eventLineColors: [
+      '#005a04'
+      '#ccffbb'
+      '#3a5f0b'
+      '#005502'
+    ]
+
+  # Update the data series and redraw the chart.
+  #
+  setData: (data, redraw = true) ->
+    if !data? or data.length == 0
+      @data = []
+      @raphael.clear()
+      @hover.hide() if @hover?
+      return
+
+    ymax = if @cumulative then 0 else null
+    ymin = if @cumulative then 0 else null
+
+    if @options.goals.length > 0
+      minGoal = Math.min.apply(null, @options.goals)
+      maxGoal = Math.max.apply(null, @options.goals)
+      ymin = if ymin? then Math.min(ymin, minGoal) else minGoal
+      ymax = if ymax? then Math.max(ymax, maxGoal) else maxGoal
+
+    @data = for row, index in data
+      ret = {}
+      ret.label = row[@options.xkey]
+      if @options.parseTime
+        ret.x = Morris.parseDate(ret.label)
+        if @options.dateFormat
+          ret.label = @options.dateFormat ret.x
+        else if typeof ret.label is 'number'
+          ret.label = new Date(ret.label).toString()
+      else
+        ret.x = index
+      total = 0
+      ret.y = for ykey, idx in @options.ykeys
+        yval = row[ykey]
+        yval = parseFloat(yval) if typeof yval is 'string'
+        yval = null if yval? and typeof yval isnt 'number'
+        if yval?
+          if @cumulative
+            total += yval
+          else
+            if ymax?
+              ymax = Math.max(yval, ymax)
+              ymin = Math.min(yval, ymin)
+            else
+              ymax = ymin = yval
+        if @cumulative and total?
+          ymax = Math.max(total, ymax)
+          ymin = Math.min(total, ymin)
+        yval
+      ret
+
+    if @options.parseTime
+      @data = @data.sort (a, b) -> (a.x > b.x) - (b.x > a.x)
+
+    # calculate horizontal range of the graph
+    @xmin = @data[0].x
+    @xmax = @data[@data.length - 1].x
+
+    @events = []
+    if @options.parseTime and @options.events.length > 0
+      @events = (Morris.parseDate(e) for e in @options.events)
+      @xmax = Math.max(@xmax, Math.max.apply(null, @events))
+      @xmin = Math.min(@xmin, Math.min.apply(null, @events))
+
+    if @xmin is @xmax
+      @xmin -= 1
+      @xmax += 1
+
+    @ymin = @yboundary('min', ymin)
+    @ymax = @yboundary('max', ymax)
+
+    if @ymin is @ymax
+      @ymin -= 1 if ymin
+      @ymax += 1
+
+    @yInterval = (@ymax - @ymin) / (@options.numLines - 1)
+    if @yInterval > 0 and @yInterval < 1
+        @precision =  -Math.floor(Math.log(@yInterval) / Math.log(10))
+    else
+        @precision = 0
+
+    @dirty = true
+    @redraw() if redraw
+
+  yboundary: (boundaryType, currentValue) ->
+    boundaryOption = @options["y#{boundaryType}"]
+    if typeof boundaryOption is 'string'
+      if boundaryOption[0..3] is 'auto'
+        if boundaryOption.length > 5
+          suggestedValue = parseInt(boundaryOption[5..], 10)
+          return suggestedValue unless currentValue?
+          Math[boundaryType](currentValue, suggestedValue)
+        else
+          if currentValue? then currentValue else 0
+      else
+        parseInt(boundaryOption, 10)
+    else
+      boundaryOption
+
+  _calc: ->
+    w = @el.width()
+    h = @el.height()
+
+    if @elementWidth != w or @elementHeight != h or @dirty
+      @elementWidth = w
+      @elementHeight = h
+      @dirty = false
+      # recalculate grid dimensions
+      @left = @options.padding
+      @right = @elementWidth - @options.padding
+      @top = @options.padding
+      @bottom = @elementHeight - @options.padding
+      if @options.axes
+        maxYLabelWidth = Math.max(
+          @measureText(@yAxisFormat(@ymin), @options.gridTextSize).width,
+          @measureText(@yAxisFormat(@ymax), @options.gridTextSize).width)
+        @left += maxYLabelWidth
+        @bottom -= 1.5 * @options.gridTextSize
+      @width = @right - @left
+      @height = @bottom - @top
+      @dx = @width / (@xmax - @xmin)
+      @dy = @height / (@ymax - @ymin)
+      @calc() if @calc
+
+  # Quick translation helpers
+  #
+  transY: (y) -> @bottom - (y - @ymin) * @dy
+  transX: (x) ->
+    if @data.length == 1
+      (@left + @right) / 2
+    else
+      @left + (x - @xmin) * @dx
+
+  # Draw it!
+  #
+  # If you need to re-size your charts, call this method after changing the
+  # size of the container element.
+  redraw: ->
+    @raphael.clear()
+    @_calc()
+    @drawGrid()
+    @drawGoals()
+    @drawEvents()
+    @draw() if @draw
+
+  # @private
+  #
+  measureText: (text, fontSize = 12) ->
+    tt = @raphael.text(100, 100, text).attr('font-size', fontSize)
+    ret = tt.getBBox()
+    tt.remove()
+    ret
+
+  # @private
+  #
+  yAxisFormat: (label) -> @yLabelFormat(label)
+
+  # @private
+  #
+  yLabelFormat: (label) ->
+    if typeof @options.yLabelFormat is 'function'
+      @options.yLabelFormat(label)
+    else
+      "#{@options.preUnits}#{Morris.commas(label)}#{@options.postUnits}"
+
+  updateHover: (x, y) ->
+    hit = @hitTest(x, y)
+    if hit?
+      @hover.update(hit...)
+
+  # draw y axis labels, horizontal lines
+  #
+  drawGrid: ->
+    return if @options.grid is false and @options.axes is false
+    firstY = @ymin
+    lastY = @ymax
+    for lineY in [firstY..lastY] by @yInterval
+      v = parseFloat(lineY.toFixed(@precision))
+      y = @transY(v)
+      if @options.axes
+        @drawYAxisLabel(@left - @options.padding / 2, y, @yAxisFormat(v))
+      if @options.grid
+        @drawGridLine("M#{@left},#{y}H#{@left + @width}")
+
+  # draw goals horizontal lines
+  #
+  drawGoals: ->
+    for goal, i in @options.goals
+      color = @options.goalLineColors[i % @options.goalLineColors.length]
+      @drawGoal(goal, color)
+
+  # draw events vertical lines
+  drawEvents: ->
+    for event, i in @events
+      color = @options.eventLineColors[i % @options.eventLineColors.length]
+      @drawEvent(event, color)
+
+  drawGoal: (goal, color) ->
+    @raphael.path("M#{@left},#{@transY(goal)}H#{@right}")
+      .attr('stroke', color)
+      .attr('stroke-width', @options.goalStrokeWidth)
+
+  drawEvent: (event, color) ->
+    @raphael.path("M#{@transX(event)},#{@bottom}V#{@top}")
+      .attr('stroke', color)
+      .attr('stroke-width', @options.eventStrokeWidth)
+
+  drawYAxisLabel: (xPos, yPos, text) ->
+    @raphael.text(xPos, yPos, text)
+      .attr('font-size', @options.gridTextSize)
+      .attr('fill', @options.gridTextColor)
+      .attr('text-anchor', 'end')
+
+  drawGridLine: (path) ->
+    @raphael.path(path)
+      .attr('stroke', @options.gridLineColor)
+      .attr('stroke-width', @options.gridStrokeWidth)
+
+# Parse a date into a javascript timestamp
+#
+#
+Morris.parseDate = (date) ->
+  if typeof date is 'number'
+    return date
+  m = date.match /^(\d+) Q(\d)$/
+  n = date.match /^(\d+)-(\d+)$/
+  o = date.match /^(\d+)-(\d+)-(\d+)$/
+  p = date.match /^(\d+) W(\d+)$/
+  q = date.match /^(\d+)-(\d+)-(\d+)[ T](\d+):(\d+)(Z|([+-])(\d\d):?(\d\d))?$/
+  r = date.match /^(\d+)-(\d+)-(\d+)[ T](\d+):(\d+):(\d+(\.\d+)?)(Z|([+-])(\d\d):?(\d\d))?$/
+  if m
+    new Date(
+      parseInt(m[1], 10),
+      parseInt(m[2], 10) * 3 - 1,
+      1).getTime()
+  else if n
+    new Date(
+      parseInt(n[1], 10),
+      parseInt(n[2], 10) - 1,
+      1).getTime()
+  else if o
+    new Date(
+      parseInt(o[1], 10),
+      parseInt(o[2], 10) - 1,
+      parseInt(o[3], 10)).getTime()
+  else if p
+    # calculate number of weeks in year given
+    ret = new Date(parseInt(p[1], 10), 0, 1);
+    # first thursday in year (ISO 8601 standard)
+    if ret.getDay() isnt 4
+      ret.setMonth(0, 1 + ((4 - ret.getDay()) + 7) % 7);
+    # add weeks
+    ret.getTime() + parseInt(p[2], 10) * 604800000
+  else if q
+    if not q[6]
+      # no timezone info, use local
+      new Date(
+        parseInt(q[1], 10),
+        parseInt(q[2], 10) - 1,
+        parseInt(q[3], 10),
+        parseInt(q[4], 10),
+        parseInt(q[5], 10)).getTime()
+    else
+      # timezone info supplied, use UTC
+      offsetmins = 0
+      if q[6] != 'Z'
+        offsetmins = parseInt(q[8], 10) * 60 + parseInt(q[9], 10)
+        offsetmins = 0 - offsetmins if q[7] == '+'
+      Date.UTC(
+        parseInt(q[1], 10),
+        parseInt(q[2], 10) - 1,
+        parseInt(q[3], 10),
+        parseInt(q[4], 10),
+        parseInt(q[5], 10) + offsetmins)
+  else if r
+    secs = parseFloat(r[6])
+    isecs = Math.floor(secs)
+    msecs = Math.round((secs - isecs) * 1000)
+    if not r[8]
+      # no timezone info, use local
+      new Date(
+        parseInt(r[1], 10),
+        parseInt(r[2], 10) - 1,
+        parseInt(r[3], 10),
+        parseInt(r[4], 10),
+        parseInt(r[5], 10),
+        isecs,
+        msecs).getTime()
+    else
+      # timezone info supplied, use UTC
+      offsetmins = 0
+      if r[8] != 'Z'
+        offsetmins = parseInt(r[10], 10) * 60 + parseInt(r[11], 10)
+        offsetmins = 0 - offsetmins if r[9] == '+'
+      Date.UTC(
+        parseInt(r[1], 10),
+        parseInt(r[2], 10) - 1,
+        parseInt(r[3], 10),
+        parseInt(r[4], 10),
+        parseInt(r[5], 10) + offsetmins,
+        isecs,
+        msecs)
+  else
+    new Date(parseInt(date, 10), 0, 1).getTime()
+