houston-roadmaps 0.1.0

data/Rakefile

@@ -0,0 +1,25 @@
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+
+# `rake test` and `rake test:all` are loaded from Houston
+require_relative "test/dummy/houston"
+Houston::Application.load_tasks
+
+
+require "rdoc/task"
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title    = "Roadmap"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.rdoc")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+
+Bundler::GemHelper.install_tasks
+

data/app/assets/javascripts/houston/roadmaps/app.coffee

@@ -0,0 +1,2 @@
+window.Roadmaps = {}
+window.Neat.template = HandlebarsTemplates

data/app/assets/javascripts/houston/roadmaps/application.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require_tree ../../../templates/houston/roadmaps
+//= require_tree .

data/app/assets/javascripts/houston/roadmaps/handlebars_helpers.coffee

@@ -0,0 +1,22 @@
+Handlebars.registerPartial 'milestoneTicket', (task)->
+  HandlebarsTemplates['houston/roadmaps/milestone/ticket'](task)
+
+Handlebars.registerHelper 'durationOfMilestone', (milestone)->
+  return "" unless milestone.endDate and milestone.startDate
+  duration = milestone.endDate - milestone.startDate
+  weeks = Math.round(duration / Duration.WEEK)
+  "#{weeks} weeks"
+
+Handlebars.registerHelper 'milestonePercentComplete', (milestone)->
+  return "" if !milestone.percentComplete?
+  App.formatPercent milestone.percentComplete
+
+Handlebars.registerHelper 'ticketPercentComplete', (ticket)->
+  return "" unless ticket.estimatedEffort? and ticket.estimatedEffortCompleted?
+  percent = ticket.estimatedEffortCompleted / ticket.estimatedEffort
+  App.formatPercent percent
+
+Handlebars.registerHelper 'linkToFeedbackQuery', (projectSlug, feedbackQuery)->
+  q = encodeURIComponent(feedbackQuery)
+  path = "/feedback/by_project/#{projectSlug}?q=#{q}"
+  "<a href=\"#{path}\">See comments</a>"

data/app/assets/javascripts/houston/roadmaps/jquery_extensions.coffee

@@ -0,0 +1,4 @@
+$.fn.extend
+
+  pluck: (attr)->
+    _.map @, (el)-> $(el).attr('data-id')

data/app/assets/javascripts/houston/roadmaps/models/goal.coffee

@@ -0,0 +1,11 @@
+class Roadmaps.Goal extends Backbone.Model
+  urlRoot: '/roadmap/milestones'
+
+
+
+class Roadmaps.Goals extends Backbone.Collection
+  model: Roadmaps.Goal
+
+  outsideOf: (milestones) ->
+    ids = _(milestones.pluck('milestoneId'))
+    new Roadmaps.Goals @reject (goal) -> ids.include(goal.id)

data/app/assets/javascripts/houston/roadmaps/models/milestone.coffee

