From 768dbec443e6d98f93485ab71a1a406f7f36cf36 Mon Sep 17 00:00:00 2001
From: thanhdanh27600 <thanhdanh27600@gmail.com>
Date: Mon, 16 Oct 2023 21:19:20 +0700
Subject: [PATCH] fix bug when no data

---
 src/components/atoms/BarChart.tsx             |  2 ++
 .../screens/URLTracking/HistoryByCountry.tsx  | 35 +++++++++++--------
 src/utils/country.ts                          |  1 +
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/atoms/BarChart.tsx b/src/components/atoms/BarChart.tsx
index 8e1260b3..9a9d90d4 100644
--- a/src/components/atoms/BarChart.tsx
+++ b/src/components/atoms/BarChart.tsx
@@ -44,6 +44,8 @@ export const BarChart = (props: Props) => {
     }
   }, [loaded, google]);
 
+  if (value.length === 0) return null;
+
   return (
     <>
       <Script
diff --git a/src/components/screens/URLTracking/HistoryByCountry.tsx b/src/components/screens/URLTracking/HistoryByCountry.tsx
index 837fc75c..0523d2de 100644
--- a/src/components/screens/URLTracking/HistoryByCountry.tsx
+++ b/src/components/screens/URLTracking/HistoryByCountry.tsx
@@ -41,12 +41,13 @@ export const HistoryByCountry = (props: Props) => {
 
   const chartDataGeo = useMemo(() => {
     if (!data) return [];
-    return data.map((data) => [getCountryName(data.countryCode || '') || '', data._count.countryCode]);
+    return data.map((data) => [getCountryName(data.countryCode || '') || 'world', data._count.countryCode]);
   }, [data]);
+
   const chartDataBar = useMemo(() => {
     if (!data) return [];
     let total = data.map((data) => [
-      getCountryName(data.countryCode || '') || '',
+      getCountryName(data.countryCode || '') || t('unknown'),
       data._count.countryCode,
       `color: ${color}`,
     ]);
@@ -71,19 +72,23 @@ export const HistoryByCountry = (props: Props) => {
   if (!fetchStatsGeo.data) return null;
 
   return (
-    <div className={clsx('flex h-full w-full flex-col items-center justify-center gap-4 lg:flex-row', props.className)}>
-      <GeoChart
-        key={`geo-${rerender}`}
-        label={['Country', t('totalClick')]}
-        value={chartDataGeo}
-        className="h-[240px] w-full sm:w-[400px] lg:h-[300px] lg:w-[500px]"
-      />
-      <BarChart
-        key={`bar-${rerender}`}
-        label={['Country', t('totalClick'), { role: 'style' }]}
-        value={chartDataBar}
-        className="w-full sm:w-[400px] md:w-[600px]"
-      />
+    <div>
+      <div
+        className={clsx('flex h-full w-full flex-col items-center justify-center gap-4 lg:flex-row', props.className)}>
+        <GeoChart
+          key={`geo-${rerender}`}
+          label={['Country', t('totalClick')]}
+          value={chartDataGeo}
+          className="h-[240px] w-full sm:w-[400px] lg:h-[300px] lg:w-[500px]"
+        />
+        <BarChart
+          key={`bar-${rerender}`}
+          label={['Country', t('totalClick'), { role: 'style' }]}
+          value={chartDataBar}
+          className="w-full sm:w-[400px] md:w-[600px]"
+        />
+      </div>
+      {chartDataGeo.length === 0 && <p className="mt-4 text-center text-base text-gray-500">{t('noData')}</p>}
     </div>
   );
 };
diff --git a/src/utils/country.ts b/src/utils/country.ts
index a0b403de..942d3b8b 100644
--- a/src/utils/country.ts
+++ b/src/utils/country.ts
@@ -7,6 +7,7 @@ export const getCountryName = (code: string, locale: Locale = Locale.English) =>
     countryName = regionNames.of(code.toUpperCase());
   } catch (error) {
     console.error('GET COUNTRY NAME ERROR', error);
+    return '';
   }
   return countryName;
 };