Fix UI size display and ingestion history graph (#50)

* fix: unify size display, improve graph interpolation & time readability

* fix display human-readable sizes in ingestion chart

* display human-readable sizes in ingestion chart

* fix: format code

* fix keep fallback for item.name

packages/backend/src/services/ingestion-connectors/ImapConnector.ts

@@ -193,7 +193,6 @@ export class ImapConnector implements IEmailConnector {
 				// Initialize with last synced UID, not the maximum UID in mailbox
 				this.newMaxUids[mailboxPath] = lastUid || 0;
 
-
 				// Only fetch if the mailbox has messages, to avoid errors on empty mailboxes with some IMAP servers.
 				if (mailbox.exists > 0) {
 					const BATCH_SIZE = 250; // A configurable batch size

packages/frontend/src/lib/components/custom/charts/IngestionHistoryChart.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Chart from '$lib/components/ui/chart/index.js';
 	import { AreaChart } from 'layerchart';
-	import { curveCatmullRom } from 'd3-shape';
+	import { curveMonotoneX } from 'd3-shape';
 	import type { ChartConfig } from '$lib/components/ui/chart';
 
 	export let data: { date: Date; count: number }[];
@@ -39,16 +39,24 @@
 		props={{
 			xAxis: {
 				format: (d) =>
-					new Date(d).toLocaleDateString('en-US', {
+					new Date(d).toLocaleDateString(undefined, {
 						month: 'short',
 						day: 'numeric',
 					}),
 			},
-			area: { curve: curveCatmullRom },
+			area: { curve: curveMonotoneX },
 		}}
 	>
 		{#snippet tooltip()}
-			<Chart.Tooltip />
+			<Chart.Tooltip
+				labelFormatter={(value) =>
+					(value instanceof Date ? value : new Date(value)).toLocaleString(undefined, {
+						month: 'short',
+						day: 'numeric',
+						hour: '2-digit',
+						minute: '2-digit',
+					})}
+			/>
 		{/snippet}
 	</AreaChart>
 </Chart.Container>

packages/frontend/src/lib/components/custom/charts/StorageBySourceChart.svelte

@@ -3,6 +3,7 @@
 	import { PieChart } from 'layerchart';
 	import type { IngestionSourceStats } from '@open-archiver/types';
 	import type { ChartConfig } from '$lib/components/ui/chart';
+	import { formatBytes } from '$lib/utils';
 
 	export let data: IngestionSourceStats[];
 
@@ -29,7 +30,11 @@
 		]}
 	>
 		{#snippet tooltip()}
-			<Chart.Tooltip></Chart.Tooltip>
+			<Chart.Tooltip>
+				{#snippet formatter({ value, item })}
+					{item.payload.name}: {formatBytes(value as number)}
+				{/snippet}
+			</Chart.Tooltip>
 		{/snippet}
 	</PieChart>
 </Chart.Container>

packages/frontend/src/lib/components/ui/chart/chart-tooltip.svelte

@@ -105,10 +105,10 @@
 						indicator === "dot" && "items-center"
 					)}
 				>
-					{#if formatter && item.value !== undefined && item.name}
+					{#if formatter && item.value !== undefined}
 						{@render formatter({
 							value: item.value,
-							name: item.name,
+							name: item.name || '',
 							item,
 							index: i,
 							payload: tooltipCtx.payload,

packages/frontend/src/routes/dashboard/+page.svelte

@@ -111,7 +111,7 @@
 				<div class=" lg:col-span-1">
 					<Card.Root class="h-full">
 						<Card.Header>
-							<Card.Title>Storage by Ingestion Source (Bytes)</Card.Title>
+							<Card.Title>Storage by Ingestion Source</Card.Title>
 						</Card.Header>
 						<Card.Content class="h-full">
 							{#if data.ingestionSources && data.ingestionSources.length > 0}

packages/frontend/src/routes/dashboard/archived-emails/[id]/+page.svelte

@@ -128,7 +128,9 @@
 											class="flex items-center justify-between rounded-md border p-2"
 										>
 											<span
-												>{attachment.filename} ({attachment.sizeBytes} bytes)</span
+												>{attachment.filename} ({formatBytes(
+													attachment.sizeBytes
+												)})</span
 											>
 											<Button
 												variant="outline"