From 2110898ed2c725e1255a204dd14e9d33488a9416 Mon Sep 17 00:00:00 2001
From: declerambaul <fabian.kaelin@gmail.com>
Date: Thu, 28 Jun 2012 18:28:07 +0200
Subject: [PATCH] D3ized the displaying of the metrics stored in a model, i.e. using enter() exit() methods.

---
 lib/chart/chart-type.co               |    4 +-
 lib/chart/type/d3-chart.co            |   38 +++++++++++++++++++-------------
 lib/chart/type/d3/d3-bar-element.co   |    2 +-
 lib/chart/type/d3/d3-chart-element.co |   10 ++++++--
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/lib/chart/chart-type.co b/lib/chart/chart-type.co
index 1aa4b9e..27e99bf 100644
--- a/lib/chart/chart-type.co
+++ b/lib/chart/chart-type.co
@@ -38,7 +38,7 @@ class exports.ChartType extends ReadyEmitter
      * Register a new chart type.
      */
     @register = (Subclass) ->
-        console.log "ChartType.register(#Subclass)"
+        # console.log "ChartType.register(#Subclass)"
         KNOWN_CHART_TYPES[ Subclass::typeName ] = Subclass
     
     /**
@@ -54,7 +54,7 @@ class exports.ChartType extends ReadyEmitter
      * @returns {ChartType}
      */
     @create = (model, view) ->
-        console.log "ChartType.create(#model) ->", model
+        # console.log "ChartType.create(#model) ->", model
         return null unless Type = @lookup model
         new Type model, view
     
diff --git a/lib/chart/type/d3-chart.co b/lib/chart/type/d3-chart.co
index d7b2548..d9ba175 100644
--- a/lib/chart/type/d3-chart.co
+++ b/lib/chart/type/d3-chart.co
@@ -92,7 +92,8 @@ class exports.D3ChartType extends ChartType
             .attr "width", width - margin.left - margin.right
             .attr "height", height - margin.top - margin.bottom
         
-        
+
+
         # x-axis.
         # TODO move axis to separate chart-type
         enterFrame.append "g"
@@ -104,23 +105,28 @@ class exports.D3ChartType extends ChartType
             .attr "transform", "translate(0,#{yScale.range()[0]})"
             .call xAxis
         
-        # this is wrong. should work using d3 datajoins.
-        # i.e. use the enter/exit function to add/remove
-        # metrics from the graph
-        for i,metric in @model.dataset.metrics.models
-            # metric defined charttype
-            chartElement = metric.get "chartElement"
-            # otherwise the graph defined charttype
-            # FOR NOW take line as default
-            chartElement ?= 'd3-line' # @model.get "chartType"
-                    
 
-            # create d3 chart element and render it
-            chEl = D3ChartElement.create chartElement
-            console.log chEl
-            chEl.renderChartElement metric, frame ,xScale, yScale
+        metrics = frame.selectAll "metric"
+            .data @model.dataset.metrics.models
+
+        metrics.enter()
+            .append("g")
+                .attr "class", (d) -> 
+                    "g metric line "+d.get 'label'
+                .each (d) -> 
+                    # console.log d
+                    # metric defined charttype
+                    chartElement = d.get "chartElement"
+                    # otherwise the graph defined charttype
+                    # FOR NOW take line as default
+                    chartElement ?= 'd3-line' # @model.get "chartElement"                 
+                    # create d3 chart element and render it
+                    chEl = D3ChartElement.create chartElement
+
+                    chEl.renderChartElement d, frame ,xScale, yScale
+
+        metrics.exit().remove()
         
         svg
     
     
-    
diff --git a/lib/chart/type/d3/d3-bar-element.co b/lib/chart/type/d3/d3-bar-element.co
index dcb300a..9f93fa7 100644
--- a/lib/chart/type/d3/d3-bar-element.co
+++ b/lib/chart/type/d3/d3-bar-element.co
@@ -42,7 +42,7 @@ class exports.BarChartType extends D3ChartElement
                 .attr "x", X
                 .attr "y", Y
                 .attr "height", barHeight
-                .attr "width", -> barWidth                
+                .attr "width", barWidth                
                 .attr "fill", metric.get 'color'
                 .attr "stroke", "white"
                 .style "opacity", "0.4"
diff --git a/lib/chart/type/d3/d3-chart-element.co b/lib/chart/type/d3/d3-chart-element.co
index bc93ed1..57b53e1 100644
--- a/lib/chart/type/d3/d3-chart-element.co
+++ b/lib/chart/type/d3/d3-chart-element.co
@@ -27,7 +27,7 @@ class exports.D3ChartElement extends ReadyEmitter
      * Register a new d3 element
      */
     @register = (Subclass) ->
-        console.log "D3ChartElement.register(#Subclass)"
+        # console.log "D3ChartElement.register(#Subclass)"
         KNOWN_CHART_ELEMENTS[ Subclass::chartElement ] = Subclass
     
     /**
@@ -43,13 +43,13 @@ class exports.D3ChartElement extends ReadyEmitter
      * @returns {D3ChartElement}
      */
     @create = (name) ->
-        console.log "D3ChartElement.create(#name)"        
+        # console.log "D3ChartElement.create(#name)"        
         return null unless Type = @lookup name
         
         new Type 
             
     
-    () ->        
+    ->        
         _.bindAll this, ...@__bind__ # TODO: roll up MRO
         @loadSpec() unless @ready
         super ...
@@ -74,6 +74,10 @@ class exports.D3ChartElement extends ReadyEmitter
                 @triggerReady()
             error: ~> console.error "Error loading #{@typeName} spec! #it"
         this
+
+    renderChartElement: (metric, svgEl ,xScale, yScale) ->  svgEl        
+        
+
     
     
     
-- 
1.7.0.4