Merge pull request #594 from adobe/clamoureux/secondGranularityColon

feat: added colon prefix to second granularity labels

Author: Bryant-Curtis

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

@@ -77,8 +77,8 @@ describe('Axis', () => {
 			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
+			// Check for second labels (secondary label) with colon prefix
+			const secondLabels = screen.getAllByText(/^:\d{1,2}$/);  // Colon followed by digits for seconds
 			expect(secondLabels.length).toBeGreaterThan(0);
 		});
 
@@ -91,8 +91,8 @@ describe('Axis', () => {
 			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
+			// Check for second labels (secondary label) with colon prefix
+			const secondLabels = screen.getAllByText(/^:\d{1,2}$/);  // Colon followed by digits for seconds
 			expect(secondLabels.length).toBeGreaterThan(0);
 		});
 
@@ -174,8 +174,8 @@ describe('Axis', () => {
 			const timeLabels = screen.getAllByText(/\d+:\d+ [AP]M/);
 			expect(timeLabels.length).toBeGreaterThan(0);
 
-			// Check for second labels
-			const secondLabels = screen.getAllByText(/^\d{1,2}$/);
+			// Check for second labels with colon prefix
+			const secondLabels = screen.getAllByText(/^:\d{1,2}$/);
 			expect(secondLabels.length).toBeGreaterThan(0);
 		});
 

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: '%S', primaryLabelFormat: '%-I:%M %p', 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':