Skip to main content
Version: 2.0

Thumbnail Generation

The RVThumbnail class lets you render dashboard and visualization thumbnails in your application. Thumbnails are useful when building custom dashboard selectors, gallery views, or previews outside of a RevealView.

Render a Dashboard Thumbnail​

Create an HTML element for the thumbnail and pass its selector to RVThumbnail.fromDashboard with the dashboard ID.

<div id="thumbnail" style="width: 240px; height: 160px;"></div>

Set an explicit width and height on the container so the thumbnail has a visible rendering area.

import { RVThumbnail } from "reveal-sdk";

async function renderThumbnail() {
  await RVThumbnail.fromDashboard("#thumbnail", "Sales");
}

renderThumbnail();

When the second argument is a string, Reveal SDK loads the dashboard information from the server using that dashboard ID. You can also pass an existing RVDashboard instance.

import { RVDashboard, RVThumbnail } from "reveal-sdk";

async function renderThumbnail() {
  const dashboard = await RVDashboard.loadDashboard("Sales");
  await RVThumbnail.fromDashboard("#thumbnail", dashboard);
}

renderThumbnail();

Render a Visualization Thumbnail​

To render a thumbnail for a specific visualization in a dashboard, pass the visualization as the third argument. The visualization can be identified by zero-based index, title, or an RVVisualization instance.

import { RVThumbnail } from "reveal-sdk";

async function renderThumbnail() {
  await RVThumbnail.fromDashboard("#thumbnail", "Sales", "Sales by Territory");
}

renderThumbnail();
import { RVThumbnail } from "reveal-sdk";

async function renderThumbnail() {
  await RVThumbnail.fromDashboard("#thumbnail", "Sales", 0);
}

renderThumbnail();

Render a Chart Type Thumbnail​

Use RVThumbnail.fromChartType when you need a thumbnail for a chart type without loading a dashboard.

import { RVChartType, RVThumbnail } from "reveal-sdk";

RVThumbnail.fromChartType("#thumbnail", RVChartType.ColumnChart);

Render from Dashboard JSON​

If you already have a dashboard JSON string, use RVThumbnail.fromDashboardJson.

import { RVThumbnail } from "reveal-sdk";

RVThumbnail.fromDashboardJson("#thumbnail", dashboardJson);

Runtime Theme Changes​

RVThumbnail uses the current RevealSdkSettings.theme. When the theme changes at runtime, active thumbnails refresh automatically.

import { MountainDarkTheme, RevealSdkSettings } from "reveal-sdk";

RevealSdkSettings.theme = new MountainDarkTheme();

Dispose a Thumbnail​

Thumbnail resources are released automatically when the container element is removed from the DOM. You can also dispose of a thumbnail explicitly from a framework lifecycle hook.

async function renderThumbnail() {
  const thumbnail = await RVThumbnail.fromDashboard("#thumbnail", "Sales");
  thumbnail?.dispose();
}

renderThumbnail();