BigW Consortium Gitlab

stat_graph_contributors_graph.js.coffee 4.96 KB
Newer Older
1 2 3 4
#= require d3
#= require jquery
#= require underscore

5
class @ContributorsGraph
6 7
  MARGIN:
    top: 20
8 9
    right: 20
    bottom: 30
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
    left: 50
  x_domain: null
  y_domain: null
  dates: []
  @set_x_domain: (data) =>
    @prototype.x_domain = data
  @set_y_domain: (data) =>
    @prototype.y_domain = [0, d3.max(data, (d) ->
      d.commits = d.commits ? d.additions ? d.deletions
    )]
  @init_x_domain: (data) =>
    @prototype.x_domain = d3.extent(data, (d) ->
     d.date
    )
  @init_y_domain: (data) =>
    @prototype.y_domain = [0, d3.max(data, (d) ->
      d.commits = d.commits ? d.additions ? d.deletions
    )]
  @init_domain: (data) =>
    @init_x_domain(data)
    @init_y_domain(data)
  @set_dates: (data) =>
    @prototype.dates = data
  set_x_domain: ->
    @x.domain(@x_domain)
  set_y_domain: ->
    @y.domain(@y_domain)
  set_domain: ->
    @set_x_domain()
    @set_y_domain()
  create_scale: (width, height) ->
    @x = d3.time.scale().range([0, width]).clamp(true)
    @y = d3.scale.linear().range([height, 0]).nice()
  draw_x_axis: ->
    @svg.append("g").attr("class", "x axis").attr("transform", "translate(0, #{@height})")
45
    .call(@x_axis)
46 47 48 49 50
  draw_y_axis: ->
    @svg.append("g").attr("class", "y axis").call(@y_axis)
  set_data: (data) ->
    @data = data

51
class @ContributorsMasterGraph extends ContributorsGraph
52
  constructor: (@data) ->
53
    @width = $('.content').width() - 70
54
    @height = 200
55 56 57 58 59 60 61 62 63
    @x = null
    @y = null
    @x_axis = null
    @y_axis = null
    @area = null
    @svg = null
    @brush = null
    @x_max_domain = null
  process_dates: (data) ->
64
    dates = @get_dates(data)
65 66 67 68 69 70 71 72 73 74 75 76 77
    @parse_dates(data)
    ContributorsGraph.set_dates(dates)
  get_dates: (data) ->
    _.pluck(data, 'date')
  parse_dates: (data) ->
    parseDate = d3.time.format("%Y-%m-%d").parse
    data.forEach((d) ->
      d.date = parseDate(d.date)
    )
  create_scale: ->
    super @width, @height
  create_axes: ->
    @x_axis = d3.svg.axis().scale(@x).orient("bottom")
78
    @y_axis = d3.svg.axis().scale(@y).orient("left").ticks(5)
79 80 81 82 83 84 85 86 87 88 89
  create_svg: ->
    @svg = d3.select("#contributors-master").append("svg")
    .attr("width", @width + @MARGIN.left + @MARGIN.right)
    .attr("height", @height + @MARGIN.top + @MARGIN.bottom)
    .attr("class", "tint-box")
    .append("g")
    .attr("transform", "translate(" + @MARGIN.left + "," + @MARGIN.top + ")")
  create_area: (x, y) ->
    @area = d3.svg.area().x((d) ->
      x(d.date)
    ).y0(@height).y1((d) ->
90 91
      xa = d.commits = d.commits ? d.additions ? d.deletions
      y(xa)
92 93
    ).interpolate("basis")
  create_brush: ->
94
    @brush = d3.svg.brush().x(@x).on("brushend", @update_content)
95
  draw_path: (data) ->
96
    @svg.append("path").datum(data).attr("class", "area").attr("d", @area)
97
  add_brush: ->
98
    @svg.append("g").attr("class", "selection").call(@brush).selectAll("rect").attr("height", @height)
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
  update_content: =>
    ContributorsGraph.set_x_domain(if @brush.empty() then @x_max_domain else @brush.extent())
    $("#brush_change").trigger('change')
  draw: ->
    @process_dates(@data)
    @create_scale()
    @create_axes()
    ContributorsGraph.init_domain(@data)
    @x_max_domain = @x_domain
    @set_domain()
    @create_area(@x, @y)
    @create_svg()
    @create_brush()
    @draw_path(@data)
    @draw_x_axis()
    @draw_y_axis()
    @add_brush()
  redraw: ->
    @process_dates(@data)
    ContributorsGraph.set_y_domain(@data)
    @set_y_domain()
    @svg.select("path").datum(@data)
    @svg.select("path").attr("d", @area)
    @svg.select(".y.axis").call(@y_axis)

124
class @ContributorsAuthorGraph extends ContributorsGraph
125
  constructor: (@data) ->
126
    @width = $('.content').width()/2 - 100
127
    @height = 200
128 129 130 131 132 133 134 135 136 137
    @x = null
    @y = null
    @x_axis = null
    @y_axis = null
    @area = null
    @svg = null
    @list_item = null
  create_scale: ->
    super @width, @height
  create_axes: ->
138 139
    @x_axis = d3.svg.axis().scale(@x).orient("bottom").ticks(8)
    @y_axis = d3.svg.axis().scale(@y).orient("left").ticks(5)
140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
  create_area: (x, y) ->
    @area = d3.svg.area().x((d) ->
      parseDate = d3.time.format("%Y-%m-%d").parse
      x(parseDate(d))
    ).y0(@height).y1((d) =>
      if @data[d]? then y(@data[d]) else y(0)
    ).interpolate("basis")
  create_svg: ->
    @list_item = d3.selectAll(".person")[0].pop()
    @svg = d3.select(@list_item).append("svg")
    .attr("width", @width + @MARGIN.left + @MARGIN.right)
    .attr("height", @height + @MARGIN.top + @MARGIN.bottom)
    .attr("class", "spark")
    .append("g")
    .attr("transform", "translate(" + @MARGIN.left + "," + @MARGIN.top + ")")
  draw_path: (data) ->
156
    @svg.append("path").datum(data).attr("class", "area-contributor").attr("d", @area)
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171
  draw: ->
    @create_scale()
    @create_axes()
    @set_domain()
    @create_area(@x, @y)
    @create_svg()
    @draw_path(@dates)
    @draw_x_axis()
    @draw_y_axis()
  redraw: ->
    @set_domain()
    @svg.select("path").datum(@dates)
    @svg.select("path").attr("d", @area)
    @svg.select(".x.axis").call(@x_axis)
    @svg.select(".y.axis").call(@y_axis)