Select metrics, dimensions, filters, visualization, and export format.
Loading preview...
"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";
import { useState } from "react";
import {
ReportBuilder,
ReportBuilderAction,
ReportBuilderActions,
ReportBuilderBar,
ReportBuilderBarLabel,
ReportBuilderBarValue,
ReportBuilderBody,
ReportBuilderCanvas,
ReportBuilderCanvasTitle,
ReportBuilderChart,
ReportBuilderConfig,
ReportBuilderDescription,
ReportBuilderFilters,
ReportBuilderHeader,
ReportBuilderHeading,
ReportBuilderMetric,
ReportBuilderOption,
ReportBuilderOptions,
ReportBuilderSection,
ReportBuilderSectionTitle,
ReportBuilderStatus,
ReportBuilderTitle,
type ReportBuilderVariant,
} from "@/components/ui/uai-report-builder";
import {
FilterBarChip,
FilterBarChips,
FilterBarControls,
FilterBarReset,
} from "@/components/ui/uai-report-builder-utils/src-components-ui-uai-filter-bar";
import {
MetricCardComparison,
MetricCardLabel,
MetricCardValue,
} from "@/components/ui/uai-report-builder-utils/src-components-ui-uai-metric-card";
const metrics = {
revenue: { label: "Net revenue", format: (value: number) => `$${value}k` },
orders: { label: "Orders", format: (value: number) => value.toLocaleString("en-US") },
};
const data = {
region: [
{ label: "North America", revenue: 412, orders: 3810 },
{ label: "Europe", revenue: 296, orders: 2955 },
{ label: "Asia Pacific", revenue: 158, orders: 1640 },
{ label: "Latin America", revenue: 74, orders: 902 },
],
channel: [
{ label: "Self-serve", revenue: 388, orders: 6120 },
{ label: "Sales-led", revenue: 471, orders: 2210 },
{ label: "Partners", revenue: 81, orders: 977 },
],
};
type Metric = keyof typeof metrics;
type Dimension = keyof typeof data;
export function ReportBuilderPreview({ variant = "sidebar" }: { variant?: ReportBuilderVariant }) {
const [metric, setMetric] = useState<Metric>("revenue");
const [dimension, setDimension] = useState<Dimension>("region");
const [chart, setChart] = useState("bars");
const [format, setFormat] = useState("csv");
const [refunds, setRefunds] = useState(true);
const [exported, setExported] = useState("");
const rows = data[dimension].map((row) => ({
label: row.label,
value: refunds ? Math.round(row[metric] * 0.96) : row[metric],
}));
const total = rows.reduce((sum, row) => sum + row.value, 0);
const max = Math.max(...rows.map((row) => row.value));
const { label, format: display } = metrics[metric];
return (
<ReportBuilder variant={variant}>
<ReportBuilderHeader>
<ReportBuilderHeading>
<ReportBuilderTitle>Quarterly business review</ReportBuilderTitle>
<ReportBuilderDescription>Q3 2026 · Refreshed 12 minutes ago</ReportBuilderDescription>
</ReportBuilderHeading>
<ReportBuilderActions>
<ReportBuilderAction>Save report</ReportBuilderAction>
<ReportBuilderAction
emphasis="primary"
onClick={() => setExported(`Exported qbr-q3-2026.${format}`)}
>
Export
</ReportBuilderAction>
</ReportBuilderActions>
</ReportBuilderHeader>
<ReportBuilderBody>
<ReportBuilderConfig onSubmit={(event) => event.preventDefault()}>
<ReportBuilderSection>
<ReportBuilderSectionTitle>Metric</ReportBuilderSectionTitle>
<ReportBuilderOptions>
{(Object.keys(metrics) as Metric[]).map((id) => (
<ReportBuilderOption
key={id}
type="radio"
name="metric"
checked={metric === id}
onChange={() => setMetric(id)}
>
{metrics[id].label}
</ReportBuilderOption>
))}
</ReportBuilderOptions>
</ReportBuilderSection>
<ReportBuilderSection>
<ReportBuilderSectionTitle>Break down by</ReportBuilderSectionTitle>
<ReportBuilderOptions>
<ReportBuilderOption
type="radio"
name="dimension"
checked={dimension === "region"}
onChange={() => setDimension("region")}
>
Region
</ReportBuilderOption>
<ReportBuilderOption
type="radio"
name="dimension"
checked={dimension === "channel"}
onChange={() => setDimension("channel")}
>
Channel
</ReportBuilderOption>
</ReportBuilderOptions>
</ReportBuilderSection>
<ReportBuilderSection>
<ReportBuilderSectionTitle>Visualization</ReportBuilderSectionTitle>
<ReportBuilderOptions>
{["bars", "columns", "number"].map((id) => (
<ReportBuilderOption
key={id}
type="radio"
name="chart"
checked={chart === id}
onChange={() => setChart(id)}
>
{id.charAt(0).toUpperCase() + id.slice(1)}
</ReportBuilderOption>
))}
</ReportBuilderOptions>
</ReportBuilderSection>
<ReportBuilderSection>
<ReportBuilderSectionTitle>Export format</ReportBuilderSectionTitle>
<ReportBuilderOptions>
{["csv", "xlsx", "pdf"].map((id) => (
<ReportBuilderOption
key={id}
type="radio"
name="format"
checked={format === id}
onChange={() => setFormat(id)}
>
{id.toUpperCase()}
</ReportBuilderOption>
))}
</ReportBuilderOptions>
</ReportBuilderSection>
</ReportBuilderConfig>
<ReportBuilderCanvas>
<ReportBuilderFilters activeCount={refunds ? 1 : 0} onReset={() => setRefunds(false)}>
<FilterBarControls>
<label style={{ display: "flex", gap: 6, alignItems: "center" }}>
<input
type="checkbox"
checked={refunds}
onChange={(event) => setRefunds(event.target.checked)}
/>
Exclude refunds
</label>
</FilterBarControls>
<FilterBarChips>
{refunds ? (
<FilterBarChip onRemove={() => setRefunds(false)}>Refunds excluded</FilterBarChip>
) : null}
</FilterBarChips>
<FilterBarReset />
</ReportBuilderFilters>
<ReportBuilderCanvasTitle>
{label} by {dimension}
</ReportBuilderCanvasTitle>
{chart === "number" ? (
<ReportBuilderMetric>
<MetricCardLabel>Total {label.toLowerCase()}</MetricCardLabel>
<MetricCardValue>{display(total)}</MetricCardValue>
<MetricCardComparison>Across {rows.length} segments</MetricCardComparison>
</ReportBuilderMetric>
) : (
<ReportBuilderChart
aria-label={`${label} by ${dimension}`}
max={max}
orientation={chart === "columns" ? "vertical" : "horizontal"}
>
{rows.map((row) => (
<ReportBuilderBar key={row.label} value={row.value}>
<ReportBuilderBarLabel>{row.label}</ReportBuilderBarLabel>
<ReportBuilderBarValue>{display(row.value)}</ReportBuilderBarValue>
</ReportBuilderBar>
))}
</ReportBuilderChart>
)}
<ReportBuilderStatus>
{exported || `${rows.length} rows · ${format.toUpperCase()} export ready`}
</ReportBuilderStatus>
</ReportBuilderCanvas>
</ReportBuilderBody>
</ReportBuilder>
);
}
function SourceSpecimen(){return <ReportBuilderPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}