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": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/config/tests.js

@@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /** Jest test setup file. */
 require('@testing-library/jest-dom');
+const { resetIdsForTests } = require('@fluentui/react-utilities');
+
+// Reset ID counter before each test for deterministic snapshots
+beforeEach(() => {
+  resetIdsForTests();
+});
 
 // https://github.com/jsdom/jsdom/issues/3368
 global.ResizeObserver = class ResizeObserver {

packages/charts/react-charts/library/docs/examples/declarative/vegalite/color-schemes/README.md

@@ -0,0 +1,196 @@
+# Vega-Lite Color Scheme Examples
+
+This directory contains examples demonstrating Vega-Lite color scheme support in the VegaLiteSchemaAdapter.
+
+## Supported Color Schemes
+
+The adapter maps standard Vega-Lite color schemes to Fluent UI DataViz colors:
+
+### Fully Supported Schemes
+
+| Vega-Lite Scheme | Description               | Fluent Mapping                                                                                                            |
+| ---------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| **category10**   | D3 Category10 (10 colors) | Maps to Fluent qualitative colors (lightBlue, warning, lightGreen, error, orchid, pumpkin, hotPink, disabled, gold, teal) |
+| **category20**   | D3 Category20 (20 colors) | Maps to Fluent qualitative color pairs with light/dark shades                                                             |
+| **tableau10**    | Tableau 10 (10 colors)    | Maps to Fluent colors matching Tableau's palette                                                                          |
+| **tableau20**    | Tableau 20 (20 colors)    | Maps to Fluent colors with light/dark pairs                                                                               |
+
+### Partially Supported (Fallback to Default)
+
+The following schemes are recognized but currently fall back to the default Fluent palette with a warning:
+
+- `accent`, `dark2`, `paired`, `pastel1`, `pastel2`, `set1`, `set2`, `set3`
+
+### Custom Color Ranges
+
+You can also specify custom colors using the `range` property, which takes priority over named schemes.
+
+## Examples
+
+### 1. Category10 Line Chart
+
+**File**: `category10-line.json`
+
+Multi-series line chart using the category10 scheme:
+
+```json
+{
+  "encoding": {
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": { "scheme": "category10" }
+    }
+  }
+}
+```
+
+### 2. Tableau10 Grouped Bar Chart
+
+**File**: `tableau10-grouped-bar.json`
+
+Grouped bar chart using the tableau10 scheme:
+
+```json
+{
+  "encoding": {
+    "color": {
+      "field": "product",
+      "type": "nominal",
+      "scale": { "scheme": "tableau10" }
+    }
+  }
+}
+```
+
+### 3. Custom Color Range Donut Chart
+
+**File**: `custom-range-donut.json`
+
+Donut chart with custom color array:
+
+```json
+{
+  "encoding": {
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": {
+        "range": ["#637cef", "#e3008c", "#2aa0a4", "#9373c0", "#13a10e"]
+      }
+    }
+  }
+}
+```
+
+### 4. Category20 Stacked Bar Chart
+
+**File**: `category20-stacked-bar.json`
+
+Stacked bar chart using the category20 scheme for more colors:
+
+```json
+{
+  "encoding": {
+    "color": {
+      "field": "segment",
+      "type": "nominal",
+      "scale": { "scheme": "category20" }
+    }
+  }
+}
+```
+
+## Color Priority
+
+The adapter applies colors in the following priority order:
+
+1. **Static color value** (`encoding.color.value`) - Highest priority
+2. **Mark color** (`mark.color`)
+3. **Custom range** (`encoding.color.scale.range`)
+4. **Named scheme** (`encoding.color.scale.scheme`)
+5. **Default Fluent palette** - Fallback
+
+## Implementation Details
+
+### VegaLiteColorAdapter
+
+The color mapping is implemented in `VegaLiteColorAdapter.ts`:
+
+```typescript
+import { getVegaColor } from './VegaLiteColorAdapter';
+
+// Get color for a series
+const color = getVegaColor(
+  seriesIndex, // Series/color index
+  colorScheme, // e.g., 'category10'
+  colorRange, // Custom color array
+  isDarkTheme, // Light/dark theme support
+);
+```
+
+### Scheme Mappings
+
+Each Vega scheme is mapped to Fluent DataViz tokens that adapt to light/dark themes:
+
+**Category10 Example**:
+
+- Vega blue (#1f77b4) → Fluent `color26` (lightBlue.shade10)
+- Vega orange (#ff7f0e) → Fluent `warning` (semantic warning color)
+- Vega green (#2ca02c) → Fluent `color5` (lightGreen.primary)
+
+**Tableau10 Example**:
+
+- Tableau blue (#4e79a7) → Fluent `color1` (cornflower.tint10)
+- Tableau orange (#f28e2c) → Fluent `color7` (pumpkin.primary)
+- Tableau red (#e15759) → Fluent `error` (semantic error color)
+
+## Testing
+
+Unit tests for color scheme support are in `VegaLiteSchemaAdapterUT.test.tsx`:
+
+```bash
+npm test -- VegaLiteSchemaAdapterUT
+```
+
+**Test Coverage**:
+
+- ✅ category10 scheme mapping
+- ✅ tableau10 scheme mapping
+- ✅ category20 scheme mapping
+- ✅ Custom color ranges
+- ✅ Priority order (range over scheme)
+- ✅ Fallback to default palette
+
+## Related Files
+
+- **VegaLiteColorAdapter.ts** - Color scheme mapping logic
+- **VegaLiteSchemaAdapter.ts** - Integration into chart transformers
+- **colors.ts** - Fluent DataViz palette definitions
+- **VegaLiteTypes.ts** - Type definitions for scale.scheme and scale.range
+
+## Usage in Charts
+
+All chart types support color schemes:
+
+- ✅ LineChart
+- ✅ VerticalBarChart
+- ✅ VerticalStackedBarChart
+- ✅ GroupedVerticalBarChart
+- ✅ DonutChart
+- ✅ AreaChart (inherits from LineChart)
+
+## Dark Theme Support
+
+Color mappings automatically adapt to dark theme:
+
+```typescript
+// Light theme: Uses first color in token array
+// Dark theme: Uses second color in token array (if available)
+
+const color = getVegaColor(0, 'category10', undefined, true); // isDarkTheme = true
+```
+
+Example:
+
+- `color11` → Light: #3c51b4 (cornflower.shade20) | Dark: #93a4f4 (cornflower.tint30)

packages/charts/react-charts/library/docs/examples/declarative/vegalite/color-schemes/category10-line.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Multi-series line chart with category10 color scheme",
+  "mark": "line",
+  "data": {
+    "values": [
+      { "month": "Jan", "sales": 28, "category": "Electronics" },
+      { "month": "Feb", "sales": 55, "category": "Electronics" },
+      { "month": "Mar", "sales": 43, "category": "Electronics" },
+      { "month": "Apr", "sales": 91, "category": "Electronics" },
+      { "month": "May", "sales": 81, "category": "Electronics" },
+      { "month": "Jan", "sales": 35, "category": "Clothing" },
+      { "month": "Feb", "sales": 60, "category": "Clothing" },
+      { "month": "Mar", "sales": 50, "category": "Clothing" },
+      { "month": "Apr", "sales": 75, "category": "Clothing" },
+      { "month": "May", "sales": 70, "category": "Clothing" },
+      { "month": "Jan", "sales": 20, "category": "Food" },
+      { "month": "Feb", "sales": 45, "category": "Food" },
+      { "month": "Mar", "sales": 38, "category": "Food" },
+      { "month": "Apr", "sales": 62, "category": "Food" },
+      { "month": "May", "sales": 58, "category": "Food" }
+    ]
+  },
+  "encoding": {
+    "x": {
+      "field": "month",
+      "type": "ordinal",
+      "axis": { "title": "Month" }
+    },
+    "y": {
+      "field": "sales",
+      "type": "quantitative",
+      "axis": { "title": "Sales" }
+    },
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": { "scheme": "category10" },
+      "legend": { "title": "Category" }
+    }
+  },
+  "title": "Sales by Category (Category10 Scheme)",
+  "width": 600,
+  "height": 400
+}

packages/charts/react-charts/library/docs/examples/declarative/vegalite/color-schemes/category20-stacked-bar.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Stacked bar chart with category20 color scheme",
+  "mark": "bar",
+  "data": {
+    "values": [
+      { "quarter": "Q1", "value": 10, "segment": "Segment 1" },
+      { "quarter": "Q1", "value": 15, "segment": "Segment 2" },
+      { "quarter": "Q1", "value": 8, "segment": "Segment 3" },
+      { "quarter": "Q1", "value": 12, "segment": "Segment 4" },
+      { "quarter": "Q2", "value": 12, "segment": "Segment 1" },
+      { "quarter": "Q2", "value": 18, "segment": "Segment 2" },
+      { "quarter": "Q2", "value": 10, "segment": "Segment 3" },
+      { "quarter": "Q2", "value": 14, "segment": "Segment 4" },
+      { "quarter": "Q3", "value": 14, "segment": "Segment 1" },
+      { "quarter": "Q3", "value": 20, "segment": "Segment 2" },
+      { "quarter": "Q3", "value": 12, "segment": "Segment 3" },
+      { "quarter": "Q3", "value": 16, "segment": "Segment 4" },
+      { "quarter": "Q4", "value": 16, "segment": "Segment 1" },
+      { "quarter": "Q4", "value": 22, "segment": "Segment 2" },
+      { "quarter": "Q4", "value": 14, "segment": "Segment 3" },
+      { "quarter": "Q4", "value": 18, "segment": "Segment 4" }
+    ]
+  },
+  "encoding": {
+    "x": {
+      "field": "quarter",
+      "type": "nominal",
+      "axis": { "title": "Quarter" }
+    },
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "axis": { "title": "Value" }
+    },
+    "color": {
+      "field": "segment",
+      "type": "nominal",
+      "scale": { "scheme": "category20" },
+      "legend": { "title": "Segment" }
+    }
+  },
+  "title": "Quarterly Values by Segment (Category20 Scheme)",
+  "width": 600,
+  "height": 400
+}

packages/charts/react-charts/library/docs/examples/declarative/vegalite/color-schemes/custom-range-donut.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Donut chart with custom color range",
+  "mark": { "type": "arc", "innerRadius": 50 },
+  "data": {
+    "values": [
+      { "category": "A", "value": 28 },
+      { "category": "B", "value": 55 },
+      { "category": "C", "value": 43 },
+      { "category": "D", "value": 91 },
+      { "category": "E", "value": 81 }
+    ]
+  },
+  "encoding": {
+    "theta": {
+      "field": "value",
+      "type": "quantitative"
+    },
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": {
+        "range": ["#637cef", "#e3008c", "#2aa0a4", "#9373c0", "#13a10e"]
+      },
+      "legend": { "title": "Category" }
+    }
+  },
+  "title": "Distribution by Category (Custom Colors)",
+  "width": 400,
+  "height": 400
+}

