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 # range selection @selectFrom = null # more stuff @init() if @init # load data @setData @options.data # hover @el.bind 'mousemove', (evt) => offset = @el.offset() x = evt.pageX - offset.left if @selectFrom left = @data[@hitTest(Math.min(x, @selectFrom))]._x right = @data[@hitTest(Math.max(x, @selectFrom))]._x width = right - left @selectionRect.attr({ x: left, width: width }) else @fire 'hovermove', x, evt.pageY - offset.top @el.bind 'mouseleave', (evt) => if @selectFrom @selectionRect.hide() @selectFrom = null @fire 'hoverout' @el.bind 'touchstart touchmove touchend', (evt) => touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0] offset = @el.offset() @fire 'hovermove', touch.pageX - offset.left, touch.pageY - offset.top @el.bind 'click', (evt) => offset = @el.offset() @fire 'gridclick', evt.pageX - offset.left, evt.pageY - offset.top if @options.rangeSelect @selectionRect = @raphael.rect(0, 0, 0, @el.innerHeight()) .attr({ fill: @options.rangeSelectColor, stroke: false }) .toBack() .hide() @el.bind 'mousedown', (evt) => offset = @el.offset() @startRange evt.pageX - offset.left @el.bind 'mouseup', (evt) => offset = @el.offset() @endRange evt.pageX - offset.left @fire 'hovermove', evt.pageX - offset.left, evt.pageY - offset.top if @options.resize $(window).bind 'resize', (evt) => if @timeoutId? window.clearTimeout @timeoutId @timeoutId = window.setTimeout @resizeHandler, 100 # Disable tap highlight on iOS. @el.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)') @postInit() if @postInit # Default options # gridDefaults: dateFormat: null axes: true grid: true gridLineColor: '#aaa' gridStrokeWidth: 0.5 gridTextColor: '#888' gridTextSize: 12 gridTextFamily: 'sans-serif' gridTextWeight: 'normal' hideHover: false yLabelFormat: null yLabelAlign: 'right' xLabelAngle: 0 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' ] rangeSelect: null rangeSelectColor: '#eef' resize: false # Update the data series and redraw the chart. # setData: (data, redraw = true) -> @options.data = data 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 @options.goals... maxGoal = Math.max @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 = {src: row} 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 if @options.xLabelFormat ret.label = @options.xLabelFormat ret 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? and @hasToShow(idx) 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.events.length > 0 if @options.parseTime @events = (Morris.parseDate(e) for e in @options.events) else @events = @options.events @xmax = Math.max(@xmax, Math.max(@events...)) @xmin = Math.min(@xmin, Math.min(@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 if @options.axes in [true, 'both', 'y'] or @options.grid is true if (@options.ymax == @gridDefaults.ymax and @options.ymin == @gridDefaults.ymin) # calculate 'magic' grid placement @grid = @autoGridLines(@ymin, @ymax, @options.numLines) @ymin = Math.min(@ymin, @grid[0]) @ymax = Math.max(@ymax, @grid[@grid.length - 1]) else step = (@ymax - @ymin) / (@options.numLines - 1) @grid = (y for y in [@ymin..@ymax] by step) @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 autoGridLines: (ymin, ymax, nlines) -> span = ymax - ymin ymag = Math.floor(Math.log(span) / Math.log(10)) unit = Math.pow(10, ymag) # calculate initial grid min and max values gmin = Math.floor(ymin / unit) * unit gmax = Math.ceil(ymax / unit) * unit step = (gmax - gmin) / (nlines - 1) if unit == 1 and step > 1 and Math.ceil(step) != step step = Math.ceil(step) gmax = gmin + step * (nlines - 1) # ensure zero is plotted where the range includes zero if gmin < 0 and gmax > 0 gmin = Math.floor(ymin / step) * step gmax = Math.ceil(ymax / step) * step # special case for decimal numbers if step < 1 smag = Math.floor(Math.log(step) / Math.log(10)) grid = for y in [gmin..gmax] by step parseFloat(y.toFixed(1 - smag)) else grid = (y for y in [gmin..gmax] by step) grid _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 in [true, 'both', 'y'] yLabelWidths = for gridLine in @grid @measureText(@yAxisFormat(gridLine)).width if not @options.horizontal @left += Math.max(yLabelWidths...) else @bottom -= Math.max(yLabelWidths...) if @options.axes in [true, 'both', 'x'] if not @options.horizontal angle = -@options.xLabelAngle else angle = -90 bottomOffsets = for i in [0...@data.length] @measureText(@data[i].label, angle).height if not @options.horizontal @bottom -= Math.max(bottomOffsets...) else @left += Math.max(bottomOffsets...) @width = Math.max(1, @right - @left) @height = Math.max(1, @bottom - @top) if not @options.horizontal @dx = @width / (@xmax - @xmin) @dy = @height / (@ymax - @ymin) @yStart = @bottom @yEnd = @top @xStart = @left @xEnd = @right @xSize = @width @ySize = @height else @dx = @height / (@xmax - @xmin) @dy = @width / (@ymax - @ymin) @yStart = @left @yEnd = @right @xStart = @top @xEnd = @bottom @xSize = @height @ySize = @width @calc() if @calc # Quick translation helpers # transY: (y) -> if not @options.horizontal @bottom - (y - @ymin) * @dy else @left + (y - @ymin) * @dy transX: (x) -> if @options.horizontal start = @left end = @right else start = @top end = @bottom if @data.length == 1 (start + end) / 2 else start + (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, angle = 0) -> tt = @raphael.text(100, 100, text) .attr('font-size', @options.gridTextSize) .attr('font-family', @options.gridTextFamily) .attr('font-weight', @options.gridTextWeight) .rotate(angle) 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}" # get the X position of a label on the Y axis # # @private getYAxisLabelX: -> if @options.yLabelAlign is 'right' @left - @options.padding / 2 else @options.padding / 2 # draw y axis labels, horizontal lines # drawGrid: -> return if @options.grid is false and @options.axes not in [true, 'both', 'y'] if not @options.horizontal basePos = @getYAxisLabelX() else basePos = @getXAxisLabelY() for lineY in @grid pos = @transY(lineY) if @options.axes in [true, 'both', 'y'] if not @options.horizontal @drawYAxisLabel(basePos, pos, @yAxisFormat(lineY)) else @drawXAxisLabel(pos, basePos, @yAxisFormat(lineY)) if @options.grid if not @options.horizontal @drawGridLine("M#{@xStart},#{pos}H#{@xEnd}") else @drawGridLine("M#{pos},#{@xStart}V#{@xEnd}") # 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) -> if not @options.horizontal path = "M#{@xStart},#{@transY(goal)}H#{@xEnd}" else path = "M#{@transY(goal)},#{@xStart}V#{@xEnd}" @raphael.path(path) .attr('stroke', color) .attr('stroke-width', @options.goalStrokeWidth) drawEvent: (event, color) -> if not @options.horizontal path = "M#{@transX(goal)},#{@yStart}V#{@yEnd}" else path = "M#{@yStart},#{@transX(goal)}H#{@yEnd}" @raphael.path(path) .attr('stroke', color) .attr('stroke-width', @options.eventStrokeWidth) drawYAxisLabel: (xPos, yPos, text) -> label = @raphael.text(xPos, yPos, text) .attr('font-size', @options.gridTextSize) .attr('font-family', @options.gridTextFamily) .attr('font-weight', @options.gridTextWeight) .attr('fill', @options.gridTextColor) if @options.yLabelAlign == 'right' label.attr('text-anchor', 'end') else label.attr('text-anchor', 'start') drawXAxisLabel: (xPos, yPos, text) -> @raphael.text(xPos, yPos, text) .attr('font-size', @options.gridTextSize) .attr('font-family', @options.gridTextFamily) .attr('font-weight', @options.gridTextWeight) .attr('fill', @options.gridTextColor) drawGridLine: (path) -> @raphael.path(path) .attr('stroke', @options.gridLineColor) .attr('stroke-width', @options.gridStrokeWidth) # Range selection # startRange: (x) -> @hover.hide() @selectFrom = x @selectionRect.attr({ x: x, width: 0 }).show() endRange: (x) -> if @selectFrom start = Math.min(@selectFrom, x) end = Math.max(@selectFrom, x) @options.rangeSelect.call @el, start: @data[@hitTest(start)].x end: @data[@hitTest(end)].x @selectFrom = null resizeHandler: => @timeoutId = null @raphael.setSize @el.width(), @el.height() @redraw() hasToShow: (i) => @options.shown is true or @options.shown[i] is true # 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()