From 73e144278e7bb2eb790d47ca122ee12fe5708a93 Mon Sep 17 00:00:00 2001 From: Marlena Compton Date: Tue, 27 Jan 2015 07:26:31 -0800 Subject: [PATCH] added chart to the page --- app/assets/javascripts/crops.js.erb | 21 ++++++++++ app/assets/javascripts/graphs/bar_group.js | 7 ++++ app/assets/javascripts/graphs/graph_scale.js | 15 +++++-- .../graphs/horizontal_bar_graph.js | 3 -- app/views/crops/show.html.haml | 2 + spec/javascripts/graphs/graph_scale_spec.js | 41 +++++++++++++++---- .../graphs/horizontal_bar_graph_spec.js | 4 +- 7 files changed, 77 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/crops.js.erb b/app/assets/javascripts/crops.js.erb index fd9f2242e..c69d8bd85 100644 --- a/app/assets/javascripts/crops.js.erb +++ b/app/assets/javascripts/crops.js.erb @@ -1,3 +1,5 @@ +//= require graphs/horizontal_bar_graph + if (document.getElementById("cropmap") !== null) { mapbox_map_id = "<%= Rails.env == 'test' ? 0 : Growstuff::Application.config.mapbox_map_id %>"; mapbox_base_url = "https://c.tiles.mapbox.com/v3/" + mapbox_map_id + "/{z}/{x}/{y}.png"; @@ -47,3 +49,22 @@ function showCropMap(cropmap) { cropmap.addLayer(markers); } + +if ($("#sunchart")[0] !== null) { + var HorizontalBarGraph = growstuff.HorizontalBarGraph; + var bars = [ + {name: 'Shade', value: 2}, + {name: 'Half Shade', value: 5} + ]; + data = { + bars: bars, + width: {size: 200, scale: 'linear'}, + height: {size: 300, 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} + }; + + var graph = new HorizontalBarGraph(data); + graph.render(d3.select($('#sunchart')[0])); +} \ No newline at end of file diff --git a/app/assets/javascripts/graphs/bar_group.js b/app/assets/javascripts/graphs/bar_group.js index fdf764cdc..b505af55f 100644 --- a/app/assets/javascripts/graphs/bar_group.js +++ b/app/assets/javascripts/graphs/bar_group.js @@ -16,12 +16,19 @@ BarGroup.prototype.render = function(root){ var data = this._data; var bars = this._data.bars; var xScale = new GraphScale(data, 'width').render(); + var yScale = new GraphScale(data, 'height').render(); + return root.append('g') .attr("class", "bar") .selectAll("rect") .data(bars.map(function(bar) { return bar.value; })) .enter() .append("rect") + .attr("y", function(d, i){ + return yScale(i); + + }) + .attr("height", yScale.rangeBand()) .attr("fill", "rebeccapurple") .attr("width", function(d){ return xScale(d); diff --git a/app/assets/javascripts/graphs/graph_scale.js b/app/assets/javascripts/graphs/graph_scale.js index 670ecebf8..fb44fb5be 100644 --- a/app/assets/javascripts/graphs/graph_scale.js +++ b/app/assets/javascripts/graphs/graph_scale.js @@ -15,9 +15,18 @@ var axisName = this._axisName; var scaleType = data[axisName].scale; var axisSize = data[axisName].size; - return d3.scale[scaleType]() - .domain([0, d3.max(this.getBarValues())]) - .range([0, axisSize]); + + if (axisName === 'width'){ + return d3.scale[scaleType]() + .domain([0, d3.max(this.getBarValues())]) + .range([0, axisSize]); + } + else{ + return d3.scale[scaleType]() + .domain(d3.range(data.bars.length)) + .rangeRoundBands([0, data.height.size], 0.05, 0); + } + }; diff --git a/app/assets/javascripts/graphs/horizontal_bar_graph.js b/app/assets/javascripts/graphs/horizontal_bar_graph.js index 07524e9a5..ffe033d37 100644 --- a/app/assets/javascripts/graphs/horizontal_bar_graph.js +++ b/app/assets/javascripts/graphs/horizontal_bar_graph.js @@ -25,9 +25,6 @@ var barLabelGroup = new BarLabelGroup(this._data); var margin = this._data.margin; - var xScale = new GraphScale(this._data, 'width'); - var yScale = new GraphScale(this._data, 'y'); - var barGroup = new BarGroup(this._data); var svg = root diff --git a/app/views/crops/show.html.haml b/app/views/crops/show.html.haml index 7aae050c7..e23c6ff76 100644 --- a/app/views/crops/show.html.haml +++ b/app/views/crops/show.html.haml @@ -30,6 +30,7 @@ - if current_member && current_member.location.blank? = link_to "Set your location.", edit_member_registration_path + %div#sunchart %div#cropmap @@ -68,3 +69,4 @@ = render :partial => 'plantings', :locals => { :crop => @crop } = render :partial => 'harvests', :locals => { :crop => @crop } = render :partial => 'find_seeds', :locals => { :crop => @crop } + diff --git a/spec/javascripts/graphs/graph_scale_spec.js b/spec/javascripts/graphs/graph_scale_spec.js index c50f1548a..5d534ffa6 100644 --- a/spec/javascripts/graphs/graph_scale_spec.js +++ b/spec/javascripts/graphs/graph_scale_spec.js @@ -2,7 +2,7 @@ 'use strict'; describe('GraphScale', function(){ - var GraphScale, subject; + var data, GraphScale, subject; beforeEach(function(){ GraphScale = growstuff.GraphScale; @@ -10,22 +10,47 @@ {name: 'Shade', value: 0.2}, {name: 'Half Shade', value: 0.5} ]; - var data = { + data = { bars: bars, width: {size: 300, scale: 'linear'}, height: {size: 400, scale: 'ordinal'} }; - - - subject = new GraphScale(data, 'width'); - subject.render(d3.select('#jasmine_content').append('svg')); }); + describe('when specifying width', function() { + var mockD3; + beforeEach(function() { + subject = new GraphScale(data, 'width'); + mockD3 = jasmine.createSpyObj('d3', ['domain', 'range', 'max']); + mockD3.domain.and.returnValue(mockD3); + mockD3.range.and.returnValue(mockD3); + spyOn(d3.scale, 'linear').and.returnValue(mockD3); + subject.render(); + }); + it ('gets the values of all the bars', function(){ + expect(subject.getBarValues()).toEqual([0.2, 0.5]); + }); + + it ('calls the d3 range function to draw the width', function(){ + expect(mockD3.range).toHaveBeenCalledWith([0, 300]); + }); - it ('gets the values of all the bars', function(){ - expect(subject.getBarValues()).toEqual([0.2, 0.5]); }); + describe('when specifying height', function() { + var mockD3; + beforeEach(function() { + subject = new GraphScale(data, 'height'); + mockD3 = jasmine.createSpyObj('d3', ['domain', 'rangeRoundBands']); + mockD3.domain.and.returnValue(mockD3); + mockD3.rangeRoundBands.and.returnValue(mockD3); + spyOn(d3.scale, 'ordinal').and.returnValue(mockD3); + subject.render(); + }); + it ('calls the d3 range round bands function to draw the height', function(){ + expect(mockD3.rangeRoundBands).toHaveBeenCalledWith([0, 200], 0.05, 0); + }); + }); }); })(); \ No newline at end of file diff --git a/spec/javascripts/graphs/horizontal_bar_graph_spec.js b/spec/javascripts/graphs/horizontal_bar_graph_spec.js index c7a192eaf..14e5d8b34 100644 --- a/spec/javascripts/graphs/horizontal_bar_graph_spec.js +++ b/spec/javascripts/graphs/horizontal_bar_graph_spec.js @@ -61,8 +61,8 @@ }); it ('on the y axis, all bars are the same height', function(){ - expect('g.bar rect:eq(0)').toHaveAttr('height', 100); - expect('g.bar rect:eq(1)').toHaveAttr('height', 100); + expect('g.bar rect:eq(0)').toHaveAttr('height', 195); + expect('g.bar rect:eq(1)').toHaveAttr('height', 195); }); });