Add regional comparison

src/Components/AggregatedDataExplorer.tsx

@@ -4,7 +4,7 @@ import { Select } from 'antd';
 import { CountryGroupDataType, IndicatorMetaDataType } from '../Types';
 import Reducer from '../Context/Reducer';
 import Context from '../Context/Context';
-import { COUNTRIES_BY_UNDP_REGIONS } from '../Constants';
+import { COUNTRIES_BY_UNDP_REGIONS, MAP_SETTINGS } from '../Constants';
 import { AggregatedGraphingEl } from '../GrapherComponent/GraphingEl';
 import { DEFAULT_VIEWS } from '../DefaultViewsForDataExplorer';
 
@@ -52,13 +52,7 @@ function AggregatedDataExplorer(props: Props) {
     showLabel: false,
     trendChartCountry: undefined,
     dataListCountry: undefined,
-    multiCountryTrendChartCountries: [
-      'China',
-      'India',
-      'United States of America',
-      'Indonesia',
-      'Pakistan',
-    ],
+    multiCountryTrendChartCountries: MAP_SETTINGS.map(d => d.name),
     useSameRange: false,
     reverseOrder: false,
     verticalBarLayout: true,

src/Components/TooltipForMultiLineChart.tsx

@@ -92,7 +92,10 @@ export function TooltipForMultiLineChart(props: Props) {
               <ColorIcon fill={d.color} />
               <p className='undp-typography margin-bottom-00'>{d.title}</p>
             </div>
-            <h6 className='undp-typography margin-bottom-00 bold'>
+            <h6
+              className='undp-typography margin-bottom-00 bold'
+              style={{ flexShrink: 0 }}
+            >
               {d.prefix && d.value && d.value !== 'NA' ? `${d.prefix} ` : ''}
               {typeof d.value === 'number'
                 ? d.value < 1000000

src/Constants.tsx

@@ -58,31 +58,37 @@ export const REGION_ACRONYMS = ['AP', 'AS', 'ECA', 'LAC', 'SSA'];
 export const MAP_SETTINGS = [
   {
     region: 'WLD',
+    name: 'World',
     center: [420, 395],
     scale: 220,
   },
   {
     region: 'AP',
+    name: 'Asia & Pacific',
     center: [-175, 445],
     scale: 450,
   },
   {
     region: 'AS',
+    name: 'Arab States',
     center: [275, 625],
     scale: 700,
   },
   {
     region: 'ECA',
+    name: 'Europe & Central Asia (currently Europe & Central Asia (excluding high income))',
     center: [-100, 1125],
     scale: 1000,
   },
   {
     region: 'LAC',
+    name: 'Latin America and the Caribbean',
     center: [800, 275],
     scale: 375,
   },
   {
     region: 'SSA',
+    name: 'Sub-Saharan Africa',
     center: [325, 325],
     scale: 525,
   },

src/GrapherComponent/Graph.tsx

@@ -20,6 +20,7 @@ import { DataList } from './DataList';
 import { GetYearsArray } from '../Utils/GetYearsArray';
 import { DumbbellChart } from './DumbbellChart';
 import { DisaggregationLineChart } from './LineChartDisaggregation';
+import { MAP_SETTINGS } from '../Constants';
 
 interface Props {
   data: CountryGroupDataType[];
@@ -381,7 +382,11 @@ export function Graph(props: Props) {
         <MultiLineChart
           data={data}
           indicators={indicators}
-          countries={countries}
+          countries={
+            regionData
+              ? countries
+              : MAP_SETTINGS.map(el => ({ name: el.name, code: el.region }))
+          }
           regionData={regionData}
         />
       )}

src/GrapherComponent/GraphingEl.tsx

@@ -410,6 +410,30 @@ export function AggregatedGraphingEl(props: AggregatedGraphingElProps) {
             />
             <TabText>Dual Axes Line Chart</TabText>
           </button>
+          <button
+            type='button'
+            className={`tabs-for-graphing-interface${
+              graphType === 'multiCountryTrendLine' ? ' selected' : ''
+            }`}
+            onClick={() => {
+              updateGraphType('multiCountryTrendLine');
+            }}
+            style={{
+              flexWrap: 'wrap',
+            }}
+            title='Multi Country Trends'
+          >
+            <LineChart
+              size={40}
+              strokeWidth={1.25}
+              stroke={
+                graphType === 'multiCountryTrendLine'
+                  ? 'var(--blue-600)'
+                  : 'var(--gray-500)'
+              }
+            />
+            <TabText>Regional Comparison</TabText>
+          </button>
           <button
             type='button'
             className={`tabs-for-graphing-interface${

src/GrapherComponent/MultiLineChart/Graph.tsx

@@ -395,7 +395,7 @@ export function Graph(props: Props) {
                       dx={5}
                       dy={4}
                     >
-                      {d.alphaCode3}
+                      {d.alphaCode3.replaceAll('UNDP_', '')}
                     </text>
                   ) : null}
                 </g>

src/GrapherComponent/Settings/MultiCountryTrendLineSettings.tsx

@@ -118,16 +118,18 @@ export function MultiCountryTrendLineSettings(props: Props) {
           >
             Show Label
           </Checkbox>
-          <Checkbox
-            style={{ margin: 0 }}
-            className='undp-checkbox'
-            checked={showReference}
-            onChange={e => {
-              updateShowReference(e.target.checked);
-            }}
-          >
-            Show World/Regional Reference
-          </Checkbox>
+          {updateShowReference ? (
+            <Checkbox
+              style={{ margin: 0 }}
+              className='undp-checkbox'
+              checked={showReference}
+              onChange={e => {
+                updateShowReference(e.target.checked);
+              }}
+            >
+              Show World/Regional Reference
+            </Checkbox>
+          ) : null}
         </div>
       </div>
     </>

src/IntroductionText.tsx

@@ -6,7 +6,7 @@ export const INTRO_TEXT = [
       <div>
         <p className='undp-typography margin-bottom-00'>
           Tackling inequality of opportunities by investing in the enhanced
-          capabilities people need to move above and beyond the poverty line.
+          capabilities people need to escape poverty in a sustainable manner.
         </p>
       </div>
     ),

src/KeyInsights/PovertyAndInequalityKeyInsights.tsx

@@ -152,11 +152,9 @@ export function PovertyAndInequalityKeyInsights() {
                 Key Insight: Income Inequality
               </p>
               <p className='undp-typography'>
-                The significance of effective government policies becomes
-                evident when examining income inequality. There is a
-                considerable disparity in income inequality between countries in
-                Latin America and Sub-Saharan Africa compared to those in
-                Northern Europe.
+                There is a considerable disparity in income inequality between
+                countries in Latin America and Sub-Saharan Africa compared to
+                those in Northern Europe.
                 <br />
                 <br />
                 This disparity carries significant consequences for life

src/RegionVisualization/Visualization.tsx

@@ -60,9 +60,10 @@ function VisualizationEl(props: Props) {
         ? indicatorsList[1].DataKey
         : undefined
       : DEFAULT_VIEWS[defaultViewsIndx].secondMetric;
-  const countryListForMultiLineChart = UNDPRegion
-    ? countryList.filter((_d, i) => i < 5).map(d => d.name)
-    : ['China', 'India', 'United States of America', 'Indonesia', 'Pakistan'];
+  const countryListForMultiLineChart =
+    UNDPRegion && UNDPRegion !== 'WLD'
+      ? countryList.filter((_d, i) => i < 5).map(d => d.name)
+      : ['China', 'India', 'United States of America', 'Indonesia', 'Pakistan'];
   const initialState = {
     graphType: DEFAULT_VIEWS[defaultViewsIndx].graphType,
     selectedRegions: [],

src/RegionVisualization/index.tsx

@@ -15,6 +15,7 @@ import {
   COUNTRIES_BY_UNDP_REGIONS,
   COUNTRYTAXONOMYLINK,
   DATALINK,
+  MAP_SETTINGS,
   METADATALINK,
 } from '../Constants';
 import VisualizationEl from './Visualization';
@@ -155,44 +156,45 @@ export function AggregatedRegionVisualization(
     IndicatorMetaDataType[] | undefined
   >(undefined);
   useEffect(() => {
-    queue()
-      .defer(json, METADATALINK)
-      .defer(
+    const q = queue();
+    MAP_SETTINGS.forEach(d => {
+      q.defer(
         json,
         `${DATALINK}/regionData/${
-          UNDPRegion === 'WLD' ? 'WLD' : `UNDP_${UNDPRegion}`
+          d.region === 'WLD' ? 'WLD' : `UNDP_${d.region}`
         }.json`,
-      )
-      .await(
-        (
-          err: any,
-          indicatorMetaData: IndicatorMetaDataType[],
-          data: CountryGroupDataType,
-        ) => {
-          if (err) throw err;
-          const queryParams = new URLSearchParams(window.location.search);
-          const topic = queryParams.get('topic')?.replaceAll('_', "'");
-          const indicatorsFiltered = sortBy(
-            indicatorMetaData,
-            d => d.IndicatorLabel,
-          ).filter(d => d.RegionalAggregation);
-          const indicatorsFilteredByTopic = topic
-            ? indicatorsFiltered.filter(d => d.SSTopics.indexOf(topic) !== -1)
-            : indicatorsFiltered;
-          setIndicatorsList(indicatorsFilteredByTopic);
-          setFinalData([
-            {
-              ...data,
-              indicators: data.indicators.filter(
-                el =>
+      );
+    });
+    queue()
+      .defer(json, METADATALINK)
+      .await((err: any, indicatorMetaData: IndicatorMetaDataType[]) => {
+        if (err) throw err;
+        const queryParams = new URLSearchParams(window.location.search);
+        const topic = queryParams.get('topic')?.replaceAll('_', "'");
+        const indicatorsFiltered = sortBy(
+          indicatorMetaData,
+          d => d.IndicatorLabel,
+        ).filter(d => d.RegionalAggregation);
+        const indicatorsFilteredByTopic = topic
+          ? indicatorsFiltered.filter(d => d.SSTopics.indexOf(topic) !== -1)
+          : indicatorsFiltered;
+        setIndicatorsList(indicatorsFilteredByTopic);
+        q.awaitAll((error: any, allData: any) => {
+          if (error) throw error;
+          const dataFormatted: CountryGroupDataType[] = allData.map(
+            (el: CountryGroupDataType) => ({
+              ...el,
+              indicators: el.indicators.filter(
+                indicator =>
                   indicatorsFiltered.findIndex(
-                    ind => ind.DataKey === el.indicator,
+                    ind => ind.DataKey === indicator.indicator,
                   ) !== -1,
               ),
-            },
-          ]);
-        },
-      );
+            }),
+          );
+          setFinalData(dataFormatted);
+        });
+      });
   }, []);
   return (
     <div>