Merge pull request #987 from IFRCGo/fix/seasonal-risk-score

Fix seasonal risk score for regional and global page

Author: samshara

.changeset/shiny-snakes-sing.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Fix seasonal risk score in regional and global risk watch

app/src/components/domain/RiskSeasonalMap/Filters/index.tsx

@@ -75,7 +75,7 @@ function Filters(props: Props) {
     );
 
     return (
-        <div className={styles.filters}>
+        <>
             <MultiSelectInput
                 placeholder={strings.riskAllCountries}
                 name="countries"
@@ -115,21 +115,23 @@ function Filters(props: Props) {
                 onChange={handleChange}
                 withSelectAll
             />
-            <div className={styles.riskScoreAdditionalOptions}>
+            <div className={styles.additionalOptions}>
                 <Checkbox
                     name="normalizeByPopulation"
                     label={strings.riskNormalize}
                     value={value.normalizeByPopulation}
                     onChange={handleChange}
                 />
-                <Checkbox
-                    name="includeCopingCapacity"
-                    label={strings.riskCopingCapacity}
-                    value={value.includeCopingCapacity}
-                    onChange={handleChange}
-                />
+                {value.riskMetric !== 'riskScore' && (
+                    <Checkbox
+                        name="includeCopingCapacity"
+                        label={strings.riskCopingCapacity}
+                        value={value.includeCopingCapacity}
+                        onChange={handleChange}
+                    />
+                )}
             </div>
-        </div>
+        </>
     );
 }
 

app/src/components/domain/RiskSeasonalMap/Filters/styles.module.css

@@ -1,12 +1,6 @@
-.filters {
-    display: grid;
-    grid-gap: var(--go-ui-spacing-md);
-    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-
-    .risk-score-additional-options {
-        grid-column: 1 / -1;
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--go-ui-spacing-md);
-    }
+.additional-options {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--go-ui-spacing-md);
 }

app/src/components/domain/RiskSeasonalMap/index.tsx

@@ -666,11 +666,7 @@ function RiskSeasonalMap(props: Props) {
 
                                 const newValue = filters.riskMetric === 'riskScore'
                                     ? riskScoreToCategory(
-                                        // NOTE: Risk Scores are multiplited
-                                        // by vulnerability (from server)
-                                        // So, dividing by 10 to
-                                        // correct the range (0 - 100 -> 0 - 10)
-                                        item.hazard_type === 'WF' ? value : (value / 10),
+                                        value,
                                         item.hazard_type,
                                     ) : value;
 
@@ -697,7 +693,7 @@ function RiskSeasonalMap(props: Props) {
                                     }
                                 }
 
-                                if (filters.includeCopingCapacity) {
+                                if (filters.riskMetric !== 'riskScore' && filters.includeCopingCapacity) {
                                     const lccFactor = mappings?.lccFactor[
                                         item.country_details.iso3
                                     ];
@@ -880,6 +876,7 @@ function RiskSeasonalMap(props: Props) {
         <Container
             className={_cs(styles.riskSeasonalMapContainer, className)}
             heading={strings.riskSeasonalMapHeading}
+            withGridViewInFilter
             filters={(
                 <Filters
                     regionId={Number(regionId)}