fix chart and percentage

kveeti · Dec 3, 2023 · e6b586c · e6b586c
1 parent bf08cee
commit e6b586c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/backend/api/src/endpoints/stats.rs b/backend/api/src/endpoints/stats.rs
@@ -118,7 +118,7 @@ pub struct TagDistributionStat {
     pub tag_label: String,
     pub tag_color: String,
     pub seconds: i64,
-    pub percentage: f64,
+    pub percentage: i64,
 }
 
 pub async fn get_tag_distribution_stats_endpoint(
@@ -184,7 +184,8 @@ pub async fn get_tag_distribution_stats_endpoint(
         .iter()
         .map(|s| {
             let percentage = if total_seconds > 0 {
-                (s.seconds.unwrap_or(0) / total_seconds) as f64 * 100.0
+                let seconds = s.seconds.unwrap_or(0);
+                (seconds as f64 / total_seconds as f64) * 100.0
             } else {
                 0.0
             };
@@ -193,7 +194,7 @@ pub async fn get_tag_distribution_stats_endpoint(
                 tag_label: s.tag_label.clone(),
                 tag_color: s.tag_color.clone(),
                 seconds: s.seconds.unwrap_or(0),
-                percentage: percentage.round(),
+                percentage: percentage.round() as i64,
             };
         })
         .collect::<Vec<TagDistributionStat>>();

diff --git a/frontend/src/pages/app/app-numbers-page/chart-tag-distribution.tsx b/frontend/src/pages/app/app-numbers-page/chart-tag-distribution.tsx
@@ -55,7 +55,7 @@ export function ChartTagDistribution({
 						</div>
 
 						<div className="flex w-full flex-col text-sm">
-							<div className="flex gap-4 font-semibold">
+							<div className="flex gap-4 font-semibold border-b pb-2 mb-2">
 								<div className="flex w-full items-center gap-2">
 									<span className="w-full">total</span>
 								</div>
@@ -67,27 +67,24 @@ export function ChartTagDistribution({
 								</div>
 							</div>
 
-							<div className="border-t w-full my-2" aria-hidden></div>
-
-							<ul className="space-y-2">
+							<ul className="grid grid-cols-4 gap-1">
 								{stats.data?.stats.map((d, i) => (
-									<li key={i} className="flex gap-2">
-										<div className="flex w-full h-full items-center gap-2">
+									<li key={i} className="grid col-span-4 grid-cols-[subgrid]">
+										<div className="col-span-2 flex w-full h-full items-center gap-2">
 											<div className="items-center flex">
 												<div
+													aria-hidden
 													className="h-[0.6rem] w-[0.6rem] rounded-[50%]"
 													style={{ backgroundColor: d.tag_color }}
 												/>
 											</div>
 											<span className="w-full truncate">{d.tag_label}</span>
 										</div>
 
-										<div className="flex gap-8">
-											<span>{d.percentage}%</span>
-											<span className="whitespace-nowrap">
-												{secondsToHours(d.seconds)} h
-											</span>
-										</div>
+										<span className="text-end">{d.percentage}%</span>
+										<span className="text-end whitespace-nowrap">
+											{secondsToHours(d.seconds)} h
+										</span>
 									</li>
 								))}
 							</ul>