From: declerambaul <fabian.kaelin@gmail.com>
Date: Mon, 25 Jun 2012 12:37:02 +0000 (+0200)
Subject: Added a rudimentary bar chart type
X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=0876085e28d5a6120f0ca526f17685f7e51a7f10;p=limn.git

Added a rudimentary bar chart type
---

diff --git a/lib/chart/type/d3/d3-bar-chart-type.co b/lib/chart/type/d3/d3-bar-chart-type.co
index 347244b..3bcb596 100644
--- a/lib/chart/type/d3/d3-bar-chart-type.co
+++ b/lib/chart/type/d3/d3-bar-chart-type.co
@@ -5,6 +5,7 @@ d3 = require 'd3'
 { ChartType,
 } = require 'kraken/chart/chart-type'
 
+root = do -> this
 
 
 class exports.BarChartType extends ChartType
@@ -12,7 +13,7 @@ class exports.BarChartType extends ChartType
     SPEC_URL : '/schema/d3/d3-bar.json'
     
     # NOTE: ChartType.register() must come AFTER `typeName` declaration.
-    typeName : 'd3-bar'
+    typeName : 'd3-bar'    
     ChartType.register this
     
     
@@ -26,7 +27,157 @@ class exports.BarChartType extends ChartType
         legend   : '.graph-legend'
     
     
-    
     -> super ...
     
+    getData: ->
+        @model.dataset.getColumns()
+    
+    
+    transform: ->
+        dataset = @model.dataset
+        options = @model.getOptions() import @determineSize()
+        options import do
+            colors             : dataset.getColors()
+            labels             : dataset.getLabels()
+        options
     
+    renderChart: (data, viewport, options, lastChart) ->
+        ### Starting with http://bost.ocks.org/mike/chart/
+        
+        margin = {top: 20, right: 20, bottom: 20, left: 20}
+        width  = 760
+        height = 320
+        xScale = d3.time.scale()
+        yScale = d3.scale.linear()
+        
+        dates  = data[0]
+        cols   = data.slice(1)
+        
+        # Calculate extents using all the data points (but not dates)
+        # allValues = d3.merge @model.dataset.getDataColumns()
+        allValues = d3.merge cols
+        
+        
+        # Update the x-scale with the extents of the dates.
+        xScale
+            .domain d3.extent dates
+            .range [ 0, width - margin.left - margin.right ]
+        
+        # Update the y-scale with the extents of the data.
+        yScale
+            .domain d3.extent allValues
+            .range [ height - margin.top - margin.bottom, 0 ]
+        
+        # Select the svg element, if it exists.
+        svg = d3.select viewport.0 .selectAll "svg"
+            .data [cols]
+        
+        # ...Otherwise, create the skeletal chart.
+        enterFrame = svg.enter()
+            .append "svg" .append "g"
+                .attr "class", "frame"
+        enterFrame.append "g"
+            .attr "class", "x axis time"
+        
+        # Update chart dimensions.
+        svg .attr "width", width
+            .attr "height", height
+        frame = svg.select "g.frame"
+            .attr "transform", "translate(#{margin.left},#{margin.top})"
+        
+        # Update the x-axis.
+        xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0)
+        frame.select ".x.axis.time"
+            .attr "transform", "translate(0,#{yScale.range()[0]})"
+            .call xAxis
+                    
+        X = (d, i) -> xScale d[0]
+        Y = (d, i) -> yScale d[1]
+
+        ### Render Bars
+        barWidth = svg.attr('width')/dates.length
+        barHeight = (d) -> svg.attr('height')-Y(d)
+
+        bars = frame.selectAll "g.bars"
+            .data cols.map -> d3.zip dates, it
+        bars.enter().append "g"
+            .attr "class", (col, i)     ->  "metric bars #i"
+        bars.exit().remove()
+        
+        bars.selectAll ".bar"
+            .data op.first
+            .enter().append "rect"
+                .attr "class", "bar"
+                .attr "x", X
+                .attr "y", Y
+                .attr "height", barHeight
+                .attr "width", -> barWidth
+                # TODO grab color from graph spec
+                .attr "fill", "red" 
+                .attr "stroke", "white"
+                        
+        
+        ### Mouse Lens
+        lens = root.lens = frame.selectAll "g.lens"
+            .data [[]]
+        gLens = lens.enter().append "g"
+            .attr "class", "lens"
+            .style "z-index", 1e9
+        gInner = gLens.append "g"
+            .attr "transform", "translate(1.5em,0)"
+        gInner.append "circle"
+            .attr "r", "1.5em"
+            # .style "opacity", "0.4"
+            # .style "fill", "white"
+            .style "fill", "rgba(255, 255, 255, 0.4)"
+            .style "stroke", "white"
+            .style "stroke-width", "3px"
+        gInner.append "text"
+            .attr "y", "0.5em"
+            .attr "text-anchor", "middle"
+            .style "fill", "white"
+            .style "font", "12px Helvetica"
+            .style "font-weight", "bold"
+        
+
+        mf = frame.selectAll "g.mf"
+            .data ["mf"]
+            .enter().append "g"
+                .attr "class", "mf"                
+            .append "text"
+                .attr "class", "yoyo"
+                .attr "dx", 50
+                .attr "dy", 100
+
+
+
+        bars.selectAll ".bar"
+            .on "mouseover", (d, i) ->
+                el = root.el = el # DOM element of event
+                # {r,g,b} = color = d3.rgb options.colors[i]                            
+                mf
+                    .transition()
+                    .duration(300)
+                    .ease("exp")
+                        .text "Uh boy, the target would be:"+d[1]
+                        .style "font-size", "25px"
+                
+
+            .on "mouseout", (d, i) ->
+                mf
+                    .transition()
+                    .duration(1000)
+                    .text "BUMMER!!!"
+                    .style "font-size", "0px"
+
+                
+                
+                # {x:lineX, y:lineY} = root.pt = line.indexToPoint idx
+                # lens = frame.select "g.lens"                
+                #     .attr "transform", "translate(#lineX, #lineY)"
+                # lens.select "circle" .style "fill", "rgba(#r, #g, #b, 0.4)"
+                # lens.select "text" .text Y
+        
+        
+        
+        svg
diff --git a/lib/chart/type/d3/index.co b/lib/chart/type/d3/index.co
index 5651289..06db1d2 100644
--- a/lib/chart/type/d3/index.co
+++ b/lib/chart/type/d3/index.co
@@ -1,5 +1,5 @@
 line = require 'kraken/chart/type/d3/d3-line-chart-type'
 # geo  = require 'kraken/chart/type/d3/d3-geo-chart-type'
