Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

Commit

Permalink
New design
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrés González committed Sep 7, 2015
1 parent a94e455 commit fd03422
Show file tree
Hide file tree
Showing 14 changed files with 331 additions and 167 deletions.
16 changes: 16 additions & 0 deletions app/assets/images/countries/selector-piechart.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions app/assets/javascripts/countries/presenters/ReportsPanelPresenter.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
define([
'mps',
'countries/presenters/PresenterClass',
'countries/views/CountryWindowView'
], function(mps, PresenterClass, CountryWindowView) {

var ReportsPanelPresenter = PresenterClass.extend({

init: function(view) {
this._super();
this.view = new CountryWindowView ();
},

_subscriptions: [{
'ReportsPanel/open':function() {
this.view.show();
}
}, {
'ReportsPanel/close': function() {
this.view.hide();
}
}]

});

return new ReportsPanelPresenter();

});
67 changes: 42 additions & 25 deletions app/assets/javascripts/countries/templates/country-indicators-window.handlebars
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,49 @@
<strong class="source_title">Select indicators</strong>
</div>
<div class="source_body">
<ul class="indicator-list">
<li id="1" class="indicator"><span class="indicator__name">annual tree cover loos</span></li>
<li id="2" data-name="Carbon Emissions" class="indicator"><span class="indicator__name">carbon emissions</span></li>
<li id="3" class="indicator"><span class="indicator__name">carbon stocks by pool</span></li>
<li id="4" class="indicator"><span class="indicator__name">emerging emissions hotspots</span></li>
<li id="5" class="indicator"><span class="indicator__name">climate change initiatives signed</span></li>
<li id="6" class="indicator"><span class="indicator__name">main drivers of deforestation</span></li>
<li id="7" class="indicator"><span class="indicator__name">emissions per average crop yield</span></li>
<li id="8" class="indicator"><span class="indicator__name">emissions within vs. outisde existing plantation areas</span></li>
<li id="9" class="indicator"><span class="indicator__name">emissions within vs. outisde logging/mining/plantation concessions</span></li>
<li id="10" class="indicator"><span class="indicator__name">deforestation emissions as % of national ghg emissions</span></li>
<li id="11" class="indicator"><span class="indicator__name">emissions ocurring withing primary forests</span></li>
<li id="12" class="indicator"><span class="indicator__name">tree cover loss within vs. outside moratorium areas</span></li>
<li id="13" class="indicator"><span class="indicator__name">emissions within vs. outside moratorium areas</span></li>
<li id="14" class="indicator"><span class="indicator__name">gfw vs. reference level reported to unfccc</span></li>
<li id="15" class="indicator"><span class="indicator__name">emissions ocurring withing primary forests</span></li>
<li id="16" class="indicator"><span class="indicator__name">aboveground biomass comparison</span></li>
<li id="17" class="indicator"><span class="indicator__name">deforestation comparison</span></li>
<li id="18" class="indicator"><span class="indicator__name">emission comparison</span></li>
<li id="19" class="indicator"><span class="indicator__name">emission within vs. outside protected areas</span></li>
<li id="20" class="indicator"><span class="indicator__name">carbon stocks within vs. outside protected areas</span></li>
<li id="21" class="indicator"><span class="indicator__name">emissions from forests vs. croplands</span></li>
</ul>
<div class="row">
<button id="btn-done" class="btn medium blue">Done</button>

<div class="indicator-list">
<div class="col">
<h3>National/subnational data</h3>
<ul>
<li class="indicator"><span class="indicator__name">annual deforestation rate</span></li>
<li class="indicator"><span class="indicator__name">carbon emissions from deforestation</span><svg class="icon-selector-piechart"><use xlink:href="#icon-selector-piechart"></use></svg></li>
<li class="indicator"><span class="indicator__name">forest area 2000</span><svg class="icon-selector-piechart"><use xlink:href="#icon-selector-piechart"></use></svg></li>
<li class="indicator"><span class="indicator__name">biomass carbon stock</span></li>
<li class="indicator"><span class="indicator__name">aboveground biomass density</span></li>
<li class="indicator"><span class="indicator__name">emerging hotspots</span></li>
<li class="indicator"><span class="indicator__name">soil carbon stocks</span></li>
<li class="indicator"><span class="indicator__name">soil carbon density</span></li>
</ul>
</div>

