Add chart animations to Area, Bar, Line, and (opacity-only) Scatter

.gitignore

@@ -17,4 +17,6 @@ test-report.xml
 
 # exclude vscode config except for our shared snippets
 .vscode/*
-!.vscode/reactSpectrumCharts.code-snippets
+!.vscode/reactSpectrumCharts.code-snippets
+
+.idea/

.storybook/main.ts

@@ -4,7 +4,12 @@ import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 const config: StorybookConfig = {
 	stories: ['../src/**/*.story.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
 
-	addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'storybook-dark-mode'],
+	addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        'storybook-dark-mode',
+        '@storybook/addon-webpack5-compiler-babel'
+    ],
 
 	framework: {
 		name: '@storybook/react-webpack5',

global.mock.js

@@ -0,0 +1 @@
+global.structuredClone = (value) => JSON.parse(JSON.stringify(value));

jest.config.js

@@ -21,9 +21,7 @@ module.exports = {
 	transform: {
 		'^.+\\.(j|t)sx?$': 'babel-jest',
 	},
-	globals: {
-		structuredClone: (value) => JSON.parse(JSON.stringify(value)),
-	},
+	setupFiles: ['./global.mock.js'],
 	moduleDirectories: ['src', 'node_modules'],
 	moduleNameMapper: {
 		'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

package.json

@@ -56,14 +56,15 @@
 		"@babel/preset-react": "^7.18.6",
 		"@babel/preset-typescript": "^7.18.6",
 		"@babel/runtime": "^7.20.6",
-		"@storybook/addon-actions": "7.6.17",
-		"@storybook/addon-essentials": "7.6.17",
-		"@storybook/addon-links": "7.6.17",
+		"@storybook/addon-actions": "^8.0.4",
+		"@storybook/addon-essentials": "^8.0.4",
+		"@storybook/addon-links": "^8.0.4",
+		"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
 		"@storybook/preset-scss": "^1.0.3",
-		"@storybook/react": "7.6.17",
-		"@storybook/react-webpack5": "7.6.17",
-		"@storybook/testing-library": "^0.2.2",
-		"@storybook/theming": "7.6.17",
+		"@storybook/react": "^8.0.4",
+		"@storybook/react-webpack5": "^8.0.4",
+		"@storybook/test": "^8.0.4",
+		"@storybook/theming": "^8.0.4",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "12.1.5",
 		"@testing-library/user-event": "^14.4.3",
@@ -100,9 +101,9 @@
 		"react-docgen-typescript-loader": "3.7.2",
 		"react-dom": "17.0.2",
 		"resize-observer-polyfill": "^1.5.1",
-		"storybook": "7.6.17",
+		"storybook": "^8.0.4",
 		"storybook-addon-react-docgen": "^1.2.44",
-		"storybook-dark-mode": "^3.0.3",
+		"storybook-dark-mode": "^4.0.1",
 		"style-loader": "^3.3.3",
 		"ts-jest": "^29.0.3",
 		"ts-loader": "^9.4.2",

src/Chart.tsx

@@ -13,7 +13,12 @@ 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 {
+	DEFAULT_BACKGROUND_COLOR,
+	DEFAULT_COLOR_SCHEME,
+	DEFAULT_LINE_TYPES,
+	DEFAULT_LOCALE
+} from '@constants';
 import useChartImperativeHandle from '@hooks/useChartImperativeHandle';
 import useChartWidth from '@hooks/useChartWidth';
 import { useResizeObserver } from '@hooks/useResizeObserver';
@@ -27,6 +32,7 @@ import { Theme } from '@react-types/provider';
 
 import './Chart.css';
 import { ChartData, ChartHandle, ChartProps } from './types';
+import usePreviousChartData from '@hooks/usePreviousChartData';
 
 interface PlaceholderContentProps {
 	data: ChartData[];
@@ -40,6 +46,7 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 		{
 			backgroundColor = DEFAULT_BACKGROUND_COLOR,
 			data,
+			animations = true,
 			colors = 'categorical12',
 			colorScheme = DEFAULT_COLOR_SCHEME,
 			config,
@@ -77,6 +84,8 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 
 		useChartImperativeHandle(forwardedRef, { chartView, title });
 
+		const previousChartData = usePreviousChartData(data);
+
 		const containerRef = useResizeObserver<HTMLDivElement>((_target, entry) => {
 			if (typeof width === 'number') return;
 			setContainerWidth(entry.contentRect.width);
@@ -129,6 +138,8 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 							chartView={chartView}
 							chartId={chartId}
 							data={data}
+							previousData={previousChartData}
+							animations={animations}
 							backgroundColor={backgroundColor}
 							colors={colors}
 							colorScheme={colorScheme}

src/RscChart.tsx

@@ -68,6 +68,8 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			chartView,
 			backgroundColor = DEFAULT_BACKGROUND_COLOR,
 			data,
+			previousData,
+			animations,
 			colors = 'categorical12',
 			colorScheme = DEFAULT_COLOR_SCHEME,
 			config,
@@ -93,7 +95,10 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 		forwardedRef
 	) => {
 		// uuid is used to make a unique id so there aren't duplicate ids if there is more than one Chart component in the document
-		const selectedData = useRef<Datum | null>(null); // data that is currently selected, get's set on click if a popover exists
+
+		// state variable for storing if chart should reanimate from zero / animate across data sets
+		const [animateFromZero, setAnimateFromZero] = useState(true);
+		const selectedData = useRef<Datum | null>(null); // data that is currently selected, gets set on click if a popover exists
 		const selectedDataName = useRef<string>();
 		const selectedDataBounds = useRef<MarkBounds>();
 		const popoverAnchorRef = useRef<HTMLDivElement>(null);
@@ -102,12 +107,20 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 
 		const sanitizedChildren = sanitizeRscChartChildren(props.children);
 
-		// THE MAGIC, builds our spec
+		// when data changes, make sure that we are animating from zero (especially in the case where a popover was just
+		// opened and closed)
+		useEffect(() => {
+			setAnimateFromZero(true);
+		}, [data]);
+
 		const spec = useSpec({
 			backgroundColor,
 			children: sanitizedChildren,
 			colors,
 			data,
+			previousData,
+			animations: animations ?? true,
+			animateFromZero,
 			description,
 			hiddenSeries,
 			highlightedSeries,
@@ -130,8 +143,11 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			// Hide tooltips on all charts when a popover is open
 			tooltipElement.hidden = popoverIsOpen;
 
-			// if the popover is closed, reset the selected data
-			if (!popoverIsOpen) {
+
+			if (popoverIsOpen) {
+				setAnimateFromZero(false);
+			} else {
+				// if the popover is closed, reset the selected data
 				selectedData.current = null;
 			}
 		}, [popoverIsOpen]);
@@ -173,7 +189,6 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 						<LegendTooltip
 							value={value}
 							descriptions={legendDescriptions}
-							// TODO: support multiple legends
 							domain={chartView.current?.scale('legend0Entries').domain()}
 						/>
 					);
@@ -198,6 +213,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			const signals: Record<string, unknown> = {
 				backgroundColor: getColorValue('gray-50', colorScheme),
 			};
+
 			if (legendIsToggleable) {
 				signals.hiddenSeries = hiddenSeriesState;
 			}
@@ -207,6 +223,56 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			return signals;
 		}, [colorScheme, hiddenSeriesState, legendIsToggleable]);
 
+		const newSpec = structuredClone(spec);
+
+		const onNewView = (view) => {
+			chartView.current = view;
+			// Add a delay before displaying legend tooltips on hover.
+			let tooltipTimeout: NodeJS.Timeout | undefined;
+			view.tooltip((_, event, item, value) => {
+				const tooltipHandler = new Handler(tooltipConfig);
+				// Cancel delayed tooltips if the mouse moves before the delay is resolved.
+				if (tooltipTimeout) {
+					clearTimeout(tooltipTimeout);
+					tooltipTimeout = undefined;
+				}
+				if (event && event.type === 'pointermove' && itemIsLegendItem(item) && 'tooltip' in item) {
+					tooltipTimeout = setTimeout(() => {
+						tooltipHandler.call(this, event, item, value);
+						tooltipTimeout = undefined;
+					}, LEGEND_TOOLTIP_DELAY);
+				} else {
+					tooltipHandler.call(this, event, item, value);
+				}
+			});
+			if (popovers.length || legendIsToggleable || onLegendClick) {
+				if (legendIsToggleable) {
+					view.signal('hiddenSeries', hiddenSeriesState);
+				}
+				setSelectedSignals({
+					selectedData: selectedData.current,
+					view,
+				});
+				view.addEventListener(
+					'click',
+					getOnMarkClickCallback(
+						chartView,
+						hiddenSeriesState,
+						chartId,
+						selectedData,
+						selectedDataBounds,
+						selectedDataName,
+						setHiddenSeries,
+						legendIsToggleable,
+						onLegendClick
+					)
+				);
+			}
+			view.addEventListener('mouseover', getOnMouseInputCallback(onLegendMouseOver));
+			view.addEventListener('mouseout', getOnMouseInputCallback(onLegendMouseOut));
+			// this will trigger the autosize calculation making sure that everything is correct size
+		};
+
 		return (
 			<>
 				<div
@@ -216,9 +282,10 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 					style={targetStyle}
 				/>
 				<VegaChart
-					spec={spec}
+					spec={newSpec}
 					config={chartConfig}
 					data={data}
+					previousData={previousData ?? []}
 					debug={debug}
 					renderer={renderer}
 					width={chartWidth}
@@ -227,53 +294,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 					padding={padding}
 					signals={signals}
 					tooltip={tooltipConfig} // legend show/hide relies on this
-					onNewView={(view) => {
-						chartView.current = view;
-						// Add a delay before displaying legend tooltips on hover.
-						let tooltipTimeout: NodeJS.Timeout | undefined;
-						view.tooltip((_, event, item, value) => {
-							const tooltipHandler = new Handler(tooltipConfig);
-							// Cancel delayed tooltips if the mouse moves before the delay is resolved.
-							if (tooltipTimeout) {
-								clearTimeout(tooltipTimeout);
-								tooltipTimeout = undefined;
-							}
-							if (event && event.type === 'pointermove' && itemIsLegendItem(item) && 'tooltip' in item) {
-								tooltipTimeout = setTimeout(() => {
-									tooltipHandler.call(this, event, item, value);
-									tooltipTimeout = undefined;
-								}, LEGEND_TOOLTIP_DELAY);
-							} else {
-								tooltipHandler.call(this, event, item, value);
-							}
-						});
-						if (popovers.length || legendIsToggleable || onLegendClick) {
-							if (legendIsToggleable) {
-								view.signal('hiddenSeries', hiddenSeriesState);
-							}
-							setSelectedSignals({
-								selectedData: selectedData.current,
-								view,
-							});
-							view.addEventListener(
-								'click',
-								getOnMarkClickCallback(
-									chartView,
-									hiddenSeriesState,
-									chartId,
-									selectedData,
-									selectedDataBounds,
-									selectedDataName,
-									setHiddenSeries,
-									legendIsToggleable,
-									onLegendClick
-								)
-							);
-						}
-						view.addEventListener('mouseover', getOnMouseInputCallback(onLegendMouseOver));
-						view.addEventListener('mouseout', getOnMouseInputCallback(onLegendMouseOut));
-						// this will trigger the autosize calculation making sure that everything is correct size
-					}}
+					onNewView={onNewView}
 				/>
 				<ChartDialog
 					datum={selectedData.current}
@@ -332,4 +353,4 @@ const LegendTooltip: FC<LegendTooltipProps> = ({ value, descriptions, domain })
 
 const itemIsLegendItem = (item: Item<unknown>): boolean => {
 	return 'name' in item.mark && typeof item.mark.name === 'string' && item.mark.name.includes('legend');
-};
+};