From 8f52fe2a4bc63654a1a256093828a09efee27f99 Mon Sep 17 00:00:00 2001
From: Bohdan Garchu <bohdan.garchu@gmail.com>
Date: Sun, 15 Dec 2024 22:33:24 +0100
Subject: [PATCH] feat: bar chart & fix react warnings

---
 src/app/comparison-portal/page.tsx            |   4 +-
 src/components/Charts/CategoricalChart.tsx    |   2 +-
 .../ComparisonAccordionSkeleton.tsx           |   6 +-
 .../ComparisonPortal/CountryComparison.tsx    |  24 ++--
 .../ComparisonPortal/NoDataHint.tsx           |   9 +-
 src/domain/entities/charts/LineChartData.ts   |   4 +
 .../comparison/CountryComparisonChartdata.ts  |   6 +-
 src/domain/props/NoDataHintProps.ts           |   4 +-
 .../CountryComparisonOperations.tsx           | 107 +++++++++---------
 9 files changed, 84 insertions(+), 82 deletions(-)

diff --git a/src/app/comparison-portal/page.tsx b/src/app/comparison-portal/page.tsx
index a0bf7f01..d358ca6c 100644
--- a/src/app/comparison-portal/page.tsx
+++ b/src/app/comparison-portal/page.tsx
@@ -9,9 +9,7 @@ export default async function ComparisonPortal() {
   return (
     <div>
       <h1>Comparison Portal</h1>
-      <div>
-        <CountryComparison countryMapData={countryMapData} globalFcsData={globalFcsData} />
-      </div>
+      <CountryComparison countryMapData={countryMapData} globalFcsData={globalFcsData} />
     </div>
   );
 }
diff --git a/src/components/Charts/CategoricalChart.tsx b/src/components/Charts/CategoricalChart.tsx
index 24fe166a..aa76e876 100644
--- a/src/components/Charts/CategoricalChart.tsx
+++ b/src/components/Charts/CategoricalChart.tsx
@@ -49,7 +49,7 @@ export function CategoricalChart({
   // handling the bar and pie chart switch and the theme switch;
   useEffect(() => {
     setChartOptions(CategoricalChartOperations.getHighChartOptions(data, showPieChart));
-  }, [showPieChart, theme]);
+  }, [showPieChart, theme, data]);
 
   const alternativeSwitchButtonProps = disablePieChartSwitch
     ? undefined
diff --git a/src/components/ComparisonPortal/ComparisonAccordionSkeleton.tsx b/src/components/ComparisonPortal/ComparisonAccordionSkeleton.tsx
index edf6c3cf..0e370ade 100644
--- a/src/components/ComparisonPortal/ComparisonAccordionSkeleton.tsx
+++ b/src/components/ComparisonPortal/ComparisonAccordionSkeleton.tsx
@@ -1,5 +1,6 @@
 import { Skeleton } from '@nextui-org/skeleton';
 import React from 'react';
