Merge pull request #112 from adobe/gridDensity

feat: update the ideal tick marks to be less dense

Author: Bryant-Curtis

src/specBuilder/axis/axisUtils.test.ts

@@ -64,7 +64,7 @@ describe('getDefaultAxis()', () => {
 			grid: true,
 			ticks: false,
 			tickCount: {
-				signal: 'clamp(ceil(height/60), 2, 10)',
+				signal: 'clamp(ceil(height/100), 2, 10)',
 			},
 			tickMinStep: 5,
 			title: 'Users',
@@ -127,7 +127,7 @@ describe('getDefaultAxis()', () => {
 			grid: true,
 			ticks: false,
 			tickCount: {
-				signal: 'clamp(ceil(height/60), 2, 10)',
+				signal: 'clamp(ceil(height/100), 2, 10)',
 			},
 			tickMinStep: undefined,
 			title: 'Users',

src/specBuilder/axis/axisUtils.ts

@@ -278,9 +278,9 @@ const getDefaultOpposingScaleNameFromPosition = (position: Position) => {
 export const getTickCount = (position: Position, grid: boolean): SignalRef | undefined => {
 	if (!grid) return;
 	const range = ['top', 'bottom'].includes(position) ? 'width' : 'height';
-	// divide the range by 60 to get the ideal number of ticks (grid lines)
+	// divide the range by 100 to get the ideal number of ticks (grid lines)
 	// clamp axis tick count to a min of 2 and max of 10
-	return { signal: `clamp(ceil(${range}/60), 2, 10)` };
+	return { signal: `clamp(ceil(${range}/100), 2, 10)` };
 };
 
 /**

src/stories/Chart.test.tsx

@@ -56,23 +56,23 @@ describe('Chart', () => {
 			expect(chart).toBeInTheDocument();
 
 			expect(screen.getByText('nov.')).toBeInTheDocument();
-			expect(screen.getByText('2 000,00')).toBeInTheDocument();
+			expect(screen.getByText('5 000,00')).toBeInTheDocument();
 		});
 		test('Locale sets the time and number format correctly for de-DE', async () => {
 			render(<Locale {...Locale.args} locale="de-DE" />);
 			const chart = await findChart();
 			expect(chart).toBeInTheDocument();
 
 			expect(screen.getByText('Nov')).toBeInTheDocument();
-			expect(screen.getByText('2.000,00')).toBeInTheDocument();
+			expect(screen.getByText('5.000,00')).toBeInTheDocument();
 		});
 		test('Locale sets the time and number format correctly for en-US', async () => {
 			render(<Locale {...Locale.args} locale="en-US" />);
 			const chart = await findChart();
 			expect(chart).toBeInTheDocument();
 
 			expect(screen.getByText('Nov')).toBeInTheDocument();
-			expect(screen.getByText('2,000.00')).toBeInTheDocument();
+			expect(screen.getByText('5,000.00')).toBeInTheDocument();
 		});
 	});