GenericDashboard

The main dashboard component. It manages tabbed navigation, lazy-loads chart definitions and chart data on demand, and persists drag-and-drop layout to localStorage.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { GenericDashboard } from "@xocialive/ui-components";

Basic usage

<GenericDashboard
  tabs={[
    { id: "overview", label: "Overview" },
    { id: "revenue", label: "Revenue" },
  ]}
  fetchChartDefinitions={async (tabId) => {
    const res = await api.get(`/dashboard/${tabId}/charts`);
    return res.data;
  }}
  fetchChartData={async (chartName, parameters) => {
    const res = await api.post(`/dashboard/data`, { chartName, parameters });
    return res.data;
  }}
/>

Props

Prop	Type	Description
tabs	DashboardTab[]	Tab definitions
fetchChartDefinitions	(tabId: string) => Promise<ChartDefinition[]>	Loads chart definitions for a tab (cached per session)
fetchChartData	(name: string, params: Parameter[]) => Promise<ChartData>	Loads data for one chart
defaultTabId	string	Initially active tab
storageKey	string	localStorage key for layout persistence
sx	SxProps<Theme>	Root style overrides

Lazy loading behaviour

GenericDashboard uses two layers of lazy loading:

1. Tab definitions — fetched once per tab on first visit, cached for the session lifetime.
2. Chart data — fetched per chart when the chart card enters the viewport (IntersectionObserver, 100 px margin, 10% threshold).

See Lazy Loading Explained for full details including known limitations.