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,11 +13,16 @@ 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';
-import { getColorValue } from '@specBuilder/specUtils';
+import { getColorValue, usePreviousChartData } from '@specBuilder/specUtils';
 import { RscChart } from 'RscChart';
 import { v4 as uuid } from 'uuid';
 import { View } from 'vega';
@@ -40,6 +45,7 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 		{
 			backgroundColor = DEFAULT_BACKGROUND_COLOR,
 			data,
+			animations = true,
 			colors = 'categorical12',
 			colorScheme = DEFAULT_COLOR_SCHEME,
 			config,
@@ -77,6 +83,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 +137,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 @@
 			chartView,
 			backgroundColor = DEFAULT_BACKGROUND_COLOR,
 			data,
+			previousData,
+			animations,
 			colors = 'categorical12',
 			colorScheme = DEFAULT_COLOR_SCHEME,
 			config,
@@ -93,6 +95,9 @@
 		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
+
+		// 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, get's set on click if a popover exists
 		const selectedDataName = useRef<string>();
 		const selectedDataBounds = useRef<MarkBounds>();
@@ -102,12 +107,20 @@
 
 		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,
+			animateFromZero,
 			description,
 			hiddenSeries,
 			highlightedSeries,
@@ -130,8 +143,11 @@
 			// 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]);
@@ -198,6 +214,7 @@
 			const signals: Record<string, unknown> = {
 				backgroundColor: getColorValue('gray-50', colorScheme),
 			};
+
 			if (legendIsToggleable) {
 				signals.hiddenSeries = hiddenSeriesState;
 			}
@@ -207,18 +224,15 @@
 			return signals;
 		}, [colorScheme, hiddenSeriesState, legendIsToggleable]);
 
-		return (
-			<>
-				<div
-					id={`${chartId.current}-popover-anchor`}
-					data-testid="rsc-popover-anchor"
-					ref={popoverAnchorRef}
-					style={targetStyle}
-				/>
+		const newSpec = JSON.stringify(spec);
+
+		const chart = useMemo(() => {
+			return (
 				<VegaChart
-					spec={spec}
+					spec={JSON.parse(newSpec)}
 					config={chartConfig}
 					data={data}
+					previousData={previousData ?? []}
 					debug={debug}
 					renderer={renderer}
 					width={chartWidth}
@@ -275,6 +289,20 @@
 						// this will trigger the autosize calculation making sure that everything is correct size
 					}}
 				/>
+			);
+		}, 	[newSpec, chartConfig, data, previousData, debug, renderer, chartWidth, height, locale,
+			padding, signals, tooltipConfig, chartView, popovers.length, legendIsToggleable, onLegendClick,
+			onLegendMouseOver, onLegendMouseOut, hiddenSeriesState, chartId, setHiddenSeries, colorScheme]);
+
+		return (
+			<>
+				<div
+					id={`${chartId.current}-popover-anchor`}
+					data-testid="rsc-popover-anchor"
+					ref={popoverAnchorRef}
+					style={targetStyle}
+				/>
+				{chart}
 				<ChartDialog
 					datum={selectedData.current}
 					targetElement={popoverAnchorRef}
@@ -332,4 +360,4 @@
 
 const itemIsLegendItem = (item: Item<unknown>): boolean => {
 	return 'name' in item.mark && typeof item.mark.name === 'string' && item.mark.name.includes('legend');
-};
+};

src/VegaChart.tsx

@@ -11,7 +11,7 @@
  */
 import { FC, useEffect, useMemo, useRef } from 'react';
 
-import { TABLE } from '@constants';
+import { PREVIOUS_TABLE, TABLE } from '@constants';
 import { useDebugSpec } from '@hooks/useDebugSpec';
 import { extractValues, isVegaData } from '@specBuilder/specUtils';
 import { expressionFunctions, formatTimeDurationLabels } from 'expressionFunctions';
