From 7bd500b1d260b87d02c7ec8a30b6876784108571 Mon Sep 17 00:00:00 2001
From: Varun Raj <varun@skcript.com>
Date: Sun, 24 Nov 2024 11:31:35 +0530
Subject: [PATCH] fix: heatmap design fixes

Signed-off-by: Varun Raj <varun@skcript.com>
---
 src/components/analytics/exif/AssetHeatMap.tsx | 14 +++++++-------
 src/pages/analytics/exif.tsx                   |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/analytics/exif/AssetHeatMap.tsx b/src/components/analytics/exif/AssetHeatMap.tsx
index c1a21f7..efb3259 100644
--- a/src/components/analytics/exif/AssetHeatMap.tsx
+++ b/src/components/analytics/exif/AssetHeatMap.tsx
@@ -87,7 +87,7 @@ export default function AssetHeatMap() {
   };
 
   return (
-    <div className="p-4 w-full">
+    <div className="py-4 w-full">
       <h2 className="text-xl font-bold mb-4">Past Year</h2>
       {loading ? (
         <p>Loading...</p>
@@ -100,7 +100,7 @@ export default function AssetHeatMap() {
                   <th
                     key={index}
                     className="text-center"
-                    colSpan={weeks}
+                    colSpan={weeks || 4}
                   >
                     {months[index]}
                   </th>
@@ -113,22 +113,22 @@ export default function AssetHeatMap() {
                   {heatMapData.map((column, colIndex) => (
                     <td
                       key={colIndex}
-                      className={`h-6 ${getColor(column[rowIndex]?.count ?? -1)} rounded-lg`}
-                      style={{ width: `calc(${100 / 60}%)` }}
+                      className={`h-[20px] w-[20px] ${getColor(column[rowIndex]?.count ?? -1)} rounded`}
+                      // style={{ width: `calc(${100 / 60}%)` }}
                     >
                       {
                         column[rowIndex]?.date ? (
                           <Tooltip delayDuration={0} content={`Date: ${column[rowIndex]?.date ?? "N/A"} - Count: ${column[rowIndex]?.count ?? 0}`}>
                             <a
                               href={`${exImmichUrl}/search?query=%7B%22takenAfter%22%3A%22${column[rowIndex]?.date ?? "N/A"}T00%3A00%3A00.000Z%22%2C%22takenBefore%22%3A%22${column[rowIndex]?.date ?? "N/A"}T23%3A59%3A59.999Z%22%7D`}
-                              className="block h-full w-full"
+                              className="block h-[20px] max-w-[20px]"
                               target="_blank"
                             >
                               <div
-                                className="h-full w-full"
+                                className="h-[20px] max-w-[20px]"
                               />
                             </a></Tooltip>) : <div
-                          className="h-full w-full"
+                          className="h-[20px] max-w-[20px]"
                         />
 
                       }
diff --git a/src/pages/analytics/exif.tsx b/src/pages/analytics/exif.tsx
index 64af274..6a98b65 100644
--- a/src/pages/analytics/exif.tsx
+++ b/src/pages/analytics/exif.tsx
@@ -110,7 +110,7 @@ export default function ExifDataAnalytics() {
             <CardHeader>
               <CardTitle className="text-center text-lg font-mono">{type}</CardTitle>
             </CardHeader>
-            <CardContent className="text-center text-lg font-mono">
+            <CardContent className="text-center text-3xl font-mono">
               {loading ? "Loading..." : statistics[type.toLowerCase() as keyof typeof statistics].toLocaleString()}
             </CardContent>
           </Card>
@@ -119,7 +119,7 @@ export default function ExifDataAnalytics() {
           <CardHeader>
             <CardTitle className="text-center text-lg font-mono">Live Photos</CardTitle>
           </CardHeader>
-          <CardContent className="text-center text-lg font-mono">
+          <CardContent className="text-center text-3xl font-mono">
             {loading ? "Loading..." : livePhotoStatistics.total.toLocaleString()}
           </CardContent>
         </Card>