From b7886f3b9e6217a652b916ce996c48302a3292b0 Mon Sep 17 00:00:00 2001
From: Mustafa Saifee <mustafa.saifee@undp.org>
Date: Thu, 25 Jan 2024 21:57:41 +0200
Subject: [PATCH] Fix the rounding issue for population in country page and add
 source for SDG tracker

---
 src/AboutPage/CountryAboutPage.tsx               |  9 +++++----
 .../SDGDataExplorer/LineChart/Graph.tsx          |  4 ++--
 src/CountryPage/SDGTracker/index.tsx             | 16 +++++++++++++++-
 .../Components/AnimatedParticleChart/index.tsx   |  2 +-
 src/KeyInsights/Components/GHGGraph/Graph.tsx    |  6 +++---
 .../PovertyAndInequalityKeyInsights.tsx          |  4 ++--
 6 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/AboutPage/CountryAboutPage.tsx b/src/AboutPage/CountryAboutPage.tsx
index 28996e0..340d1cb 100644
--- a/src/AboutPage/CountryAboutPage.tsx
+++ b/src/AboutPage/CountryAboutPage.tsx
@@ -96,14 +96,15 @@ export function CountryAboutPage(props: Props) {
               Located in {countryTaxonomy['Group 2']}
               {isDataAvailable(countryData, 'Population, total') ? (
                 <>
-                  &nbsp;and with a population of&nbsp;
+                  &nbsp;and with a population of approximately&nbsp;
                   <span className='bold'>
-                    {format('.2s')(
+                    {format('.3s')(
                       GetDataValueAndYear(countryData, 'Population, total')
                         .value,
                     ).replace('G', 'B')}
                   </span>
-                  &nbsp;inhabitants
+                  &nbsp;inhabitants (
+                  {GetDataValueAndYear(countryData, 'Population, total').year})
                 </>
               ) : null}
               .&nbsp;
@@ -115,7 +116,7 @@ export function CountryAboutPage(props: Props) {
                   {countryTaxonomy['Country or Area']}
                   &nbsp;had a GDP of&nbsp;
                   <span className='bold'>
-                    {format('.2s')(
+                    {format('.3s')(
                       GetDataValueAndYear(
                         countryData,
                         'GDP per capita, PPP (current international $)',
diff --git a/src/CountryPage/SDGDataExplorer/LineChart/Graph.tsx b/src/CountryPage/SDGDataExplorer/LineChart/Graph.tsx
index ab777a2..76596d0 100644
--- a/src/CountryPage/SDGDataExplorer/LineChart/Graph.tsx
+++ b/src/CountryPage/SDGDataExplorer/LineChart/Graph.tsx
@@ -83,7 +83,7 @@ export function Graph(props: Props) {
               ? Math.abs(data.values[indx].value) < 1
                 ? data.values[indx].value
                 : data.values[indx].value > 1000
-                ? format('.2s')(data.values[indx].value).replace('G', 'B')
+                ? format('.3s')(data.values[indx].value).replace('G', 'B')
                 : format('.3s')(data.values[indx].value)
               : data.values[indx].value,
           label: data.values[indx].label,
@@ -199,7 +199,7 @@ export function Graph(props: Props) {
                           ? d.value.toFixed(3)
                           : d.value.toFixed(2)
                         : Math.abs(d.value) > 1000
-                        ? format('.2s')(d.value).replace('G', 'B')
+                        ? format('.3s')(d.value).replace('G', 'B')
                         : format('.3s')(d.value)
                       : d.value}
                   </text>
diff --git a/src/CountryPage/SDGTracker/index.tsx b/src/CountryPage/SDGTracker/index.tsx
index effa4f8..b4dbcc5 100644
--- a/src/CountryPage/SDGTracker/index.tsx
+++ b/src/CountryPage/SDGTracker/index.tsx
@@ -63,7 +63,21 @@ export function SDGTracker(props: Props) {
   return (
     <div>
       {countryData && statuses ? (
-        <SDGTrackerViz targetStatuses={statuses.targetStatus} />
+        <>
+          <SDGTrackerViz targetStatuses={statuses.targetStatus} />
+          <p
+            className='undp-typography small-font italics'
+            style={{ textAlign: 'center' }}
+          >
+            For more information on the data and methodology visit:{' '}
+            <a
+              href={`https://sdgdiagnostics.data.undp.org/${countryId}/sdg-trends`}
+              className='undp-style'
+            >
+              SDG Push Diagnostics
+            </a>
+          </p>
+        </>
       ) : (
         <div className='undp-loader-container undp-container'>
           <div className='undp-loader' />
diff --git a/src/KeyInsights/Components/AnimatedParticleChart/index.tsx b/src/KeyInsights/Components/AnimatedParticleChart/index.tsx
index a9c094b..9a8ca16 100644
--- a/src/KeyInsights/Components/AnimatedParticleChart/index.tsx
+++ b/src/KeyInsights/Components/AnimatedParticleChart/index.tsx
@@ -118,7 +118,7 @@ export function ParticleColumnChart(props: ColumnProps) {
         );
         const notesList = years.map(
           (el, i) =>
-            `${el}: ${format('.2s')(dataList[i]).replace('G', 'B')}${
+            `${el}: ${format('.3s')(dataList[i]).replace('G', 'B')}${
               suffix || ''
             }`,
         );
diff --git a/src/KeyInsights/Components/GHGGraph/Graph.tsx b/src/KeyInsights/Components/GHGGraph/Graph.tsx
index 4a83b42..850b605 100644
--- a/src/KeyInsights/Components/GHGGraph/Graph.tsx
+++ b/src/KeyInsights/Components/GHGGraph/Graph.tsx
@@ -110,7 +110,7 @@ export function Graph(props: Props) {
             fontWeight: 'bold',
           }}
         >
-          {format('.2s')(
+          {format('.3s')(
             data.yearlyData[data.yearlyData.findIndex(d => d.year === 1990)]
               .value,
           )}{' '}
@@ -137,7 +137,7 @@ export function Graph(props: Props) {
             fontWeight: 'bold',
           }}
         >
-          {format('.2s')(data.yearlyData[data.yearlyData.length - 1].value)}{' '}
+          {format('.3s')(data.yearlyData[data.yearlyData.length - 1].value)}{' '}
           {svgWidth < 640 ? 'Mil T' : 'Million T'}
         </text>
         <polygon
@@ -224,7 +224,7 @@ export function Graph(props: Props) {
               fontWeight: 'bold',
             }}
           >
-            {format('.2s')(
+            {format('.3s')(
               (data.yearlyData[data.yearlyData.length - 1].value -
                 data.yearlyData[data.yearlyData.findIndex(d => d.year === 1990)]
                   .value) /
diff --git a/src/KeyInsights/PovertyAndInequalityKeyInsights.tsx b/src/KeyInsights/PovertyAndInequalityKeyInsights.tsx
index 5676701..06698b4 100644
--- a/src/KeyInsights/PovertyAndInequalityKeyInsights.tsx
+++ b/src/KeyInsights/PovertyAndInequalityKeyInsights.tsx
@@ -198,11 +198,11 @@ export function PovertyAndInequalityKeyInsights() {
               backgroundColor={['var(--gray-300)', 'var(--gray-300)']}
               color={['#006EB5', '#006EB5']}
               notes={[
-                `${format('.2s')(0.1 * 7876931987).replace(
+                `${format('.3s')(0.1 * 7876931987).replace(
                   'M',
                   ' Million',
                 )} People (top 10%)`,
-                `${format('.2s')(0.9 * 7876931987).replace(
+                `${format('.3s')(0.9 * 7876931987).replace(
                   'G',
                   ' Billion',
                 )} People (bottom 90%)`,