-# bar  = require 'kraken/chart/type/d3/d3-bar-chart-type'
+bar  = require 'kraken/chart/type/d3/d3-bar-chart-type'
 
-exports import line # import geo import bar
+exports import line import bar # import geo 
diff --git a/www/d3-test.jade b/www/d3-test-bar.jade
similarity index 94%
copy from www/d3-test.jade
copy to www/d3-test-bar.jade
index 968e48f..82f0eb5 100644
--- a/www/d3-test.jade
+++ b/www/d3-test-bar.jade
@@ -30,8 +30,8 @@ block main-scripts
         
         // run on DOM-ready
         jQuery(function(){
-            root.app = new AppView(function(){
-                this.model = root.graph = new Graph({ id:'d3-test' }, { parse:true })
+            root.app = new AppView(function(){                
+                this.model = root.graph = new Graph({ id:'d3-test-bar' }, { parse:true })
                 this.view  = root.view  = new GraphEditView({ model:this.model })
             });
         });
diff --git a/www/d3-test.jade b/www/d3-test-line.jade
similarity index 98%
rename from www/d3-test.jade
rename to www/d3-test-line.jade
index 968e48f..ab70d61 100644
--- a/www/d3-test.jade
+++ b/www/d3-test-line.jade
@@ -31,7 +31,7 @@ block main-scripts
         // run on DOM-ready
         jQuery(function(){
             root.app = new AppView(function(){
-                this.model = root.graph = new Graph({ id:'d3-test' }, { parse:true })
+                this.model = root.graph = new Graph({ id:'d3-test-line' }, { parse:true })
                 this.view  = root.view  = new GraphEditView({ model:this.model })
             });
         });
diff --git a/www/modules.yaml b/www/modules.yaml
index e571f9a..b74eba7 100644
--- a/www/modules.yaml
+++ b/www/modules.yaml
@@ -114,7 +114,7 @@ dev:
                     - d3:
                         - d3-line-chart-type
                         # - d3-geo-chart-type
-                        # - d3-bar-chart-type
+                        - d3-bar-chart-type
                         - index
                     - dygraphs
                     - index
diff --git a/www/schema/d3/d3-bar.yaml b/www/schema/d3/d3-bar.yaml
new file mode 100644
index 0000000..88a3564
--- /dev/null
+++ b/www/schema/d3/d3-bar.yaml
@@ -0,0 +1,9 @@
+-   name: zoom.start
+    tags:
+    - interactivity
+    - zoom
+    type: Float
+    default: 1.0
+    desc: Initial zoom-level, where 1.0 (100% zoom) shows the full map in the
+        frame (the default).
+