+import { v4 as uuid } from 'uuid';
 
 export default function ComparisonAccordionSkeleton() {
   const N_ITEMS = 5;
@@ -7,7 +8,10 @@ export default function ComparisonAccordionSkeleton() {
     <div className="overflow-x-auto rounded-lg shadow-none">
       <div className="flex flex-col gap-2 mb-4">
         {[...Array(N_ITEMS)].map(() => (
-          <div className="rounded-medium last:border-b-0 bg-content1 white:bg-white overflow-hidden shadow-md">
+          <div
+            key={uuid()}
+            className="rounded-medium last:border-b-0 bg-content1 white:bg-white overflow-hidden shadow-md"
+          >
             <Skeleton className="rounded-lg bg-content1 dark:bg-content1">
               <div className="h-[69px]" />
             </Skeleton>
diff --git a/src/components/ComparisonPortal/CountryComparison.tsx b/src/components/ComparisonPortal/CountryComparison.tsx
index 061c4f8e..d7497b85 100644
--- a/src/components/ComparisonPortal/CountryComparison.tsx
+++ b/src/components/ComparisonPortal/CountryComparison.tsx
@@ -1,9 +1,7 @@
 'use client';
 
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 
-import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
-import CountrySelectionSkeleton from '@/components/ComparisonPortal/CountrySelectSkeleton';
 import { GlobalFcsData } from '@/domain/entities/country/CountryFcsData';
 import { CountryMapData, CountryMapDataWrapper } from '@/domain/entities/country/CountryMapData';
 
@@ -16,21 +14,17 @@ interface CountryComparisonProps {
 }
 
 export default function CountryComparison({ countryMapData, globalFcsData }: CountryComparisonProps) {
-  const [selectedCountries, setSelectedCountries] = useState<CountryMapData[] | undefined>(undefined);
+  const [selectedCountries, setSelectedCountries] = useState<CountryMapData[]>([]);
 
   return (
     <div>
-      <Suspense fallback={<CountrySelectionSkeleton />}>
-        <CountrySelection
-          countryMapData={countryMapData}
-          globalFcsData={globalFcsData}
-          selectedCountries={selectedCountries}
-          setSelectedCountries={setSelectedCountries}
-        />
-      </Suspense>
-      <Suspense fallback={<ComparisonAccordionSkeleton />}>
-        <CountryComparisonAccordion selectedCountries={selectedCountries} />
-      </Suspense>
+      <CountrySelection
+        countryMapData={countryMapData}
+        globalFcsData={globalFcsData}
+        selectedCountries={selectedCountries}
+        setSelectedCountries={setSelectedCountries}
+      />
+      <CountryComparisonAccordion selectedCountries={selectedCountries} />
     </div>
   );
 }
diff --git a/src/components/ComparisonPortal/NoDataHint.tsx b/src/components/ComparisonPortal/NoDataHint.tsx
index 6548ff6e..23e22676 100644
--- a/src/components/ComparisonPortal/NoDataHint.tsx
+++ b/src/components/ComparisonPortal/NoDataHint.tsx
@@ -1,15 +1,18 @@
 import { Alert } from '@nextui-org/alert';
 import { useEffect, useState } from 'react';
 
+import { isLineChartData } from '@/domain/entities/charts/LineChartData';
 import { NoDataHintProps } from '@/domain/props/NoDataHintProps.ts';
 
-export default function NoDataHint({ lineChartData, selectedCountryNames, isLoading }: NoDataHintProps) {
+export default function NoDataHint({ chartData, selectedCountryNames, isLoading }: NoDataHintProps) {
   const [formattedMissingCountryNames, setFormattedMissingCountryNames] = useState<string | null>(null);
 
   useEffect(() => {
     if (isLoading) return;
 
-    const countryNamesInChart = lineChartData.lines.map((i) => i.name);
+    const countryNamesInChart = isLineChartData(chartData)
+      ? chartData.lines.map((line) => line.name)
+      : chartData.categories.map((category) => category.name);
     const missingCountryNames = selectedCountryNames.filter(
       (countryName) => !countryNamesInChart.includes(countryName)
     );
@@ -25,7 +28,7 @@ export default function NoDataHint({ lineChartData, selectedCountryNames, isLoad
           `${missingCountryNames.slice(0, -1).join(', ')} and ${missingCountryNames.slice(-1)}`
         );
     }
-  }, [isLoading, lineChartData, selectedCountryNames]);
+  }, [isLoading, chartData, selectedCountryNames]);
 
   return formattedMissingCountryNames ? (
     <Alert
diff --git a/src/domain/entities/charts/LineChartData.ts b/src/domain/entities/charts/LineChartData.ts
index 5066718b..a2f55b6d 100644
--- a/src/domain/entities/charts/LineChartData.ts
+++ b/src/domain/entities/charts/LineChartData.ts
@@ -51,3 +51,7 @@ export interface LineChartData {
   verticalLines?: ChartVerticalLine[];
   verticalBands?: ChartVerticalBand[];
 }
+
+export function isLineChartData(data: unknown): data is LineChartData {
+  return (data as LineChartData).type === LineChartDataType.LINE_CHART_DATA;
+}
diff --git a/src/domain/entities/comparison/CountryComparisonChartdata.ts b/src/domain/entities/comparison/CountryComparisonChartdata.ts
index 880883c2..80650fd3 100644
--- a/src/domain/entities/comparison/CountryComparisonChartdata.ts
+++ b/src/domain/entities/comparison/CountryComparisonChartdata.ts
@@ -1,10 +1,12 @@
+import { CategoricalChartData } from '../charts/CategoricalChartData';
 import { LineChartData } from '../charts/LineChartData';
 
 export interface CountryComparisonChartData {
   fcsChartData?: LineChartData;
   rcsiChartData?: LineChartData;
-  foodSecurityBarChartData?: LineChartData;
-  importDependencyBarChartData?: LineChartData;
+  foodSecurityBarChartData?: CategoricalChartData;
+  populationBarChartData?: CategoricalChartData;
+  importDependencyBarChartData?: CategoricalChartData;
   balanceOfTradeData?: LineChartData;
   headlineInflationData?: LineChartData;
   foodInflationData?: LineChartData;
diff --git a/src/domain/props/NoDataHintProps.ts b/src/domain/props/NoDataHintProps.ts
index de7fa5d9..30b2965f 100644
--- a/src/domain/props/NoDataHintProps.ts
+++ b/src/domain/props/NoDataHintProps.ts
@@ -1,7 +1,9 @@
 import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
 
+import { CategoricalChartData } from '../entities/charts/CategoricalChartData';
+
 export interface NoDataHintProps {
-  lineChartData: LineChartData;
+  chartData: LineChartData | CategoricalChartData;
   selectedCountryNames: string[];
   isLoading: boolean;
 }
diff --git a/src/operations/comparison-portal/CountryComparisonOperations.tsx b/src/operations/comparison-portal/CountryComparisonOperations.tsx
index c547a1fa..8d1c2677 100644
--- a/src/operations/comparison-portal/CountryComparisonOperations.tsx
+++ b/src/operations/comparison-portal/CountryComparisonOperations.tsx
@@ -1,10 +1,12 @@
 import { Spacer } from '@nextui-org/react';
 import { UseQueryResult } from '@tanstack/react-query';
 
+import { CategoricalChart } from '@/components/Charts/CategoricalChart';
 import { LineChart } from '@/components/Charts/LineChart';
 import NoDataHint from '@/components/ComparisonPortal/NoDataHint';
 import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
 import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
+import { CategoricalChartData } from '@/domain/entities/charts/CategoricalChartData';
 import { LineChartData } from '@/domain/entities/charts/LineChartData';
 import { ChartData } from '@/domain/entities/common/ChartData.ts';
 import { CountryComparisonChartData } from '@/domain/entities/comparison/CountryComparisonChartdata';
@@ -58,27 +60,32 @@ export class CountryComparisonOperations {
     });
   }
 
+  static getPopulationBarChartData(
+    countryDataList: CountryDataRecord[],
+    countryMapData: CountryMapData[]
+  ): CategoricalChartData {
+    return {
+      yAxisLabel: 'Mill',
+      categories: countryDataList.map((countryData) => ({
+        name: this.getCountryNameById(countryData.id, countryMapData),
+        dataPoint: {
+          y: countryData.population,
+        },
+      })),
+    };
+  }
+
   static getFoodSecurityBarChartData(
     countryDataList: CountryDataRecord[],
     countryMapData: CountryMapData[]
-  ): LineChartData {
+  ): CategoricalChartData {
     return {
-      type: LineChartDataType.LINE_CHART_DATA,
-      xAxisType: 'category',
       yAxisLabel: 'Mill',
-      lines: countryDataList.map((countryData) => ({
+      categories: countryDataList.map((countryData) => ({
         name: this.getCountryNameById(countryData.id, countryMapData),
-        showRange: false,
-        dataPoints: [
-          {
-            x: 0, // TODO: f-165 this should be 'population'
-            y: countryData.population,
-          },
-          {
-            x: 1, // TODO: f-165 this should be 'people with insufficient food consumption'
-            y: countryData.fcs,
-          },
-        ],
+        dataPoint: {
+          y: countryData.fcs,
+        },
       })),
     };
   }
@@ -86,25 +93,18 @@ export class CountryComparisonOperations {
   static getImportDependencyBarChartData(
     countryDataList: CountryDataRecord[],
     selectedCountries: CountryMapData[]
-  ): LineChartData {
-    return this.chartWithoutEmptyLines({
-      type: LineChartDataType.LINE_CHART_DATA,
-      xAxisType: 'category',
+  ): CategoricalChartData {
+    return {
       yAxisLabel: '% of Cereals',
-      lines: countryDataList.map((countryData) => ({
-        name: this.getCountryNameById(countryData.id, selectedCountries),
-        showRange: false,
-        dataPoints:
-          countryData.importDependency !== null
-            ? [
-                {
-                  x: 0, // TODO: f-165: should be the individual value of the country variable
-                  y: countryData.importDependency,
-                },
-              ]
-            : [],
-      })),
-    });
+      categories: countryDataList
+        .filter((countryData) => countryData.importDependency !== null)
+        .map((countryData) => ({
+          name: this.getCountryNameById(countryData.id, selectedCountries),
+          dataPoint: {
+            y: countryData.importDependency!,
+          },
+        })),
+    };
   }
 
   static getBalanceOfTradeData(
@@ -169,6 +169,8 @@ export class CountryComparisonOperations {
       rcsiChartData: countryDataList.length > 1 ? this.getRcsiChartData(countryDataList, selectedCountries) : undefined,
       foodSecurityBarChartData:
         countryDataList.length > 1 ? this.getFoodSecurityBarChartData(countryDataList, selectedCountries) : undefined,
+      populationBarChartData:
+        countryDataList.length > 1 ? this.getPopulationBarChartData(countryDataList, selectedCountries) : undefined,
       importDependencyBarChartData:
         countryDataList.length > 1
           ? this.getImportDependencyBarChartData(countryDataList, selectedCountries)
@@ -215,6 +217,7 @@ export class CountryComparisonOperations {
       fcsChartData,
       rcsiChartData,
       foodSecurityBarChartData,
+      populationBarChartData,
       importDependencyBarChartData,
       balanceOfTradeData,
       headlineInflationData,
@@ -227,23 +230,15 @@ export class CountryComparisonOperations {
       {
         title: 'Food Security',
         content: (
-          <div>
+          <div className="flex">
             {foodSecurityBarChartData && (
-              <>
-                <LineChart
-                  data={foodSecurityBarChartData}
-                  small
-                  noPadding
-                  transparentBackground
-                  // TODO: f-165 bar chart
-                />
-                <NoDataHint
-                  lineChartData={foodSecurityBarChartData}
-                  selectedCountryNames={selectedCountryNames}
-                  isLoading={isLoading}
-                />
-              </>
+              <CategoricalChart
+                title="Number of people with insufficient food consumption"
+                data={foodSecurityBarChartData}
+              />
             )}
+            <Spacer x={6} />
+            {populationBarChartData && <CategoricalChart title="Population" data={populationBarChartData} />}
           </div>
         ),
       },
@@ -261,7 +256,7 @@ export class CountryComparisonOperations {
                   transparentBackground
                 />
                 <NoDataHint
-                  lineChartData={fcsChartData}
+                  chartData={fcsChartData}
                   selectedCountryNames={selectedCountryNames}
                   isLoading={isLoading}
                 />
@@ -278,7 +273,7 @@ export class CountryComparisonOperations {
                   transparentBackground
                 />
                 <NoDataHint
-                  lineChartData={rcsiChartData}
+                  chartData={rcsiChartData}
                   selectedCountryNames={selectedCountryNames}
                   isLoading={isLoading}
                 />
@@ -288,16 +283,16 @@ export class CountryComparisonOperations {
         ),
       },
       {
-        title: 'Import Dependency',
+        title: 'Macro-economic',
         infoIcon: <CustomInfoCircle />,
         popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
         content: (
           <div>
             {importDependencyBarChartData && (
               <>
-                <LineChart data={importDependencyBarChartData} small noPadding transparentBackground />
+                <CategoricalChart title="Import Dependency" data={importDependencyBarChartData} />
                 <NoDataHint
-                  lineChartData={importDependencyBarChartData}
+                  chartData={importDependencyBarChartData}
                   selectedCountryNames={selectedCountryNames}
                   isLoading={isLoading}
                 />
@@ -316,7 +311,7 @@ export class CountryComparisonOperations {
               <>
                 <LineChart data={balanceOfTradeData} small noPadding transparentBackground />
                 <NoDataHint
-                  lineChartData={balanceOfTradeData}
+                  chartData={balanceOfTradeData}
                   selectedCountryNames={selectedCountryNames}
                   isLoading={isLoading}
                 />
@@ -341,7 +336,7 @@ export class CountryComparisonOperations {
                   transparentBackground
                 />
                 <NoDataHint
-                  lineChartData={headlineInflationData}
+                  chartData={headlineInflationData}
                   selectedCountryNames={selectedCountryNames}
                   isLoading={isLoading}
                 />
@@ -351,7 +346,7 @@ export class CountryComparisonOperations {
               <>
                 <LineChart title="Food Inflation" data={foodInflationData} small noPadding transparentBackground />
                 <NoDataHint
-                  lineChartData={foodInflationData}
+                  chartData={foodInflationData}
                   selectedCountryNames={selectedCountryNames}
                   isLoading={isLoading}
                 />