@@ -0,0 +1,124 @@
+class Roadmaps.Milestone extends Backbone.Model
+  urlRoot: '/roadmap/milestones'
+
+  initialize: ->
+    super
+    _.bindAll(@, 'clearChangesSinceSave', 'revert')
+    @clearChangesSinceSave()
+
+  save: (attrs, options)->
+    success = options?.success
+    options.success = (response)=>
+      @trigger('save:success', @)
+      success(@, response) if success
+      @clearChangesSinceSave()
+    @trigger('save', @)
+    super
+
+  duration: ->
+    Math.floor((@get('endDate') - @get('startDate')) / Duration.DAY).days()
+
+  clearChangesSinceSave: ->
+    @_originalAttributes = _.clone @attributes
+    @_originalAttributes.removed = false
+
+  revert: ->
+    @set(@_originalAttributes) if @_originalAttributes
+
+  markRemoved: ->
+    @set(removed: true)
+
+  changesSinceSave: ->
+    changes = {}
+    for attribute, value of @attributes
+      originalValue = @_originalAttributes[attribute]
+      changes[attribute] = [originalValue, value] unless _.isEqual(originalValue, value)
+    changes
+
+  bands: ->
+    band = @get('band')
+    bands = [band]
+    for i in [1...@get('lanes')]
+      bands.push band + i
+    bands
+
+
+
+  parse: (milestone)->
+    milestone.startDate = App.serverDateFormat.parse(milestone.startDate) if milestone.startDate and !_.isDate(milestone.startDate)
+    milestone.endDate = App.serverDateFormat.parse(milestone.endDate) if milestone.endDate and !_.isDate(milestone.endDate)
+    milestone
+
+  toJSON: (options)->
+    json = super(options)
+    json.cid = @cid
+    if 'emulateHTTP' of (options || {})
+      json.start_date = App.serverDateFormat(json.startDate) if json.startDate
+      delete json.startDate
+      json.end_date = App.serverDateFormat(json.endDate) if json.endDate
+      delete json.endDate
+    json
+
+
+
+class Roadmaps.Milestones extends Backbone.Collection
+  model: Roadmaps.Milestone
+  comparator: 'startDate'
+
+  start: -> _.min @pluck('startDate')
+  end: -> _.max @pluck('endDate')
+
+  revert: ->
+    i = 0
+    while i < @length
+      milestone = @models[i]
+      if milestone.get('id')
+        milestone.revert()
+        i++
+      else
+        @remove(milestone)
+
+  changes: ->
+    for milestone in @models when !milestone.id or _.keys(changes = milestone.changesSinceSave()).length > 0
+      if milestone.id
+        change = id: milestone.id
+        for attribute, [originalView, newValue] of changes
+          [attribute, newValue] = ['start_date', App.serverDateFormat(newValue)] if attribute is 'startDate'
+          [attribute, newValue] = ['end_date', App.serverDateFormat(newValue)] if attribute is 'endDate'
+          change[attribute] = newValue
+        change
+      else
+        milestone.toJSON(emulateHTTP: true)
+
+  overlappingBands: (bands)->
+    new Milestones @select (m)-> _.intersection(m.bands(), bands).length > 0
+
+  before: (milestone)->
+    startDate = milestone.get('startDate')
+    new Milestones @select (m)-> m.get('endDate') < startDate
+
+  after: (milestone)->
+    endDate = milestone.get('endDate')
+    new Milestones @select (m)-> m.get('startDate') > endDate
+
+  lastMilestoneBefore: (milestone)->
+    @before(milestone).sortBy('endDate').last()
+
+  firstMilestoneAfter: (milestone)->
+    @after(milestone).sortBy('startDate').first()
+
+  downstreamOf: (date, bands)->
+    milestones = []
+    @each (milestone)->
+      return if milestone.get('startDate') < date
+      newBands = milestone.bands()
+      return if _.intersection(newBands, bands).length is 0
+
+      # If this milestone being dragged can push this milestone,
+      # then it can also push any milestones this one can push
+      bands = _.union(bands, newBands)
+      milestones.push milestone
+    milestones
+
+  unremoved: ->
+    new Roadmaps.Milestones @where(removed: false)

data/app/assets/javascripts/houston/roadmaps/models/roadmap.coffee

@@ -0,0 +1,16 @@
+class @Roadmaps.Roadmap extends Backbone.Model
+  urlRoot: "/roadmaps"
+
+  milestones: ->
+    @_milestones ||= new Roadmaps.Milestones(@get("milestones"), parse: true)
+
+  viewport: ->
+    new Roadmaps.Viewport
+      start: @milestones().start()
+      end: @milestones().end()
+
+
+
+class @Roadmaps.Roadmaps extends Backbone.Collection
+  model: window.Roadmaps.Roadmap
+

data/app/assets/javascripts/houston/roadmaps/models/viewport.coffee

@@ -0,0 +1,3 @@
+class Roadmaps.Viewport extends Backbone.Model
+
+  domain: -> [@get('start'), @get('end')]

data/app/assets/javascripts/houston/roadmaps/resize_listener.js

@@ -0,0 +1,67 @@
+// This is kind of a hack that allows you to execute code
+// when an element is resized. See:
+// http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
+(function(){
+  var attachEvent = document.attachEvent;
+  var isIE = navigator.userAgent.match(/Trident/);
+  var requestFrame = (function(){
+    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+        function(fn){ return window.setTimeout(fn, 20); };
+    return function(fn){ return raf(fn); };
+  })();
+
+  var cancelFrame = (function(){
+    var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
+           window.clearTimeout;
+    return function(id){ return cancel(id); };
+  })();
+
+  function resizeListener(e){
+    var win = e.target || e.srcElement;
+    if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
+    win.__resizeRAF__ = requestFrame(function(){
+      var trigger = win.__resizeTrigger__;
+      trigger.__resizeListeners__.forEach(function(fn){
+        fn.call(trigger, e);
+      });
+    });
+  }
+
+  function objectLoad(e){
+    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
+    this.contentDocument.defaultView.addEventListener('resize', resizeListener);
+  }
+
+  window.addResizeListener = function(element, fn){
+    if (!element.__resizeListeners__) {
+      element.__resizeListeners__ = [];
+      if (attachEvent) {
+        element.__resizeTrigger__ = element;
+        element.attachEvent('onresize', resizeListener);
+      }
+      else {
+        if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
+        var obj = element.__resizeTrigger__ = document.createElement('object');
+        obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+        obj.__resizeElement__ = element;
+        obj.onload = objectLoad;
+        obj.type = 'text/html';
+        if (isIE) element.appendChild(obj);
+        obj.data = 'about:blank';
+        if (!isIE) element.appendChild(obj);
+      }
+    }
+    element.__resizeListeners__.push(fn);
+  };
+
+  window.removeResizeListener = function(element, fn){
+    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+    if (!element.__resizeListeners__.length) {
+      if (attachEvent) element.detachEvent('onresize', resizeListener);
+      else {
+        element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
+        element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
+      }
+    }
+  }
+})();

