Merge branch 'main' into an-334305/highlightBy

.github/workflows/pr-checks.yml

@@ -35,7 +35,7 @@ jobs:
               run: yarn test
 
             - name: SonarCloud 🔬
-              uses: SonarSource/sonarcloud-github-action@master
+              uses: sonarsource/sonarcloud-github-action@v2.0.2
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                   SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/sonarcloud.yml

@@ -31,7 +31,7 @@ jobs:
               run: yarn test
 
             - name: SonarCloud 🔬
-              uses: SonarSource/sonarcloud-github-action@master
+              uses: sonarSource/sonarcloud-github-action@v2.0.2
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                   SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.storybook/main.ts

@@ -5,11 +5,11 @@ const config: StorybookConfig = {
 	stories: ['../src/**/*.story.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
 
 	addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        'storybook-dark-mode',
-        '@storybook/addon-webpack5-compiler-babel'
-    ],
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'storybook-dark-mode',
+		'@storybook/addon-webpack5-compiler-babel',
+	],
 
 	framework: {
 		name: '@storybook/react-webpack5',

.storybook/preview.tsx

@@ -14,7 +14,7 @@ const decorators: Decorator[] = [
 		const darkMode = useDarkMode();
 		return (
 			<Provider theme={defaultTheme} colorScheme={darkMode ? 'dark' : 'light'} locale="en-US" height="100vh">
-				<View padding="size-300">
+				<View padding={24} height="calc(100% - 48px)">
 					<Story />
 				</View>
 			</Provider>
@@ -23,7 +23,6 @@ const decorators: Decorator[] = [
 ];
 
 const parameters: Parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
 	controls: {
 		expanded: true,
 		// data is huge so we don't want to show it in the controls

CONTRIBUTING.md

@@ -63,7 +63,7 @@ you are good to go!
 
 ## Where to start
 
-There are many places to dive into react-spectrum-charts to help out. Before you take on a feature or issue, make sure you become familiar with our developer [best practices]() and overview of [how `react-spectrum-charts` works]().
+There are many places to dive into react-spectrum-charts to help out. Before you take on a feature or issue, make sure you become familiar with our developer [best practices](https://github.com/adobe/react-spectrum-charts/wiki/Developer-Docs#best-practices) and overview of [how `react-spectrum-charts` works](https://github.com/adobe/react-spectrum-charts/wiki/Developer-Docs#how-it-works).
 
 If you are looking for place to start, consider the following options:
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adobe/react-spectrum-charts",
-	"version": "v1.5.0",
+	"version": "v1.6.1",
 	"description": "Declarative library for composing Spectrum visualizations in React.",
 	"browser": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -56,15 +56,15 @@
 		"@babel/preset-react": "^7.18.6",
 		"@babel/preset-typescript": "^7.18.6",
 		"@babel/runtime": "^7.20.6",
-		"@storybook/addon-actions": "^8.0.4",
-		"@storybook/addon-essentials": "^8.0.4",
-		"@storybook/addon-links": "^8.0.4",
+		"@storybook/addon-actions": "^8.0.8",
+		"@storybook/addon-essentials": "^8.0.8",
+		"@storybook/addon-links": "^8.0.8",
 		"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
 		"@storybook/preset-scss": "^1.0.3",
-		"@storybook/react": "^8.0.4",
-		"@storybook/react-webpack5": "^8.0.4",
-		"@storybook/test": "^8.0.4",
-		"@storybook/theming": "^8.0.4",
+		"@storybook/react": "^8.0.8",
+		"@storybook/react-webpack5": "^8.0.8",
+		"@storybook/test": "^8.0.8",
+		"@storybook/theming": "^8.0.8",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "12.1.5",
 		"@testing-library/user-event": "^14.4.3",
@@ -101,7 +101,7 @@
 		"react-docgen-typescript-loader": "3.7.2",
 		"react-dom": "17.0.2",
 		"resize-observer-polyfill": "^1.5.1",
-		"storybook": "^8.0.4",
+		"storybook": "^8.0.8",
 		"storybook-addon-react-docgen": "^1.2.44",
 		"storybook-dark-mode": "^4.0.1",
 		"style-loader": "^3.3.3",

src/Chart.css

@@ -56,5 +56,5 @@ this removes transitions in the vega tooltip
 .rsc-container {
 	position: relative;
 	width: auto;
-	height: auto;
+	height: 100%;
 }

src/Chart.tsx

@@ -14,6 +14,7 @@ import { FC, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { EmptyState } from '@components/EmptyState';
 import { LoadingState } from '@components/LoadingState';
 import { DEFAULT_BACKGROUND_COLOR, DEFAULT_COLOR_SCHEME, DEFAULT_LINE_TYPES, DEFAULT_LOCALE } from '@constants';
+import useChartHeight from '@hooks/useChartHeight';
 import useChartImperativeHandle from '@hooks/useChartImperativeHandle';
 import useChartWidth from '@hooks/useChartWidth';
 import { useResizeObserver } from '@hooks/useResizeObserver';
@@ -54,6 +55,8 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 			lineWidths = ['M'],
 			loading,
 			locale = DEFAULT_LOCALE,
+			minHeight = 100,
+			maxHeight = Infinity,
 			minWidth = 100,
 			maxWidth = Infinity,
 			opacities,
@@ -74,14 +77,22 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 		// The view returned by vega. This is above RscChart so it can be used for downloading and copying to clipboard.
 		const chartView = useRef<View>();
 		const [containerWidth, setContainerWidth] = useState<number>(0);
+		const [containerHeight, setContainerHeight] = useState<number>(0);
 
 		useChartImperativeHandle(forwardedRef, { chartView, title });
 
 		const containerRef = useResizeObserver<HTMLDivElement>((_target, entry) => {
-			if (typeof width === 'number') return;
-			setContainerWidth(entry.contentRect.width);
+
+			if (typeof width !== 'number') {
+				setContainerWidth(entry.contentRect.width);
+			}
+
+			if (typeof height !== 'number') {
+				setContainerHeight(entry.contentRect.height);
+			}
 		});
 		const chartWidth = useChartWidth(containerWidth, maxWidth, minWidth, width); // calculates the width the vega chart should be
+		const chartHeight = useChartHeight(containerHeight, maxHeight, minHeight, height); // calculates the height the vega chart should be
 
 		const showPlaceholderContent = useMemo(() => Boolean(loading ?? !data.length), [loading, data]);
 		useEffect(() => {
@@ -109,50 +120,47 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 				colorScheme={colorScheme}
 				theme={isValidTheme(theme) ? theme : defaultTheme}
 				UNSAFE_style={{ backgroundColor: 'transparent' }}
+				height="100%"
 			>
-				<div
-					ref={containerRef}
-					id={chartId.current}
-					data-testid={dataTestId}
-					className="rsc-container"
-					style={{ backgroundColor: getColorValue(backgroundColor, colorScheme) }}
-				>
-					{showPlaceholderContent ? (
-						<PlaceholderContent
-							loading={loading}
-							data={data}
-							height={height}
-							emptyStateText={emptyStateText}
-						/>
-					) : (
-						<RscChart
-							chartView={chartView}
-							chartId={chartId}
-							data={data}
-							backgroundColor={backgroundColor}
-							colors={colors}
-							colorScheme={colorScheme}
-							config={config}
-							description={description}
-							debug={debug}
-							height={height}
-							hiddenSeries={hiddenSeries}
-							highlightedSeries={highlightedSeries}
-							lineTypes={lineTypes}
-							lineWidths={lineWidths}
-							locale={locale}
-							opacities={opacities}
-							padding={padding}
-							renderer={renderer}
-							symbolShapes={symbolShapes}
-							symbolSizes={symbolSizes}
-							title={title}
-							chartWidth={chartWidth}
-							UNSAFE_vegaSpec={UNSAFE_vegaSpec}
-						>
-							{props.children}
-						</RscChart>
-					)}
+				<div ref={containerRef} id={chartId.current} data-testid={dataTestId} className="rsc-container">
+					<div style={{ backgroundColor: getColorValue(backgroundColor, colorScheme) }}>
+						{showPlaceholderContent ? (
+							<PlaceholderContent
+								loading={loading}
+								data={data}
+								height={chartHeight}
+								emptyStateText={emptyStateText}
+							/>
+						) : (
+							<RscChart
+								chartView={chartView}
+								chartId={chartId}
+								data={data}
+								backgroundColor={backgroundColor}
+								colors={colors}
+								colorScheme={colorScheme}
+								config={config}
+								description={description}
+								debug={debug}
+								hiddenSeries={hiddenSeries}
+								highlightedSeries={highlightedSeries}
+								lineTypes={lineTypes}
+								lineWidths={lineWidths}
+								locale={locale}
+								opacities={opacities}
+								padding={padding}
+								renderer={renderer}
+								symbolShapes={symbolShapes}
+								symbolSizes={symbolSizes}
+								title={title}
+								chartHeight={chartHeight}
+								chartWidth={chartWidth}
+								UNSAFE_vegaSpec={UNSAFE_vegaSpec}
+							>
+								{props.children}
+							</RscChart>
+						)}
+					</div>
 				</div>
 			</Provider>
 		);

src/RscChart.tsx

@@ -73,7 +73,6 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			config,
 			description,
 			debug = false,
-			height = 300,
 			hiddenSeries = [],
 			highlightedSeries,
 			lineTypes = DEFAULT_LINE_TYPES,
@@ -85,6 +84,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			symbolShapes,
 			symbolSizes,
 			title,
+			chartHeight = 300,
 			chartWidth,
 			UNSAFE_vegaSpec,
 			chartId,
@@ -222,7 +222,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 					debug={debug}
 					renderer={renderer}
 					width={chartWidth}
-					height={height}
+					height={chartHeight}
 					locale={locale}
 					padding={padding}
 					signals={signals}

src/hooks/useChartHeight.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { useMemo } from 'react';
+
+import { Height } from 'types';
+
+export default function useChartHeight(containerHeight: number, maxHeight: number, minHeight: number, height: Height) {
+	return useMemo(() => {
+		let targetHeight = minHeight;
+		if (typeof height === 'number') {
+			targetHeight = height;
+		} else if (/^\d+%$/.exec(height)) {
+			targetHeight = (containerHeight * Number(height.slice(0, -1))) / 100;
+		} else {
+			console.error(
+				`height of ${height} is not a valid height. Please provide a valid number or percentage ex. 75%`
+			);
+		}
+		return targetHeight === 0 ? 0 : Math.min(maxHeight, Math.max(minHeight, targetHeight));
+	}, [containerHeight, maxHeight, minHeight, height]);
+}

src/hooks/useResizeObserver.tsx

@@ -23,7 +23,7 @@ export const useResizeObserver = <T extends HTMLElement>(callback: (target: T, e
 
 		// ResizeObserver is not supported in jest
 		if (typeof ResizeObserver === 'undefined') {
-			callback(element, { contentRect: { width: 500 } } as ResizeObserverEntry);
+			callback(element, { contentRect: { width: 500, height: 500 } } as ResizeObserverEntry);
 			return;
 		}
 

src/specBuilder/area/areaSpecBuilder.test.ts

@@ -58,6 +58,11 @@ const defaultSpec = initializeSpec({
 			name: TABLE,
 			transform: [
 				{ as: MARK_ID, type: 'identifier' },
+				{
+					type: 'formula',
+					expr: `toDate(datum[\"${DEFAULT_TIME_DIMENSION}\"])`,
+					as: DEFAULT_TIME_DIMENSION,
+				},
 				{
 					as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 					field: DEFAULT_TIME_DIMENSION,

src/specBuilder/data/dataUtils.test.ts

@@ -9,9 +9,28 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { TABLE } from '@constants';
+import { DEFAULT_TIME_DIMENSION, DEFAULT_TRANSFORMED_TIME_DIMENSION, TABLE } from '@constants';
 
-import { getTableData } from './dataUtils';
+import { addTimeTransform, getTableData } from './dataUtils';
+
+describe('addTimeTransform()', () => {
+	test('should return the time transforms', () => {
+		const inputTransforms = [];
+		const dimension = 'datetime';
+		const outputTransforms = [{
+			type: 'formula',
+			expr: `toDate(datum[\"${dimension}\"])`,
+			as: dimension
+		},
+		{
+			type: 'timeunit',
+			field: dimension,
+			units: ['year', 'month', 'date', 'hours', 'minutes'],
+			as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
+		}];
+		expect(addTimeTransform(inputTransforms, dimension)).toEqual(outputTransforms);
+	});
+});
 
 describe('getTableData()', () => {
 	test('should return the table data', () => {

src/specBuilder/data/dataUtils.ts

@@ -23,6 +23,11 @@ import { Compare, Data, FormulaTransform, SourceData, Transforms, ValuesData } f
 
 export const addTimeTransform = produce<Transforms[], [string]>((transforms, dimension) => {
 	if (transforms.findIndex((transform) => transform.type === 'timeunit') === -1) {
+		transforms.push({
+			type: 'formula',
+			expr: `toDate(datum["${dimension}"])`,
+			as: dimension
+		});
 		transforms.push({
 			type: 'timeunit',
 			field: dimension,

src/specBuilder/line/lineSpecBuilder.test.ts

@@ -71,6 +71,11 @@ const defaultSpec = initializeSpec({
 			name: TABLE,
 			transform: [
 				{ as: MARK_ID, type: 'identifier' },
+				{
+					type: 'formula',
+					expr: `toDate(datum[\"${DEFAULT_TIME_DIMENSION}\"])`,
+					as: DEFAULT_TIME_DIMENSION,
+				},
 				{
 					as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 					field: DEFAULT_TIME_DIMENSION,
@@ -388,7 +393,7 @@ describe('lineSpecBuilder', () => {
 					...defaultLineProps,
 					children: [createElement(Trendline, { method: 'movingAverage-7' })],
 				})[0].transform
-			).toHaveLength(2);
+			).toHaveLength(3);
 		});
 
 		test('adds point data if displayPointMark is not undefined', () => {

src/specBuilder/scatter/scatterSpecBuilder.test.ts

@@ -34,8 +34,8 @@ describe('addData()', () => {
 	test('should add time transform is dimensionScaleType === "time"', () => {
 		const data = addData(initializeSpec().data ?? [], { ...defaultScatterProps, dimensionScaleType: 'time' });
 		expect(data).toHaveLength(2);
-		expect(data[0].transform).toHaveLength(2);
-		expect(data[0].transform?.[1].type).toBe('timeunit');
+		expect(data[0].transform).toHaveLength(3);
+		expect(data[0].transform?.[2].type).toBe('timeunit');
 	});
 	test('should add additional filteredData if tooltip exists', () => {
 		const data = addData(initializeSpec().data ?? [], {