Create vega test app (#715)

* Add first vega set for test validation

* Fix invalid Vega-Lite schema type declarations in 35 files

- 16 schemas: Remove bin+quantitative on string data, change to nominal
  (e.g., data_400 had bin:true on "dog"/"cat" strings)
- 19 schemas: Change quantitative to temporal for date string fields
  (e.g., data_940 had quantitative on "2000-01" date strings)

Detected via E2E screenshot testing of VegaDeclarativeChart component
across all 1,056 schemas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fix vega schemas

* Fix schemas

* Add vega test app

---------

Co-authored-by: Atishay Jain <atisjai@microsoft.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 3 people

.claude/settings.json

@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git fetch:*)",
+      "Bash(git merge:*)",
+      "Bash(yarn install:*)",
+      "Bash(npx tsc:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm view:*)",
+      "Bash(yarn link:*)",
+      "Bash(yarn unlink:*)",
+      "Bash(npm start)"
+    ]
+  }
+}

apps/plotly_examples/config/paths.js

@@ -69,6 +69,7 @@ module.exports = {
   appWebpackCache: resolveApp('node_modules/.cache'),
   appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
+  vegaData: resolveApp('../../vega_data'),
   publicUrlOrPath,
 };
 

apps/plotly_examples/config/webpack.config.js

@@ -319,6 +319,9 @@ module.exports = function (webpackEnv) {
           'scheduler/tracing': 'scheduler/tracing-profiling',
         }),
         ...(modules.webpackAliases || {}),
