diff --git a/src/modules/graph.coffee b/src/modules/graph.coffee index 2124340..2020c11 100644 --- a/src/modules/graph.coffee +++ b/src/modules/graph.coffee @@ -74,8 +74,47 @@ module.exports = cb null, days + # A trendline. + # http://classroom.synonym.com/calculate-trendline-2709.html + 'trendline': (actual, created_at, due_on) -> + start = +actual[0].date + + values = _.map actual, ({ date, points }) -> + [ +date - start, points ] + + b1 = 0 ; e = 0 ; c1 = 0 + a = (l = values.length) * _.reduce(values, (sum, [ a, b ]) -> + b1 += a ; e += b + c1 += Math.pow(a, 2) + sum + (a * b) + , 0) + + b = b1 * e + c = l * c1 + d = Math.pow(b1, 2) + + slope = (a - b) / (c - d) + + f = slope * b1 + + intercept = (e - f) / l + + fn = (x) -> slope * x + intercept + + a = +new Date(created_at) - start ; b = +new Date(due_on) - start + + [ + { + date: new Date(created_at) + points: fn(a) + }, { + date: new Date(due_on) + points: fn(b) + } + ] + # Render the D3 chart. - 'render': ([ actual, ideal ], cb) -> + 'render': ([ actual, ideal, trendline ], cb) -> document.querySelector('#svg').innerHTML = '' # Get available space. @@ -162,6 +201,11 @@ module.exports = .attr("class", "ideal line") .attr("d", line.interpolate("basis")(ideal)) + # Add the trendline path. + svg.append("path") + .attr("class", "trendline line") + .attr("d", line.interpolate("linear")(trendline)) + # Add the actual line path. svg.append("path") .attr("class", "actual line") diff --git a/src/modules/repo.coffee b/src/modules/repo.coffee index f309334..d917128 100644 --- a/src/modules/repo.coffee +++ b/src/modules/repo.coffee @@ -79,6 +79,13 @@ class exports.Repo # Render the progress. render '#progress', 'progress', { progress } + # Generate a trendline? + values.push(graph.trendline( + values[0], + self.milestone.created_at, + self.milestone.due_on + )) if values[0].length + # Render the chart. do doit = -> graph.render values, cb diff --git a/src/styles/app.styl b/src/styles/app.styl index 6caaa02..b384bf3 100644 --- a/src/styles/app.styl +++ b/src/styles/app.styl @@ -66,13 +66,18 @@ h2 clip-path: url(#clip) &.actual - stroke-width: 3px stroke: #64584c + stroke-width: 3px &.ideal stroke: #CACACA stroke-width: 3px + &.trendline + stroke: #64584c + stroke-width: 1.5px + stroke-dasharray: 5,5 + line &.today stroke: #CACACA