@@ -25,6 +25,7 @@ export interface VegaChartProps {
 	config: Config;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	data: ChartData[];
+	previousData: ChartData[];
 	debug: boolean;
 	height: number;
 	locale: ChartProps['locale'];
@@ -40,6 +41,7 @@ export interface VegaChartProps {
 export const VegaChart: FC<VegaChartProps> = ({
 	config,
 	data,
+	previousData,
 	debug,
 	height,
 	locale,
@@ -58,7 +60,7 @@ export const VegaChart: FC<VegaChartProps> = ({
 
 	// Need to de a deep copy of the data because vega tries to transform the data
 	const chartData = useMemo(() => {
-		const clonedData = JSON.parse(JSON.stringify(data));
+		const clonedData = structuredClone(data);
 
 		// We received a full Vega data array with potentially multiple dataset objects
 		if (isVegaData(clonedData)) {
@@ -69,7 +71,19 @@ export const VegaChart: FC<VegaChartProps> = ({
 		return { [TABLE]: clonedData };
 	}, [data]);
 
-	useDebugSpec(debug, spec, chartData, width, height, config);
+	const previousChartData = useMemo(() => {
+		const clonedData = structuredClone(previousData);
+
+		// We received a full Vega data array with potentially multiple dataset objects
+		if (isVegaData(clonedData)) {
+			return extractValues(clonedData);
+		}
+
+		// We received a simple array of data and we'll set a default key of 'table' to reference internally
+		return { [PREVIOUS_TABLE]: clonedData };
+	}, [previousData]);
+
+	useDebugSpec(debug, spec, { ...previousChartData, ...chartData }, width, height, config);
 
 	useEffect(() => {
 		if (width && height && containerRef.current) {
@@ -78,6 +92,10 @@ export const VegaChart: FC<VegaChartProps> = ({
 			if (tableData && 'values' in tableData) {
 				tableData.values = chartData.table;
 			}
+			const previousTableData = specCopy.data?.find((d) => d.name === PREVIOUS_TABLE);
+			if (previousTableData && 'values' in previousTableData) {
+				previousTableData.values = previousChartData ? previousChartData.previousTable : [];
+			}
 			if (signals) {
 				specCopy.signals = specCopy.signals?.map((signal) => {
 					if (signal.name in signals && signals[signal.name] !== undefined && 'value' in signal) {
@@ -86,6 +104,7 @@ export const VegaChart: FC<VegaChartProps> = ({
 					return signal;
 				});
 			}
+
 			embed(containerRef.current, specCopy, {
 				actions: false,
 				config,
@@ -116,8 +135,10 @@ export const VegaChart: FC<VegaChartProps> = ({
 		};
 	}, [
 		chartData.table,
+		previousChartData,
 		config,
 		data,
+		previousData,
 		height,
 		numberLocale,
 		timeLocale,

src/constants.ts

@@ -39,6 +39,10 @@ export const DEFAULT_TITLE_FONT_WEIGHT = 'bold';
 // vega data table name
 export const TABLE = 'table';
 export const FILTERED_TABLE = 'filteredTable';
+export const PREVIOUS_TABLE = 'previousTable';
+
+export const FILTERED_PREVIOUS_TABLE = 'filteredPreviousTable';
+export const PREVIOUS_PREFIX = 'previous_';
 
 // vega data field names
 export const SERIES_ID = 'rscSeriesId';
@@ -77,6 +81,8 @@ export const TRELLIS_PADDING = 0.2;
 // ratio that each opacity is divded by when hovering or highlighting from legend
 export const HIGHLIGHT_CONTRAST_RATIO = 5;
 
+export const RSC_ANIMATION = `rscAnimation`;
+
 // legend tooltips
 export const LEGEND_TOOLTIP_DELAY = 350;
 
@@ -86,3 +92,8 @@ export const BACKGROUND_COLOR = 'chartBackgroundColor';
 
 // time constants
 export const MS_PER_DAY = 86400000;
+
+// chart animation constants
+export const DATA_ANIMATION_DURATION_FRAMES = 78; // 60 fps * 1.3 seconds = 78 frames
+export const DATA_ANIMATION_MILLISECONDS_PER_FRAME = 1000 / 60; // 60fps
+export const EASE_OUT_CUBIC = '(1 - pow(1 - timerValue, 3))';

src/hooks/useChartProps.tsx

@@ -14,5 +14,5 @@ import { ChartProps } from 'types';
 
 export default function useChartProps(props: ChartProps): ChartProps {
 	const darkMode = useDarkMode();
-	return { colorScheme: darkMode ? 'dark' : 'light', ...props };
+	return { colorScheme: darkMode ? 'dark' : 'light', animations: false, ...props };
 }

src/hooks/useSpec.tsx

@@ -23,6 +23,9 @@ export default function useSpec({
 	colors,
 	colorScheme,
 	data,
+	previousData,
+	animations,
+	animateFromZero,
 	description,
 	hiddenSeries,
 	highlightedSeries,
@@ -57,6 +60,10 @@ export default function useSpec({
 					backgroundColor,
 					children,
 					colors,
+					data,
+					previousData,
+					animations,
+					animateFromZero,
 					colorScheme,
 					description,
 					hiddenSeries,
@@ -76,6 +83,9 @@ export default function useSpec({
 		colors,
 		colorScheme,
 		data,
+		previousData,
+		animations,
+		animateFromZero,
 		description,
 		hiddenSeries,
 		highlightedSeries,