Merge pull request #588 from adobe/moveExpressionFunctions

marshallpete · web-flow · commit 68eab9eb695e · 2025-05-20T11:33:05.000-06:00
Move expression functions
diff --git a/packages/react-spectrum-charts/src/VegaChart.tsx b/packages/react-spectrum-charts/src/VegaChart.tsx
@@ -17,13 +17,8 @@ import { Options as TooltipOptions } from 'vega-tooltip';
 
 import { TABLE } from '@spectrum-charts/constants';
 import { getLocale } from '@spectrum-charts/locales';
+import { getVegaEmbedOptions } from '@spectrum-charts/vega-spec-builder';
 
-import {
-	expressionFunctions,
-	formatLocaleCurrency,
-	formatShortNumber,
-	formatTimeDurationLabels,
-} from './expressionFunctions';
 import { useDebugSpec } from './hooks/useDebugSpec';
 import { extractValues, isVegaData } from './hooks/useSpec';
 import { ChartData, ChartProps } from './types';
@@ -62,12 +57,6 @@ export const VegaChart: FC<VegaChartProps> = ({
 	const chartView = useRef<View>();
 
 	const { number: numberLocale, time: timeLocale } = useMemo(() => getLocale(locale), [locale]);
-	const localeCode = useMemo(() => {
-		if (typeof locale === 'string') {
-			return locale;
-		}
-		return locale?.number;
-	}, [locale]);
 
 	// Need to de a deep copy of the data because vega tries to transform the data
 	const chartData = useMemo(() => {
@@ -100,22 +89,15 @@ export const VegaChart: FC<VegaChartProps> = ({
 				});
 			}
 			embed(containerRef.current, specCopy, {
-				actions: false,
-				ast: true,
-				config,
-				expressionFunctions: {
-					...expressionFunctions,
-					formatTimeDurationLabels: formatTimeDurationLabels(numberLocale),
-					formatLocaleCurrency: formatLocaleCurrency(numberLocale),
-					formatShortNumber: formatShortNumber(localeCode),
-				},
-				formatLocale: numberLocale as unknown as Record<string, unknown>, // these are poorly typed by vega-embed
-				height,
-				padding,
-				renderer,
-				timeFormatLocale: timeLocale as unknown as Record<string, unknown>, // these are poorly typed by vega-embed
+				...getVegaEmbedOptions({
+					locale,
+					height,
+					width,
+					padding,
+					renderer,
+					config,
+				}),
 				tooltip,
-				width,
 			}).then(({ view }) => {
 				chartView.current = view;
 				onNewView(view);
@@ -146,7 +128,7 @@ export const VegaChart: FC<VegaChartProps> = ({
 		spec,
 		tooltip,
 		width,
-		localeCode,
+		locale,
 	]);
 
 	return <div ref={containerRef} className="rsc"></div>;
diff --git a/packages/vega-spec-builder/package.json b/packages/vega-spec-builder/package.json
@@ -20,6 +20,7 @@
 	},
 	"dependencies": {
 		"@spectrum-charts/constants": "1.17.3",
+		"@spectrum-charts/locales": "1.17.3",
 		"@spectrum-charts/themes": "1.17.3",
 		"@spectrum-charts/utils": "1.17.3",
 		"immer": "^10.1.1",
diff --git a/packages/vega-spec-builder/src/expressionFunctions/expressionFunctions.test.ts b/packages/vega-spec-builder/src/expressionFunctions/expressionFunctions.test.ts
diff --git a/packages/vega-spec-builder/src/expressionFunctions/expressionFunctions.ts b/packages/vega-spec-builder/src/expressionFunctions/expressionFunctions.ts
@@ -10,18 +10,39 @@
  * governing permissions and limitations under the License.
  */
 import { FormatLocaleDefinition, formatLocale } from 'd3-format';
-import { FontWeight } from 'vega';
+import { FontWeight, Locale, NumberLocale, TimeLocale } from 'vega';
 
-import { numberLocales } from '@spectrum-charts/locales';
+import { LocaleCode, NumberLocaleCode, TimeLocaleCode, getLocale, numberLocales } from '@spectrum-charts/locales';
 import { ADOBE_CLEAN_FONT } from '@spectrum-charts/themes';
-import { NumberFormat } from '@spectrum-charts/vega-spec-builder';
+
+import { NumberFormat } from '../types';
 
 export interface LabelDatum {
 	index: number;
 	label: string;
 	value: string | number;
 }
 
+export const getExpressionFunctions = (
+	locale:
+		| Locale
+		| LocaleCode
+		| { number?: NumberLocaleCode | NumberLocale; time?: TimeLocaleCode | TimeLocale } = 'en-US'
+) => {
+	const { number: numberLocale } = getLocale(locale);
+	const localeCode = typeof locale === 'string' ? locale : locale?.number;
+	return {
+		formatTimeDurationLabels: formatTimeDurationLabels(numberLocale),
+		formatLocaleCurrency: formatLocaleCurrency(numberLocale),
+		formatShortNumber: formatShortNumber(localeCode),
+		consoleLog,
+		formatHorizontalTimeAxisLabels: formatHorizontalTimeAxisLabels(),
+		formatVerticalAxisTimeLabels: formatVerticalAxisTimeLabels(),
+		getLabelWidth,
+		truncateText,
+	};
+};
+
 /**
  * Formats a number using the compact notation.
  * @param numberLocale
diff --git a/packages/vega-spec-builder/src/expressionFunctions/index.ts b/packages/vega-spec-builder/src/expressionFunctions/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2025 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.
+ */
+
+export * from './expressionFunctions';
diff --git a/packages/vega-spec-builder/src/index.ts b/packages/vega-spec-builder/src/index.ts
@@ -13,3 +13,5 @@
 export * from './chartSpecBuilder';
 export * from './specUtils';
 export * from './types';
+export * from './expressionFunctions';
+export * from './vegaEmbedUtils';
diff --git a/packages/vega-spec-builder/src/vegaEmbedUtils.test.ts b/packages/vega-spec-builder/src/vegaEmbedUtils.test.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 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 { numberLocales } from '@spectrum-charts/locales';
+
+import { getVegaEmbedOptions } from './vegaEmbedUtils';
+
+describe('getVegaEmbedOptions()', () => {
+	it('should return the correct options', () => {
+		const options = getVegaEmbedOptions({});
+		expect(options).toHaveProperty('actions', false);
+		expect(options).toHaveProperty('ast', true);
+		expect(options).toHaveProperty('expressionFunctions');
+		expect(options).toHaveProperty('formatLocale');
+		expect(options).toHaveProperty('height', 400);
+		expect(options).toHaveProperty('width', 600);
+		expect(options).toHaveProperty('padding', 0);
+	});
+	it('should use the correct color scheme', () => {
+		let options = getVegaEmbedOptions({ colorScheme: 'dark' });
+		expect(options?.config?.text?.fill).toEqual('rgb(235, 235, 235)');
+		options = getVegaEmbedOptions({ colorScheme: 'light' });
+		expect(options?.config?.text?.fill).toEqual('rgb(34, 34, 34)');
+	});
+	it('should default to en-US', () => {
+		const enLocale = numberLocales['en-US'];
+		const options = getVegaEmbedOptions({});
+		expect(options?.formatLocale).toEqual(enLocale);
+	});
+	it('should use the correct locale if provided', () => {
+		const frLocale = numberLocales['fr-FR'];
+		const options = getVegaEmbedOptions({ locale: 'fr-FR' });
+		expect(options?.formatLocale).toEqual(frLocale);
+	});
+});
diff --git a/packages/vega-spec-builder/src/vegaEmbedUtils.ts b/packages/vega-spec-builder/src/vegaEmbedUtils.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 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 { Config, Locale, NumberLocale, Padding, Renderers, TimeLocale } from 'vega';
+
+import { DEFAULT_COLOR_SCHEME } from '@spectrum-charts/constants';
+import { LocaleCode, NumberLocaleCode, TimeLocaleCode, getLocale } from '@spectrum-charts/locales';
+
+import { getExpressionFunctions } from './expressionFunctions';
+import { getChartConfig } from './specUtils';
+
+export const getVegaEmbedOptions = ({
+	locale = 'en-US',
+	height = 400,
+	width = 600,
+	padding = 0,
+	renderer = 'svg',
+	config,
+	colorScheme = DEFAULT_COLOR_SCHEME,
+}: {
+	locale?: Locale | LocaleCode | { number?: NumberLocaleCode | NumberLocale; time?: TimeLocaleCode | TimeLocale };
+	height?: number;
+	width?: number;
+	padding?: Padding;
+	renderer?: Renderers;
+	config?: Config;
+	colorScheme?: 'light' | 'dark';
+}) => {
+	const expressionFunctions = getExpressionFunctions(locale);
+	const { number: numberLocale, time: timeLocale } = getLocale(locale);
+	const chartConfig = config ?? getChartConfig(undefined, colorScheme);
+
+	return {
+		actions: false,
+		ast: true,
+		expressionFunctions,
+		formatLocale: numberLocale as unknown as Record<string, unknown>, // these are poorly typed by vega-embed
+		height,
+		width,
+		padding,
+		renderer,
+		timeFormatLocale: timeLocale as unknown as Record<string, unknown>, // these are poorly typed by vega-embed
+		config: chartConfig,
+	};
+};
diff --git a/packages/vega-spec-builder/tsconfig.json b/packages/vega-spec-builder/tsconfig.json
@@ -9,5 +9,10 @@
 	},
 	"include": ["src/**/*", "index.ts"],
 	"exclude": ["*.test.ts"],
-	"references": [{ "path": "../constants" }, { "path": "../themes" }, { "path": "../utils" }]
+	"references": [
+		{ "path": "../constants" },
+		{ "path": "../themes" },
+		{ "path": "../utils" },
+		{ "path": "../locales" }
+	]
 }
