feat: React component that handles EP.1.a.i and EP.1.a.ii metrics

app/admin/ascor/assessments.rb

@@ -5,7 +5,7 @@
   menu label: 'Assessments', parent: 'ASCOR', priority: 5
 
   permit_params :country_id, :assessment_date, :publication_date, :notes,
-                results_attributes: [:id, :assessment_id, :indicator_id, :answer, :source, :_destroy]
+                results_attributes: [:id, :assessment_id, :indicator_id, :answer, :source, :year, :_destroy]
 
   filter :country
   filter :assessment_date, as: :select

app/assets/stylesheets/tpi/_emissions-chart.scss

@@ -9,10 +9,15 @@
     gap: 12px;
     justify-content: space-between;
 
+    &.assessments {
+      margin-bottom: 30px;
+    }
+
     &__emissions {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
+      flex-wrap: wrap;
     }
 
     &__country-selector {

app/assets/stylesheets/tpi/country-question-legend.scss

@@ -69,14 +69,12 @@
       }
 
       &--no:before {
-        background-image: image-url('tpi/ascor/oval.svg');
-        background-color: #F26E6E;
+        background-image: image-url('tpi/ascor/no.svg');
         background-size: 20px;
       }
 
       &--yes:before {
-        background-image: image-url('tpi/ascor/oval.svg');
-        background-color: #17B091;
+        background-image: image-url('tpi/ascor/yes.svg');
         background-size: 20px;
       }
 

app/assets/stylesheets/tpi/pages/ascor.scss

@@ -62,10 +62,15 @@ $see-more-width-tablet: 130px;
       display: flex;
       align-items: center;
       justify-content: flex-end;
+      flex-wrap: wrap;
 
       &.show-version {
         justify-content: space-between;
 
+        @include mobile {
+          justify-content: flex-end;
+        }
+
         @include tablet {
           padding-left: 20px;
         }
@@ -81,9 +86,13 @@ $see-more-width-tablet: 130px;
 
       &__assessment-dropdown {
         display: flex;
-        flex-direction: column;
         gap: 10px;
         color: white;
+        margin-right: 20px;
+
+        .caption {
+          line-height: 35px;
+        }
 
         @include tablet {
           flex-direction: row;
@@ -223,10 +232,10 @@ $see-more-width-tablet: 130px;
     &__pillar {
       outline: solid 1px $grey-lighter-medium;
       margin-bottom: 1px;
-      padding: 30px 0 0 40px;
+      padding: 30px 0 0 10px;
 
       &.active {
-        background-color: transparentize($grey-lighter-medium, 0.4);
+        background-color: transparentize($ascor-background-color, 0.96);
       }
 
       &__title {
@@ -244,12 +253,15 @@ $see-more-width-tablet: 130px;
         font-family: $family-sans-serif;
         font-size: 12px;
       }
+
+      @include tablet {
+        padding: 30px 0 0 40px;
+      }
     }
 
     &__area {
       outline: solid 1px $grey-lighter-medium;
-      margin-left: 40px;
-      padding: 15px 20px;
+      padding: 15px 20px 30px 20px;
       position: relative;
       background-color: white;
       display: flex;
@@ -260,6 +272,15 @@ $see-more-width-tablet: 130px;
         display: flex;
         align-items: center;
         gap: 25px;
+
+        div:first-child {
+          min-width: 80px;
+        }
+      }
+
+      @include tablet {
+        margin-left: 40px;
+        padding: 15px 20px;
       }
     }
 
@@ -268,26 +289,20 @@ $see-more-width-tablet: 130px;
         content: '';
         display: block;
 
-        width: 40px;
-        height: 40px;
+        min-width: 40px;
+        min-height: 40px;
         border-radius: 50%;
         background-repeat: no-repeat;
         background-position: center;
         background-size: 40px;
       }
 
       &--no:before {
-        background-image: image-url('tpi/ascor/oval.svg');
-        background-color: #F26E6E;
-        width: 38px;
-        height: 38px;
+        background-image: image-url('tpi/ascor/no.svg');
       }
 
       &--yes:before {
-        background-image: image-url('tpi/ascor/oval.svg');
-        background-color: #17B091;
-        width: 38px;
-        height: 38px;
+        background-image: image-url('tpi/ascor/yes.svg');
       }
 
       &--not-applicable:before {
@@ -322,7 +337,6 @@ $see-more-width-tablet: 130px;
     &__indicator {
       margin-bottom: 1px;
       outline: solid 1px $grey-lighter-medium;
-      margin-left: 40px;
       padding: 15px 45px 15px 20px;
       display: flex;
 
@@ -350,33 +364,47 @@ $see-more-width-tablet: 130px;
           color: $dark;
         }
       }
+
+      @include tablet {
+        margin-left: 40px;
+      }
     }
 
