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">
@@ -27,7 +27,7 @@
 				<div class="relative flex flex-grow items-stretch shadow-sm">
 					<input type="number" min="1" class="bordered-field w-[9.5em] pr-[6em]" v-model.lazy="comparePeriods">
 					<div class="absolute inset-y-0 right-0 flex items-center z-10">
-						<select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-emerald-600" v-model="compareUnit">
+						<select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-emerald-600" v-model="compareUnit" @change="onCompareUnitChange">
 							<option value="years">years</option>
 							<option value="months">months</option>
 						</select>
@@ -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);
@@ -69,23 +70,30 @@
 	}
 	
 	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;
 			
 			// Get period start and end dates
 			if (compareUnit.value === 'years') {
-				thisReportDt = dayjs(dt.value!).subtract(i, 'year');
-				thisReportDtStart = dayjs(dtStart.value!).subtract(i, 'year');
+				thisReportDt = dayjsDt.subtract(i, 'year');
+				thisReportDtStart = dayjsDtStart.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 (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
-					thisReportDt = dayjs(dt.value!).subtract(i, 'month').set('date', 1).add(1, 'month').subtract(1, 'day');
-					thisReportDtStart = dayjs(dtStart.value!).subtract(i, 'month');
+					thisReportDt = dayjsDt.subtract(i, 'month').set('date', 1).add(1, 'month').subtract(1, 'day');
+					thisReportDtStart = dayjsDtStart.subtract(i, 'month');
 				} else {
-					thisReportDt = dayjs(dt.value!).subtract(i, 'month');
-					thisReportDtStart = dayjs(dtStart.value!).subtract(i, 'month');
+					thisReportDt = dayjsDt.subtract(i, 'month');
+					thisReportDtStart = dayjsDtStart.subtract(i, 'month');
 				}
+				newReportColumns.push(thisReportDt.format('YYYY-MM'));
 			} else {
 				throw new Error('Unexpected compareUnit');
 			}
@@ -93,8 +101,35 @@
 			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();
+	
+	function onCompareUnitChange() {
+		const dayjsDt = dayjs(dt.value!);
+		const dayjsDtStart = dayjs(dtStart.value!);
+		
+		if (compareUnit.value === 'years') {
+			if (dayjsDt.add(1, 'day').subtract(1, 'month').isSame(dayjsDtStart)) {
+				// Dates were previously set to one month - now compareUnit changed to years
+				// Automatically change dates to one year
+				dtStart.value = dayjsDt.add(1, 'day').subtract(1, 'year').format('YYYY-MM-DD');
+			}
+		} else if (compareUnit.value === 'months') {
+			if (dayjsDt.add(1, 'day').subtract(1, 'year').isSame(dayjsDtStart)) {
+				// Dates were previously set to one year - now compareUnit changed to months
+				// Automatically change dates to one month
+				dtStart.value = dayjsDt.add(1, 'day').subtract(1, 'month').format('YYYY-MM-DD');
+			}
+		} else {
+			throw new Error('Unexpected compareUnit');
+		}
+	}
 </script>