Merge pull request #1017 fix: add fiscal year labeling to x-axis

fix: add fiscal year labeling to x-axis

Author: shahzeelahmed

frontend/src2/charts/helpers.ts

@@ -353,6 +353,13 @@ function getXAxis(x_axis: XAxis) {
 			width: 100,
 			overflow: 'truncate',
 			ellipsis: '...',
+			...(x_axis.dimension.granularity === 'fiscal_year'
+				? {
+						formatter: (value: any) => {
+							return getFormattedDate(value, 'fiscal_year')
+						},
+				  }
+				: null),
 		},
 	}
 }
@@ -502,7 +509,7 @@ export function getDonutChartOptions(config: DonutChartConfig, result: QueryResu
 function getDonutChartData(
 	columns: QueryResultColumn[],
 	rows: QueryResultRow[],
-	maxSlices: number
+	maxSlices: number,
 ) {
 	const measureColumn = columns.find((c) => FIELDTYPES.MEASURE.includes(c.type))
 	if (!measureColumn) {
@@ -632,7 +639,7 @@ export function getFunnelChartOptions(config: FunnelChartConfig, result: QueryRe
 function getMapChartData(
 	columns: QueryResultColumn[],
 	rows: QueryResultRow[],
-	config?: MapChartConfig
+	config?: MapChartConfig,
 ) {
 	const measureColumn = columns.find((c) => FIELDTYPES.MEASURE.includes(c.type))
 	if (!measureColumn) {
@@ -888,7 +895,9 @@ export function getBubbleChartOptions(config: BubbleChartConfig, result: QueryRe
 	// calculate symbol size
 	let symbolSizeConfig: any = 10
 	if (sizeColumnName) {
-		const allSizes = _rows.map((r) => r[sizeColumnName]).filter((val) => val != null && !isNaN(val))
+		const allSizes = _rows
+			.map((r) => r[sizeColumnName])
+			.filter((val) => val != null && !isNaN(val))
 		if (allSizes.length > 0) {
 			const minSize = Math.min(...allSizes)
 			const maxSize = Math.max(...allSizes)
@@ -1042,16 +1051,17 @@ export function getSankeyChartOptions(config: SankeyChartConfig, result: QueryRe
 	const sourceColumn = columns.find(
 		(c) =>
 			c.name === config.source_column?.dimension_name ||
-			c.name === config.source_column?.column_name
+			c.name === config.source_column?.column_name,
 	)?.name
 	const targetColumn = columns.find(
 		(c) =>
 			c.name === config.target_column?.dimension_name ||
-			c.name === config.target_column?.column_name
+			c.name === config.target_column?.column_name,
 	)?.name
 	const valueColumn = columns.find(
 		(c) =>
-			c.name === config.value_column?.measure_name || c.name === config.value_column?.column_name
+			c.name === config.value_column?.measure_name ||
+			c.name === config.value_column?.column_name,
 	)?.name
 
 	if (!sourceColumn || !targetColumn || !valueColumn) {

frontend/src2/query/helpers.ts

@@ -131,7 +131,11 @@ export function getFormattedRows(result: QueryResult, operations: Operation[]) {
 				formattedRow[column.name] = getFormattedDate(row[column.name], granularity)
 			}
 
-			if (FIELDTYPES.TEXT.includes(column.type) && typeof row[column.name] === 'string' && row[column.name]) {
+			if (
+				FIELDTYPES.TEXT.includes(column.type) &&
+				typeof row[column.name] === 'string' &&
+				row[column.name]
+			) {
 				const htmlTagRegex = /<[^>]*>/g
 				if (htmlTagRegex.test(row[column.name])) {
 					htmlTagRegex.lastIndex = 0
@@ -146,13 +150,13 @@ export function getFormattedRows(result: QueryResult, operations: Operation[]) {
 	})
 	return formattedRows
 }
-
-export function getFormattedDate(date: string, granularity: GranularityType) {
+export function getFormattedDate(date: string, granularity: string) {
 	if (!date) return ''
+	const fy = useSettings()
 
 	if (granularity === 'fiscal_year') {
 		const d = dayjs(date)
-		const fiscalYearStart = useSettings().doc.fiscal_year_start || '04-01'
+		const fiscalYearStart = fy.doc.fiscal_year_start
 		const fiscalStartMonth = dayjs(fiscalYearStart).month()
 		const fiscalStartDay = dayjs(fiscalYearStart).date()
 
@@ -386,7 +390,10 @@ export const query_operation_types = {
 		icon: Braces,
 		color: 'gray',
 		class: 'text-gray-600 bg-gray-100',
-		init: (args: CustomOperationArgs): CustomOperation => ({ type: 'custom_operation', ...args }),
+		init: (args: CustomOperationArgs): CustomOperation => ({
+			type: 'custom_operation',
+			...args,
+		}),
 		getDescription: (op: CustomOperation) => {
 			return `${op.expression.expression}`
 		},
@@ -399,7 +406,7 @@ export const query_operation_types = {
 		class: 'text-gray-600 bg-gray-100',
 		init: (args: SQLArgs): SQL => ({ type: 'sql', ...args }),
 		getDescription: (op: SQL) => {
-			return __("SQL")
+			return __('SQL')
 		},
 	},
 	code: {
@@ -410,7 +417,7 @@ export const query_operation_types = {
 		class: 'text-gray-600 bg-gray-100',
 		init: (args: CodeArgs): Code => ({ type: 'code', ...args }),
 		getDescription: (op: Code) => {
-			return __("Code")
+			return __('Code')
 		},
 	},
 }
@@ -484,5 +491,7 @@ export function matchesFilter(value: any, parsed: ParsedFilter): boolean {
 		}
 	}
 	// text: case-insensitive substring match
-	return String(value ?? '').toLowerCase().includes(parsed.text.toLowerCase())
+	return String(value ?? '')
+		.toLowerCase()
+		.includes(parsed.text.toLowerCase())
 }

frontend/src2/settings/settings.ts

@@ -19,7 +19,7 @@ function makeSettings() {
 			allowed_origins: '',
 			max_records_to_sync: 10_00_000,
 			max_memory_usage: 512,
-			fiscal_year_start: '2024-04-01',
+			fiscal_year_start: '',
 			week_starts_on: 'Monday',
 			enable_data_store: false,
 			apply_user_permissions: false,