basic ugly trendline

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")

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
 

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