I think i fixed the visualization mobile issue

COS301-SE-2024 · Sep 29, 2024 · 1fd25b9 · 1fd25b9
1 parent e5204fb
commit 1fd25b9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/frontend/components/Visualisations/DotVisualizations.tsx b/frontend/components/Visualisations/DotVisualizations.tsx
@@ -255,13 +255,15 @@ const EChartsComponent = () => {
               fontFamily: "Arial",
               width: node.r * 2,
               overflow: isLabel ? "break" : "truncate",
-              fontSize: isLabel ? node.r / 3.5 : node.r / 5,
+            fontSize: isMobile ? 
+              (isLabel ? node.r / 4 : node.r / 5.5) : 
+              (isLabel ? node.r / 3.5 : node.r / 5),
+          },
+          emphasis: {
+            style: {
+              overflow: isLabel ? "break" : null,
+              fontSize: Math.max(isMobile ? node.r / 4.5 : node.r / 4, 10),
             },
-            emphasis: {
-              style: {
-                overflow: isLabel ? "break" : null,
-                fontSize: Math.max(node.r / 4, 12),
-              },
             },
           },
           textConfig: {
@@ -377,32 +379,29 @@ const EChartsComponent = () => {
       window.removeEventListener('resize', handleResize);
       myChart.dispose();
     };
-  }, [data]);
+  }, [data, isMobile]);
 
   return (
-    <>
+    <div className="w-full h-full">
       {!isError ? (
         <>
           {isLoading ? (
-            <div
-              className="pt-64 w-full flex flex-row justify-center"
-              data-testid="loading-spinner"
-            >
+            <div className="flex justify-center items-center w-full h-full" data-testid="loading-spinner">
               <LoadingSpinner />
             </div>
           ) : (
             <div
               ref={chartRef}
-              style={{ height: isMobile ? "80vh" : "100vh" }}
+              className={`w-full ${isMobile ? 'h-[80vh]' : 'h-[100vh]'}`}
               data-testid="echarts-container"
             />
           )}
         </>
       ) : (
-        <div>Error loading visualization</div>
+        <div className="text-center text-red-500">Error loading visualization</div>
       )}
-    </>
+    </div>
   );
 };
 
-export default EChartsComponent;
+export default EChartsComponent;
diff --git a/frontend/components/Visualisations/Visualizations.tsx b/frontend/components/Visualisations/Visualizations.tsx
@@ -4,26 +4,24 @@ import { useMediaQuery } from "@/lib/useMediaQuery";
 
 const EChartsComponent = dynamic(
   () => import("@/components/Visualisations/DotVisualizations"),
-  {
-    ssr: false,
-  },
+  { ssr: false }
 );
 
 function Visualizations() {
   const isMobile = useMediaQuery('(max-width: 768px)');
 
   return (
     <section className="section align-center mb-5 px-4">
-      <h3 className={`mb-2 font-extrabold leading-none tracking-tight text-gray-700 dark:text-white text-center ${isMobile ? 'text-2xl' : 'text-3xl md:text-3xl lg:text-4xl'}`}>
+      <h3 className="mb-2 font-extrabold leading-tight tracking-tight text-gray-700 dark:text-white text-center text-2xl sm:text-3xl lg:text-4xl">
         Discover{" "}
         <span className="text-green-600 dark:text-green-500">Issues</span> faced
         Across Provinces.
       </h3>
-      <p className={`mb-6 text-center text-gray-600 dark:text-gray-400 ${isMobile ? 'text-sm' : 'text-base'}`}>
+      <p className="mb-6 text-center text-gray-600 dark:text-gray-400 text-sm sm:text-base">
         This interactive visualization provides an overview of issues reported across different provinces and suburbs. 
         Click on a province to drill down and explore more detailed information.
       </p>
-      <div className={isMobile ? 'h-[80vh]' : 'h-[100vh]'}>
+      <div className={`w-full ${isMobile ? 'h-[80vh]' : 'h-[100vh]'}`}>
         <EChartsComponent />
       </div>
     </section>