Merge pull request #442 from adobe/removePadding

feat: remove 32 padding on linear dimension scales

Author: marshallpete

package.json

@@ -70,8 +70,8 @@
 		"sonar-fork-pr": "node ./scripts/runSonarOnFork.js",
 		"start": "yarn storybook",
 		"storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6009",
-		"test": "cross-env BABEL_ENV=test jest",
-		"watch": "cross-env BABEL_ENV=test jest --watch",
+		"test": "cross-env TZ=UTC BABEL_ENV=test jest",
+		"watch": "cross-env TZ=UTC BABEL_ENV=test jest --watch",
 		"skulk": "yarn watch --silent"
 	},
 	"devDependencies": {

src/constants.ts

@@ -78,7 +78,7 @@ export const CORNER_RADIUS = 6;
 // padding constants
 export const DISCRETE_PADDING = 0.5;
 export const PADDING_RATIO = 0.4;
-export const LINEAR_PADDING = 32;
+export const LINEAR_PADDING = 0;
 export const TRELLIS_PADDING = 0.2;
 
 // donut constants

src/specBuilder/area/areaSpecBuilder.test.ts

@@ -24,6 +24,7 @@ import {
 	FILTERED_TABLE,
 	HIGHLIGHTED_ITEM,
 	HIGHLIGHTED_SERIES,
+	LINEAR_PADDING,
 	MARK_ID,
 	SELECTED_GROUP,
 	SELECTED_ITEM,
@@ -131,7 +132,7 @@ const defaultSpec = initializeSpec({
 		{
 			domain: { data: FILTERED_TABLE, fields: [DEFAULT_TRANSFORMED_TIME_DIMENSION] },
 			name: 'xTime',
-			padding: 32,
+			padding: LINEAR_PADDING,
 			range: 'width',
 			type: 'time',
 		},
@@ -150,7 +151,7 @@ const defaultSpec = initializeSpec({
 const defaultLinearScale = {
 	domain: { data: FILTERED_TABLE, fields: [DEFAULT_TIME_DIMENSION] },
 	name: 'xLinear',
-	padding: 32,
+	padding: LINEAR_PADDING,
 	range: 'width',
 	type: 'linear',
 };

src/specBuilder/line/lineSpecBuilder.test.ts

@@ -26,6 +26,7 @@ import {
 	FILTERED_TABLE,
 	HIGHLIGHTED_ITEM,
 	HIGHLIGHTED_SERIES,
+	LINEAR_PADDING,
 	MARK_ID,
 	SERIES_ID,
 	TABLE,
@@ -124,7 +125,7 @@ const defaultSpec = initializeSpec({
 		{
 			domain: { data: FILTERED_TABLE, fields: [DEFAULT_TRANSFORMED_TIME_DIMENSION] },
 			name: 'xTime',
-			padding: 32,
+			padding: LINEAR_PADDING,
 			range: 'width',
 			type: 'time',
 		},
@@ -143,7 +144,7 @@ const defaultSpec = initializeSpec({
 const defaultLinearScale = {
 	domain: { data: FILTERED_TABLE, fields: [DEFAULT_TIME_DIMENSION] },
 	name: 'xLinear',
-	padding: 32,
+	padding: LINEAR_PADDING,
 	range: 'width',
 	type: 'linear',
 };

src/specBuilder/scale/scaleSpecBuilder.test.ts

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { COLOR_SCALE, DEFAULT_COLOR } from '@constants';
+import { COLOR_SCALE, DEFAULT_COLOR, LINEAR_PADDING } from '@constants';
 import { OrdinalScale, Scale } from 'vega';
 
 import {
@@ -49,12 +49,12 @@ describe('addDomainFields()', () => {
 describe('getPadding()', () => {
 	test('time', () => {
 		expect(getPadding('time')).toStrictEqual({
-			padding: 32,
+			padding: LINEAR_PADDING,
 		});
 	});
 	test('linear', () => {
 		expect(getPadding('time')).toStrictEqual({
-			padding: 32,
+			padding: LINEAR_PADDING,
 		});
 	});
 	test('point', () => {

src/stories/ChartExamples/FeatureMatrix/FeatureMatrix.test.tsx

@@ -45,7 +45,7 @@ describe('FeatureMatrix', () => {
 		// horizontal trendline
 		const horizontalTrendline = await findMarksByGroupName(chart, 'scatter0Trendline0', 'line');
 		expect(horizontalTrendline).toBeInTheDocument();
-		expect(horizontalTrendline).toHaveAttribute('x2', '452');
+		expect(horizontalTrendline).toHaveAttribute('x2', '448');
 		expect(horizontalTrendline).toHaveAttribute('y2', '0');
 		expect(horizontalTrendline).toHaveAttribute('stroke', colors['gray-900']);
 		expect(horizontalTrendline).toHaveAttribute('stroke-width', '1');

src/stories/components/Axis/Axis.story.tsx

@@ -55,7 +55,7 @@ const AxisStory: StoryFn<typeof Axis> = (args): ReactElement => {
 };
 
 const TimeAxisStory: StoryFn<typeof Axis> = (args): ReactElement => {
-	const chartProps = useChartProps({ data: timeData[args.granularity ?? DEFAULT_GRANULARITY], width: 'auto' });
+	const chartProps = useChartProps({ data: timeData[args.granularity ?? DEFAULT_GRANULARITY], width: 600 });
 	return (
 		<Chart {...chartProps}>
 			<Axis {...args} />

src/stories/components/Axis/Axis.test.tsx

@@ -99,8 +99,8 @@ describe('Axis', () => {
 			expect(chart).toBeInTheDocument();
 
 			// make sure labels are visible
-			expect(screen.getByText('11')).toBeInTheDocument();
-			expect(screen.getByText('Sep')).toBeInTheDocument();
+			expect(await screen.findByText('18')).toBeInTheDocument();
+			expect(await screen.findByText('Sep')).toBeInTheDocument();
 		});
 
 		test('Month renders properly', async () => {
@@ -109,8 +109,8 @@ describe('Axis', () => {
 			expect(chart).toBeInTheDocument();
 
 			// make sure labels are visible
-			expect(screen.getByText('Jan')).toBeInTheDocument();
-			expect(screen.getByText('2022')).toBeInTheDocument();
+			expect(await screen.findByText('Feb')).toBeInTheDocument();
+			expect(await screen.findByText('2022')).toBeInTheDocument();
 		});
 
 		test('Quarter renders properly', async () => {