From 4e690d99319311f7f3f4d44ac740b783a391caef Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Thu, 16 Apr 2026 12:53:18 +0300 Subject: [PATCH 1/3] feat(*): adding complete data chart example --- .../reference/CHARTS-GRIDS.md | 217 ++++++++++++++++++ 1 file changed, 217 insertions(+) diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index 68149dc..41a5eb0 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -20,6 +20,7 @@ IgrCategoryChartModule.register(); | Component | Module Import | Registration | |---|---|---| | `IgrCategoryChart` | `IgrCategoryChartModule` | `IgrCategoryChartModule.register()` | +| `IgrDataChart` | `IgrDataChartCoreModule` + category/annotation modules (see [Complete Data Chart Example](#complete-data-chart-example)) | Multiple `.register()` calls required | | `IgrPieChart` | `IgrPieChartModule` | `IgrPieChartModule.register()` | | `IgrFinancialChart` | `IgrFinancialChartModule` | `IgrFinancialChartModule.register()` | | `IgrRadialGauge` | `IgrRadialGaugeModule` | `IgrRadialGaugeModule.register()` | @@ -90,6 +91,222 @@ export default function DashboardView() { } ``` +## Complete Data Chart Example + +> **⚠️ IMPORTANT:** `IgrDataChart` requires registering **multiple modules** depending on the series type used. For bar charts, register the modules shown below. Miss any module and the chart or axis types will silently fail to render. + +### Module Registration for Bar Charts + +```tsx +import { + IgrLegendModule, + IgrDataChartCoreModule, + IgrDataChartCategoryCoreModule, + IgrDataChartCategoryModule, + IgrDataChartInteractivityModule, + IgrDataChartVerticalCategoryModule, + IgrDataChartAnnotationModule, +} from 'igniteui-react-charts'; + +// Register all required modules once at module level (outside any component) +IgrLegendModule.register(); +IgrDataChartCoreModule.register(); +IgrDataChartCategoryCoreModule.register(); +IgrDataChartCategoryModule.register(); +IgrDataChartInteractivityModule.register(); +IgrDataChartVerticalCategoryModule.register(); +IgrDataChartAnnotationModule.register(); +``` + +| Module | Purpose | +|---|---| +| `IgrDataChartCoreModule` | Core chart infrastructure | +| `IgrDataChartCategoryCoreModule` | Base for category series | +| `IgrDataChartCategoryModule` | Column, Line, Area, Spline etc. | +| `IgrDataChartVerticalCategoryModule` | **Bar series** (horizontal bars) | +| `IgrDataChartInteractivityModule` | Mouse hover, selection | +| `IgrDataChartAnnotationModule` | Tooltip layers, callout layers | +| `IgrLegendModule` | `IgrLegend` component | + +### Axis Choice for Bar Charts + +| Chart Orientation | Category Axis | Value Axis | +|---|---|---| +| Bar (horizontal) | `IgrCategoryYAxis` | `IgrNumericXAxis` | +| Column (vertical) | `IgrCategoryXAxis` | `IgrNumericYAxis` | + +> **Bar charts are horizontal** — categories go on the Y-axis and numeric values on the X-axis. This is the opposite of column charts. + +### Complete Bar Chart Component (Multiple Series) + +```tsx +import { useRef } from 'react'; +import { + IgrLegendModule, + IgrDataChartCoreModule, + IgrDataChartCategoryCoreModule, + IgrDataChartCategoryModule, + IgrDataChartInteractivityModule, + IgrDataChartVerticalCategoryModule, + IgrDataChartAnnotationModule, + IgrLegend, + IgrDataChart, + IgrCategoryYAxis, + IgrNumericXAxis, + IgrCategoryHighlightLayer, + IgrBarSeries, + IgrDataToolTipLayer, +} from 'igniteui-react-charts'; +import styles from './bar-chart-view.module.css'; + +// Register all required modules once at module level +IgrLegendModule.register(); +IgrDataChartCoreModule.register(); +IgrDataChartCategoryCoreModule.register(); +IgrDataChartCategoryModule.register(); +IgrDataChartInteractivityModule.register(); +IgrDataChartVerticalCategoryModule.register(); +IgrDataChartAnnotationModule.register(); + +interface MovieFranchise { + franchise: string; + totalRevenue: number; // total box office in billions USD + highestGrossing: number; // highest single film in billions USD +} + +const movieData: MovieFranchise[] = [ + { franchise: 'Marvel Universe', totalRevenue: 22.55, highestGrossing: 2.80 }, + { franchise: 'Star Wars', totalRevenue: 10.32, highestGrossing: 2.07 }, + { franchise: 'Harry Potter', totalRevenue: 9.19, highestGrossing: 1.34 }, + { franchise: 'Avengers', totalRevenue: 7.76, highestGrossing: 2.80 }, + { franchise: 'Spider Man', totalRevenue: 7.22, highestGrossing: 1.28 }, + { franchise: 'James Bond', totalRevenue: 7.12, highestGrossing: 1.11 }, +]; + +export default function BarChartView() { + const legendRef = useRef(null); + + return ( +
+

Highest Grossing Movie Franchises

+ + {/* Legend must be rendered before the chart so the ref is populated */} + + +
+ + {/* + * IgrCategoryYAxis — category axis for horizontal bar charts. + * - label: field name that supplies the axis labels. + * - dataSource: the data array (required on the axis for bar charts). + * - isInverted: renders top-to-bottom instead of bottom-to-top. + * - gap / overlap: control bar spacing (gap) and multi-series overlap. + */} + + + {/* IgrNumericXAxis — value axis; start at 0 per bar chart best practices */} + + + {/* Highlight the hovered category row across all series */} + + + {/* First series — total franchise revenue */} + + + {/* Second series — highest grossing single film */} + + + {/* Rich tooltip layer — shows all series values on hover */} + + +
+
+ ); +} +``` + +```css +/* bar-chart-view.module.css */ +.chart-wrapper { + display: flex; + flex-direction: column; + min-width: 500px; +} + +.legend-title { + font-size: 1rem; + font-weight: 600; + text-align: center; + margin-bottom: 0.5rem; +} + +.chart-container { + min-height: 400px; + flex-grow: 1; + flex-basis: 0; +} + +/* Make the chart fill its container */ +.chart-container > * { + height: 100%; + width: 100%; +} +``` + +### Key Props Reference for `IgrBarSeries` + +| Prop | Type | Description | +|---|---|---| +| `name` | `string` | Unique identifier — **required** when referencing the series from other elements | +| `xAxisName` | `string` | Must match the `name` of an `IgrNumericXAxis` declared in the same chart | +| `yAxisName` | `string` | Must match the `name` of an `IgrCategoryYAxis` declared in the same chart | +| `valueMemberPath` | `string` | Field name in the data object that holds the bar length value | +| `dataSource` | `any[]` | The data array — can differ per series for independent datasets | +| `title` | `string` | Series label shown in the legend | +| `isTransitionInEnabled` | `boolean` | Animates bars on initial render | +| `isHighlightingEnabled` | `boolean` | Dims other series when one is hovered | +| `showDefaultTooltip` | `boolean` | Shows a simple built-in tooltip (use `IgrDataToolTipLayer` for richer output) | + +### Available Bar Chart Variants + +| Variant | Component | Module | +|---|---|---| +| Bar (horizontal) | `IgrBarSeries` | `IgrDataChartVerticalCategoryModule` | +| Stacked Bar | `IgrStackedBarSeries` + `IgrStackedFragmentSeries` | `IgrDataChartStackedModule` | +| Stacked 100% Bar | `IgrStacked100BarSeries` + `IgrStackedFragmentSeries` | `IgrDataChartStackedModule` | + ## Complete Grid Lite Example > **⚠️ IMPORTANT:** Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) requires installing both `igniteui-react` and `igniteui-grid-lite` packages. It's a React wrapper component (uses `Igr` prefix) and works like any standard React component — no `.register()` needed. From 645d953ce7b3398bf1b15f4e5ea61fd22768b13d Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 17 Apr 2026 14:26:20 +0300 Subject: [PATCH 2/3] Update skills/igniteui-react-components/reference/CHARTS-GRIDS.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-react-components/reference/CHARTS-GRIDS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index 41a5eb0..7d3aadb 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -93,7 +93,7 @@ export default function DashboardView() { ## Complete Data Chart Example -> **⚠️ IMPORTANT:** `IgrDataChart` requires registering **multiple modules** depending on the series type used. For bar charts, register the modules shown below. Miss any module and the chart or axis types will silently fail to render. +> **⚠️ IMPORTANT:** `IgrDataChart` requires registering **multiple modules** depending on the series type used. For bar charts, register the modules shown below. If you miss any module, the chart or axis types will silently fail to render. ### Module Registration for Bar Charts From eb296d70624a4ec98e3b466ca3ee888f153268a0 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 17 Apr 2026 14:29:45 +0300 Subject: [PATCH 3/3] fix(skills): removing Reveal SDK from igniteui-react skills --- skills/igniteui-react-components/SKILL.md | 1 - .../reference/COMPONENT-CATALOGUE.md | 9 - .../reference/REVEAL-SDK.md | 198 ------------------ .../igniteui-react-customize-theme/SKILL.md | 1 - .../reference/REVEAL-THEME.md | 86 -------- 5 files changed, 295 deletions(-) delete mode 100644 skills/igniteui-react-components/reference/REVEAL-SDK.md delete mode 100644 skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md diff --git a/skills/igniteui-react-components/SKILL.md b/skills/igniteui-react-components/SKILL.md index 46c9981..4274fff 100644 --- a/skills/igniteui-react-components/SKILL.md +++ b/skills/igniteui-react-components/SKILL.md @@ -54,7 +54,6 @@ This skill is organized into focused reference files. Load the appropriate file | Event Handling | [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) | Event props, CustomEvent types, common events | | Refs & Forms | [REFS-FORMS.md](./reference/REFS-FORMS.md) | useRef, controlled/uncontrolled forms, React Hook Form | | Charts, Gauges, Maps & Grid Lite | [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) | Module registration, container sizing | -| Reveal SDK | [REVEAL-SDK.md](./reference/REVEAL-SDK.md) | Embedded BI dashboards, theme sync | | Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions | --- diff --git a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md index 8590c40..862b99c 100644 --- a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +++ b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md @@ -12,7 +12,6 @@ Ignite UI for React is distributed across several packages depending on your nee | [`igniteui-react-charts`](https://www.npmjs.com/package/igniteui-react-charts) | Commercial | `npm install igniteui-react-charts` (trial) | Charts (Category, Financial, Pie, Scatter, etc.) | | [`igniteui-react-maps`](https://www.npmjs.com/package/igniteui-react-maps) | Commercial | `npm install igniteui-react-maps` (trial) | Geographic maps | | [`igniteui-react-gauges`](https://www.npmjs.com/package/igniteui-react-gauges) | Commercial | `npm install igniteui-react-gauges` (trial) | Radial and linear gauges | -| [`reveal-sdk-wrappers-react`](https://www.npmjs.com/package/reveal-sdk-wrappers-react) | Commercial | `npm install reveal-sdk-wrappers-react` | Embedded BI dashboards (Reveal SDK) | > **Note:** The lightweight Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) requires installing both `igniteui-react` and `igniteui-grid-lite` packages. It's a React wrapper component (uses `Igr` prefix) that works like any other React component — no `.register()` needed. See [CHARTS-GRIDS.md](./CHARTS-GRIDS.md) for setup details. @@ -131,14 +130,6 @@ Use the tables below to map a UI need to the right React component. All componen |---|---|---|---| | Chat / AI assistant message thread | `IgrChat` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/interactivity/chat) | -### Embedded Analytics / BI Dashboards (Reveal SDK) - -| UI Need | Component | Import | Docs | -|---|---|---|---| -| Embedded BI dashboard viewer | `RvRevealView` | `reveal-sdk-wrappers-react` | [Docs](https://help.revealbi.io/web/getting-started-react/) | - -> **Note:** Reveal SDK is a companion product for embedding interactive dashboards and data visualizations. It uses separate packages (`reveal-sdk-wrappers-react`, `reveal-sdk-wrappers`) and requires a backend Reveal server URL. See [REVEAL-SDK.md](./REVEAL-SDK.md) for setup instructions and [../igniteui-react-customize-theme/SKILL.md](../igniteui-react-customize-theme/SKILL.md) for syncing Reveal's theme with Ignite UI theming tokens. - --- ## Step-by-Step: Choosing Components for a UI diff --git a/skills/igniteui-react-components/reference/REVEAL-SDK.md b/skills/igniteui-react-components/reference/REVEAL-SDK.md deleted file mode 100644 index d9babd3..0000000 --- a/skills/igniteui-react-components/reference/REVEAL-SDK.md +++ /dev/null @@ -1,198 +0,0 @@ -# Reveal SDK Integration - -Reveal SDK is a companion product for embedding interactive BI dashboards and data visualizations inside your React application. It requires client-side runtime dependencies, a backend Reveal server, and proper initialization. - -> **⚠️ IMPORTANT:** `RvRevealView` is NOT self-sufficient. You must load the Reveal client runtime, configure the backend URL, and initialize Reveal properly using `useEffect` after mount — never in the render phase. - -## Step 1: Install Dependencies - -```bash -npm install reveal-sdk-wrappers-react reveal-sdk-wrappers -``` - -## Step 2: Load Reveal Client Runtime - -Reveal SDK requires these client-side scripts to be loaded **before** using any Reveal components. Add them to your `index.html` or load them dynamically: - -```html - - - - -``` - -Replace `1.6.4` with your Reveal SDK version. - -> **Note:** The Reveal SDK exposes its API through the `$.ig` global namespace. If TypeScript reports that `$` is not defined, add this declaration: -> ```tsx -> declare const $: any; -> ``` - -## Step 3: Container Sizing (REQUIRED) - -Reveal views require a **properly sized container**. Without explicit dimensions, the dashboard will not render: - -```css -/* dashboard.module.css */ -.reveal-container { - width: 100%; - height: 100%; - min-width: 400px; - min-height: 400px; -} -``` - -## Step 4: Basic Integration Pattern - -> **⚠️ CRITICAL:** Always initialize Reveal in `useEffect` after the component mounts — never during render. Add guards for missing `$` and `$.ig` to prevent errors if scripts haven't loaded. - -```tsx -import { useEffect, useRef } from 'react'; -import styles from './dashboard.module.css'; - -declare const $: any; - -export default function DashboardView() { - const containerRef = useRef(null); - const revealViewRef = useRef(null); - - useEffect(() => { - // Guard: Ensure Reveal runtime is loaded - if (typeof $ === 'undefined' || !$.ig) { - console.error('Reveal SDK runtime not loaded. Ensure jQuery, Day.js, and infragistics.reveal.js are included.'); - return; - } - - // Guard: Prevent double initialization - if (revealViewRef.current) { - return; - } - - // Guard: Ensure container exists - if (!containerRef.current) { - return; - } - - // Configure Reveal SDK backend URL (REQUIRED) - $.ig.RevealSdkSettings.setBaseUrl('https://your-reveal-server/reveal-api/'); - - // Initialize RevealView with the container element - revealViewRef.current = new $.ig.RevealView(containerRef.current); - - // Optional: Load a specific dashboard - // $.ig.RVDashboard.loadDashboard('your-dashboard-id').then((dashboard: any) => { - // revealViewRef.current.dashboard = dashboard; - // }); - - // Cleanup on unmount - return () => { - if (revealViewRef.current) { - revealViewRef.current = null; - } - }; - }, []); - - return
; -} -``` - -## Using RvRevealView Wrapper (Alternative) - -The `RvRevealView` wrapper simplifies some boilerplate but still requires proper runtime setup and `useEffect` initialization: - -```tsx -import { useEffect } from 'react'; -import { RvRevealView } from 'reveal-sdk-wrappers-react'; -import { RevealViewOptions } from 'reveal-sdk-wrappers'; -import styles from './dashboard.module.css'; - -declare const $: any; - -export default function DashboardView() { - useEffect(() => { - // Guard: Ensure Reveal runtime is loaded - if (typeof $ === 'undefined' || !$.ig) { - console.error('Reveal SDK runtime not loaded.'); - return; - } - - // Configure backend URL (REQUIRED) — must be done before render - $.ig.RevealSdkSettings.setBaseUrl('https://your-reveal-server/reveal-api/'); - - // Optional: Apply theme sync with Ignite UI - setRevealTheme(); - }, []); - - const options: RevealViewOptions = { - visualizations: { - menu: { - copy: false, - duplicate: false - } - } - }; - - return ( -
- -
- ); -} - -function setRevealTheme() { - // Guard: Ensure $.ig exists - if (typeof $ === 'undefined' || !$.ig) return; - - const style = window.getComputedStyle(document.body); - const theme = new $.ig.RevealTheme(); - - // Sync fonts with Ignite UI - theme.regularFont = style.getPropertyValue('--ig-font-family').trim() || 'sans-serif'; - theme.mediumFont = theme.regularFont; - theme.boldFont = theme.regularFont; - - // Auto-detect light/dark mode - const color = style.getPropertyValue('--ig-surface-500').trim() || '#fff'; - const [r, g, b] = [1, 3, 5].map(i => parseInt(color.substring(i, i + 2), 16)); - const brightness = (r * 299 + g * 587 + b * 114) / 1000; - - theme.isDark = brightness < 128; - theme.fontColor = theme.isDark ? 'white' : 'black'; - theme.dashboardBackgroundColor = style.getPropertyValue('--ig-gray-100').trim(); - theme.visualizationBackgroundColor = style.getPropertyValue('--ig-surface-500').trim(); - - $.ig.RevealSdkSettings.theme = theme; -} -``` - -## Token Mapping Reference (Theme Sync) - -| Reveal Theme Property | Ignite UI CSS Token | Purpose | -|---|---|---| -| `regularFont`, `mediumFont`, `boldFont` | `--ig-font-family` | Font family | -| `isDark` | Computed from `--ig-surface-500` brightness | Light/dark mode detection | -| `fontColor` | Derived from `isDark` | Text color (white for dark, black for light) | -| `dashboardBackgroundColor` | `--ig-gray-100` | Dashboard background | -| `visualizationBackgroundColor` | `--ig-surface-500` | Individual visualization card background | - -## Common Issues - -### Reveal view is blank or throws errors -- **Cause:** Reveal runtime scripts not loaded (jQuery, Day.js, infragistics.reveal.js) -- **Solution:** Add the required scripts to `index.html` before your React app loads - -### `$` or `$.ig` is undefined -- **Cause:** Scripts not loaded or loaded after React component renders -- **Solution:** Ensure scripts are in `` or loaded before React mounts; add guards in `useEffect` - -### Dashboard not visible -- **Cause:** Container has no dimensions -- **Solution:** Add explicit `width`, `height`, `min-width`, `min-height` to the container - -### Double initialization errors -- **Cause:** `useEffect` running multiple times (Strict Mode) without cleanup -- **Solution:** Use a ref to track initialization state and prevent re-initialization - -> **Tip:** When switching between light and dark Ignite UI themes, call `setRevealTheme()` again after the theme change so Reveal dashboards stay in sync. - -See the [customize-theme skill](../../igniteui-react-customize-theme/SKILL.md) for more details on Ignite UI CSS custom properties and theme switching. diff --git a/skills/igniteui-react-customize-theme/SKILL.md b/skills/igniteui-react-customize-theme/SKILL.md index cc1f167..084c06c 100644 --- a/skills/igniteui-react-customize-theme/SKILL.md +++ b/skills/igniteui-react-customize-theme/SKILL.md @@ -54,7 +54,6 @@ This skill is organized into focused sections. Refer to the appropriate file for | CSS Theming | [CSS-THEMING.md](./reference/CSS-THEMING.md) | Pre-built themes, CSS custom properties, scoped overrides, layout controls, light/dark switching | | Sass Theming | [SASS-THEMING.md](./reference/SASS-THEMING.md) | Sass-based theming with palette(), component theme functions | | MCP Server | [MCP-SERVER.md](./reference/MCP-SERVER.md) | AI-assisted theming code generation | -| Reveal Theme Sync | [REVEAL-THEME.md](./reference/REVEAL-THEME.md) | Syncing Reveal SDK dashboards with Ignite UI theme | | Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions | --- diff --git a/skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md b/skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md deleted file mode 100644 index 77e2333..0000000 --- a/skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md +++ /dev/null @@ -1,86 +0,0 @@ -# Reveal SDK Theme Sync - -When the project includes Reveal SDK (`reveal-sdk-wrappers-react`) alongside Ignite UI for React, the Reveal dashboard theme should be synced with the active Ignite UI theme. - -> **⚠️ IMPORTANT:** Reveal SDK requires client runtime scripts (jQuery, Day.js, infragistics.reveal.js) to be loaded and initialization must happen in `useEffect` after mount. See [REVEAL-SDK.md](../../igniteui-react-components/reference/REVEAL-SDK.md) for full setup instructions. - -## How It Works - -Ignite UI themes expose CSS custom properties (`--ig-font-family`, `--ig-surface-500`, `--ig-gray-100`, etc.) on the page. The Reveal SDK has its own `$.ig.RevealTheme` object that controls dashboard appearance. The sync function reads the Ignite UI tokens from computed styles and maps them to Reveal's theme properties. - -## Reveal Theme Sync Function - -Call this function in `useEffect` when initializing a component that uses Reveal. Always guard against missing `$` and `$.ig`: - -```tsx -import { useEffect } from 'react'; - -declare const $: any; - -function setRevealTheme() { - // Guard: Ensure Reveal runtime is loaded - if (typeof $ === 'undefined' || !$.ig) { - console.error('Reveal SDK runtime not loaded.'); - return; - } - - const style = window.getComputedStyle(document.body); - const theme = new $.ig.RevealTheme(); - - // 1. Sync fonts with the Ignite UI --ig-font-family token - theme.regularFont = style.getPropertyValue('--ig-font-family')?.trim() || 'sans-serif'; - theme.mediumFont = theme.regularFont; - theme.boldFont = theme.regularFont; - - // 2. Auto-detect light/dark from surface color brightness - const color = style.getPropertyValue('--ig-surface-500').trim() || '#fff'; - const [r, g, b] = [1, 3, 5].map(i => parseInt(color.substring(i, i + 2), 16)); - const brightness = (r * 299 + g * 587 + b * 114) / 1000; - - theme.isDark = brightness < 128; - theme.fontColor = theme.isDark ? 'white' : 'black'; - - // 3. Sync background colors with Ignite UI palette tokens - theme.dashboardBackgroundColor = style.getPropertyValue('--ig-gray-100').trim(); - theme.visualizationBackgroundColor = style.getPropertyValue('--ig-surface-500').trim(); - - $.ig.RevealSdkSettings.theme = theme; -} - -// Example usage in a component -function DashboardView() { - useEffect(() => { - // Initialize theme sync after mount - setRevealTheme(); - }, []); - - // ... component implementation -} -``` - -## Token Mapping Reference - -| Reveal Theme Property | Ignite UI CSS Token | Purpose | -|---|---|---| -| `regularFont`, `mediumFont`, `boldFont` | `--ig-font-family` | Font family | -| `isDark` | Computed from `--ig-surface-500` brightness | Light/dark mode detection | -| `fontColor` | Derived from `isDark` | Text color (white for dark, black for light) | -| `dashboardBackgroundColor` | `--ig-gray-100` | Dashboard background | -| `visualizationBackgroundColor` | `--ig-surface-500` | Individual visualization card background | - -## Re-syncing After Theme Switch - -When the user switches between light and dark Ignite UI themes, call `setRevealTheme()` again to update the Reveal dashboard: - -```tsx -function handleThemeToggle() { - // ... toggle Ignite UI theme (e.g., swap CSS imports) - - // Re-sync Reveal theme after DOM updates - requestAnimationFrame(() => { - setRevealTheme(); - }); -} -``` - -See the [components skill](../../igniteui-react-components/reference/REVEAL-SDK.md) for full Reveal SDK setup instructions including installation, runtime scripts, and `$.ig.RevealView` initialization.