Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from
Oct 12, 2023
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9566a99
refactoring: Updating ASCOR icons and making assessments responsive
martintomas Oct 10, 2023
0a0a9e1
Merge branch 'client/feature/LSE-128-fe-emissions-graph-all-countries…
martintomas Oct 10, 2023
0404f4d
feat: React component to generate metrics_ep1a filters
martintomas Oct 10, 2023
dd5d078
test: which verifies that EP.1.a.i metric is rendered
martintomas Oct 10, 2023
75de4aa
Merge branch 'develop' into feat/ascor-assessment-filters
martintomas Oct 10, 2023
057ba05
Update app/javascript/components/tpi/AscorRecentEmissions.js
martintomas Oct 12, 2023
e0c8f4e
Update app/javascript/components/tpi/AscorRecentEmissions.js
martintomas Oct 12, 2023
f3246fc
Update app/assets/stylesheets/tpi/pages/ascor.scss
martintomas Oct 12, 2023
a0a2390
Merge branch 'develop' into feat/ascor-assessment-filters
martintomas Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/admin/ascor/assessments.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions app/assets/images/tpi/ascor/no.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions app/assets/images/tpi/ascor/oval.svg
View file
Open in desktop

This file was deleted.

21 changes: 3 additions & 18 deletions app/assets/images/tpi/ascor/partial.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions app/assets/images/tpi/ascor/yes.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions app/assets/stylesheets/tpi/_emissions-chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@
display: flex;
justify-content: space-between;

&.assessments {
margin-bottom: 30px;
}

&__emissions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}

&__country-selector {
Expand Down
6 changes: 2 additions & 4 deletions app/assets/stylesheets/tpi/country-question-legend.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
91 changes: 60 additions & 31 deletions app/assets/stylesheets/tpi/pages/ascor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -223,7 +232,7 @@ $see-more-width-tablet: 130px;
&__pillar {
outline: solid 1px $grey-lighter-medium;
margin-bottom: 1px;
padding: 30px 0 0 40px;
padding: 30px 0 0 20px;

&.active {
background-color: transparentize($grey-lighter-medium, 0.4);
martintomas marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -244,11 +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;
margin-left: 20px;
padding: 15px 20px;
position: relative;
background-color: white;
Expand All @@ -260,6 +273,14 @@ $see-more-width-tablet: 130px;
display: flex;
align-items: center;
gap: 25px;

div:first-child {
min-width: 80px;
}
}

@include tablet {
margin-left: 40px;
}
}

Expand All @@ -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 {
Expand Down Expand Up @@ -322,7 +337,7 @@ $see-more-width-tablet: 130px;
&__indicator {
margin-bottom: 1px;
outline: solid 1px $grey-lighter-medium;
margin-left: 40px;
margin-left: 20px;
padding: 15px 45px 15px 20px;
display: flex;

Expand Down Expand Up @@ -350,33 +365,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: 60px;
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 {
Expand Down
97 changes: 94 additions & 3 deletions app/javascript/components/tpi/AscorRecentEmissions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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] || {};

Check warning on line 19 in app/javascript/components/tpi/AscorRecentEmissions.js

View workflow job for this annotation

GitHub Actions / linters 

This line has a length of 158. Maximum allowed is 140
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 href={recentEmissions.source}>Source ({recentEmissions.year})</a>
martintomas marked this conversation as resolved.
Show resolved Hide resolved
</div>
)}
{ recentEmissions.value && (
<>
<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 href={trend.source}>Source ({trend.year})</a>
martintomas marked this conversation as resolved.
Show resolved Hide resolved
</div>
)}
{ trendValue.value && (
<>
<div className="country-assessment__metric__break" />
<div className="country-assessment__metric__text">
{trendValue.value}
</div>
</>
)}
</div>
</>
);
};

AscorRecentEmissions.propTypes = {
Expand All @@ -18,7 +107,9 @@
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(
Expand Down
0 ...components/tpi/charts/emissions/Select.js → app/javascript/components/tpi/Select.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion app/javascript/components/tpi/charts/emissions/Filters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
3 changes: 1 addition & 2 deletions app/models/ascor/emissions_boundary.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Loading
Loading