pacatui 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pacatui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "A simple tui app for task, timer and invoicing for projects.",
   "module": "src/index.tsx",
   "type": "module",

package/src/components/Dashboard.tsx

@@ -109,29 +109,53 @@ function WeeklyTimeChart({
 }) {
 	const colors = theme.colors;
 	const chartColors = theme.projectColors;
-	const chartWidth = Math.max(width + 4, 40);
-	const maxBars = Math.min(data.length, 25, Math.floor(chartWidth / 3)); // Each bar needs ~3 chars min, max 25 weeks
+	// Braille chars filled bottom-up (both columns): ⠀ ⣀ ⣤ ⣶ ⣿
+	const brailleBlocks = [
+		String.fromCodePoint(0x2800), // 0/4 empty
+		String.fromCodePoint(0x28c0), // 1/4 dots 7,8
+		String.fromCodePoint(0x28e4), // 2/4 dots 3,6,7,8
+		String.fromCodePoint(0x28f6), // 3/4 dots 2,3,5,6,7,8
+		String.fromCodePoint(0x28ff), // 4/4 all dots
+	];
+
+	// Available width after parent padding (2 per side)
+	const availableWidth = Math.max(width - 4, 16);
+	const chartHeight = 8; // character rows for bar area (8 × 4 = 32 levels)
+	const gap = 1;
+	const minBarWidth = 2;
+	const maxBarWidth = 10;
+	const maxWeeks = 25;
+
+	// Determine how many bars fit
+	const maxBars = Math.min(
+		data.length,
+		maxWeeks,
+		Math.floor((availableWidth + gap) / (minBarWidth + gap)),
+	);
 	const recentData = data.slice(-maxBars);
 
 	if (recentData.length === 0) {
 		return (
 			<box style={{ flexDirection: "column", gap: 1, width: "100%" }}>
-				<text fg={colors.textSecondary}>No time entries in the last 6 months</text>
+				<text fg={colors.textSecondary}>
+					No time entries in the last 6 months
+				</text>
 			</box>
 		);
 	}
 
-	// Find max hours for scaling
-	const maxMs = Math.max(...recentData.map((d) => d.totalMs), 1);
-	const barHeight = 5; // Height of bars in rows
-
-	// Calculate bar width to fill available space
-	// Total width = (barWidth * n) + (n - 1) spaces = chartWidth
-	// barWidth = (chartWidth - n + 1) / n
-
-	const barWidth = 4;
+	// Dynamic bar width to fill available space, capped
+	const barWidth = Math.min(
+		maxBarWidth,
+		Math.max(
+			minBarWidth,
+			Math.floor(
+				(availableWidth - (recentData.length - 1) * gap) / recentData.length,
+			),
+		),
+	);
 
-	// Collect unique projects for legend (sorted by total time across all weeks)
+	// Collect unique projects for legend (sorted by total time)
 	const projectTotals = new Map<
 		string,
 		{ name: string; color: string; totalMs: number }
@@ -150,18 +174,16 @@ function WeeklyTimeChart({
 			}
 		}
 	}
-	// Sort projects by total time (descending) for consistent stacking order
 	const sortedProjects = Array.from(projectTotals.entries()).sort(
 		(a, b) => b[1].totalMs - a[1].totalMs,
 	);
 
-	// Assign dynamic colors to each project based on their sorted position
 	const projectColorMap = new Map<string, string>();
 	sortedProjects.forEach(([projectId], index) => {
 		projectColorMap.set(projectId, chartColors[index % chartColors.length]!);
 	});
 