data/app/assets/javascripts/houston/roadmaps/views/_gantt_chart.coffee

@@ -0,0 +1,224 @@
+class Roadmaps.GanttChart
+  today: new Date()
+
+  constructor: (@milestones, options={})->
+    @el = options.el
+    @selector = options.selector ? '#roadmap'
+    @showToday = options.showToday ? true
+    @showThumbnail = options.showThumbnail ? true
+    @showWeekends = options.showWeekends ? false
+    @linkMilestones = options.linkMilestones ? false
+    @showProgress = options.showProgress ? false
+    @bandHeight = options.bandHeight ? 30
+    @bandMargin = options.bandMargin ? 8
+    @viewport = options.viewport ? @defaultViewport()
+    @viewport.bind 'change', @updateViewport, @
+    @height = 24
+    @markers = options.markers ? []
+    for marker in @markers
+      marker.date = App.serverDateFormat.parse(marker.date).endOfDay()
+    @milestones.bind 'add', @update, @
+    @milestones.bind 'change', @update, @
+    @milestones.bind 'remove', @update, @
+    @milestones.bind 'reset', @update, @
+    $(window).resize (e)=>
+      @updateWindow() if e.target is window
+
+  defaultViewport: ->
+    new Roadmaps.Viewport
+      start: 3.weeks().before(@today)
+      end: 6.months().after(3.weeks().before(@today))
+
+  render: ->
+    @el = $(@selector)[0] unless @el
+    @$el = $(@el)
+
+    if @showThumbnail
+      @thumbnail = new Roadmaps.ThumbnailGanttChart
+        milestones: @milestones
+        markers: @markers
+        showToday: @showToday
+        viewport: @viewport
+        parent: d3.select(@el)
+      @thumbnail.render()
+
+    @roadmap = d3.select(@el)
+      .append('div')
+        .attr('class', 'roadmap-bands')
+
+    svg = @roadmap.append('svg')
+        .attr('height', @height)
+        .attr('class', 'roadmap-axis')
+      .append('g')
+        .attr('transform', "translate(0,0)")
+    @xAxis = svg.append('g').attr('class', 'x axis')
+
+    @updateWindow()
+
+  updateWindow: ->
+    width = @$el.width() || 960
+    return if @width is width
+    @width = width
+
+    @roadmap.select('svg').transition(150).attr('width', @width)
+
+    @x = d3.time.scale()
+      .domain(@viewport.domain())
+      .range([0, @width])
+    timeline = d3.svg.axis()
+      .scale(@x)
+      .orient('bottom')
+    @xAxis.transition(150).call(timeline)
+
+    @update(transition: true)
+
+  updateViewport: ->
+    @x = d3.time.scale()
+      .domain(@viewport.domain())
+      .range([0, @width])
+    timeline = d3.svg.axis()
+      .scale(@x)
+      .orient('bottom')
+    @xAxis.call(timeline)
+
+    @update(transition: false)
+
+  update: (options)->
+    transition = options?.transition ? true
+    view = @
+    @today = new Date()
+
+    bands = @roadmap.selectAll('.roadmap-band')
+      .data(@groupMilestonesIntoBands(), (band)-> band.key)
+
+    bands.enter()
+      .append('div')
+        .attr('class', (band)-> "roadmap-band")
+        .attr('style', (date)=> "height: #{@bandHeight}px; margin: #{@bandMargin}px 0;")
+        .attr('data-band', (band)-> band.number)
+        .each -> view.initializeBand.apply(view, [@])
+
+    bands.exit().remove()
+
+
+
+    if @showWeekends
+      weeks = @roadmap.selectAll('.roadmap-weekend')
+        .data(d3.time.saturdays(@x.domain()...), (date)-> date)
+
+      weeks.enter().append('div')
+        .attr('class', 'roadmap-weekend')
+        .attr('style', (date)=> "left: #{@x(date)}px; width: #{@x(2.days().after(date)) - @x(date)}px;")
+
+      update = if transition then weeks.transition(150) else weeks
+      update
+        .attr('style', (date)=> "left: #{@x(date)}px; width: #{@x(2.days().after(date)) - @x(date)}px;")
+
+      weeks.exit().remove()
+
+
+
+    milestones = bands.selectAll('.roadmap-milestone')
+      .data(((band)-> band.milestones), (milestone)-> milestone.cid)
+
+    newMilestones = if @linkMilestones
+      milestones.enter().append('a')
+        .attr('href', (milestone)-> "/roadmap/milestones/#{milestone.milestoneId}")
+    else
+      milestones.enter().append('div')
+
+    if @showProgress
+      newMilestones.append('div')
+        .attr('class', 'roadmap-milestone-progress')
+
+    newMilestones
+      .attr 'style', (milestone)=>
+        [ "left: #{@x(milestone.startDate)}px",
+          "width: #{@x(milestone.endDate) - @x(milestone.startDate)}px",
+          "height: #{milestone.lanes * (@bandHeight + @bandMargin) - @bandMargin}px" ].join('; ')
+      .attr('class', 'roadmap-milestone')
+      .attr('data-cid', (milestone)-> milestone.cid)
+      .attr('data-milestone-id', (milestone)-> milestone.milestoneId)
+      .each -> view.initializeMilestone.apply(view, [@])
+
+      # Put the milestone name into a span so that Midori can render it correctly
+      .append('span')
+        .attr('class', 'roadmap-milestone-name')
+        .text((milestone)-> milestone.name)
+
+    update = if transition then milestones.transition(150) else milestones
+    update
+      .attr 'class', (milestone)=>
+        classes = ['roadmap-milestone', milestone.projectColor]
+        classes.push(if milestone.locked then 'locked' else 'unlocked')
+        classes.push(if milestone.completed then 'completed' else 'uncompleted')
+        classes.push('clickable') if @linkMilestones
+        if milestone.startDate > @today
+          classes.push 'upcoming'
+        else if milestone.endDate < @today
+          classes.push 'past'
+        else
+          classes.push 'active'
+        classes.join(' ')
+      .attr 'style', (milestone)=>
+        [ "left: #{@x(milestone.startDate)}px",
+          "width: #{@x(milestone.endDate) - @x(milestone.startDate)}px",
+          "height: #{milestone.lanes * (@bandHeight + @bandMargin) - @bandMargin}px" ].join('; ')
+      .select('.roadmap-milestone-progress')
+        .attr 'style', (milestone)->
+          return "width: 0" if milestone.tickets is 0
+          "width: #{milestone.percentComplete * 100}%"
+
+    update.select('.roadmap-milestone-name')
+      .text((milestone)-> milestone.name)
+
+    milestones.exit().remove()
+
+
+
+    if @showToday
+      todayLine = @roadmap.selectAll('.roadmap-today')
+        .data([@today])
+
+      todayLine.enter()
+        .append('div')
+          .attr('class', 'roadmap-today')
+          .attr('style', (date)=> "left: #{@x(date)}px;")
+
+      update = if transition then todayLine.transition(150) else todayLine
+      update
+        .attr('style', (date)=> "left: #{@x(date)}px;")
+
+
+
+    markers = @roadmap.selectAll('.roadmap-marker')
+      .data(@markers)
+
+    markers.enter()
+      .append('div')
+        .attr('class', 'roadmap-marker')
+        .attr('style', ({date})=> "left: #{@x(date)}px;")
+
+    update = if transition then markers.transition(150) else markers
+    update
+      .attr('style', ({date})=> "left: #{@x(date)}px;")
+
+    markers.exit().remove()
+
+  groupMilestonesIntoBands: ->
+    milestoneBands = {}
+    milestones = (@toJSON(milestone) for milestone in @milestones.models)
+    for milestone in milestones when milestone.startDate and milestone.endDate and !milestone.removed
+      (milestoneBands[milestone.band] ||=
+        key: milestone.band
+        number: milestone.band
+        milestones: []).milestones.push(milestone)
+    _.values(milestoneBands)
+
+  toJSON: (milestone)->
+    json = milestone.toJSON()
+    json.cid = milestone.id # Use `id` because the view is readonly
+    json
+
+  initializeBand: ->
+  initializeMilestone: ->