tweak ui

thanhdanh27600 · Oct 16, 2023 · f00f123 · f00f123
1 parent c4219ec
commit f00f123
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/atoms/GeoChart.tsx b/src/components/atoms/GeoChart.tsx
@@ -26,6 +26,7 @@ export const GeoChart = (props: Props) => {
 
       var options = {
         legend: 'none',
+        backgroundColor: '#f9fafb80',
         colorAxis: { minValue: 0, colors: ['#9d8ed1', '#6644de'] },
       };
 

diff --git a/src/components/screens/URLTracking/HistoryGeo.tsx b/src/components/screens/URLTracking/HistoryGeo.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { GeoChart } from 'components/atoms/GeoChart';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useQuery } from 'react-query';
 import { getStatsGeo } from 'requests';
@@ -18,6 +18,7 @@ interface Props {
 export const HistoryGeo = (props: Props) => {
   const { hash } = props;
   const { t, locale } = useTrans();
+  const [rerender, setRerender] = useState(0);
   const { width } = useDimensionWindow();
   const fetchStatsGeo = useQuery({
     queryKey: QueryKey.STATS_GEO,
@@ -39,12 +40,16 @@ export const HistoryGeo = (props: Props) => {
     return data.map((data) => [getCountryName(data.countryCode || '') || '', data._count.countryCode]);
   }, [data]);
 
+  useEffect(() => {
+    setRerender((_) => _ + 1);
+  }, [width, locale]);
+
   if (!fetchStatsGeo.data) return null;
 
   return (
     <div className={clsx('flex w-full justify-center', props.className)}>
       <GeoChart
-        key={`${width}`}
+        key={rerender}
         label={['Country', t('totalClick')]}
         value={chartData}
         className="h-[200px] w-[400px] sm:h-[300px] sm:w-[600px] lg:h-[500px] lg:w-[900px]"