Merge pull request #579 from Vizzuality/fix/new-nrc-fixes

Fix/new-nrc-fixes
Vizzuality · Jan 13, 2023 · 066b7e1 · 066b7e1
2 parents 8467883 + 24c7dad
commit 066b7e1
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 15 deletions.
diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg
diff --git a/src/components/charts/area-chart/area-chart-component.jsx b/src/components/charts/area-chart/area-chart-component.jsx
@@ -7,6 +7,8 @@ import {
   YAxis,
   Tooltip as RechartsTooltip,
   ResponsiveContainer,
+  ReferenceDot,
+  Label,
 } from 'recharts';
 
 import styles from './area-chart-styles.module.scss';
@@ -23,6 +25,32 @@ function AreaChartComponent({
   pdf = false,
 }) {
   const tickStroke = variant === 'light' ? 'white' : variant;
+  const labelColor = variant === 'light' ? 'white' : variant;
+
+  const lastData =
+    (area1.label || area2.label) && data && data[data.length - 1];
+
+  const renderLabel = (area) => {
+    const lastAreaY =
+      lastData && area.key && lastData[area.key] && lastData[area.key][0];
+    if (!lastAreaY && lastAreaY !== 0) return null;
+    return (
+      <ReferenceDot
+        y={lastAreaY}
+        x={2020}
+        stroke="transparent"
+        fill="transparent"
+      >
+        <Label
+          className={styles.label}
+          value={area.label}
+          position="insideTop"
+          offset={-5}
+          fill={labelColor}
+        />
+      </ReferenceDot>
+    );
+  };
 
   const renderAreaChart = () => (
     <AreaChart
@@ -51,6 +79,7 @@ function AreaChartComponent({
 
       <YAxis
         axisLine={{ stroke: '#0F2B3B' }}
+        domain={[0, 100]}
         fontSize={9}
         tick={{ stroke: tickStroke, strokeWidth: 0.4 }}
         tickCount={3}
@@ -71,6 +100,8 @@ function AreaChartComponent({
         stroke={area1.stroke}
         strokeWidth={area1.strokeWidth}
       />
+      {area1.label && renderLabel(area1)}
+      {area2.label && renderLabel(area2)}
       <Area
         type="monotone"
         dataKey={area2.key}

diff --git a/src/components/charts/area-chart/area-chart-styles.module.scss b/src/components/charts/area-chart/area-chart-styles.module.scss
@@ -1,5 +1,16 @@
+@import 'styles/settings';
+
 .areaChart {
   display: block;
   position: relative;
   margin: 0;
+}
+
+.label {
+  font-size: 10px;
+  text-anchor: end;
+  font-family: $font-family-1;
+
+  // Readjust text. TODO: Improve positioning
+  transform: translate(18px, 0);
 }
diff --git a/src/components/nrc-content/nrc-content-component.jsx b/src/components/nrc-content/nrc-content-component.jsx
@@ -352,9 +352,9 @@ function NrcContent({
                   style={{
                     backgroundImage: getBarStyles(
                       COLORS['high-modification'],
-                      65,
+                      hm_vh,
                       COLORS['some-modification'],
-                      70
+                      hm
                     ),
                   }}
                 />
@@ -426,12 +426,14 @@ function NrcContent({
                     key: 'spi',
                     stroke: COLORS.white,
                     strokeWidth: 0.5,
+                    label: 'SPI',
                   }}
                   area2={{
                     key: 'protected',
                     stroke: COLORS.white,
                     strokeWidth: 0.7,
                     strokeDasharray: '3 3 3 3',
+                    label: '% Protected areas',
                   }}
                   data={land ? landData : marineData}
                   height={240}

diff --git a/src/components/pdf-reports/national-report-pdf/national-report-pdf-component.jsx b/src/components/pdf-reports/national-report-pdf/national-report-pdf-component.jsx
@@ -189,9 +189,9 @@ function NationalReportPdf({
             style={{
               backgroundImage: getBarStyles(
                 COLORS['high-modification'],
-                65,
+                hm_vh,
                 COLORS['some-modification'],
-                70
+                hm
               ),
             }}
           />
@@ -285,12 +285,14 @@ function NationalReportPdf({
           key: 'spi',
           stroke: COLORS['dark-text'],
           strokeWidth: 0.5,
+          label: 'SPI',
         }}
         area2={{
           key: 'protected',
           stroke: COLORS['dark-text'],
           strokeWidth: 0.7,
           strokeDasharray: '3 3 3 3',
+          label: '% Protected areas',
         }}
         data={selectedLandMarineOption.slug === 'land' ? landData : marineData}
         variant="dark"