<div class="col">
<h3>Policy and Drivers</h3>
<ul>
<li class="indicator"><span class="indicator__name">top 5 crops expanding in area</span></li>
<li class="indicator"><span class="indicator__name">c stocks vs. crop yields</span></li>
<li class="indicator"><span class="indicator__name">deforestation drivers</span></li>
<li class="indicator"><span class="indicator__name">deforestation emissions as a % of national ghg emissions</span></li>
<li class="indicator"><span class="indicator__name">climate change initiatives singed</span></li>
<li class="indicator"><span class="indicator__name">human population trends</span></li>
</ul>
</div>
<div class="col">
<h3>Priority Areas of Interest</h3>
<ul>
<li class="indicator"><span class="indicator__name">tree plantations</span></li>
<li class="indicator"><span class="indicator__name">protected areas</span></li>
<li class="indicator"><span class="indicator__name">primary forests</span></li>
<li class="indicator"><span class="indicator__name">moratorium areas</span></li>
<li class="indicator"><span class="indicator__name">mining concessions</span></li>
<li class="indicator"><span class="indicator__name">logging concessions</span></li>
<li class="indicator"><span class="indicator__name">plantation concessions</span></li>
<li class="indicator"><span class="indicator__name">key biodiversity areas</span></li>
</ul>
</div>
</div>
<div class="row">
<button id="btn-done" class="btn medium blue">Done</button>
</div>
</div>
</div>
Expand Down
7 changes: 5 additions & 2 deletions app/assets/javascripts/countries/views/CountryShowView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@ define([
'backbone',
'jquery',
'countries/models/CountryModel',
'countries/presenters/ReportsPanelPresenter',
'countries/views/show/CountryShowHeaderView',
'countries/views/show/WidgetGridView',
'countries/views/show/CountryIndicatorsView',
], function(Backbone, $, CountryModel, CountryShowHeaderView,
WidgetGridView, CountryIndicatorsView) {
], function(Backbone, $, CountryModel, ReportsPanelPresenter,
CountryShowHeaderView, WidgetGridView, CountryIndicatorsView) {

var CountryShowView = Backbone.View.extend({

initialize: function(arguments) {
this.model = CountryModel;
this.model.setCountry(arguments.data);

this.presenter = ReportsPanelPresenter;

var complete = _.invoke([this.model], 'fetch');

$.when.apply($, complete).done(_.bind(function() {
Expand Down
57 changes: 31 additions & 26 deletions app/assets/javascripts/countries/views/indicators/GraphChartIndicator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ define([
initialize: function() {
this.constructor.__super__.initialize.apply(this);
this.model = CountryModel;
console.log('init');

this._getData();
this.render();
Expand Down Expand Up @@ -51,10 +50,7 @@ define([
y = d3.scale.linear().range([height, 0]);


// Tooltip
var tooltip = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);


// Line
var valueline = d3.svg.line()
Expand Down Expand Up @@ -142,7 +138,8 @@ define([
// .style('opacity', 0);
// });

var self = this;

var bisecDate = d3.bisector(function(d) { return d.year; }).left;


// Animate positioner
Expand All @@ -158,27 +155,32 @@ var self = this;
var cx = d3.mouse(this)[0] + margin.left;


var index = Math.round(x.invert(d3.mouse(this)[0]));
// var index = Math.round(x.invert(d3.mouse(this)[0]));

var x0 = x.invert(d3.mouse(this)[0] - margin.left),
index = bisecDate(data, x0, 1);

// console.log(d3.mouse(this)[0] - margin.left);
console.log(index);

console.log(data[index]);

// marker
// .attr('cx', cx)
// .attr('cy', cy);
console.log(cx);

// console.log(d3.mouse(this)[0] - margin.left);

// positioner
// .attr('x1', d3.mouse(this)[0] - margin.left)
// .attr('x2', d3.mouse(this)[0] - margin.left);

// if (d && d.loss) {
// tooltip.html('<span class="data">' + d.loss + '</span>' + ' ha in ' + d.year.format('YYYY'))
// tooltip.transition()
// .duration(200)
// .style('opacity', 1)
// .style("top", "-20px")
// .style("left", (cx - 162) + "px");
// };
// .attr('x1', xPos)
// .attr('x2', xPos);

if (data[index]) {

tooltip.html('<span class="data">' + data[index].loss + '</span>' + ' ha in ' + data[index].year.format('YYYY'))
tooltip.transition()
.duration(200)
.style('opacity', 1)
.style("top", "-20px")
.style("left", (cx - 162) + "px");
};
});


Expand All @@ -187,19 +189,22 @@ var self = this;
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis).selectAll('.tick').each(function(d, i) {
console.log(i);
self.ticks.push(d);
});
.call(xAxis);

// Add Y axis
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);

// Tooltip
var tooltip = d3.select('.graph-container').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
},

render: function() {


this.$el.html(this.template({}));

this._drawGraph();
Expand Down
11 changes: 5 additions & 6 deletions app/assets/javascripts/countries/views/show/CountryIndicatorsView.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
define([
'backbone',
'countries/views/CountryWindowView',
], function(Backbone, CountryWindowView) {
'mps',
'countries/views/CountryWindowView'
], function(Backbone, mps, CountryWindowView) {

var CountryIndicatorsView = Backbone.View.extend({

Expand All @@ -11,12 +12,10 @@ define([
'click #addIndicators' : '_show'
},

initialize: function() {
this.modal = new CountryWindowView();
},
initialize: function() {},

_show: function(e) {
this.modal.show(e);
mps.publish('ReportsPanel/open', []);
}

});
Expand Down
10 changes: 8 additions & 2 deletions app/assets/javascripts/countries/views/show/CountryShowHeaderView.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
define([
'backbone',
'mps',
'countries/models/CountryModel'
], function(Backbone, CountryModel) {
], function(Backbone, mps, CountryModel) {

var CountryShowHeaderView = Backbone.View.extend({

el: '#headerCountry',

events: {
'change #areaSelector': '_setJurisdictions'
'change #areaSelector': '_setJurisdictions',
'click #customizeReports': '_openReportPanel'
},

initialize: function(arguments) {
this.model = CountryModel;
this._populateJurisdictions();
},

_openReportPanel: function() {
mps.publish('ReportsPanel/open', []);
},

_populateJurisdictions: function() {
var jurisdictions =this.model.get('jurisdictions');
var options = '<option value="default">select jurisdiction</option>';
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/views/WidgetView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ define([
events: {
'click .close' : '_close',
'click #info' : '_info',
'click #share' : '_share',
'click .indicators-grid__item': '_setCurrentIndicator'
'click #share' : '_share'
// 'click .indicators-grid__item': '_setCurrentIndicator'
},

initialize: function(data) {
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $br-mobileMap: 1000px;
$blue: #419ACB;
$blue1: #429EC9;
$white: #FFF;
$black: #000;
$dark: #555555;
$light: #FAFAFA;
$red: #ED1846;
Expand Down

0 comments on commit fd03422

Please sign in to comment.