-	// Pre-sort each week's projects by the global order for consistent stacking
+	// Pre-sort each week's projects by global order for consistent stacking
 	const weekProjectsSorted = recentData.map((week) =>
 		[...week.projects].sort((a, b) => {
 			const aIdx = sortedProjects.findIndex(([id]) => id === a.projectId);
@@ -170,109 +192,179 @@ function WeeklyTimeChart({
 		}),
 	);
 
-	// Pre-calculate bar heights for label positioning
-	const barHeights = recentData.map((week) =>
-		Math.round((week.totalMs / maxMs) * barHeight),
-	);
-
-	// Build bars row by row (from top to bottom, +1 row for labels on tallest bars)
-	const rows: ReactNode[] = [];
-	for (let row = barHeight; row >= 0; row--) {
-		const rowParts: ReactNode[] = [];
-
-		for (let i = 0; i < recentData.length; i++) {
-			const week = recentData[i]!;
-			const barTotalRows = barHeights[i]!;
+	const maxMs = Math.max(...recentData.map((d) => d.totalMs), 1);
 
-			if (row < barTotalRows) {
-				// This row should be filled - determine which project's color
-				// Use fraction-based calculation to avoid rounding errors
-				const rowFraction = (row + 0.5) / barTotalRows;
-				const weekProjects = weekProjectsSorted[i]!;
+	// Build each bar column: array of {char, color} from row 0 (bottom) to top
+	const barColumns = recentData.map((week, weekIdx) => {
+		const totalFourths = Math.round(
+			(week.totalMs / maxMs) * chartHeight * 4,
+		);
+		const weekProjects = weekProjectsSorted[weekIdx]!;
+		const cells: Array<{ char: string; color: string }> = [];
 
-				// Find which project this row belongs to based on cumulative fraction
-				let cumulativeFraction = 0;
-				let projectColor = chartColors[0]!;
+		for (let row = 0; row < chartHeight; row++) {
+			const rowBottom = row * 4;
+			const fill = Math.min(Math.max(totalFourths - rowBottom, 0), 4);
 
+			if (fill === 0) {
+				cells.push({ char: " ", color: colors.textMuted });
+			} else {
+				// Find project color at midpoint of filled portion of this row
+				const midFourths = rowBottom + fill / 2;
+				const midFraction =
+					totalFourths > 0 ? midFourths / totalFourths : 0;
+				let cumFraction = 0;
+				let color = chartColors[0]!;
 				for (const proj of weekProjects) {
-					const projFraction = proj.ms / week.totalMs;
-					cumulativeFraction += projFraction;
-					if (rowFraction <= cumulativeFraction) {
-						projectColor =
+					cumFraction += proj.ms / week.totalMs;
+					if (midFraction <= cumFraction) {
+						color =
 							projectColorMap.get(proj.projectId) || chartColors[0]!;
 						break;
 					}
 				}
+				cells.push({ char: brailleBlocks[fill]!, color });
+			}
+		}
+		return cells;
+	});
 
-				rowParts.push(
-					<span key={i} fg={projectColor}>
-						{"█".repeat(barWidth)}
-					</span>,
-				);
-			} else if (row === barTotalRows && week.totalMs > 0) {
-				// Show hour label just above the bar (centered)
-				const label = formatHours(week.totalMs);
-				const trimmed = label.slice(0, barWidth);
-				const padLeft = Math.floor((barWidth - trimmed.length) / 2);
+	// Render a label row where labels can extend beyond bar width.
+	// Labels are centered on their bar position and skipped if they'd overlap.
+	function buildLabelRow(
+		labels: string[],
+		color: string,
+		key: string,
+	): ReactNode {
+		const totalWidth =
+			labels.length * barWidth + (labels.length - 1) * gap;
+		const chars = new Array(totalWidth).fill(" ");
+
+		let lastEnd = -2;
+		for (let i = 0; i < labels.length; i++) {
+			const label = labels[i]!;
+			if (!label) continue;
+
+			const barStart = i * (barWidth + gap);
+			const barCenter = barStart + Math.floor(barWidth / 2);
+			const labelStart = Math.max(
+				0,
+				barCenter - Math.floor(label.length / 2),
+			);
+			const labelEnd = labelStart + label.length;
+
+			if (labelStart > lastEnd && labelEnd <= totalWidth) {
+				for (let j = 0; j < label.length; j++) {
+					chars[labelStart + j] = label[j];
+				}
+				lastEnd = labelEnd;
+			}
+		}
+
+		return (
+			<text key={key} fg={color}>
+				{chars.join("")}
+			</text>
+		);
+	}
+
+	// Short top labels: rounded hours with no unit
+	const topLabels = recentData.map((week) => {
+		if (week.totalMs === 0) return "";
+		const hours = week.totalMs / 3600000;
+		const rounded = Math.round(hours);
+		return String(rounded || "<1");
+	});
+
+	// Row where each label sits (0-indexed from bottom, just above bar top)
+	const barLabelRows = recentData.map((week) => {
+		const totalFourths = Math.round(
+			(week.totalMs / maxMs) * chartHeight * 4,
+		);
+		return Math.min(Math.ceil(totalFourths / 4), chartHeight - 1);
+	});
+
+	const rows: ReactNode[] = [];
+
+	// Bar rows (top to bottom), with labels embedded on top of each bar
+	for (let row = chartHeight - 1; row >= 0; row--) {
+		const rowParts: ReactNode[] = [];
+		for (let i = 0; i < barColumns.length; i++) {
+			const isLast = i === barColumns.length - 1;
+			if (row === barLabelRows[i] && topLabels[i]) {
+				const label = topLabels[i]!;
+				// Use barWidth + gap for centering (absorb trailing gap)
+				const slotWidth = isLast ? barWidth : barWidth + gap;
+				const padLeft = Math.floor((slotWidth - label.length) / 2);
 				const centered =
 					" ".repeat(padLeft) +
-					trimmed +
-					" ".repeat(barWidth - padLeft - trimmed.length);
+					label +
+					" ".repeat(Math.max(0, slotWidth - padLeft - label.length));
 				rowParts.push(
 					<span key={i} fg={colors.textSecondary}>
 						{centered}
 					</span>,
 				);
 			} else {
-				rowParts.push(<span key={i}>{" ".repeat(barWidth)}</span>);
-			}
-			// Add space between bars
-			if (i < recentData.length - 1) {
-				rowParts.push(<span key={`sp-${i}`}> </span>);
+				const cell = barColumns[i]![row]!;
+				rowParts.push(
+					<span key={i} fg={cell.color}>
+						{cell.char.repeat(barWidth)}
+					</span>,
+				);
+				if (!isLast) {
+					rowParts.push(
+						<span key={`sp-${i}`}>{" ".repeat(gap)}</span>,
+					);
+				}
 			}
 		}
-
-		rows.push(<text key={row}>{rowParts}</text>);
+		rows.push(<text key={`row-${row}`}>{rowParts}</text>);
 	}
 
-	// Calculate total hours for display
-	const totalMs = recentData.reduce((sum, w) => sum + w.totalMs, 0);
-
-	// Build date labels row
-	const dateLabelParts: ReactNode[] = [];
+	// Baseline
+	const baselineParts: ReactNode[] = [];
 	for (let i = 0; i < recentData.length; i++) {
-		const week = recentData[i]!;
-		const trimmed = week.weekLabel.slice(0, barWidth);
-		const padLeft = Math.floor((barWidth - trimmed.length) / 2);
-		const centered =
-			" ".repeat(padLeft) +
-			trimmed +
-			" ".repeat(barWidth - padLeft - trimmed.length);
-		dateLabelParts.push(
-			<span key={i} fg={colors.textSecondary}>
-				{centered}
+		baselineParts.push(
+			<span key={i} fg={colors.borderSubtle}>
+				{"─".repeat(barWidth)}
 			</span>,
 		);
 		if (i < recentData.length - 1) {
-			dateLabelParts.push(<span key={`sp-${i}`}> </span>);
+			baselineParts.push(
+				<span key={`sp-${i}`} fg={colors.borderSubtle}>
+					{" ".repeat(gap)}
+				</span>,
+			);
 		}
 	}
+	rows.push(<text key="baseline">{baselineParts}</text>);
+
+	// Date labels
+	const dateLabels = recentData.map((week) => week.weekLabel);
+	rows.push(buildLabelRow(dateLabels, colors.textSecondary, "dates"));
+
+	const totalMs = recentData.reduce((sum, w) => sum + w.totalMs, 0);
 
 	return (
-		<box style={{ flexDirection: "column", gap: 1, width: "100%" }}>
-			{/* Bars (with hour labels at top) */}
+		<box style={{ flexDirection: "column", width: "100%" }}>
 			{rows}
-			{/* Date labels */}
-			<text>{dateLabelParts}</text>
-
-			{/* Legend - show top projects by time */}
+			{/* Legend */}
 			<box
-				style={{ flexDirection: "row", gap: 2, marginTop: 1, flexWrap: "wrap" }}
+				style={{
+					flexDirection: "row",
+					gap: 2,
+					marginTop: 1,
+					flexWrap: "wrap",
+				}}
 			>
 				{sortedProjects.slice(0, 4).map(([id, proj]) => (
 					<text key={id}>
 						<span fg={projectColorMap.get(id)}>●</span>
-						<span fg={colors.textSecondary}> {proj.name.slice(0, 12)}</span>
+						<span fg={colors.textSecondary}>
+							{" "}
+							{proj.name.slice(0, 12)}
+						</span>
 					</text>
 				))}
 				<text>