Vizzuality/gfw-climate

View on GitHub
app/assets/javascripts/map/views/analysis/AnalysisResultsView.js

Summary

Maintainability
A
2 hrs
Test Coverage
/**
 * The Analysis view.
 *
 * @return Analysis view
 */
define(
  [
    'underscore',
    'enquire',
    'handlebars',
    'map/presenters/analysis/AnalysisResultsPresenter',
    'widgets/indicators/bars/BarChart',
    'text!map/templates/analysis/analysisResults.handlebars',
    'text!map/templates/analysis/analysisResultsChart.handlebars',
    'text!map/templates/analysis/analysisResultsFailure.handlebars'
  ],
  function(
    _,
    enquire,
    Handlebars,
    Presenter,
    BarChart,
    tpl,
    chartTpl,
    failureTpl
  ) {
    'use strict';

    var AnalysisResultsModel = Backbone.Model.extend({
      defaults: {
        boxHidden: true
      }
    });

    var AnalysisResultsView = Backbone.View.extend({
      el: '#analysis-result',

      template: Handlebars.compile(tpl),

      templates: {
        chart: Handlebars.compile(chartTpl),
        failure: Handlebars.compile(failureTpl)
      },

      events: {
        'click #analysis-delete': '_deleteAnalysis',
        'click #analysis-subscribe': '_subscribe',
        'click .dropdown-button': '_toggleDownloads',
        'click .canopy-button': '_showCanopy',
        'click .close': 'toogleAnalysis',
        'click #toggleIFL': 'toogleIFL'
      },

      initialize: function() {
        this.model = new AnalysisResultsModel();
        this.presenter = new Presenter(this);
        this.$resultsHide = $('.results-hide');
        this.$tab = $('#analysis-tab');
        this.$analysisTab = $('#analysis-nav');
        enquire.register(
          'screen and (min-width:' + window.gfw.config.GFW_MOBILE + 'px)',
          {
            match: _.bind(function() {
              this.mobile = false;
            }, this)
          }
        );
        enquire.register(
          'screen and (max-width:' + window.gfw.config.GFW_MOBILE + 'px)',
          {
            match: _.bind(function() {
              this.mobile = true;
            }, this)
          }
        );
      },

      _cacheSelector: function() {
        this.$downloadDropdown = $('.download-dropdown');
        this.$subscribeButton = $('#analysis-subscribe');
        this.$switchIFLabels = $('.ifl-switch .label');
      },

      /**
       * Render analysis results.
       *
       */
      renderAnalysis: function(params) {
        this.setParams(params);
        this.$el.html(this.templates.chart(this.params)).removeClass('hidden');
        this._cacheSelector();
        this.$resultsHide.addClass('hidden');
        this.drawChart();
      },

      drawChart: function() {
        var data = this.parseData(this.presenter.status.get('results'));

        new BarChart({
          elem: '#loss-carbon-chart',
          barWidth: 30,
          barSeparation: 5,
          data: data,
          hover: true,
          loader: 'is-loading',
          interpolate: 'basis',
          unit: 'CO2T',
          unitZ: 'Ha',
          hasLine: true
        });
      },

      parseData: function(res) {
        var data = res.data.attributes;
        var barValues = _.map(data.co2LossByYear, function(v, k) {
          return { year: k, value: v };
        });
        var lineValues = _.map(data.treeLossByYear, function(v, k) {
          return { year: k, value: v };
        });
        var dataParsed = [];

        $.each(barValues, function(v, i) {
          if (this.year != 0 && this.year != 2015) {
            var valueSet = {};

            valueSet.y = this.value;
            valueSet.x = this.year;
            valueSet.LegendBar = 'Gross carbon emissions';
            valueSet.LegendLine = 'Tree cover loss';
            valueSet.color = '#d9d9d9';
            valueSet.lineColor = '#ff6699';
            valueSet.z = _.findWhere(lineValues, { year: this.year }).value;

            dataParsed.push(valueSet);
          }
        });
        return dataParsed;
      },

      /**
       * Render failure analysis request message.
       */
      renderFailure: function() {
        // this._update(this.templates.failure());
        this.$el.html(this.templates.failure()).removeClass('hidden');
        this._cacheSelector();
        this.$resultsHide.addClass('hidden');
      },

      setParams: function(params) {
        this.params = params;
        this.params.warning_text =
          this.$analysisTab.find('li.active').data('analysis') === 'draw-tab';
        this.params.downloadVisible =
          (this.params.loss || this.params.forestgain) && this.mobile
            ? false
            : true;
        this.params.url = this.setDownloadLink(params.layer.slug);
      },

      _deleteAnalysis: function() {
        this.$resultsHide.removeClass('hidden');
        this.$el.addClass('hidden');
        this.presenter.deleteAnalysis();
        var title =
          this.params && this.params.layer
            ? this.params.layer.title
            : 'No layer title';
        ga('send', 'event', 'Map', 'Delete-Analysis', 'Layer: ' + title);
      },

      _deleteAnalysisView: function() {
        this.$resultsHide.removeClass('hidden');
        this.$el.addClass('hidden');
      },

      _subscribe: function() {
        this.presenter.subscribeAnalysis();
        ga(
          'send',
          'event',
          'Map',
          'Subscribe',
          'Layer: ' + this.params.layer.title
        );
      },

      _toggleDownloads: function(e) {
        e && e.preventDefault();
        this.$downloadDropdown.toggleClass('hidden');
        ga(
          'send',
          'event',
          'Map',
          'Download',
          'Downloads-' + 'Layer: ' + this.params.layer.title
        );
      },

      _showCanopy: function(e) {
        e && e.preventDefault();
        this.presenter.showCanopy();
      },

      setDownloadLink: function(layer) {
        var links = {
          loss:
            'http://data.globalforestwatch.org/datasets/93ecbfa0542c42fdaa8454fa42a6cc27',
          forestgain:
            'http://data.globalforestwatch.org/datasets/6c9f379a362e4926ad24b58444f4ba67',
          forma:
            'http://data.globalforestwatch.org/datasets/39a527e300ff4146962a3c74ec476f64',
          terrailoss: 'http://www.terra-i.org/terra-i/data.html',
          imazon: 'http://www.imazongeo.org.br/doc/downloads.php',
          fires: 'https://earthdata.nasa.gov/data/near-real-time-data/firms',
          modis:
            'http://data.globalforestwatch.org/datasets/e7bfe60d90ea4e5aa808eba4723ad3f8_0'
        };
        return links[layer];
      },

      toggleSubscribeButton: function(toggle) {
        this.$subscribeButton.toggleClass('disabled', toggle);
      },

      toogleAnalysis: function(to) {
        this.$el.toggleClass('active', to);
      },

      toogleIFL: function(e) {
        $(e.currentTarget)
          .find('.onoffswitch')
          .toggleClass('checked');
        this.$switchIFLabels.toggleClass('checked');
      }
    });

    return AnalysisResultsView;
  }
);