Merge pull request #586 from adobe/clamoureux/axisSecondGranularity

feat: switch primary label for second granularity to minutes

Author: tanugarg04

packages/react-spectrum-charts/src/stories/components/Axis/Axis.test.tsx

@@ -73,19 +73,27 @@ describe('Axis', () => {
 			const chart = await findChart();
 			expect(chart).toBeInTheDocument();
 
-			expect(screen.getByText('Dec 2')).toBeInTheDocument();
-			const timeLabels = screen.getAllByText(/\d+:\d+:\d+ [AP]M/);
+			// Check for minute-based time labels (primary label)
+			const timeLabels = screen.getAllByText(/\d+:\d+ [AP]M/);
 			expect(timeLabels.length).toBeGreaterThan(0);
+			
+			// Check for second labels (secondary label)
+			const secondLabels = screen.getAllByText(/^\d{1,2}$/);  // Just digits for seconds
+			expect(secondLabels.length).toBeGreaterThan(0);
 		});
 
 		test('Second renders properly', async () => {
 			render(<SecondGranularity {...SecondGranularity.args} />);
 			const chart = await findChart();
 			expect(chart).toBeInTheDocument();
 
-			expect(screen.getByText('Dec 2')).toBeInTheDocument();
-			const timeLabels = screen.getAllByText(/\d+:\d+:\d+ [AP]M/);
+			// Check for minute-based time labels (primary label)
+			const timeLabels = screen.getAllByText(/\d+:\d+ [AP]M/);
 			expect(timeLabels.length).toBeGreaterThan(0);
+			
+			// Check for second labels (secondary label)
+			const secondLabels = screen.getAllByText(/^\d{1,2}$/);  // Just digits for seconds
+			expect(secondLabels.length).toBeGreaterThan(0);
 		});
 
 		test('Minute renders properly', async () => {
@@ -162,10 +170,13 @@ describe('Axis', () => {
 			const chart = await findChart();
 			expect(chart).toBeInTheDocument();
 
-			// Day and time are in the same label for this configuration.
-			expect(screen.getByText(/Dec 2.+\d+:\d+:\d+ [AP]M/)).toBeInTheDocument();
-			const timeLabels = screen.getAllByText(/\d+:\d+:\d+ [AP]M/);
+			// Check for time labels (minutes)
+			const timeLabels = screen.getAllByText(/\d+:\d+ [AP]M/);
 			expect(timeLabels.length).toBeGreaterThan(0);
+			
+			// Check for second labels
+			const secondLabels = screen.getAllByText(/^\d{1,2}$/);
+			expect(secondLabels.length).toBeGreaterThan(0);
 		});
 
 		test('Minute renders properly', async () => {

packages/vega-spec-builder/src/axis/axisLabelUtils.ts

@@ -48,7 +48,7 @@ export const getTimeLabelFormats = (
 ): { secondaryLabelFormat: string; primaryLabelFormat: string; tickCount: TickCount } => {
 	switch (granularity) {
 		case 'second':
-			return { secondaryLabelFormat: '%-I:%M:%S %p', primaryLabelFormat: '%b %-d', tickCount: 'second' };
+			return { secondaryLabelFormat: '%S', primaryLabelFormat: '%-I:%M %p', tickCount: 'second' };
 		case 'minute':
 			return { secondaryLabelFormat: '%-I:%M %p', primaryLabelFormat: '%b %-d', tickCount: 'minute' };
 		case 'hour':