-    &__metric {
-      margin-left: 80px;
-      padding: 30px 45px 30px 45px;
+    &__metric-block {
+      margin-left: 40px;
+      padding: 30px 45px 0 45px;
       border-left: solid 3px $grey-lighter-medium;
+
+      @include tablet {
+        margin-left: 80px;
+      }
+    }
+
+    &__metric {
       display: flex;
+      padding-bottom: 30px;
       position: relative;
+      flex-wrap: wrap;
 
       &__title {
         flex-grow:2
       }
 
-      &__value {
-        &__text {
-          background: $dark;
-          padding: 5px 0;
-          color: $white;
-          font-weight: 600;
-          position: absolute;
-          left: -45px;
-          top: 25px;
-          border: solid 3px $grey-lighter-medium;
-          text-align: center;
-          min-width: 80px;
-          font-size: small;
-        }
+      &__break {
+        flex-basis: 100%;
+        height: 0;
+      }
+
+      &__text {
+        background: $dark;
+        padding: 5px 10px;
+        color: $white;
+        font-weight: 600;
+        margin-top: 10px;
+        border: solid 1px $grey-lighter-medium;
+        text-align: center;
+        min-width: 80px;
+        font-size: small;
       }
 
       &__source {

app/javascript/components/tpi/AscorRecentEmissions.js

@@ -1,8 +1,97 @@
 import PropTypes from 'prop-types';
+import Select from './Select';
+import React, {useState} from 'react';
 
-// eslint-disable-next-line no-empty-pattern
-const AscorRecentEmissions = ({ }) => {
+const AscorRecentEmissions = ({
+  emissions_metric_filter,
+  default_emissions_metric_filter,
+  emissions_boundary_filter,
+  default_emissions_boundary_filter,
+  trend_filters,
+  default_trend_filter,
+  data
+}) => {
+  const [filters, setFilters] = useState({
+    emissions_metric: default_emissions_metric_filter,
+    emissions_boundary: default_emissions_boundary_filter,
+    trends: default_trend_filter
+  });
+  const recentEmissions = data.filter((d) => d.emissions_metric === filters.emissions_metric && d.emissions_boundary === filters.emissions_boundary)[0] || {};
+  const trend = recentEmissions.trend || {};
+  const trendValue = trend.values?.filter((t) => t.filter === filters.trends)[0] || {};
 
+  const handleSelect = (opt) => {
+    setFilters({ ...filters, [opt.name]: opt.value });
+  };
+
+  return (
+    <>
+      <div className="emissions__filters assessments">
+        <div className="emissions__filters__emissions">
+          <Select
+            options={emissions_metric_filter}
+            onSelect={handleSelect}
+            value={filters.emissions_metric}
+            name="emissions_metric"
+            placeholder="Emissions Metric"
+            label="Emissions Metric"
+          />
+          <Select
+            options={emissions_boundary_filter}
+            onSelect={handleSelect}
+            value={filters.emissions_boundary}
+            name="emissions_boundary"
+            placeholder="Emissions Boundary"
+            label="Emissions Boundary"
+          />
+          <Select
+            options={trend_filters}
+            onSelect={handleSelect}
+            value={filters.trends}
+            name="trends"
+            placeholder="Trends"
+            label="Trends"
+          />
+        </div>
+      </div>
+      <div className="country-assessment__metric">
+        <div className="country-assessment__metric__title">
+          i. What is the country&apos;s most recent emissions level?
+        </div>
+        { recentEmissions.source && (
+          <div className="country-assessment__metric__source">
+            <a target="_blank" rel="noreferrer" href={recentEmissions.source}>Source ({recentEmissions.year})</a>
+          </div>
+        )}
+        { recentEmissions.value !== null && (
+          <>
+            <div className="country-assessment__metric__break" />
+            <div className="country-assessment__metric__text">
+              {recentEmissions.value} {recentEmissions.unit}
+            </div>
+          </>
+        )}
+      </div>
+      <div className="country-assessment__metric">
+        <div className="country-assessment__metric__title">
+          ii. What is the country&apos;s most recent emissions trend?
+        </div>
+        { trend.source && (
+          <div className="country-assessment__metric__source">
+            <a target="_blank" rel="noreferrer" href={trend.source}>Source ({trend.year})</a>
+          </div>
+        )}
+        { trendValue.value && (
+          <>
+            <div className="country-assessment__metric__break" />
+            <div className="country-assessment__metric__text">
+              {trendValue.value}
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
 };
 
 AscorRecentEmissions.propTypes = {
@@ -18,13 +107,15 @@
       source: PropTypes.string,
       year: PropTypes.number,
       unit: PropTypes.string.isRequired,
-      trends: PropTypes.shape({
+      emissions_metric: PropTypes.string.isRequired,
+      emissions_boundary: PropTypes.string.isRequired,
+      trend: PropTypes.shape({
         source: PropTypes.string,
         year: PropTypes.number,
         values: PropTypes.arrayOf(
           PropTypes.shape({
             filter: PropTypes.string.isRequired,
-            value: PropTypes.string.isRequired
+            value: PropTypes.string
           })
         ).isRequired
       }).isRequired

app/javascript/components/tpi/charts/ascor-emissions/Filters.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from './Select';
+import Select from '../../Select';
 import CountrySelector from './CountrySelector';
 
 const MAX_SELECTED_COUNTRIES = 10;

app/models/ascor/emissions_boundary.rb

@@ -2,7 +2,6 @@ class ASCOR::EmissionsBoundary
   VALUES = [
     'Production - excluding LULUCF',
     'Production - only LULUCF',
-    'Consumption - excluding LULUCF',
-    'Consumption - only LULUCF'
+    'Consumption - excluding LULUCF'
   ].freeze
 end