WOOA7S-534: Show ticks for day (#45390)

* WOOA7S-534: Show ticks in hours when the interval is < 24 hours.

* changelog

Author: halfo

projects/js-packages/charts/changelog/update-WOOA7S-534-show-ticks-for-day

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Show ticks in hours when the interval is less than 24 hours.

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

@@ -5,6 +5,7 @@ import { scaleTime } from '@visx/scale';
 import { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
+import { differenceInHours } from 'date-fns';
 import { useMemo, useContext, forwardRef, useImperativeHandle, useState, useRef } from 'react';
 import {
 	useXYChartTheme,
@@ -108,9 +109,18 @@ const formatDateTick = ( timestamp: number ) => {
 	} );
 };
 
+const formatHourTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
+	return date.toLocaleTimeString( undefined, {
+		hour: 'numeric',
+		hour12: true,
+	} );
+};
+
 const guessOptimalNumTicks = (
 	data: ReturnType< typeof useChartDataTransform >,
-	chartWidth: number
+	chartWidth: number,
+	tickFormatter: ( timestamp: number ) => string
 ) => {
 	const minX = Math.min( ...data.map( datom => datom.data.at( 0 )?.date ) );
 	const maxX = Math.max( ...data.map( datom => datom.data.at( -1 )?.date ) );
@@ -121,7 +131,7 @@ const guessOptimalNumTicks = (
 	let secondBestGuess = 1; // a tick number that's no greater than upperBound
 
 	for ( let numTicks = upperBound; numTicks > 1; --numTicks ) {
-		const ticks = xScale.ticks( numTicks ).map( d => formatDateTick( d.getTime() ) );
+		const ticks = xScale.ticks( numTicks ).map( d => tickFormatter( d.getTime() ) );
 
 		// The .ticks() function doesn't properly respect the requested number of ticks, so we need to check the length
 		if ( ticks.length > upperBound ) {
@@ -268,12 +278,19 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		} );
 
 		const chartOptions = useMemo( () => {
+			const minX = Math.min( ...dataSorted.map( datom => datom.data.at( 0 )?.date ) );
+			const maxX = Math.max( ...dataSorted.map( datom => datom.data.at( -1 )?.date ) );
+			const diffInHours = Math.abs( differenceInHours( maxX, minX ) );
+
+			// Show the difference in hours if less than 24 hours; otherwise, display the date.
+			const formatter = diffInHours <= 24 ? formatHourTick : formatDateTick;
+
 			return {
 				axis: {
 					x: {
 						orientation: 'bottom' as const,
-						numTicks: guessOptimalNumTicks( dataSorted, width ),
-						tickFormat: formatDateTick,
+						numTicks: guessOptimalNumTicks( dataSorted, width, formatter ),
+						tickFormat: formatter,
 						...options?.axis?.x,
 					},
 					y: {

projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx

@@ -367,25 +367,25 @@ describe( 'LineChart', () => {
 	} );
 
 	describe( 'X-Axis Ticks', () => {
-		test( 'renders only one tick.', () => {
+		test( 'renders ticks in hours.', () => {
 			renderWithTheme( {
 				width: 800,
 				data: [
 					{
 						label: 'Series A',
 						data: [
-							{ date: new Date( '2024-01-01' ), value: 10 },
-							{ date: new Date( '2024-01-01' ), value: 20 },
-							{ date: new Date( '2024-01-01' ), value: 30 },
-							{ date: new Date( '2024-01-01' ), value: 40 },
-							{ date: new Date( '2024-01-01' ), value: 50 },
+							{ date: new Date( '2024-01-01:1:' ), value: 10 },
+							{ date: new Date( '2024-01-01:3:' ), value: 20 },
+							{ date: new Date( '2024-01-01:5:' ), value: 30 },
+							{ date: new Date( '2024-01-01:7:' ), value: 40 },
+							{ date: new Date( '2024-01-01:23:' ), value: 50 },
 						],
 					},
 				],
 			} );
 
-			const ticks = screen.getAllByText( /Jan \d+/ );
-			expect( ticks ).toHaveLength( 1 );
+			const ticks = screen.getAllByText( /\d+ [AM|PM]/ );
+			expect( ticks.length ).toBeGreaterThan( 1 );
 		} );
 
 		test( 'renders optimal number of ticks.', () => {