packages/charts/react-charts/library/docs/examples/declarative/vegalite/color-schemes/tableau10-grouped-bar.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Grouped bar chart with tableau10 color scheme",
+  "mark": "bar",
+  "data": {
+    "values": [
+      { "category": "Q1", "value": 28, "product": "Product A" },
+      { "category": "Q1", "value": 35, "product": "Product B" },
+      { "category": "Q1", "value": 42, "product": "Product C" },
+      { "category": "Q2", "value": 55, "product": "Product A" },
+      { "category": "Q2", "value": 60, "product": "Product B" },
+      { "category": "Q2", "value": 48, "product": "Product C" },
+      { "category": "Q3", "value": 43, "product": "Product A" },
+      { "category": "Q3", "value": 50, "product": "Product B" },
+      { "category": "Q3", "value": 65, "product": "Product C" },
+      { "category": "Q4", "value": 91, "product": "Product A" },
+      { "category": "Q4", "value": 75, "product": "Product B" },
+      { "category": "Q4", "value": 82, "product": "Product C" }
+    ]
+  },
+  "encoding": {
+    "x": {
+      "field": "category",
+      "type": "nominal",
+      "axis": { "title": "Quarter" }
+    },
+    "y": {
+      "field": "value",
+      "type": "quantitative",
+      "axis": { "title": "Revenue ($K)" }
+    },
+    "color": {
+      "field": "product",
+      "type": "nominal",
+      "scale": { "scheme": "tableau10" },
+      "legend": { "title": "Product" }
+    },
+    "xOffset": { "field": "product" }
+  },
+  "title": "Quarterly Revenue by Product (Tableau10 Scheme)",
+  "width": 600,
+  "height": 400
+}