+        // Force a single React instance when using yarn link
+        react: path.resolve(paths.appNodeModules, 'react'),
+        'react-dom': path.resolve(paths.appNodeModules, 'react-dom'),
       },
       plugins: [
         // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -333,6 +336,7 @@ module.exports = function (webpackEnv) {
           babelRuntimeEntry,
           babelRuntimeEntryHelpers,
           babelRuntimeRegenerator,
+          paths.vegaData,
         ]),
       ],
       fallback: {

apps/plotly_examples/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@fluentui/react-charting": "^5.25.6",
-    "@fluentui/react-charts": "0.0.0-nightly-20260212-0406.1",
+    "@fluentui/react-charts": "0.0.0-nightly-20260302-0516.1",
     "@fluentui/react-components": "^9.72.2",
     "@fluentui/react-menu": "^9.20.1",
     "@fluentui/react-portal-compat": "9.0.176",
@@ -40,6 +40,9 @@
     "jest-watch-typeahead": "^1.0.0",
     "mini-css-extract-plugin": "^2.4.5",
     "plotly.js": "^2.35.3",
+    "vega": "^5.30.0",
+    "vega-embed": "^6.26.0",
+    "vega-lite": "^5.21.0",
     "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",

apps/plotly_examples/src/App.tsx

@@ -10,31 +10,56 @@ import {
   Subtitle2,
   Body2,
   Switch,
-  Slider
+  Slider,
+  TabList,
+  Tab,
+  SelectTabEvent,
+  SelectTabData
 } from '@fluentui/react-components';
 import { PortalCompatProvider } from '@fluentui/react-portal-compat';
 import { ChartWrapper } from './components/ChartWrapper';
+import { VegaChartWrapper } from './components/VegaChartWrapper';
 import { getSelection, saveSelection } from './components/utils';
 import { setRTL } from '@fluentui/react/lib/Utilities';
 import { SliderOnChangeData } from '@fluentui/react-components';
 
+type AppView = 'plotly' | 'vega';
+
+function getInitialView(): AppView {
+  const hash = window.location.hash.replace('#', '');
+  if (hash === 'vega') return 'vega';
+  return 'plotly';
+}
+
 const App: React.FC = () => {
+  const [activeView, setActiveView] = React.useState<AppView>(getInitialView);
   const [value, setValue] = React.useState(getSelection("Theme", "Light"));
   const [isRTL, setisRTL] = React.useState(getSelection("RTL", "false") === "true");
   const [isDimensionSlidersEnabled, setIsDimensionSlidersEnabled] = React.useState(getSelection("DimensionSlidersEnabled", "true") === "true");
-  const [isV9ChartFirst, setIsV9ChartFirst] = React.useState(getSelection("isV9ChartFirst", "false") === "true");
   const [labelRTLMode, setLabelRTLMode] = React.useState("Enable RTL");
   const [labelDimensionSwitch, setLabelDimensionSwitch] = React.useState("Disable Dimension sliders");
-  const [labelChartOrderSwitch] = React.useState("Show v9 first");
   const [chartWidth, setChartWidth] = React.useState<number>(Number(getSelection("ChartWidth", window.innerWidth.toString())));
   const [chartHeight, setChartHeight] = React.useState<number>(Number(getSelection("ChartHeight", "400")));
 
+  React.useEffect(() => {
+    const onHashChange = () => setActiveView(getInitialView());
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, []);
+
   setRTL(isRTL);
+
   const onOptionSelect = (event: SelectionEvents, data: OptionOnSelectData): void => {
     setValue(data.optionText ?? "Light");
     saveSelection("Theme", data.optionText ?? "Light");
   };
 
+  const handleTabSelect = (_event: SelectTabEvent, data: SelectTabData) => {
+    const view = data.value as AppView;
+    setActiveView(view);
+    window.location.hash = view;
+  };
+
   const handleRTLSwitchChange = () => {
     const newIsRTL = !isRTL;
     setisRTL(newIsRTL);
@@ -50,12 +75,6 @@ const App: React.FC = () => {
     saveSelection("DimensionSlidersEnabled", newIsEnabled.toString());
   };
 
-  const handleChartOrderSwitchChange = () => {
-    const newIsV9ChartFirst = !isV9ChartFirst;
-    setIsV9ChartFirst(newIsV9ChartFirst);
-    saveSelection("isV9ChartFirst", newIsV9ChartFirst.toString());
-  };
-
   const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {
     setChartWidth(Number(data.value));
     saveSelection("ChartWidth", data.value.toString());
@@ -66,41 +85,44 @@ const App: React.FC = () => {
     saveSelection("ChartHeight", data.value.toString());
   };
 
+  const chartWidthProp = isDimensionSlidersEnabled ? chartWidth : undefined;
+  const chartHeightProp = isDimensionSlidersEnabled ? chartHeight : undefined;
+
   return (
     <div>
       <FluentProvider theme={value === "Light" ? webLightTheme : webDarkTheme} targetDocument={document}>
         <PortalCompatProvider>
-          <Subtitle2> Theme:</Subtitle2>&nbsp;&nbsp;
-          <Dropdown
-            value={value}
-            onOptionSelect={onOptionSelect}
-          >
-            <Option>Light</Option>
-            <Option>Dark</Option>
-          </Dropdown>
-          &nbsp;&nbsp;&nbsp;
-          <Switch
-            data-testid="rtl_switch"
-            checked={isRTL}
-            onChange={handleRTLSwitchChange}
-            label={labelRTLMode}
-          />
-          <Switch
-            checked={isDimensionSlidersEnabled}
-            onChange={handleDimensionSlidersChange}
-            label={labelDimensionSwitch}
-          />
-          <Switch
-            checked={isV9ChartFirst}
-            onChange={handleChartOrderSwitchChange}
-            label={labelChartOrderSwitch}
-          />
-
-          &nbsp;&nbsp;<Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.25.6</Subtitle2>
-          &nbsp;&nbsp;<Body2>@fluentui/react-charts &nbsp;</Body2><Subtitle2>0.0.0-nightly-20260212-0406.1</Subtitle2>
-          <br />
-          {isDimensionSlidersEnabled && (<>
-          <div style={{ display: 'flex', flexDirection: isRTL ? 'row-reverse' : 'row', alignItems: 'center', gap: '20px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px', padding: '4px 8px' }}>
+            <TabList selectedValue={activeView} onTabSelect={handleTabSelect}>
+              <Tab value="plotly">Plotly Schemas</Tab>
+              <Tab value="vega">Vega-Lite Schemas</Tab>
+            </TabList>
+            <Subtitle2> Theme:</Subtitle2>&nbsp;
+            <Dropdown
+              value={value}
+              onOptionSelect={onOptionSelect}
+            >
+              <Option>Light</Option>
+              <Option>Dark</Option>
+            </Dropdown>
+            <Switch
+              data-testid="rtl_switch"
+              checked={isRTL}
+              onChange={handleRTLSwitchChange}
+              label={labelRTLMode}
+            />
+            <Switch
+              checked={isDimensionSlidersEnabled}
+              onChange={handleDimensionSlidersChange}
+              label={labelDimensionSwitch}
+            />
+          </div>
+          <div style={{ padding: '0 8px' }}>
+            <Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.25.6</Subtitle2>
+            &nbsp;&nbsp;<Body2>@fluentui/react-charts &nbsp;</Body2><Subtitle2>0.0.0-nightly-20260302-0516.1</Subtitle2>
+          </div>
+          {isDimensionSlidersEnabled && (
+          <div style={{ display: 'flex', flexDirection: isRTL ? 'row-reverse' : 'row', alignItems: 'center', gap: '20px', padding: '4px 8px' }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
               <Subtitle2>Chart Width:</Subtitle2>
               <Slider
@@ -120,13 +142,21 @@ const App: React.FC = () => {
               />
             </div>
           </div>
-          </>)}
-          <ChartWrapper 
-            width={isDimensionSlidersEnabled ? chartWidth : undefined} 
-            height={isDimensionSlidersEnabled ? chartHeight : undefined}
-            isReversedOrder={isV9ChartFirst}
-            isRTL={isRTL}
-          />
+          )}
+          {activeView === 'plotly' ? (
+            <ChartWrapper
+              width={chartWidthProp}
+              height={chartHeightProp}
+              isReversedOrder={true}
+              isRTL={isRTL}
+            />
+          ) : (
+            <VegaChartWrapper
+              width={chartWidthProp}
+              height={chartHeightProp}
+              isReversedOrder={true}
+            />
+          )}
         </PortalCompatProvider>
       </FluentProvider>
     </div>

apps/plotly_examples/src/components/VegaChart.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import embed, { Result } from 'vega-embed';
+
+interface VegaChartProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  spec: any;
+  width?: number;
+  height?: number;
+  theme?: 'light' | 'dark';
+}
+
+function VegaChartInner({ spec, width, height, theme = 'light' }: VegaChartProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const viewRef = React.useRef<Result | null>(null);
+  const lastSpecRef = React.useRef<string>('');
+  const lastThemeRef = React.useRef<string>('');
+
+  const specString = React.useMemo(() => JSON.stringify(spec), [spec]);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !spec) return;
+
+    const specChanged = lastSpecRef.current !== specString;
+    const themeChanged = lastThemeRef.current !== theme;
+
+    if (!specChanged && !themeChanged && viewRef.current) {
+      const view = viewRef.current.view;
+      if (width) view.width(width);
+      if (height) view.height(height);
+      view.runAsync();
+      return;
+    }
+
+    lastSpecRef.current = specString;
+    lastThemeRef.current = theme;
+
+    let isCancelled = false;
+
+    if (viewRef.current) {
+      viewRef.current.finalize();
+      viewRef.current = null;
+    }
+
+    const specWithDimensions = {
+      ...spec,
+      ...(width && { width }),
+      ...(height && { height }),
+      autosize: { type: 'fit', contains: 'padding' },
+    };
+
+    const embedOptions = {
+      actions: false,
+      renderer: 'svg' as const,
+      config: theme === 'dark' ? {
+        background: 'rgb(17,17,17)',
+        title: { color: 'white' },
+        axis: {
+          labelColor: 'white',
+          titleColor: 'white',
+          gridColor: '#444'
+        },
+        legend: { labelColor: 'white', titleColor: 'white' }
+      } : undefined
+    };
+
+    embed(container, specWithDimensions, embedOptions)
+      .then((result) => {
+        if (!isCancelled) {
+          viewRef.current = result;
+        } else {
+          result.finalize();
+        }
+      })
+      .catch((err: Error) => {
+        if (!isCancelled) {
+          console.error('Vega embed error:', err);
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [specString, width, height, theme]);
+
+  React.useEffect(() => {
+    return () => {
+      if (viewRef.current) {
+        viewRef.current.finalize();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        height: height ? `${height}px` : '360px',
+        width: width ? `${width}px` : '500px',
+        overflow: 'hidden'
+      }}
+    />
+  );
+}
+
+const VegaChart = React.memo(VegaChartInner, (prevProps, nextProps) => {
+  return (
+    JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec) &&
+    prevProps.width === nextProps.width &&
+    prevProps.height === nextProps.height &&
+    prevProps.theme === nextProps.theme
+  );
+});
+
+export default VegaChart;

apps/plotly_examples/src/components/VegaChartWrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import VegaDeclarativeChartExample from './VegaDeclarativeChartExample';
+
+interface VegaChartWrapperProps {
+  width: number | undefined;
+  height: number | undefined;
+  isReversedOrder?: boolean;
+}
+
+export function VegaChartWrapper({ width, height, isReversedOrder }: VegaChartWrapperProps) {
+  return (
+    <div style={{ marginLeft: '25px' }}>
+      <VegaDeclarativeChartExample width={width} height={height} isReversedOrder={isReversedOrder} />
+    </div>
+  );
+}