Shorten dynamic report headers when possible

src/components/DynamicReportComponent.vue

@@ -28,7 +28,7 @@
 			<thead>
 				<tr class="border-b border-gray-300">
 					<th></th>
-					<th v-for="column of report.columns" class="py-0.5 pl-1 text-gray-900 font-semibold text-end">{{ column }}&nbsp;</th>
+					<th v-for="column of (columns ?? report.columns)" class="py-0.5 pl-1 text-gray-900 font-semibold text-end">{{ column }}&nbsp;</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -42,5 +42,5 @@
 	import { DynamicReport } from '../reports/base.ts';
 	import DynamicReportEntryComponent from './DynamicReportEntryComponent.vue';
 	
-	const { report } = defineProps<{ report: DynamicReport | null }>();
+	const { report, columns } = defineProps<{ report: DynamicReport | null, columns?: string[] }>();
 </script>

src/reports/BalanceSheetReport.vue

@@ -17,7 +17,7 @@
 -->
 
 <template>
-	<DynamicReportComponent :report="report">
+	<DynamicReportComponent :report="report" :columns="reportColumns">
 		<div class="my-2 py-2 flex">
 			<div class="grow flex gap-x-2 items-baseline">
 				<span class="whitespace-nowrap">As at</span>
@@ -59,6 +59,7 @@
 	import DynamicReportComponent from '../components/DynamicReportComponent.vue';
 	
 	const report = ref(null as DynamicReport | null);
+	const reportColumns = ref([] as string[]);
 	
 	const dt = ref(null as string | null);
 	const comparePeriods = ref(1);
@@ -79,12 +80,15 @@
 	
 	async function updateReport() {
 		const reportDates = [];
+		let newReportColumns = [];
+		
 		for (let i = 0; i < comparePeriods.value; i++) {
 			let thisReportDt;
 			
 			// Get period end date
 			if (compareUnit.value === 'years') {
 				thisReportDt = dayjs(dt.value!).subtract(i, 'year');
+				newReportColumns.push(thisReportDt.format('YYYY'));
 			} else if (compareUnit.value === 'months') {
 				if (dayjs(dt.value!).add(1, 'day').isSame(dayjs(dt.value!).set('date', 1).add(1, 'month'))) {
 					// If dt is the end of a calendar month, then fix each prior dt to be the end of the calendar month
@@ -92,6 +96,7 @@
 				} else {
 					thisReportDt = dayjs(dt.value!).subtract(i, 'month');
 				}
+				newReportColumns.push(thisReportDt.format('YYYY-MM'));
 			} else {
 				throw new Error('Unexpected compareUnit');
 			}
@@ -99,7 +104,13 @@
 			reportDates.push(thisReportDt.format('YYYY-MM-DD'));
 		}
 		
+		if (comparePeriods.value === 1) {
+			// Override column headers if only one column
+			newReportColumns = ['$'];
+		}
+		
 		report.value = JSON.parse(await invoke('get_balance_sheet', { dates: reportDates }));
+		reportColumns.value = newReportColumns;  // Wait until report available to update this
 	}
 	
 	const doesBalance = computed(function() {

src/reports/IncomeStatementReport.vue

@@ -17,7 +17,7 @@
 -->
 
 <template>
-	<DynamicReportComponent :report="report">
+	<DynamicReportComponent :report="report" :columns="reportColumns">
 		<div class="my-2 py-2 flex">
 			<div class="grow flex gap-x-2 items-baseline">
 				<input type="date" class="bordered-field" v-model.lazy="dtStart">
@@ -48,6 +48,7 @@
 	import DynamicReportComponent from '../components/DynamicReportComponent.vue';
 	
 	const report = ref(null as DynamicReport | null);
+	const reportColumns = ref([] as string[]);
 	
 	const dt = ref(null as string | null);
 	const dtStart = ref(null as string | null);
@@ -71,7 +72,9 @@
 	async function updateReport() {
 		const dayjsDt = dayjs(dt.value!);
 		const dayjsDtStart = dayjs(dtStart.value!);
+		
 		const reportDates = [];
+		let newReportColumns = [];
 		
 		for (let i = 0; i < comparePeriods.value; i++) {
 			let thisReportDt, thisReportDtStart;
@@ -80,6 +83,7 @@
 			if (compareUnit.value === 'years') {
 				thisReportDt = dayjsDt.subtract(i, 'year');
 				thisReportDtStart = dayjsDtStart.subtract(i, 'year');
+				newReportColumns.push(thisReportDt.format('YYYY'));
 			} else if (compareUnit.value === 'months') {
 				if (dayjsDt.add(1, 'day').isSame(dayjsDt.set('date', 1).add(1, 'month'))) {
 					// If dt is the end of a calendar month, then fix each prior dt to be the end of the calendar month
@@ -89,6 +93,7 @@
 					thisReportDt = dayjsDt.subtract(i, 'month');
 					thisReportDtStart = dayjsDtStart.subtract(i, 'month');
 				}
+				newReportColumns.push(thisReportDt.format('YYYY-MM'));
 			} else {
 				throw new Error('Unexpected compareUnit');
 			}
@@ -96,7 +101,13 @@
 			reportDates.push([thisReportDtStart.format('YYYY-MM-DD'), thisReportDt.format('YYYY-MM-DD')]);
 		}
 		
+		if (comparePeriods.value === 1) {
+			// Override column headers if only one column
+			newReportColumns = ['$'];
+		}
+		
 		report.value = JSON.parse(await invoke('get_income_statement', { dates: reportDates }));
+		reportColumns.value = newReportColumns;  // Wait until report available to update this
 	}
 	
 	load();