From 4d430f2ae5e3ff8215575feff0351c500dc3f22a Mon Sep 17 00:00:00 2001
From: David Schoonover <dsc@wikimedia.org>
Date: Thu, 7 Jun 2012 03:04:52 -0700
Subject: [PATCH] Colors the callout deltas.

---
 lib/graph/graph-view.co    |   21 +++++++++++++++++++++
 www/css/graph-display.styl |    4 ++++
 2 files changed, 25 insertions(+), 0 deletions(-)

diff --git a/lib/graph/graph-view.co b/lib/graph/graph-view.co
index 322438a..1d0bbd3 100644
--- a/lib/graph/graph-view.co
+++ b/lib/graph/graph-view.co
@@ -53,6 +53,9 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
         @on 'stop-waiting',  @onStopWaiting,  this
         @onStartWaiting() if @waitingOn # In case we missed the first call to @wait() somehow
         
+        # Recolor callout on update
+        @on 'update',        @onUpdate,       this
+        
         ### Model Events
         @model
             .on 'start-waiting',    @wait,          this
@@ -147,9 +150,11 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
                 year :
                     dates : yoy.dates.map( -> moment(it).format('MMM YY') ).join(' &mdash; ')
                     value : ( 100 * yoy.value[2] / yoy.value[0] ).toFixed(2) + '%'
+                    delta : yoy.value[2]
                 month :
                     dates : mom.dates.map( -> moment(it).format('MMM YY') ).join(' &mdash; ')
                     value : ( 100 * mom.value[2] / mom.value[0] ).toFixed(2) + '%'
+                    delta : mom.value[2]
         
         { @model, @graph_id, view:this, slug:'', name:'', desc:'', callout: {
             latest : '',
@@ -189,6 +194,22 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
     ### }}}
     ### Event Handlers {{{
     
+    onUpdate: (self, locals) ->
+        co = locals.callout
+        el = @$ '.callout'
+        el.find '.metric-change .value' .removeClass 'delta-positive delta-negative'
+        
+        if co.year.delta > 0
+            el.find ' .metric-change.year-over-year .value' .addClass 'delta-positive'
+        else if co.year.delta < 0
+            el.find ' .metric-change.year-over-year .value' .addClass 'delta-negative'
+        
+        if co.month.delta > 0
+            el.find ' .metric-change.month-over-month .value' .addClass 'delta-positive'
+        else if co.month.delta < 0
+            el.find ' .metric-change.month-over-month .value' .addClass 'delta-negative'
+        this
+    
     onSync: ->
         return unless @ready
         console.info "#this.sync() --> success!"
diff --git a/www/css/graph-display.styl b/www/css/graph-display.styl
index fcac35d..6130133 100644
--- a/www/css/graph-display.styl
+++ b/www/css/graph-display.styl
@@ -33,6 +33,10 @@ section.graph-display.graph
                     width 140px
                 &.value
                     width 60px
+                    &.delta-positive
+                        color #009048
+                    &.delta-negative
+                        color #C9313D
     
     .graph-legend
         absolute top 1em left 0
-- 
1.7.0.4