Merge pull request #585 from adobe/clamoureux/axisSecondGranularity

Second granularity for axis

Author: c-lamoureux

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

@@ -204,6 +204,26 @@ Time.args = {
 	labelAlign: 'center',
 };
 
+const SecondGranularity = bindWithProps(TimeAxisBarStory);
+SecondGranularity.args = {
+	granularity: 'second',
+	position: 'bottom',
+	baseline: true,
+	labelFormat: 'time',
+	ticks: true,
+	labelAlign: 'center',
+};
+
+const SecondGranularityLine = bindWithProps(TimeAxisStory);
+SecondGranularityLine.args = {
+	granularity: 'second',
+	position: 'bottom',
+	baseline: true,
+	labelFormat: 'time',
+	ticks: true,
+	labelAlign: 'center',
+};
+
 const SubLabels = bindWithProps(SubLabelStory);
 SubLabels.args = {
 	position: 'bottom',
@@ -317,6 +337,16 @@ CurrencyFormatSpecifier.args = {
 	title: 'Conversion Rate',
 };
 
+const VerticalSecondGranularity = bindWithProps(VerticalTimeAxisStory);
+VerticalSecondGranularity.args = {
+	granularity: 'second',
+	position: 'left',
+	baseline: true,
+	labelFormat: 'time',
+	ticks: true,
+	labelAlign: 'center',
+};
+
 export {
 	Basic,
 	ControlledLabels,
@@ -325,12 +355,15 @@ export {
 	MultilineTitle,
 	NonLinearAxis,
 	NumberFormat,
+	SecondGranularity,
+	SecondGranularityLine,
 	SubLabels,
 	TickMinStep,
 	Time,
+	VerticalSecondGranularity,
+	VerticalTimeAxis,
 	YearGranularity,
 	TruncateLabels,
-	VerticalTimeAxis,
 	CurrencyLocale,
 	CurrencyFormatSpecifier,
 };

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

@@ -19,9 +19,12 @@ import {
 	MultilineTitle,
 	NonLinearAxis,
 	NumberFormat,
+	SecondGranularity,
+	SecondGranularityLine,
 	SubLabels,
 	TickMinStep,
 	Time,
+	VerticalSecondGranularity,
 	VerticalTimeAxis,
 } from './Axis.story';
 
@@ -65,6 +68,26 @@ describe('Axis', () => {
 	});
 
 	describe('Time axis', () => {
+		test('Second renders properly with line', async () => {
+			render(<SecondGranularityLine {...SecondGranularityLine.args} />);
+			const chart = await findChart();
+			expect(chart).toBeInTheDocument();
+
+			expect(screen.getByText('Dec 2')).toBeInTheDocument();
+			const timeLabels = screen.getAllByText(/\d+:\d+:\d+ [AP]M/);
+			expect(timeLabels.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/);
+			expect(timeLabels.length).toBeGreaterThan(0);
+		});
+
 		test('Minute renders properly', async () => {
 			render(<Time {...Time.args} granularity="minute" />);
 			const chart = await findChart();
@@ -134,6 +157,17 @@ describe('Axis', () => {
 	});
 
 	describe('Vertical time axis', () => {
+		test('Second renders properly', async () => {
+			render(<VerticalSecondGranularity {...VerticalSecondGranularity.args} />);
+			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/);
+			expect(timeLabels.length).toBeGreaterThan(0);
+		});
+
 		test('Minute renders properly', async () => {
 			render(<VerticalTimeAxis {...VerticalTimeAxis.args} granularity="minute" />);
 			const chart = await findChart();

packages/react-spectrum-charts/src/stories/components/Axis/timeData.json

@@ -1,4 +1,36 @@
 {
+	"second": [
+		{ "datetime": 1670005800000, "value": 5723, "series": "Downloads" },
+		{ "datetime": 1670005801000, "value": 6245, "series": "Downloads" },
+		{ "datetime": 1670005802000, "value": 7102, "series": "Downloads" },
+		{ "datetime": 1670005803000, "value": 4587, "series": "Downloads" },
+		{ "datetime": 1670005804000, "value": 3214, "series": "Downloads" },
+		{ "datetime": 1670005805000, "value": 5698, "series": "Downloads" },
+		{ "datetime": 1670005806000, "value": 6321, "series": "Downloads" },
+		{ "datetime": 1670005807000, "value": 4578, "series": "Downloads" },
+		{ "datetime": 1670005808000, "value": 5214, "series": "Downloads" },
+		{ "datetime": 1670005809000, "value": 6874, "series": "Downloads" },
+		{ "datetime": 1670005810000, "value": 5321, "series": "Downloads" },
+		{ "datetime": 1670005811000, "value": 4562, "series": "Downloads" },
+		{ "datetime": 1670005812000, "value": 5478, "series": "Downloads" },
+		{ "datetime": 1670005813000, "value": 6547, "series": "Downloads" },
+		{ "datetime": 1670005814000, "value": 4578, "series": "Downloads" },
+		{ "datetime": 1670005815000, "value": 5214, "series": "Downloads" },
+		{ "datetime": 1670005816000, "value": 6325, "series": "Downloads" },
+		{ "datetime": 1670005817000, "value": 5421, "series": "Downloads" },
+		{ "datetime": 1670005818000, "value": 4587, "series": "Downloads" },
+		{ "datetime": 1670005819000, "value": 5123, "series": "Downloads" },
+		{ "datetime": 1670005820000, "value": 6421, "series": "Downloads" },
+		{ "datetime": 1670005821000, "value": 5478, "series": "Downloads" },
+		{ "datetime": 1670005822000, "value": 4536, "series": "Downloads" },
+		{ "datetime": 1670005823000, "value": 5874, "series": "Downloads" },
+		{ "datetime": 1670005824000, "value": 6523, "series": "Downloads" },
+		{ "datetime": 1670005825000, "value": 5784, "series": "Downloads" },
+		{ "datetime": 1670005826000, "value": 4563, "series": "Downloads" },
+		{ "datetime": 1670005827000, "value": 5213, "series": "Downloads" },
+		{ "datetime": 1670005828000, "value": 6478, "series": "Downloads" },
+		{ "datetime": 1670005829000, "value": 5123, "series": "Downloads" }
+	],
 	"minute": [
 		{ "datetime": 1670005860000, "value": 3151, "series": "Downloads" },
 		{ "datetime": 1670005920000, "value": 8618, "series": "Downloads" },

packages/vega-spec-builder/src/area/areaSpecBuilder.test.ts

@@ -71,7 +71,7 @@ const defaultSpec = initializeSpec({
 					as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 					field: DEFAULT_TIME_DIMENSION,
 					type: 'timeunit',
-					units: ['year', 'month', 'date', 'hours', 'minutes'],
+					units: ['year', 'month', 'date', 'hours', 'minutes', 'seconds'],
 				},
 			],
 			values: [],

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

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

packages/vega-spec-builder/src/bar/barSpecBuilder.test.ts

@@ -148,7 +148,7 @@ const timeTransform: Transforms[] = [
 		as: ['datetime0', 'datetime1'],
 		field: 'browser',
 		type: 'timeunit',
-		units: ['year', 'month', 'date', 'hours', 'minutes'],
+		units: ['year', 'month', 'date', 'hours', 'minutes', 'seconds'],
 	},
 ];
 

packages/vega-spec-builder/src/data/dataUtils.test.ts

@@ -26,7 +26,7 @@ describe('addTimeTransform()', () => {
 			{
 				type: 'timeunit',
 				field: dimension,
-				units: ['year', 'month', 'date', 'hours', 'minutes'],
+				units: ['year', 'month', 'date', 'hours', 'minutes', 'seconds'],
 				as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 			},
 		];

packages/vega-spec-builder/src/data/dataUtils.ts

@@ -32,7 +32,7 @@ export const addTimeTransform = produce<Transforms[], [string]>((transforms, dim
 		transforms.push({
 			type: 'timeunit',
 			field: dimension,
-			units: ['year', 'month', 'date', 'hours', 'minutes'],
+			units: ['year', 'month', 'date', 'hours', 'minutes', 'seconds'],
 			as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 		});
 	}

packages/vega-spec-builder/src/line/lineSpecBuilder.test.ts

@@ -76,7 +76,7 @@ const defaultSpec = initializeSpec({
 					as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 					field: DEFAULT_TIME_DIMENSION,
 					type: 'timeunit',
-					units: ['year', 'month', 'date', 'hours', 'minutes'],
+					units: ['year', 'month', 'date', 'hours', 'minutes', 'seconds'],
 				},
 			],
 			values: [],

packages/vega-spec-builder/src/types/axis/axisSpec.types.ts

@@ -16,7 +16,7 @@ import { NumberFormat, Orientation, PartiallyRequired, Position } from '../specU
 import { AxisAnnotationOptions } from './axisAnnotationSpec.types';
 import { ReferenceLineOptions } from './referenceLineSpec.types';
 
-export type Granularity = 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
+export type Granularity = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
 /**
  * `center` will set the align to `center` for horizontal axes and the baseline to `middle` for vertical axes.
  *