feat(react-charts): vega lite schema support

change/@fluentui-react-charts-41b1a74d-095a-448d-80ec-c3156292b6a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "(feat): Add support for vega based schema",
+  "packageName": "@fluentui/react-charts",
+  "email": "atisjai@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -1835,6 +1835,74 @@ export interface SparklineStyles {
 // @public (undocumented)
 export const Textbox: React_2.FunctionComponent<TextboxProps>;
 
+// @public
+export const VegaDeclarativeChart: React_2.ForwardRefExoticComponent<VegaDeclarativeChartProps & React_2.RefAttributes<HTMLDivElement>>;
+
+// @public
+export interface VegaDeclarativeChartProps {
+    chartSchema: VegaSchema;
+    className?: string;
+    onSchemaChange?: (newSchema: VegaSchema) => void;
+    style?: React_2.CSSProperties;
+}
+
+// @public
+export interface VegaLiteSpec {
+    $schema?: string;
+    autosize?: string | {
+        type?: string;
+        contains?: string;
+    };
+    background?: string;
+    config?: Record<string, unknown>;
+    data?: VegaLiteData;
+    description?: string;
+    encoding?: VegaLiteEncoding;
+    facet?: Record<string, unknown>;
+    hconcat?: VegaLiteSpec[];
+    height?: number | 'container';
+    layer?: VegaLiteUnitSpec[];
+    mark?: VegaLiteMarkDef;
+    padding?: number | {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+    repeat?: Record<string, unknown>;
+    resolve?: {
+        scale?: {
+            x?: 'shared' | 'independent';
+            y?: 'shared' | 'independent';
+            color?: 'shared' | 'independent';
+            opacity?: 'shared' | 'independent';
+            size?: 'shared' | 'independent';
+            shape?: 'shared' | 'independent';
+        };
+        axis?: {
+            x?: 'shared' | 'independent';
+            y?: 'shared' | 'independent';
+        };
+        legend?: {
+            color?: 'shared' | 'independent';
+            opacity?: 'shared' | 'independent';
+            size?: 'shared' | 'independent';
+            shape?: 'shared' | 'independent';
+        };
+    };
+    selection?: Record<string, unknown>;
+    title?: string | VegaLiteTitleParams;
+    transform?: Array<Record<string, unknown>>;
+    vconcat?: VegaLiteSpec[];
+    width?: number | 'container';
+}
+
+// @public
+export interface VegaSchema {
+    selectedLegends?: string[];
+    vegaLiteSpec: VegaLiteSpec;
+}
+
 // @public
 export const VerticalBarChart: React_2.FunctionComponent<VerticalBarChartProps>;
 

packages/charts/react-charts/library/src/VegaDeclarativeChart.ts

@@ -0,0 +1 @@
+export * from './components/VegaDeclarativeChart';