add bits to get the labels in the right place

app/assets/javascripts/crops.js.erb

@@ -53,13 +53,15 @@ function showCropMap(cropmap) {
 if ($("#sunchart")[0] !== null) {
   var HorizontalBarGraph = growstuff.HorizontalBarGraph;
   var bars = [
-    {name: 'Shade', value: 2},
-    {name: 'Half Shade', value: 5}
+    {name: 'Empty', value: 3},
+    {name: 'Sun', value: 8},
+    {name: 'Semi-shade', value: 4},
+    {name: 'Shade', value: 2}
   ];
   data = {
     bars: bars,
-    width: {size: 200, scale: 'linear'},
-    height: {size: 300, scale: 'ordinal'},
+    width: {size: 300, scale: 'linear'},
+    height: {size: 100, scale: 'ordinal'},
     //left is used to shift the bars over so that there is
     //room for the labels
     margin: {top: 0, right: 0, bottom: 0, left: 100}

app/assets/javascripts/graphs/bar_group.js

@@ -29,7 +29,7 @@ BarGroup.prototype.render = function(root){
 
     })
     .attr("height", yScale.rangeBand())
-      .attr("fill", "rebeccapurple")
+      .attr("fill", "steelblue")
       .attr("width", function(d){
         return xScale(d);
       });

app/assets/javascripts/graphs/bar_label_group.js

@@ -11,12 +11,24 @@
 
   BarLabelGroup.prototype.render = function(d3){
     var bars = this._data.bars;
+    //vvcopy pasta from spike vv  -- this is a good candidate for refactor
+    var barHeight = 40;
+
     return d3.append('g')
       .attr("class", "bar-label")
       .selectAll("text")
       .data(bars.map(function(bar){ return bar.name;}))
       .enter()
       .append("text")
+      .attr('x', -80)
+      .attr('y', function(d, i){
+        //shrink the margin between each label to give them an even spread with
+        //bars
+        var barLabelSpread = 2/3;
+        //move them downward to line up with bars
+        var barLabelTopEdge = 17;
+        return i * barHeight * (barLabelSpread) + barLabelTopEdge;
+      })
       .text(function(d){return d});
 
   };

spec/javascripts/graphs/bar_group_spec.js

@@ -35,7 +35,7 @@
   });
 
   it('fills the bars with color', function(){
-    expect($('g.bar rect')).toHaveAttr('fill', 'rebeccapurple');
+    expect($('g.bar rect')).toHaveAttr('fill', 'steelblue');
   });
 
   it ('gets the values of all the bars', function(){