Feature/mq scores - DONT MERGE (#431)

* feat: Adding Beta scores to methodology version of 5 * feat: Enable to switch between MQ Beta scores and not * test: Fix of all broken tests * test: New tests for MQ Beta score feature * Add modal for mq methodology * fix: Api::Charts::Sector service takes enable_beta_mq_assessments from session * Show level 5 on accordion and change 5 to 5 beta labels * Render modal only once. Fix mobile styles * Fix X button and add do not show again button * Fix tests * Render modal in sectors and companies * Fix max level * Add local storage variable to limit modal appearances --------- Co-authored-by: martintomas <[email protected]>
Vizzuality · Aug 16, 2023 · b877d51 · b877d51
1 parent bb7f3ef
commit b877d51
Show file tree

Hide file tree

Showing 59 changed files with 1,646 additions and 153 deletions.
diff --git a/app/admin/companies.rb b/app/admin/companies.rb
@@ -212,7 +212,8 @@ def scoped_collection
         :geography,
         :sector,
         :headquarters_geography,
-        :latest_mq_assessment,
+        :latest_mq_assessment_only_beta_methodologies,
+        :latest_mq_assessment_without_beta_methodologies,
         *csv_includes
       )
     end

diff --git a/app/assets/images/icons/trending-down.svg b/app/assets/images/icons/trending-down.svg
diff --git a/app/assets/images/icons/trending-up.svg b/app/assets/images/icons/trending-up.svg
diff --git a/app/assets/stylesheets/tpi.scss b/app/assets/stylesheets/tpi.scss
@@ -38,6 +38,8 @@
 @import "tpi/nested-dropdown";
 @import "tpi/banking-question-legend";
 @import "tpi/latest-information";
+@import "tpi/mq_beta_scores";
+@import "tpi/mq-beta-modal";
 
 @import "tpi/pages/*";
 @import "tpi/shared/*";

diff --git a/app/assets/stylesheets/tpi/_colors.scss b/app/assets/stylesheets/tpi/_colors.scss
@@ -14,9 +14,12 @@ $grey-blue: #CFD7ED;
 $dark: #191919;
 $black: #000;
 $green: #00C170;
+$aquamarine: #60EDE5;
 
 $tpi-level0: $blue-light;
 $tpi-level1: $blue;
 $tpi-level2: $blue-ribbon;
 $tpi-level3: $blue-dark;
 $tpi-level4: $blue-darker;
+$tpi-level5-background-color: $aquamarine;
+$tpi-level5-color: $black;
diff --git a/app/assets/stylesheets/tpi/_mixins.scss b/app/assets/stylesheets/tpi/_mixins.scss
@@ -95,4 +95,13 @@
   &.level4 {
     background-color: $tpi-level4;
   }
