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
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?
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
@left += Math.max(yLabelWidths...)
if @options.axes in [true, 'both', 'x']
bottomOffsets = for i in [0...@data.length]
@measureText(@data[i].text, -@options.xLabelAngle).height
@bottom -= Math.max(bottomOffsets...)
@width = Math.max(1, @right - @left)
@height = Math.max(1, @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, 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}"
# draw y axis labels, horizontal lines
#
drawGrid: ->
return if @options.grid is false and @options.axes not in [true, 'both', 'y']
for lineY in @grid
y = @transY(lineY)
if @options.axes in [true, 'both', 'y']
@drawYAxisLabel(@left - @options.padding / 2, y, @yAxisFormat(lineY))
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('font-family', @options.gridTextFamily)
.attr('font-weight', @options.gridTextWeight)
.attr('fill', @options.gridTextColor)
.attr('text-anchor', 'end')
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()
# 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()
|
Download
