From a1d89b24515ecd1a2d4b983f0ba574a5a6eb9e6b Mon Sep 17 00:00:00 2001 From: Bob Lail Date: Fri, 14 Apr 2017 16:47:36 -0500 Subject: [PATCH] [skip] Extracted graphs to the modules that use them (1m) --- .../houston/core/burndown_chart.coffee | 111 ----------------- .../houston/core/stacked_area_graph.coffee | 113 ------------------ .../houston/core/stacked_bar_graph.coffee | 108 ----------------- 3 files changed, 332 deletions(-) delete mode 100644 app/assets/javascripts/houston/core/burndown_chart.coffee delete mode 100644 app/assets/javascripts/houston/core/stacked_area_graph.coffee delete mode 100644 app/assets/javascripts/houston/core/stacked_bar_graph.coffee diff --git a/app/assets/javascripts/houston/core/burndown_chart.coffee b/app/assets/javascripts/houston/core/burndown_chart.coffee deleted file mode 100644 index 3acedaf5..00000000 --- a/app/assets/javascripts/houston/core/burndown_chart.coffee +++ /dev/null @@ -1,111 +0,0 @@ -class Houston.BurndownChart - - constructor: -> - @_margin = {top: 40, right: 0, bottom: 24, left: 50} - @_selector = '#graph' - @_height = 260 - @$el = $(@_selector) - @_totalEffort = 0 - @_lines = {} - @_regressions = {} - $(window).resize (e)=> - @render() if e.target is window - - margin: (@_margin)-> @ - height: (@_height)-> @ - selector: (@_selector)-> @$el = $(@_selector); @ - dateFormat: (@_dateFormat)-> @ - days: (@days)-> @ - totalEffort: (@_totalEffort)-> @ - addLine: (slug, data)-> @_lines[slug] = data; @ - addRegression: (slug, data)-> @_regressions[slug] = data; @ - - render: -> - width = @$el.width() || 960 - height = @_height - graphWidth = width - @_margin.left - @_margin.right - graphHeight = height - @_margin.top - @_margin.bottom - - totalEffort = @_totalEffort - unless totalEffort - for slug, data of @_lines - totalEffort = data[0].effort if data[0] and data[0].effort > totalEffort - - formatDate = @_dateFormat || d3.time.format('%A') - - [min, max] = d3.extent(@days) - x = d3.scale.ordinal().rangePoints([0, graphWidth], 0.75).domain(@days) - y = d3.scale.linear().range([graphHeight, 0]).domain([0, totalEffort]) - rx = d3.scale.linear().range([x(min), x(max)]).domain([min, max]) - - xAxis = d3.svg.axis() - .scale(x) - .orient('bottom') - .tickFormat((d)=> formatDate(new Date(d))) - - yAxis = d3.svg.axis() - .scale(y) - .orient('left') - - line = d3.svg.line() - .interpolate('linear') - .x((d)-> x(d.day)) - .y((d)-> y(d.effort)) - - @$el.empty() - svg = d3.select(@_selector).append('svg') - .attr('width', width) - .attr('height', height) - .append('g') - .attr('transform', "translate(#{@_margin.left},#{@_margin.top})") - - svg.append('g') - .attr('class', 'x axis') - .attr('transform', "translate(0,#{graphHeight})") - .call(xAxis) - - svg.append('g') - .attr('class', 'y axis') - .call(yAxis) - .append('text') - .attr('transform', 'rotate(-90)') - .attr('y', -45) - .attr('x', 160 - height) - .attr('dy', '.71em') - .attr('class', 'legend') - .style('text-anchor', 'end') - .text('Points Remaining') - - - - for slug, data of @_regressions - svg.append('line') - .attr('class', "regression regression-#{slug}") - .attr('x1', rx(data.x1)) - .attr('y1', y(data.y1)) - .attr('x2', rx(data.x2)) - .attr('y2', y(data.y2)) - - - - for slug, data of @_lines - svg.append('path') - .attr('class', "line line-#{slug}") - .attr('d', line(data)) - - svg.selectAll("circle.circle-#{slug}") - .data(data) - .enter() - .append('circle') - .attr('class', "circle-#{slug}") - .attr('r', 5) - .attr('cx', (d)-> x(d.day)) - .attr('cy', (d)-> y(d.effort)) - - svg.selectAll(".effort-remaining.effort-#{slug}") - .data(data) - .enter() - .append('text') - .text((d) -> d.effort) - .attr('class', "effort-remaining effort-#{slug}") - .attr('transform', (d)-> "translate(#{x(d.day) + 5.5}, #{y(d.effort) - 10}) rotate(-75)") diff --git a/app/assets/javascripts/houston/core/stacked_area_graph.coffee b/app/assets/javascripts/houston/core/stacked_area_graph.coffee deleted file mode 100644 index b8695639..00000000 --- a/app/assets/javascripts/houston/core/stacked_area_graph.coffee +++ /dev/null @@ -1,113 +0,0 @@ -class Houston.StackedAreaGraph - - constructor: -> - @_margin = {top: 10, right: 10, bottom: 25, left: 50} - @_width = 960 - @_height = 260 - @_data = [] - @_labels = [] - @_lines = [] - @_colors = ['rgb(31, 119, 180)', 'rgb(174, 199, 232)', 'rgb(255, 127, 14)', 'rgb(255, 187, 120)', 'rgb(44, 160, 44)'] - @_axes = ['x', 'y'] - - margin: (@_margin)-> @ - width: (@_width)-> @ - height: (@_height)-> @ - selector: (@_selector)-> @ - data: (@_data)-> @ - labels: (@_labels)-> @ - colors: (@_colors)-> @ - addLine: (line)-> @_lines.push(line); @ - axes: (@_axes)-> @ - domain: (@_domain)-> @ - - - render: -> - graphWidth = @_width - @_margin.left - @_margin.right - graphHeight = @_height - @_margin.top - @_margin.bottom - - formatDate = d3.time.format('%A') - - @x = x = d3.time.scale().range([0, graphWidth]) - @y = y = d3.scale.linear().range([graphHeight, 0]) - - xAxis = d3.svg.axis() - .scale(x) - .orient('bottom') - - yAxis = d3.svg.axis() - .scale(y) - .orient('left') - - color = d3.scale.ordinal().range(@_colors).domain(@_labels) - - area = d3.svg.area() - .interpolate('linear') - .x((d)-> x(d.date)) - .y0((d)-> y(d.y0)) - .y1((d)-> y(d.y0 + d.y)) - - line = d3.svg.area() - .interpolate('linear') - .x((d)-> x(d.date)) - .y((d)-> y(d.y)) - - stack = d3.layout.stack() - .values((d)-> d.values) - - data = stack [0...@_labels.length].map (i)=> - name: @_labels[i] - values: @_data.map (d)-> - date: new Date(d[0]) - y: d[i + 1] - - x.domain d3.extent(data[0].values, (d)-> d.date) - y.domain @_domain or [0, d3.max(data[@_labels.length - 1].values, (d)-> d.y + d.y0)] - - $(@_selector).empty() - svg = d3.select(@_selector).append('svg') - .attr('width', @_width) - .attr('height', @_height) - .append('g') - .attr('transform', "translate(#{@_margin.left},#{@_margin.top})") - - if 'x' in @_axes - svg.append('g') - .attr('class', 'x axis') - .attr('transform', "translate(0,#{graphHeight})") - .call(xAxis) - - if 'y' in @_axes - svg.append('g') - .attr('class', 'y axis') - .call(yAxis) - - section = svg.selectAll('.section').data(data) - - section.enter() - .append('g') - .attr('class', 'section') - - section.append('path') - .attr('class', 'area') - .attr('d', (d)-> area(d.values)) - .style('fill', (d)-> color(d.name)) - - for data in @_lines - point.date = new Date(point.date) for point in data - svg.append('path') - .attr('class', 'line') - .attr('d', line(data)) - .attr('style', 'stroke: #f00; stroke-width: 2px') - - $legend = $('
').appendTo(@_selector) - for i in [0...@_labels.length] - label = @_labels[i] - color = @_colors[i] - $legend.append "
#{label}
" - - # legend = svg.append("g") - # .attr("class","legend") - # .attr("transform","translate(50,30)") - # .style("font-size","12px") - # .call(d3.legend) diff --git a/app/assets/javascripts/houston/core/stacked_bar_graph.coffee b/app/assets/javascripts/houston/core/stacked_bar_graph.coffee deleted file mode 100644 index 18dec321..00000000 --- a/app/assets/javascripts/houston/core/stacked_bar_graph.coffee +++ /dev/null @@ -1,108 +0,0 @@ -class Houston.StackedBarGraph - - constructor: -> - @_margin = {top: 0, right: 80, bottom: 40, left: 50} - @_width = 960 - @_height = 260 - @_data = [] - @_legend = true - @_labels = [] - @_colors = ['rgb(31, 119, 180)', 'rgb(174, 199, 232)', 'rgb(255, 127, 14)', 'rgb(255, 187, 120)', 'rgb(44, 160, 44)'] - @_axes = ['x', 'y'] - - legend: (@_legend)-> @ - margin: (@_margin)-> @ - width: (@_width)-> @ - height: (@_height)-> @ - selector: (@_selector)-> @ - data: (@_data)-> @ - labels: (@_labels)-> @ - colors: (@_colors)-> @ - range: (@_range)-> @ - axes: (@_axes)-> @ - yTicks: (@_yTicks)-> @ - - render: -> - graphWidth = @_width - @_margin.left - @_margin.right - graphHeight = @_height - @_margin.top - @_margin.bottom - - formatDate = d3.time.format('%A') - - x = d3.scale.ordinal().rangeRoundBands([0, graphWidth], 0.15) - y = d3.scale.linear().range([graphHeight, 0]) - - xAxis = d3.svg.axis() - .scale(x) - .orient('bottom') - .tickFormat(d3.time.format('%b %-d')) - - yAxis = d3.svg.axis() - .scale(y) - .orient('left') - yAxis.tickValues(@_yTicks) if @_yTicks - - color = d3.scale.ordinal().range(@_colors).domain(@_labels) - - stack = d3.layout.stack() - .values((d)-> d.values) - - data = stack [0...@_labels.length].map (i)=> - name: @_labels[i] - values: @_data.map (d)=> - name: @_labels[i] - date: new Date(d[0]) - y: d[i + 1] ? 0 - - x.domain _.map(data[0].values, (d)-> d.date) - max = d3.max(data[@_labels.length - 1].values, (d)-> d.y + d.y0) - max = d3.max([max, @_range[1]]) if @_range - y.domain [0, max] - - $(@_selector).empty() - svg = d3.select(@_selector).append('svg') - .attr('width', @_width) - .attr('height', @_height) - .append('g') - .attr('transform', "translate(#{@_margin.left},#{@_margin.top})") - - if 'x' in @_axes - svg.append('g') - .attr('class', 'x axis') - .attr('transform', "translate(0,#{graphHeight})") - .call(xAxis) - - if 'y' in @_axes - svg.append('g') - .attr('class', 'y axis') - .call(yAxis) - - section = svg.selectAll('.section') - .data(x.domain()) - - section.enter() - .append('g') - .attr('class', 'section') - .attr('transform', (date)-> "translate(#{x(date)},0)") - - section.selectAll('rect') - .data (date, i)-> - for bar in data - name: bar.name - y1: bar.values[i].y0 + bar.values[i].y - y0: bar.values[i].y0 - .enter() - .append('rect') - .attr('class', 'bar') - .attr('width', x.rangeBand()) - .attr('y', (d)-> y(d.y1)) - .attr('height', (d)-> y(d.y0) - y(d.y1)) - .style('fill', (d)-> color(d.name)) - - if @_legend - $legend = $('
').appendTo(@_selector) - for i in [0...@_labels.length] - label = @_labels[i] - color = @_colors[i] - $legend.append "
#{label}
" - - @