+
+  &.level5 {
+    background-color: $tpi-level5-background-color;
+    color: $tpi-level5-color;
+
+    .mq-level-trend__container {
+      background-color: $tpi-level5-background-color;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/tpi/_mq_beta_scores.scss b/app/assets/stylesheets/tpi/_mq_beta_scores.scss
@@ -0,0 +1,40 @@
+.mq-beta-scores {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+
+  @include until($desktop) {
+    flex-direction: column;
+  }
+
+  &__text {
+    color: white;
+    line-height: 40px;
+    margin-right: 10px;
+  }
+
+  &__divider {
+    margin: 0 15px 0 5px;
+    border-right: 1px solid rgba(255, 255, 255, 0.5);
+
+    @include until($desktop) {
+      display: none;
+    }
+  }
+
+  &__beta-button:before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 5px;
+    display: inline-block;
+    background-color: $tpi-level5-background-color;
+    vertical-align: middle;
+  }
+
+  &__download-button {
+    flex-grow: 4;
+    text-align: right;
+  }
+}
diff --git a/app/assets/stylesheets/tpi/charts/companies_accordion.scss b/app/assets/stylesheets/tpi/charts/companies_accordion.scss
@@ -1,7 +1,7 @@
 @import "../colors";
 @import "../typography";
 
-$tpi-level-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB;
+$tpi-level-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #60EDE5;
 
 .mobile_bubble-chart__container {
   margin: 0 -0.75rem;

diff --git a/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss b/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss
@@ -1,6 +1,6 @@
 @import '../variables';
 
-$tpi-pie-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB;
+$tpi-pie-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #60EDE5;
 
 .chart--mq-sector-pie-chart {
   margin: 0 auto;

diff --git a/app/assets/stylesheets/tpi/mq-beta-modal.scss b/app/assets/stylesheets/tpi/mq-beta-modal.scss
@@ -0,0 +1,77 @@
+@import 'colors';
+
+.modal-overlay {
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba($dark, 0.5);
+}
+
+.modal-content {
+  background-color: $white;
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  right: 4px;
+  transform: translateY(-50%);
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 40px 32px;
+  margin: 0;
+
+  @media (min-width: 640px) {
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%; // sm:w-4/5
+  }
+
+  @media (min-width: 768px) {
+    width: 66.66667%; // md:w-2/3
+  }
+
+  @media (min-width: 1280px) {
+    width: 45%; // xl:w-2/5
+  }
+
+  .modal-title {
+    margin-bottom: 20px;
+    color: $dark;
+    font-size: $size-5;
+    font-weight: bold;
+  }
+
+  .content {
+    line-height: 140%; /* 22.4px */
+    margin-bottom: 20px;
+  }
+
+  .close-btn {
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    position: absolute;
+    top: 27px;
+    right: 21px;
+
+    .icon__close {
+      background-image: image-url('cclow/icons/close.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  .actions {
+    display: flex;
+  }
+
+  .margin-left {
+    margin-left: 8px;
+  }
+}
diff --git a/app/assets/stylesheets/tpi/pages/company.scss b/app/assets/stylesheets/tpi/pages/company.scss
@@ -13,10 +13,8 @@
 
     a {
       color: white;
-    }
-
-    a + a {
-      margin-left: 20px;
+      line-height: 40px;
+      margin-right: 10px;
     }
 
     @include until($desktop) {
@@ -243,6 +241,10 @@
 
         border-left: 2px solid $hawkes-blue;
 
+        &.level5 {
+          background-color: rgba($tpi-level5-background-color, 0.15) ;
+        }
+
         &__header {
           font-size: 16px;
           font-weight: bold;
@@ -284,6 +286,10 @@
             &--yes {
               @include mq-level-backgrounds;
 
+              &.level5 {
+                background-color: $tpi-level4;
+              }
+
               background-image: image-url('icons/check.svg');
             }
 
@@ -480,6 +486,10 @@
 
       &--yes {
         @include mq-level-backgrounds;
+
+        &.level5 {
+          background-color: $tpi-level4;
+        }
       }
 
       &--not-applicable {

diff --git a/app/assets/stylesheets/tpi/pages/sector.scss b/app/assets/stylesheets/tpi/pages/sector.scss
@@ -21,10 +21,8 @@ $tape-color: rgba(25,25,25,0.1);
 
     a {
       color: white;
-    }
-
-    a + a {
-      margin-left: 20px;
+      line-height: 40px;
+      margin-right: 10px;
     }
 
     @include until($desktop) {
@@ -72,6 +70,7 @@ $tape-color: rgba(25,25,25,0.1);
       }
 
       &__title {
+        position: relative;
         height: 40px;
         margin-bottom: 50px;
       }

diff --git a/app/assets/stylesheets/tpi/pages/sectors-index.scss b/app/assets/stylesheets/tpi/pages/sectors-index.scss
@@ -10,7 +10,7 @@
     a {
       color: white;
       line-height: 40px;
-      margin-right: 20px;
+      margin-right: 10px;
     }
 
     @include until($desktop) {

diff --git a/app/controllers/concerns/tpi/user_download.rb b/app/controllers/concerns/tpi/user_download.rb
@@ -12,22 +12,27 @@ def send_tpi_user_file(mq_assessments:, cp_assessments:, filename:)
         .includes(sector: [:cp_units])
 
       mq_assessments_files = mq_assessments_by_methodology.map do |methodology, assessments|
+        is_beta_methodology = MQ::Assessment::BETA_METHODOLOGIES.include? methodology
+        name = is_beta_methodology ? "#{methodology}_BETA_#{timestamp}" : "#{methodology}_#{timestamp}"
         {
-          "MQ_Assessments_Methodology_#{methodology}_#{timestamp}.csv" => CSVExport::User::MQAssessments
-            .new(assessments).call
+          "MQ_Assessments_Methodology_#{name}.csv" => CSVExport::User::MQAssessments.new(assessments).call
         }
       end.reduce(&:merge)
 
       timestamp = Time.now.strftime('%d%m%Y')
 
       latest_cp_assessments_csv = CSVExport::User::CompanyLatestAssessments.new(mq_assessments, cp_assessments).call
+      latest_cp_assessments_beta_csv = CSVExport::User::CompanyLatestAssessments.new(
+        mq_assessments, cp_assessments, enable_beta_mq_assessments: true
+      ).call
       cp_assessments_csv = CSVExport::User::CompanyCPAssessments.new(cp_assessments).call
       cp_assessments_regional_csv = CSVExport::User::CompanyCPAssessmentsRegional.new(cp_assessments).call
       sector_benchmarks_csv = CSVExport::User::CPBenchmarks.new(cp_benchmarks).call
       user_guide = File.binread(Rails.root.join('public', 'tpi', 'export_support', 'User guide TPI files.xlsx'))
 
       render zip: (mq_assessments_files || {}).merge(
         'Company_Latest_Assessments.csv' => latest_cp_assessments_csv,
+        'Company_Latest_Assessments_BETA_5.0.csv' => latest_cp_assessments_beta_csv,
         "CP_Assessments_#{timestamp}.csv" => cp_assessments_csv,
         "CP_Assessments_Regional_#{timestamp}.csv" => cp_assessments_regional_csv,
         "Sector_Benchmarks_#{timestamp}.csv" => sector_benchmarks_csv,

diff --git a/app/controllers/tpi/companies_controller.rb b/app/controllers/tpi/companies_controller.rb
@@ -31,7 +31,10 @@ def cp_assessment; end
     # Type:     line chart
     # On pages: :show
     def assessments_levels_chart_data
-      data = ::Api::Charts::MQAssessment.new(@mq_assessment).assessments_levels_data
+      data = ::Api::Charts::MQAssessment.new(
+        @mq_assessment,
+        enable_beta_mq_assessments: @company.show_beta_mq_assessments
+      ).assessments_levels_data
 
       render json: data.chart_json
     end
@@ -58,6 +61,7 @@ def user_download
 
     def fetch_company
       @company = TPI::CompanyDecorator.decorate(Company.published.friendly.find(params[:id]))
+      @company.show_beta_mq_assessments = session[:enable_beta_mq_assessments]
     end
 
     def redirect_if_numeric_or_historic_slug

diff --git a/app/controllers/tpi/mq_assessments_controller.rb b/app/controllers/tpi/mq_assessments_controller.rb
@@ -1,5 +1,17 @@
 module TPI
   class MQAssessmentsController < TPIController
     def show; end
+
+    def enable_beta_data
+      session[:enable_beta_mq_assessments] = true
+
+      redirect_back fallback_location: tpi_root_url
+    end
+
+    def disable_beta_data
+      session[:enable_beta_mq_assessments] = false
+
+      redirect_back fallback_location: tpi_root_url
+    end
   end
 end
diff --git a/app/controllers/tpi/sectors_controller.rb b/app/controllers/tpi/sectors_controller.rb
@@ -10,8 +10,13 @@ class SectorsController < TPIController
     helper_method :any_cp_assessment?
 
     def index
-      @companies_by_sectors = Rails.cache.fetch(TPICache::KEY, expires_in: TPICache::EXPIRES_IN) do
-        ::Api::Charts::Sector.new(companies_scope(params)).companies_market_cap_by_sector
+      @companies_by_sectors = Rails.cache.fetch(
+        "#{TPICache::KEY}-mq-beta-scores-#{session[:enable_beta_mq_assessments]}",
+        expires_in: TPICache::EXPIRES_IN
+      ) do
+        ::Api::Charts::Sector.new(
+          companies_scope(params), enable_beta_mq_assessments: session[:enable_beta_mq_assessments]
+        ).companies_market_cap_by_sector
       end
       @publications_and_articles = publications_and_articles
       sectors_page = TPIPage.find_by(slug: 'publicly-listed-equities-content')
@@ -31,7 +36,9 @@ def index
     def show
       @sector_companies = @companies.active.select { |c| c.sector_id == @sector.id }
 
-      @companies_by_levels = ::Api::Charts::Sector.new(companies_scope(params)).companies_summaries_by_level
+      @companies_by_levels = ::Api::Charts::Sector.new(
+        companies_scope(params), enable_beta_mq_assessments: session[:enable_beta_mq_assessments]
+      ).companies_summaries_by_level
 
       @publications_and_articles = @sector.publications_and_articles
 
@@ -45,7 +52,9 @@ def show
     # Type:     pie chart
     # On pages: :index, :show
     def levels_chart_data
-      data = ::Api::Charts::Sector.new(companies_scope(params)).companies_count_by_level
+      data = ::Api::Charts::Sector.new(
+        companies_scope(params), enable_beta_mq_assessments: session[:enable_beta_mq_assessments]
+      ).companies_count_by_level
 
       render json: data.chart_json
     end
@@ -55,7 +64,9 @@ def levels_chart_data
     # Type:     line chart
     # On pages: :show
     def emissions_chart_data
-      data = ::Api::Charts::Sector.new(companies_scope(params)).companies_emissions_data
+      data = ::Api::Charts::Sector.new(
+        companies_scope(params), enable_beta_mq_assessments: session[:enable_beta_mq_assessments]
+      ).companies_emissions_data
 
       render json: data.chart_json
     end