From a4a4564f760bb1bcd541366186cd46488d5a569b Mon Sep 17 00:00:00 2001
From: Daniel Beauchamp <daniel.beauchamp@shopify.com>
Date: Tue, 30 Oct 2012 05:16:35 -0400
Subject: Added new widgets, and made them more flexible. Ready for 0.1.3!

---
 templates/project/widgets/graph/graph.coffee | 14 +++++++++--
 templates/project/widgets/graph/graph.html   |  4 ++--
 templates/project/widgets/graph/graph.scss   | 36 +++++++++++++++++++---------
 3 files changed, 39 insertions(+), 15 deletions(-)

(limited to 'templates/project/widgets/graph')

diff --git a/templates/project/widgets/graph/graph.coffee b/templates/project/widgets/graph/graph.coffee
index 8b56a87..9b2eeec 100644
--- a/templates/project/widgets/graph/graph.coffee
+++ b/templates/project/widgets/graph/graph.coffee
@@ -1,22 +1,32 @@
 class Dashing.Graph extends Dashing.Widget
 
   @accessor 'current', ->
+    return @get('displayedValue') if @get('displayedValue')
     points = @get('points')
     if points
       points[points.length - 1].y
 
   ready: ->
+    container = $(@node).parent()
+    # Gross hacks. Let's fix this.
+    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
+    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
     @graph = new Rickshaw.Graph(
       element: @node
-      width: $(@node).parent().width()
+      width: width
+      height: height
       series: [
         {
         color: "#fff",
-        data: [{ x: 0, y: 0}]
+        data: [{x:0, y:0}]
         }
       ]
     )
+
+    @graph.series[0].data = @get('points') if @get('points')
+
     x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
+    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
     @graph.render()
 
   onData: (data) ->
diff --git a/templates/project/widgets/graph/graph.html b/templates/project/widgets/graph/graph.html
index 8680efb..d1794db 100644
--- a/templates/project/widgets/graph/graph.html
+++ b/templates/project/widgets/graph/graph.html
@@ -1,5 +1,5 @@
 <h1 class="title" data-bind="title"></h1>
 
-<h2 class="value" data-bind="current | prettyNumber"></h2>
+<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>
 
-<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file
+<p class="more-info" data-bind="moreinfo"></p>
\ No newline at end of file
diff --git a/templates/project/widgets/graph/graph.scss b/templates/project/widgets/graph/graph.scss
index f2a1e21..71cd4d4 100644
--- a/templates/project/widgets/graph/graph.scss
+++ b/templates/project/widgets/graph/graph.scss
@@ -1,13 +1,12 @@
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
-$background-color:  #2e864f;
-$value-color:       #fff;
+$background-color:  #dc5945;
 
-$title-color:       lighten($background-color, 75%);
-$moreinfo-color:    lighten($background-color, 45%);
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.3);
+$tick-color:        rgba(0, 0, 0, 0.4);
 
-$graph_color:       lighten($background-color, 75%);
 
 // ----------------------------------------------------------------------------
 // Widget-graph styles
@@ -17,14 +16,13 @@ $graph_color:       lighten($background-color, 75%);
   background-color: $background-color;
   position: relative;
 
+
   svg {
-    color: $graph_color;
+    position: absolute;
     opacity: 0.4;
     fill-opacity: 0.4;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    left: 0px;
+    top: 0px;
   }
 
   .title, .value {
@@ -36,7 +34,7 @@ $graph_color:       lighten($background-color, 75%);
     color: $title-color;
   }
 
-  .text-moreinfo {
+  .more-info {
     color: $moreinfo-color;
     font-weight: 600;
     font-size: 20px;
@@ -46,6 +44,22 @@ $graph_color:       lighten($background-color, 75%);
   .x_tick {
     position: absolute;
     bottom: 0;
+    .title {
+      font-size: 20px;
+      color: $tick-color;
+      opacity: 0.5;
+      padding-bottom: 3px;
+    }
+  }
+  
+  .y_ticks {
+    font-size: 20px;
+    fill: $tick-color;
+    fill-opacity: 1;
+  }
+
+  .domain {
+    display: none;
   }
 
 }
\ No newline at end of file
-- 
cgit v1.2.3