From 3d006435a6025cf3006d6956fb8e2cb9039aa93b Mon Sep 17 00:00:00 2001 From: mhawryluk Date: Tue, 18 Aug 2026 16:46:36 +0200 Subject: [PATCH] Display short date labels on chart X axis --- .../Charts/BarChart/BarChartContent.tsx | 4 +- .../Charts/LineChart/LineChartContent.tsx | 4 +- .../Charts/hooks/useChartLabelMeasurements.ts | 15 ++++---- src/components/Charts/types/index.ts | 5 ++- src/components/Charts/utils/index.ts | 6 +++ src/components/Search/SearchBarChart.tsx | 3 +- src/components/Search/SearchChartView.tsx | 3 +- src/components/Search/SearchLineChart.tsx | 3 +- .../Search/SearchList/ListItem/types.ts | 9 +++++ src/components/Search/chartGroupByConfig.ts | 11 ++++++ src/components/Search/types.ts | 3 ++ src/libs/DateUtils.ts | 38 +++++++++++++++++++ src/libs/SearchUIUtils.ts | 14 ++++--- tests/unit/Search/SearchUIUtilsTest.ts | 9 +++++ tests/unit/Search/useInsightDataTest.ts | 1 + 15 files changed, 108 insertions(+), 20 deletions(-) diff --git a/src/components/Charts/BarChart/BarChartContent.tsx b/src/components/Charts/BarChart/BarChartContent.tsx index 58ea85e105a8..f89b8e00a2c2 100644 --- a/src/components/Charts/BarChart/BarChartContent.tsx +++ b/src/components/Charts/BarChart/BarChartContent.tsx @@ -14,7 +14,7 @@ import { useDynamicYDomain, useLabelHitTesting, } from '@components/Charts/hooks'; -import {calculateMinDomainPadding, getYAxisLabelWidth} from '@components/Charts/utils'; +import {calculateMinDomainPadding, getXAxisLabel, getYAxisLabelWidth} from '@components/Charts/utils'; import VictoryTheme, {CHART_CONTENT_MIN_HEIGHT, GLYPH_PADDING} from '@components/Charts/VictoryTheme'; import useTheme from '@hooks/useTheme'; @@ -88,7 +88,7 @@ function BarChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = 'l const totalDomainPadding = domainPadding.left + domainPadding.right; const paddingScale = barAreaWidth > 0 ? barAreaWidth / (barAreaWidth + totalDomainPadding) : 0; - const originalLabels = data.map((p) => p.label); + const originalLabels = data.map(getXAxisLabel); const measurements = useChartLabelMeasurements(data, fontManager, variables.iconSizeExtraSmall); diff --git a/src/components/Charts/LineChart/LineChartContent.tsx b/src/components/Charts/LineChart/LineChartContent.tsx index 131a831f7b75..614aa459136b 100644 --- a/src/components/Charts/LineChart/LineChartContent.tsx +++ b/src/components/Charts/LineChart/LineChartContent.tsx @@ -16,7 +16,7 @@ import { useDynamicYDomain, useLabelHitTesting, } from '@components/Charts/hooks'; -import {getYAxisLabelWidth, labelOverhang} from '@components/Charts/utils'; +import {getXAxisLabel, getYAxisLabelWidth, labelOverhang} from '@components/Charts/utils'; import VictoryTheme, {CHART_CONTENT_MIN_HEIGHT, GLYPH_PADDING, LABEL_PADDING, LABEL_ROTATIONS, SIN_45} from '@components/Charts/VictoryTheme'; import useTheme from '@hooks/useTheme'; @@ -129,7 +129,7 @@ function LineChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = ' measurements, }); - const originalLabels = data.map((p) => p.label); + const originalLabels = data.map(getXAxisLabel); const {isCursorOverLabel, findLabelCursorX, updateTickPositions} = useLabelHitTesting({ fontManager, diff --git a/src/components/Charts/hooks/useChartLabelMeasurements.ts b/src/components/Charts/hooks/useChartLabelMeasurements.ts index eb9cb0e302a6..9d88d37befcf 100644 --- a/src/components/Charts/hooks/useChartLabelMeasurements.ts +++ b/src/components/Charts/hooks/useChartLabelMeasurements.ts @@ -1,5 +1,5 @@ import type {ChartDataPoint} from '@components/Charts/types'; -import {getFontLineMetrics, measureTextWidth} from '@components/Charts/utils'; +import {getFontLineMetrics, getXAxisLabel, measureTextWidth} from '@components/Charts/utils'; import {ELLIPSIS, MIN_TRUNCATED_CHARS} from '@components/Charts/VictoryTheme'; import type {SkTypefaceFontProvider} from '@shopify/react-native-skia'; @@ -15,22 +15,23 @@ function useChartLabelMeasurements(data: ChartDataPoint[], fontManager: SkTypefa const {ascent, descent} = getFontLineMetrics(fontManager, fontSize); const lineHeight = Math.abs(ascent) + Math.abs(descent); const ellipsisWidth = measureTextWidth(ELLIPSIS, fontManager, fontSize); - const labelWidths = data.map((point) => measureTextWidth(point.label, fontManager, fontSize)); + const labels = data.map(getXAxisLabel); + const labelWidths = labels.map((label) => measureTextWidth(label, fontManager, fontSize)); const maxLabelWidth = Math.max(...labelWidths); const firstLabelWidth = labelWidths.at(0) ?? 0; const lastLabelWidth = labelWidths.at(-1) ?? 0; const minTruncatedWidth = Math.max( - ...data.map((point, index) => { - if (point.label.length <= MIN_TRUNCATED_CHARS) { + ...labels.map((label, index) => { + if (label.length <= MIN_TRUNCATED_CHARS) { return labelWidths.at(index) ?? 0; } - return measureTextWidth(point.label.slice(0, MIN_TRUNCATED_CHARS) + ELLIPSIS, fontManager, fontSize); + return measureTextWidth(label.slice(0, MIN_TRUNCATED_CHARS) + ELLIPSIS, fontManager, fontSize); }), ); - const firstLabel = data.at(0)?.label ?? ''; - const lastLabel = data.at(-1)?.label ?? ''; + const firstLabel = labels.at(0) ?? ''; + const lastLabel = labels.at(-1) ?? ''; const firstMinTrunc = firstLabel.length <= MIN_TRUNCATED_CHARS ? firstLabelWidth : measureTextWidth(firstLabel.slice(0, MIN_TRUNCATED_CHARS) + ELLIPSIS, fontManager, fontSize); const lastMinTrunc = lastLabel.length <= MIN_TRUNCATED_CHARS ? lastLabelWidth : measureTextWidth(lastLabel.slice(0, MIN_TRUNCATED_CHARS) + ELLIPSIS, fontManager, fontSize); diff --git a/src/components/Charts/types/index.ts b/src/components/Charts/types/index.ts index 529a45556401..e220ec1162fa 100644 --- a/src/components/Charts/types/index.ts +++ b/src/components/Charts/types/index.ts @@ -4,9 +4,12 @@ import type {SkParagraph} from '@shopify/react-native-skia'; import type {ValueOf} from 'type-fest'; type ChartDataPoint = { - /** Label displayed under the data point (e.g., "Amazon", "Nov 2025") */ + /** Full label for the data point (e.g., "Amazon", "November 2025") */ label: string; + /** Compact label for the x-axis (e.g., "Nov ’25"). Defaults to `label`. */ + shortLabel?: string; + /** Total amount (pre-formatted, e.g., dollars not cents) */ total: number; diff --git a/src/components/Charts/utils/index.ts b/src/components/Charts/utils/index.ts index 0ed4c688edeb..692b073cc38a 100644 --- a/src/components/Charts/utils/index.ts +++ b/src/components/Charts/utils/index.ts @@ -257,6 +257,11 @@ function processDataIntoSlices( ).slices; } +/** Label to render on the x-axis for a data point: the compact one when provided, otherwise the full label. */ +function getXAxisLabel(point: ChartDataPoint): string { + return point.shortLabel ?? point.label; +} + /** Truncate `label` so its pixel width fits within `maxWidth`, adding ellipsis. */ function truncateLabel(label: string, labelWidth: number, maxWidth: number, ellipsisWidth: number): string { if (labelWidth <= maxWidth) { @@ -460,6 +465,7 @@ export { isAngleInSlice, findSliceAtPosition, processDataIntoSlices, + getXAxisLabel, truncateLabel, effectiveWidth, effectiveHeight, diff --git a/src/components/Search/SearchBarChart.tsx b/src/components/Search/SearchBarChart.tsx index 3556c4cc3113..ee5f66145356 100644 --- a/src/components/Search/SearchBarChart.tsx +++ b/src/components/Search/SearchBarChart.tsx @@ -9,7 +9,7 @@ import React from 'react'; import type {SearchChartProps} from './types'; -function SearchBarChart({data, getLabel, getFilterQuery, onItemPress, isLoading, unit, unitPosition}: SearchChartProps) { +function SearchBarChart({data, getLabel, getShortLabel, getFilterQuery, onItemPress, isLoading, unit, unitPosition}: SearchChartProps) { const {getCurrencyDecimals} = useCurrencyListActions(); const chartData: ChartDataPoint[] = data.map((item) => { const currency = item.currency ?? 'USD'; @@ -18,6 +18,7 @@ function SearchBarChart({data, getLabel, getFilterQuery, onItemPress, isLoading, return { label: getLabel(item), + shortLabel: getShortLabel?.(item), total: totalInDisplayUnits, }; }); diff --git a/src/components/Search/SearchChartView.tsx b/src/components/Search/SearchChartView.tsx index 69650d56bfb4..f5df6f65b5c4 100644 --- a/src/components/Search/SearchChartView.tsx +++ b/src/components/Search/SearchChartView.tsx @@ -54,7 +54,7 @@ function SearchChartView({queryJSON, view, groupBy, data, isLoading}: SearchChar const {preferredLocale} = useLocalize(); const {getCurrencySymbol} = useCurrencyListActions(); - const {getLabel, getFilterQuery} = CHART_GROUP_BY_CONFIG[groupBy]; + const {getLabel, getShortLabel, getFilterQuery} = CHART_GROUP_BY_CONFIG[groupBy]; const ChartComponent = CHART_VIEW_TO_COMPONENT[view]; const handleItemPress = (filterQuery: string) => { @@ -90,6 +90,7 @@ function SearchChartView({queryJSON, view, groupBy, data, isLoading}: SearchChar StringUtils.normalize(getLabel(item))} + getShortLabel={getShortLabel} getFilterQuery={getFilterQuery} onItemPress={handleItemPress} isLoading={isLoading} diff --git a/src/components/Search/SearchLineChart.tsx b/src/components/Search/SearchLineChart.tsx index 0e19a3755587..41a9424be910 100644 --- a/src/components/Search/SearchLineChart.tsx +++ b/src/components/Search/SearchLineChart.tsx @@ -9,7 +9,7 @@ import React from 'react'; import type {SearchChartProps} from './types'; -function SearchLineChart({data, getLabel, getFilterQuery, onItemPress, isLoading, unit, unitPosition}: SearchChartProps) { +function SearchLineChart({data, getLabel, getShortLabel, getFilterQuery, onItemPress, isLoading, unit, unitPosition}: SearchChartProps) { const {getCurrencyDecimals} = useCurrencyListActions(); const chartData: ChartDataPoint[] = data.map((item) => { const currency = item.currency ?? 'USD'; @@ -18,6 +18,7 @@ function SearchLineChart({data, getLabel, getFilterQuery, onItemPress, isLoading return { label: getLabel(item), + shortLabel: getShortLabel?.(item), total: totalInDisplayUnits, }; }); diff --git a/src/components/Search/SearchList/ListItem/types.ts b/src/components/Search/SearchList/ListItem/types.ts index 9baaa9850982..5ec6c2b87c44 100644 --- a/src/components/Search/SearchList/ListItem/types.ts +++ b/src/components/Search/SearchList/ListItem/types.ts @@ -420,6 +420,9 @@ type TransactionMonthGroupListItemType = TransactionGroupListItemType & {grouped /** Final and formatted "month" value used for displaying */ formattedMonth: string; + /** Compact "month" value used where space is tight, e.g. chart axis labels */ + shortFormattedMonth: string; + /** Key used for sorting */ sortKey: number; }; @@ -450,6 +453,9 @@ type TransactionTagGroupListItemType = TransactionGroupListItemType & {groupedBy type TransactionWeekGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.WEEK} & SearchWeekGroup & { /** Final and formatted "week" value used for displaying */ formattedWeek: string; + + /** Compact "week" value used where space is tight, e.g. chart axis labels */ + shortFormattedWeek: string; }; type TransactionYearGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.YEAR} & SearchYearGroup & { @@ -464,6 +470,9 @@ type TransactionQuarterGroupListItemType = TransactionGroupListItemType & {group /** Final and formatted "quarter" value used for displaying */ formattedQuarter: string; + /** Compact "quarter" value used where space is tight, e.g. chart axis labels */ + shortFormattedQuarter: string; + /** Sort key for sorting */ sortKey: number; }; diff --git a/src/components/Search/chartGroupByConfig.ts b/src/components/Search/chartGroupByConfig.ts index 9bc14e9acf0b..59e3f39f364f 100644 --- a/src/components/Search/chartGroupByConfig.ts +++ b/src/components/Search/chartGroupByConfig.ts @@ -17,8 +17,16 @@ import type { import type {GroupedItem, SearchGroupBy} from './types'; type ChartGroupByConfig = { + /** Name of the icon rendered next to the chart title */ titleIconName: 'Users' | 'CreditCard' | 'Send' | 'Folder' | 'Basket' | 'Tag' | 'Calendar'; + + /** Returns the full label for a group (e.g. "Amazon", "November 2025") */ getLabel: (item: GroupedItem) => string; + + /** Returns the compact label for chart axes, or undefined to fall back to `getLabel` */ + getShortLabel?: (item: GroupedItem) => string | undefined; + + /** Builds the query fragment appended to the current query to drill into a group's transactions */ getFilterQuery: (item: GroupedItem) => string; }; @@ -61,6 +69,7 @@ const CHART_GROUP_BY_CONFIG: Record = { [CONST.SEARCH.GROUP_BY.MONTH]: { titleIconName: 'Calendar', getLabel: (item: GroupedItem) => (item as TransactionMonthGroupListItemType).formattedMonth ?? '', + getShortLabel: (item: GroupedItem) => (item.groupedBy === CONST.SEARCH.GROUP_BY.MONTH ? item.shortFormattedMonth : undefined), getFilterQuery: (item: GroupedItem) => { const monthItem = item as TransactionMonthGroupListItemType; const {start, end} = DateUtils.getMonthDateRange(monthItem.year, monthItem.month); @@ -70,6 +79,7 @@ const CHART_GROUP_BY_CONFIG: Record = { [CONST.SEARCH.GROUP_BY.WEEK]: { titleIconName: 'Calendar', getLabel: (item: GroupedItem) => (item as TransactionWeekGroupListItemType).formattedWeek ?? '', + getShortLabel: (item: GroupedItem) => (item.groupedBy === CONST.SEARCH.GROUP_BY.WEEK ? item.shortFormattedWeek : undefined), getFilterQuery: (item: GroupedItem) => { const weekItem = item as TransactionWeekGroupListItemType; const {start, end} = DateUtils.getWeekDateRange(weekItem.week); @@ -88,6 +98,7 @@ const CHART_GROUP_BY_CONFIG: Record = { [CONST.SEARCH.GROUP_BY.QUARTER]: { titleIconName: 'Calendar', getLabel: (item: GroupedItem) => (item as TransactionQuarterGroupListItemType).formattedQuarter ?? '', + getShortLabel: (item: GroupedItem) => (item.groupedBy === CONST.SEARCH.GROUP_BY.QUARTER ? item.shortFormattedQuarter : undefined), getFilterQuery: (item: GroupedItem) => { const quarterItem = item as TransactionQuarterGroupListItemType; const {start, end} = DateUtils.getQuarterDateRange(quarterItem.year, quarterItem.quarter); diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts index 64ddbaedb3ed..a255ff30f41a 100644 --- a/src/components/Search/types.ts +++ b/src/components/Search/types.ts @@ -448,6 +448,9 @@ type SearchChartProps = { /** Function to extract label from grouped item */ getLabel: (item: GroupedItem) => string; + /** Function to extract the compact axis label from grouped item. When it returns undefined, `getLabel` is used. */ + getShortLabel?: (item: GroupedItem) => string | undefined; + /** Function to build filter query from grouped item */ getFilterQuery: (item: GroupedItem) => string; diff --git a/src/libs/DateUtils.ts b/src/libs/DateUtils.ts index 1ba4ee4e460e..2b5557532b9b 100644 --- a/src/libs/DateUtils.ts +++ b/src/libs/DateUtils.ts @@ -1118,6 +1118,20 @@ function isDateStringInMonth(dateString: string, year: number, month: number): b return datePart >= monthStart && datePart <= monthEnd; } +/** + * Returns a month label, e.g. "September 2025". + */ +function getFormattedMonthForSearch(year: number, month: number, dateFnsLocale: DateFnsLocale | undefined): string { + return format(new Date(year, month - 1, 1), 'MMMM yyyy', {locale: dateFnsLocale}); +} + +/** + * Returns a compact month label, e.g. "Sep ’25". + */ +function getShortFormattedMonthForSearch(year: number, month: number, dateFnsLocale: DateFnsLocale | undefined): string { + return format(new Date(year, month - 1, 1), 'MMM ’yy', {locale: dateFnsLocale}); +} + /** * Returns a formatted date range. */ @@ -1133,6 +1147,19 @@ function getFormattedDateRangeForSearch(startDate: string, endDate: string, date return `${format(start, 'MMM d', {locale: dateFnsLocale})} - ${format(end, 'MMM d, yyyy', {locale: dateFnsLocale})}`; } +/** + * Returns a compact date range, e.g. "Sep 1 - 7 ’25". + */ +function getShortFormattedDateRangeForSearch(startDate: string, endDate: string, dateFnsLocale: DateFnsLocale | undefined): string { + const start = parse(startDate, 'yyyy-MM-dd', new Date()); + const end = parse(endDate, 'yyyy-MM-dd', new Date()); + if (!isSameYear(start, end)) { + return `${format(start, 'MMM d ’yy', {locale: dateFnsLocale})} - ${format(end, 'MMM d ’yy', {locale: dateFnsLocale})}`; + } + const formattedEnd = isSameMonth(start, end) ? format(end, 'd ’yy', {locale: dateFnsLocale}) : format(end, 'MMM d ’yy', {locale: dateFnsLocale}); + return `${format(start, 'MMM d', {locale: dateFnsLocale})} - ${formattedEnd}`; +} + function getYearDateRange(year: number): {start: string; end: string} { return { start: `${year}-01-01`, @@ -1163,6 +1190,13 @@ function getFormattedQuarterForSearch(year: number, quarter: number, dateFnsLoca return `Q${quarter} ${year} (${format(quarterStart, 'MMM d', {locale: dateFnsLocale})} - ${format(quarterEnd, 'MMM d', {locale: dateFnsLocale})})`; } +/** + * Returns a compact quarter label, e.g. "Q3 ’25". + */ +function getShortFormattedQuarterForSearch(year: number, quarter: number): string { + return `Q${quarter} ’${String(year).slice(-2)}`; +} + function getNextNthOfMonth(nth: number) { const now = new Date(); const year = now.getFullYear(); @@ -1246,10 +1280,14 @@ const DateUtils = { getMonthDateRange, getWeekDateRange, isDateStringInMonth, + getFormattedMonthForSearch, + getShortFormattedMonthForSearch, getFormattedDateRangeForSearch, + getShortFormattedDateRangeForSearch, getYearDateRange, getQuarterDateRange, getFormattedQuarterForSearch, + getShortFormattedQuarterForSearch, getNextNthOfMonth, }; diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index 38a4d2093515..f95c3d3b56c8 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -3726,16 +3726,14 @@ function getMonthSections( queryJSON && monthGroup.year && monthGroup.month ? buildDateRangeGroupQuery(queryJSON, DateUtils.getMonthDateRange(monthGroup.year, monthGroup.month)) : undefined; const transactionsQueryJSON = dateResult?.transactionsQueryJSON; - const monthDate = new Date(monthGroup.year, monthGroup.month - 1, 1); - const formattedMonth = format(monthDate, 'MMMM yyyy', {locale: dateFnsLocale}); - monthSections[key] = { groupedBy: CONST.SEARCH.GROUP_BY.MONTH, transactions: [], transactionsQueryJSON, keyForList: key, ...monthGroup, - formattedMonth, + formattedMonth: DateUtils.getFormattedMonthForSearch(monthGroup.year, monthGroup.month, dateFnsLocale), + shortFormattedMonth: DateUtils.getShortFormattedMonthForSearch(monthGroup.year, monthGroup.month, dateFnsLocale), sortKey: monthGroup.year * 100 + monthGroup.month, }; } @@ -3764,7 +3762,10 @@ function getWeekSections( const rawRange = DateUtils.getWeekDateRange(weekGroup.week); const dateResult = queryJSON && weekGroup.week ? buildDateRangeGroupQuery(queryJSON, rawRange) : undefined; const transactionsQueryJSON = dateResult?.transactionsQueryJSON; - const formattedWeek = DateUtils.getFormattedDateRangeForSearch(dateResult?.start ?? rawRange.start, dateResult?.end ?? rawRange.end, dateFnsLocale); + const weekStart = dateResult?.start ?? rawRange.start; + const weekEnd = dateResult?.end ?? rawRange.end; + const formattedWeek = DateUtils.getFormattedDateRangeForSearch(weekStart, weekEnd, dateFnsLocale); + const shortFormattedWeek = DateUtils.getShortFormattedDateRangeForSearch(weekStart, weekEnd, dateFnsLocale); weekSections[key] = { groupedBy: CONST.SEARCH.GROUP_BY.WEEK, @@ -3772,6 +3773,7 @@ function getWeekSections( transactionsQueryJSON, ...weekGroup, formattedWeek, + shortFormattedWeek, keyForList: key, }; } @@ -3830,6 +3832,7 @@ function getQuarterSections( ? buildDateRangeGroupQuery(queryJSON, DateUtils.getQuarterDateRange(quarterGroup.year, quarterGroup.quarter))?.transactionsQueryJSON : undefined; const formattedQuarter = DateUtils.getFormattedQuarterForSearch(quarterGroup.year, quarterGroup.quarter, dateFnsLocale); + const shortFormattedQuarter = DateUtils.getShortFormattedQuarterForSearch(quarterGroup.year, quarterGroup.quarter); quarterSections[key] = { groupedBy: CONST.SEARCH.GROUP_BY.QUARTER, @@ -3837,6 +3840,7 @@ function getQuarterSections( transactionsQueryJSON, ...quarterGroup, formattedQuarter, + shortFormattedQuarter, sortKey: quarterGroup.year * 10 + quarterGroup.quarter, // Sort by year*10 + quarter (e.g., 20241, 20242, etc.) keyForList: key, }; diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts index c8690c37bda4..39ccc75726fc 100644 --- a/tests/unit/Search/SearchUIUtilsTest.ts +++ b/tests/unit/Search/SearchUIUtilsTest.ts @@ -3600,6 +3600,7 @@ describe('SearchUIUtils', () => { total: 250, groupedBy: CONST.SEARCH.GROUP_BY.MONTH, formattedMonth: 'January 2026', + shortFormattedMonth: 'Jan ’26', sortKey: 202601, transactions: [], transactionsQueryJSON: undefined, @@ -3613,6 +3614,7 @@ describe('SearchUIUtils', () => { total: 75, groupedBy: CONST.SEARCH.GROUP_BY.MONTH, formattedMonth: 'December 2025', + shortFormattedMonth: 'Dec ’25', sortKey: 202512, transactions: [], transactionsQueryJSON: undefined, @@ -3713,6 +3715,7 @@ describe('SearchUIUtils', () => { total: 250, groupedBy: CONST.SEARCH.GROUP_BY.MONTH, formattedMonth: 'January 2026', + shortFormattedMonth: 'Jan ’26', sortKey: 202601, transactions: [], transactionsQueryJSON: undefined, @@ -3730,6 +3733,7 @@ describe('SearchUIUtils', () => { total: 250, groupedBy: CONST.SEARCH.GROUP_BY.WEEK, formattedWeek: 'Jan 25 - Jan 31, 2026', + shortFormattedWeek: 'Jan 25 - 31 ’26', transactions: [], transactionsQueryJSON: undefined, keyForList: '2026-01-25-01-25', @@ -4190,6 +4194,7 @@ describe('SearchUIUtils', () => { total: 250, groupedBy: CONST.SEARCH.GROUP_BY.QUARTER, formattedQuarter: 'Q1 2026 (Jan 1 - Mar 31)', + shortFormattedQuarter: 'Q1 ’26', sortKey: 20261, transactions: [], transactionsQueryJSON: undefined, @@ -4203,6 +4208,7 @@ describe('SearchUIUtils', () => { total: 75, groupedBy: CONST.SEARCH.GROUP_BY.QUARTER, formattedQuarter: 'Q4 2025 (Oct 1 - Dec 31)', + shortFormattedQuarter: 'Q4 ’25', sortKey: 20254, transactions: [], transactionsQueryJSON: undefined, @@ -4303,6 +4309,7 @@ describe('SearchUIUtils', () => { total: 250, groupedBy: CONST.SEARCH.GROUP_BY.QUARTER, formattedQuarter: 'Q1 2026 (Jan 1 - Mar 31)', + shortFormattedQuarter: 'Q1 ’26', sortKey: 20261, transactions: [], transactionsQueryJSON: undefined, @@ -4320,6 +4327,7 @@ describe('SearchUIUtils', () => { total: 250, groupedBy: CONST.SEARCH.GROUP_BY.WEEK, formattedWeek: 'Jan 25 - Jan 31, 2026', + shortFormattedWeek: 'Jan 25 - 31 ’26', transactions: [], transactionsQueryJSON: undefined, keyForList: 'group_2026-01-25', @@ -4331,6 +4339,7 @@ describe('SearchUIUtils', () => { total: 75, groupedBy: CONST.SEARCH.GROUP_BY.WEEK, formattedWeek: 'Dec 21 - Dec 27, 2025', + shortFormattedWeek: 'Dec 21 - 27 ’25', transactions: [], transactionsQueryJSON: undefined, keyForList: 'group_2025-12-21', diff --git a/tests/unit/Search/useInsightDataTest.ts b/tests/unit/Search/useInsightDataTest.ts index b3e098b85c0e..88bc92406eef 100644 --- a/tests/unit/Search/useInsightDataTest.ts +++ b/tests/unit/Search/useInsightDataTest.ts @@ -51,6 +51,7 @@ const makeData = (count: number): GroupedItem[] => total: 0, currency: CONST.CURRENCY.USD, formattedMonth: `Month ${i + 1}`, + shortFormattedMonth: `M${i + 1}`, sortKey: i, }));