Embedding with React SDK

LIGHTDASH_CORS_ALLOWED_DOMAINS=https://domain-where-you-are-going-to-use-the-sdk.com

npm install @lightdash/sdk
# or
pnpm add @lightdash/sdk
# or
yarn add @lightdash/sdk

import "@lightdash/sdk/sdk.css";

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

type DashboardProps = {
  // Required
  instanceUrl: string;              // Your Lightdash instance URL
  token: string | Promise<string>;  // JWT (can be async; can be replaced at runtime)

  // Optional
  theme?: 'light' | 'dark';         // Force light or dark color scheme
  styles?: {
    backgroundColor?: string;       // Background color or 'transparent'
    fontFamily?: string;            // Font family for all text
  };
  filters?: SdkFilter[];            // Apply filters programmatically
  paletteUuid?: string;             // Color palette UUID for custom theming
  contentOverrides?: LanguageMap;   // Translate your content (names, titles, markdown)
  uiOverrides?: SdkUiOverrides;     // Translate Lightdash UI strings (filters, menus, buttons)
  isEditMode?: boolean;             // Render the dashboard in edit mode (requires writeActions JWT)
  onEditModeChange?: (
    isEditMode: boolean,
  ) => void;                        // Callback when the embed enters or leaves edit mode
  chartSaveDestinations?: ('dashboard' | 'space')[]; // Where "New chart" and "Save as new chart" save (default: ['dashboard'])
  onExplore?: (options: {
    chart: SavedChart
  }) => void;                       // Handle "Explore from here" in your app instead of the embed
  onEvent?: LightdashEventHandler;  // Saves, filter and tab changes, notifications
  onError?: (error: SdkError) => void; // Load and request failures
};

import Lightdash from '@lightdash/sdk';

function MyDashboard() {
  return (
    <Lightdash.Dashboard
      instanceUrl="https://app.lightdash.cloud"
      token={generateToken()} // Server-side function
    />
  );
}

import Lightdash, { FilterOperator } from '@lightdash/sdk';

<Lightdash.Dashboard
  instanceUrl="https://app.lightdash.cloud"
  token={token}
  filters={[
    {
      model: 'orders',
      field: 'status',
      operator: FilterOperator.EQUALS,
      value: 'completed',
    },
    {
      model: 'orders',
      field: 'created_date',
      operator: FilterOperator.IN_BETWEEN,
      value: ['2024-01-01', '2024-12-31'],
    },
  ]}
/>

<Lightdash.Dashboard
  instanceUrl="https://app.lightdash.cloud"
  token={token}
  styles={{
    backgroundColor: '#f5f5f5',
    fontFamily: 'Inter, sans-serif',
  }}
/>

<Lightdash.Dashboard
  instanceUrl="https://app.lightdash.cloud"
  token={generateToken({ canExplore: true })}
  onExplore={({ chart }) => {
    navigate(`/explore/${chart.uuid}`, { state: { chart } });
  }}
/>

import Lightdash from '@lightdash/sdk';
import { useState } from 'react';

function EditableDashboard() {
  const [isEditMode, setIsEditMode] = useState(false);

  return (
    <>
      {!isEditMode && (
        <button onClick={() => setIsEditMode(true)}>Edit dashboard</button>
      )}
      <Lightdash.Dashboard
        instanceUrl="https://app.lightdash.cloud"
        token={generateToken()} // JWT must include writeActions
        isEditMode={isEditMode}
        onEditModeChange={setIsEditMode}
      />
    </>
  );
}

<Lightdash.Dashboard
  instanceUrl="https://app.lightdash.cloud"
  token={generateToken({ canExplore: true })} // JWT must include writeActions
  isEditMode={isEditMode}
  onEditModeChange={setIsEditMode}
  chartSaveDestinations={['dashboard', 'space']}
/>

type DashboardBuilderProps = {
  // Required
  instanceUrl: string;              // Your Lightdash instance URL
  token: string | Promise<string>;  // JWT with writeActions claim

  // Optional
  theme?: 'light' | 'dark';
  styles?: {
    backgroundColor?: string;
    fontFamily?: string;
  };
  filters?: SdkFilter[];
  paletteUuid?: string;
  contentOverrides?: LanguageMap;
  uiOverrides?: SdkUiOverrides;
  isEditMode?: boolean;             // Render the new dashboard in edit mode
  onEditModeChange?: (
    isEditMode: boolean,
  ) => void;                        // Callback when the embed enters or leaves edit mode
  chartSaveDestinations?: ('dashboard' | 'space')[]; // See "Choose where new charts are saved"
  onDashboardReady?: (
    dashboard: EmbedDashboard,
  ) => void;                        // Called once the empty dashboard has been created
  onExplore?: (options: {
    chart: SavedChart
  }) => void;
  onEvent?: LightdashEventHandler;
  onError?: (error: SdkError) => void;
};

import Lightdash from '@lightdash/sdk';
import { useEffect, useState } from 'react';

function MyDashboardBuilder() {
  const [isEditMode, setIsEditMode] = useState(false);
  const [isReady, setIsReady] = useState(false);

  return (
    <>
      {isReady && !isEditMode && (
        <button onClick={() => setIsEditMode(true)}>Edit dashboard</button>
      )}
      <Lightdash.DashboardBuilder
        instanceUrl="https://app.lightdash.cloud"
        token={generateToken()} // JWT must include writeActions
        isEditMode={isEditMode}
        onEditModeChange={setIsEditMode}
        onDashboardReady={() => setIsReady(true)}
      />
    </>
  );
}

type ChartProps = {
  // Required
  instanceUrl: string;              // Your Lightdash instance URL
  id: string;                       // Chart UUID (savedQueryUuid)
  token: string | Promise<string>;  // JWT with type: 'chart'

  // Optional
  theme?: 'light' | 'dark';         // Force light or dark color scheme
  styles?: {
    backgroundColor?: string;       // Background color or 'transparent'
    fontFamily?: string;            // Font family for all text
  };
  contentOverrides?: LanguageMap;   // Translate your content (names, titles, markdown)
  uiOverrides?: SdkUiOverrides;     // Translate Lightdash UI strings (filters, menus, buttons)
  isEditMode?: boolean;             // Render the chart in Explore (requires writeActions JWT)
  onExplore?: (options: {
    chart: SavedChart
  }) => void;                       // Handle "Explore from here" in your app instead of the embed
  onEvent?: LightdashEventHandler;
  onError?: (error: SdkError) => void;
};

import Lightdash from '@lightdash/sdk';

function MyChart() {
  return (
    <Lightdash.Chart
      instanceUrl="https://app.lightdash.cloud"
      id="your-chart-uuid"
      token={generateChartToken()} // Server-side function
    />
  );
}

<Lightdash.Chart
  instanceUrl="https://app.lightdash.cloud"
  id="your-chart-uuid"
  token={token}
  styles={{
    backgroundColor: 'white',
    fontFamily: 'Helvetica, Arial, sans-serif',
  }}
/>

// Backend API endpoint
import jwt from 'jsonwebtoken';

export function generateChartToken(chartId) {
  return jwt.sign({
    content: {
      type: 'chart',
      contentId: chartId,  // savedQueryUuid
      canExportCsv: true,
      canExportImages: false,
      canViewUnderlyingData: true,
    },
  }, process.env.LIGHTDASH_EMBED_SECRET, { expiresIn: '24h' });
}

type ExploreProps = {
  // Required
  instanceUrl: string;              // Your Lightdash instance URL
  token: string | Promise<string>;  // JWT with canExplore: true
  exploreId: string;                // Explore (table) to open, e.g. chart.tableName
  savedChart: SavedChart;           // Chart to start from

  // Optional
  theme?: 'light' | 'dark';         // Force light or dark color scheme
  styles?: {
    backgroundColor?: string;       // Background color or 'transparent'
    fontFamily?: string;            // Font family for all text
  };
  filters?: SdkFilter[];
  contentOverrides?: LanguageMap;   // Translate your content (names, titles, markdown)
  uiOverrides?: SdkUiOverrides;     // Translate Lightdash UI strings (filters, menus, buttons)
  onExplore?: (options: {
    chart: SavedChart
  }) => void;
  onEvent?: LightdashEventHandler;
  onError?: (error: SdkError) => void;
};

import Lightdash from '@lightdash/sdk';
import type { ComponentProps } from 'react';

type SavedChart = ComponentProps<typeof Lightdash.Explore>['savedChart'];

function MyExplore({ chart }: { chart: SavedChart }) {
  return (
    <Lightdash.Explore
      instanceUrl="https://app.lightdash.cloud"
      token={generateExploreToken()} // Must include canExplore: true
      exploreId={chart.tableName}
      savedChart={chart}
    />
  );
}

<Lightdash.Explore
  instanceUrl="https://app.lightdash.cloud"
  token={token}
  exploreId={chart.tableName}
  savedChart={chart}
  styles={{
    backgroundColor: '#f9f9f9',
    fontFamily: 'Inter, sans-serif',
  }}
/>

// Backend API endpoint
import jwt from 'jsonwebtoken';

export function generateExploreToken() {
  return jwt.sign({
    content: {
      type: 'dashboard',  // Can use dashboard type
      dashboardUuid: 'starting-dashboard-uuid',
      canExplore: true,   // Required for explore access
      canExportCsv: true,
      canExportImages: true,
    },
  }, process.env.LIGHTDASH_EMBED_SECRET, { expiresIn: '4h' });
}

type AiAgentProps = {
  // Required
  instanceUrl: string;              // Your Lightdash instance URL
  agentUuid: string;                // Agent to embed (must match the JWT)
  token: string | Promise<string>;  // JWT with content.type: 'aiAgent'

  // Optional
  threadUuid?: string;              // Open a specific thread on load
  onThreadChange?: (options: { threadUuid: string }) => void; // Fires when the embed opens or creates a thread
  binding?: AiThreadBinding;        // Bind threads started here to a dashboard
  threadContext?: string;           // Background for threads started here (max 10,000 characters)
  renderMode?: 'iframe' | 'native'; // Beta: 'native' renders in your page. Default 'iframe'
  onEvent?: LightdashEventHandler;  // Charts and dashboards the agent creates or edits
  onError?: (error: SdkError) => void;
  theme?: 'light' | 'dark';
  styles?: {
    backgroundColor?: string;
    fontFamily?: string;            // Native mode only
  };
};

type AiThreadBinding = {
  type: 'dashboard';
  dashboardUuid: string;
};

import Lightdash from '@lightdash/sdk';

function MyAiAgent() {
  return (
    <Lightdash.AiAgent
      instanceUrl="https://app.lightdash.cloud"
      agentUuid="your-agent-uuid"
      token={generateAiAgentToken()} // Server-side function
    />
  );
}

<Lightdash.AiAgent
  instanceUrl="https://app.lightdash.cloud"
  agentUuid="your-agent-uuid"
  threadUuid="thread-uuid"
  token={token}
/>

import Lightdash from '@lightdash/sdk';
import { useState } from 'react';

const STORAGE_KEY = 'acme-shop:lightdash-ai-thread';

function ShopInsightsAgent({ token }: { token: string }) {
  const [threadUuid, setThreadUuid] = useState<string | undefined>(
    () => localStorage.getItem(STORAGE_KEY) ?? undefined,
  );

  return (
    <Lightdash.AiAgent
      instanceUrl="https://app.lightdash.cloud"
      agentUuid="agent-shop-insights"
      token={token}
      threadUuid={threadUuid}
      onThreadChange={({ threadUuid: nextThreadUuid }) => {
        setThreadUuid(nextThreadUuid);
        localStorage.setItem(STORAGE_KEY, nextThreadUuid);
      }}
    />
  );
}

<Lightdash.AiAgent
  instanceUrl="https://app.lightdash.cloud"
  agentUuid="your-agent-uuid"
  token={token}
  binding={{ type: 'dashboard', dashboardUuid }}
  threadContext="Summary of the previous conversation..."
  onThreadChange={({ threadUuid }) => saveThreadForDashboard(dashboardUuid, threadUuid)}
/>

<div style={{ height: 720 }}>
  <Lightdash.AiAgent
    instanceUrl="https://app.lightdash.cloud"
    agentUuid="your-agent-uuid"
    token={token}
    renderMode="native"
    styles={{ fontFamily: 'Inter, sans-serif' }}
  />
</div>

// Backend API endpoint
import jwt from 'jsonwebtoken';

export function generateAiAgentToken() {
  return jwt.sign({
    content: {
      type: 'aiAgent',
      projectUuid: 'your-project-uuid',
      agentUuid: 'your-agent-uuid',
    },
    writeActions: {
      serviceAccountUserUuid: 'service-account-user-uuid',
      writeSpaceUuids: ['destination-space-uuid'],
    },
    userAttributes: {
      tenant_id: 'tenant-abc',
    },
  }, process.env.LIGHTDASH_EMBED_SECRET, { expiresIn: '1h' });
}

type MetricsCatalogProps = {
  // Required
  instanceUrl: string;              // Your Lightdash instance URL
  token: string | Promise<string>;  // JWT with content.type: 'metricsCatalog'

  // Optional
  theme?: 'light' | 'dark';         // Force light or dark color scheme
  styles?: {
    backgroundColor?: string;       // Background color or 'transparent'
    fontFamily?: string;            // Font family for all text
  };
  hiddenFilters?: MetricsCatalogFilter[]; // Built-in filter controls to hide
  onEvent?: LightdashEventHandler;
  onError?: (error: SdkError) => void;
};

type MetricsCatalogFilter = 'tables' | 'owners' | 'categories';

<Lightdash.MetricsCatalog
  instanceUrl="https://app.lightdash.cloud"
  token={token}
  hiddenFilters={['owners']}
/>

import Lightdash from '@lightdash/sdk';

function MyMetricsCatalog() {
  return (
    <Lightdash.MetricsCatalog
      instanceUrl="https://app.lightdash.cloud"
      token={generateMetricsCatalogToken()} // Server-side function
    />
  );
}

// Backend API endpoint
import jwt from 'jsonwebtoken';

export function generateMetricsCatalogToken() {
  return jwt.sign({
    content: {
      type: 'metricsCatalog',
      projectUuid: 'your-project-uuid',
      canExplore: true,
    },
    writeActions: {
      serviceAccountUserUuid: 'service-account-user-uuid',
      writeSpaceUuids: ['destination-space-uuid'],
    },
    userAttributes: {
      tenant_id: 'tenant-abc',
    },
  }, process.env.LIGHTDASH_EMBED_SECRET, { expiresIn: '1h' });
}

import jwt from 'jsonwebtoken';

export function generateContentCatalogToken() {
  return jwt.sign(
    {
      content: {
        type: 'apiAccess',
        projectUuid: 'your-project-uuid',
        serviceAccountUserUuid: 'service-account-user-uuid',
      },
      user: {
        externalId: 'customer-user-123',
        email: 'customer@example.com',
      },
      userAttributes: {
        tenant_id: 'tenant-abc',
      },
    },
    process.env.LIGHTDASH_EMBED_SECRET,
    { expiresIn: '1h' },
  );
}

import Lightdash from '@lightdash/sdk';

function ContentCatalog({
  instanceUrl,
  projectUuid,
  token,
  spaceUuid,
}: {
  instanceUrl: string;
  projectUuid: string;
  token: string;
  spaceUuid: string;
}) {
  const { data, error, isLoading, refetch } = Lightdash.useLightdashContent(
    {
      instanceUrl,
      projectUuid,
      auth: {
        type: 'embedToken',
        token,
      },
    },
    {
      spaceUuids: [spaceUuid],
      contentTypes: ['dashboard', 'chart'],
      page: 1,
      pageSize: 50,
      sortBy: 'name',
      sortDirection: 'asc',
    },
  );

  if (isLoading) return <p>Loading content...</p>;
  if (error) return <p>Unable to load content</p>;

  return (
    <div>
      <button type="button" onClick={() => refetch()}>
        Refresh
      </button>

      {data?.data.map((item) => (
        <button key={item.uuid} type="button">
          {item.name}
        </button>
      ))}
    </div>
  );
}

type ListContentOptions = {
  projectUuids?: string[];
  spaceUuids?: string[];
  parentSpaceUuid?: string;
  contentTypes?: Array<'space' | 'dashboard' | 'chart' | 'data_app'>;
  page?: number;
  pageSize?: number;
  search?: string;
  sortBy?: 'name' | 'space_name' | 'last_updated_at';
  sortDirection?: 'asc' | 'desc';
};

type ListAiAgentThreadsOptions = {
  agentUuid: string;      // The agent whose threads should be listed
  projectUuid?: string;   // Falls back to the projectUuid on LightdashApiClientConfig
};

type LightdashAiAgentThreadResults = LightdashAiAgentThread[];

// One entry per thread the embed user can see. Full shape lives in
// @lightdash/common's ApiAiAgentThreadSummaryListResponse; the useful fields
// for building thread history UIs are:
type LightdashAiAgentThread = {
  uuid: string;
  title?: string;
  firstMessage: { uuid: string; message: string } | null; // null for a thread created without a prompt
  binding: {
    type: 'dashboard';
    dashboardUuid: string;
    displayName: string | null;   // null once the dashboard is deleted
  } | null;
  threadContext: string | null;   // always null for embed tokens
  // ...additional metadata such as timestamps
};

import Lightdash, {
  useLightdashAiAgentThreads,
  type LightdashApiClientConfig,
} from '@lightdash/sdk';
import { useState } from 'react';

const STORAGE_KEY = 'acme-shop:lightdash-ai-thread';

function ShopInsightsAgentWithHistory({
  token,
  projectUuid,
  agentUuid,
}: {
  token: string;
  projectUuid: string;
  agentUuid: string;
}) {
  const apiConfig: LightdashApiClientConfig = {
    instanceUrl: 'https://app.lightdash.cloud',
    projectUuid,
    auth: { type: 'embedToken', token },
  };

  const threads = Lightdash.useLightdashAiAgentThreads(apiConfig, {
    agentUuid,
    projectUuid,
  });

  const [threadUuid, setThreadUuid] = useState<string | undefined>(
    () => localStorage.getItem(STORAGE_KEY) ?? undefined,
  );

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr' }}>
      <aside>
        <button type="button" onClick={() => setThreadUuid(undefined)}>
          New thread
        </button>

        {threads.isLoading && <p>Loading history…</p>}
        {threads.data?.map((thread) => (
          <button
            key={thread.uuid}
            type="button"
            onClick={() => setThreadUuid(thread.uuid)}
          >
            {thread.title ?? thread.firstMessage?.message ?? 'Untitled thread'}
          </button>
        ))}
      </aside>

      <Lightdash.AiAgent
        instanceUrl="https://app.lightdash.cloud"
        token={token}
        agentUuid={agentUuid}
        threadUuid={threadUuid}
        onThreadChange={({ threadUuid: nextThreadUuid }) => {
          setThreadUuid(nextThreadUuid);
          localStorage.setItem(STORAGE_KEY, nextThreadUuid);
          // Refresh the sidebar so new threads show up immediately.
          threads.refetch();
        }}
      />
    </div>
  );
}

// server/api/embed-token.ts
import jwt from 'jsonwebtoken';

export async function generateEmbedToken(req, res) {
  // Authenticate user
  const userId = req.user.id;
  const user = await getUserFromDatabase(userId);

  // Generate token with user-specific attributes
  const token = jwt.sign({
    content: {
      type: 'dashboard',
      dashboardUuid: 'your-dashboard-uuid',
      dashboardFiltersInteractivity: {
        enabled: 'all',
      },
      canExportCsv: true,
      canExplore: true,
    },
    userAttributes: {
      tenant_id: user.tenantId,  // Row-level filtering
    },
    user: {
      externalId: user.id,
      email: user.email,
    },
  }, process.env.LIGHTDASH_EMBED_SECRET, { expiresIn: '1h' });

  res.json({ token });
}

import Lightdash from '@lightdash/sdk';
import { useState, useEffect } from 'react';

function EmbeddedDashboard() {
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    // Fetch token from your backend
    fetch('/api/embed-token')
      .then(res => res.json())
      .then(data => setToken(data.token));
  }, []);

  if (!token) return <div>Loading...</div>;

  return (
    <Lightdash.Dashboard
      instanceUrl="https://app.lightdash.cloud"
      token={token}
    />
  );
}

import Lightdash from '@lightdash/sdk';
import { useState, useEffect } from 'react';

function EmbeddedDashboard() {
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;

    const refresh = async () => {
      // Your backend returns the JWT and how long it is valid for
      const { token, expiresInSeconds } = await fetch('/api/embed-token')
        .then(res => res.json());
      setToken(token);
      // Mint the next token a minute before this one expires
      timer = setTimeout(refresh, (expiresInSeconds - 60) * 1000);
    };

    void refresh();
    return () => clearTimeout(timer);
  }, []);

  if (!token) return <div>Loading...</div>;

  return (
    <Lightdash.Dashboard
      instanceUrl="https://app.lightdash.cloud"
      token={token}
    />
  );
}

import Lightdash, { type LightdashEvent } from '@lightdash/sdk';

<Lightdash.Explore
  instanceUrl="https://app.lightdash.cloud"
  token={token}
  exploreId={chart.tableName}
  savedChart={chart}
  onEvent={(event: LightdashEvent) => {
    if (event.type === 'chartSaved' && event.payload.action === 'created') {
      showToast(`Chart saved`, { link: `/charts/${event.payload.chartUuid}` });
    }
    if (event.type === 'notification') {
      showToast(event.payload.title ?? '', { variant: event.payload.variant });
    }
  }}
/>

import Lightdash, { type LightdashEvent } from '@lightdash/sdk';
import { useState } from 'react';

function DashboardWithAgent({ dashboardUuid, dashboardToken, agentToken }) {
  const [revision, setRevision] = useState(0);

  return (
    <>
      <Lightdash.Dashboard
        key={revision}
        instanceUrl="https://app.lightdash.cloud"
        token={dashboardToken}
      />
      <Lightdash.AiAgent
        instanceUrl="https://app.lightdash.cloud"
        agentUuid="your-agent-uuid"
        token={agentToken}
        binding={{ type: 'dashboard', dashboardUuid }}
        onEvent={(event: LightdashEvent) => {
          if (
            event.type === 'dashboardSaved' &&
            event.payload.dashboardUuid === dashboardUuid
          ) {
            setRevision((current) => current + 1);
          }
        }}
      />
    </>
  );
}

type SdkError = {
  kind:
    | 'network'
    | 'token_expired'
    | 'invalid_token'
    | 'unauthorized'
    | 'forbidden'
    | 'not_found'
    | 'invalid_request'
    | 'server'
    | 'render'
    | 'unknown';
  status: number | null;   // HTTP status, or null when there was no response
  message: string;
  retryable: boolean;      // Network errors, 429, and 5xx server errors
  fatal: boolean;          // The component replaced its content with an error screen
};

import Lightdash, { type SdkError } from '@lightdash/sdk';
import { useState } from 'react';

function Dashboard({ token }: { token: string }) {
  const [error, setError] = useState<SdkError | null>(null);
  const [attempt, setAttempt] = useState(0);

  if (error?.fatal) {
    return (
      <div>
        <p>We couldn't load this report.</p>
        {error.retryable && (
          <button
            onClick={() => {
              setError(null);
              setAttempt((n) => n + 1);
            }}
          >
            Try again
          </button>
        )}
      </div>
    );
  }

  return (
    <Lightdash.Dashboard
      key={attempt}
      instanceUrl="https://app.lightdash.cloud"
      token={token}
      onError={setError}
    />
  );
}

styles?: {
  fontFamily?: string;       // Sets all fonts within the component
  backgroundColor?: string;  // Sets the background color or 'transparent'
}

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  styles={{
    fontFamily: 'Inter, sans-serif',
  }}
/>

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  styles={{
    backgroundColor: 'transparent',
  }}
/>

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  styles={{
    backgroundColor: '#f5f5f5',
    fontFamily: 'Helvetica, Arial, sans-serif',
  }}
/>

.ld-dashboard-filters {
  gap: 1rem;
}

.ld-dashboard-filter-dropdown {
  font-size: 1rem;
  min-width: 380px;
}

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  theme="dark"
/>

import Lightdash from '@lightdash/sdk';
import { useState } from 'react';

function EmbeddedDashboard() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  return (
    <Lightdash.Dashboard
      instanceUrl={lightdashUrl}
      token={lightdashToken}
      theme={theme}
    />
  );
}

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  theme="dark"
  styles={{
    backgroundColor: '#0b0b0f', // Overrides the default dark background
  }}
/>

<Lightdash.Dashboard
  instanceUrl="https://app.lightdash.cloud"
  token={token}
  paletteUuid="your-palette-uuid"
/>

type SdkFilter = {
  model: string;             // The model the dimension is part of
  field: string;             // The name of the dimension to filter by
  operator: FilterOperator;  // The filter operator (enum)
  value: unknown | unknown[]; // The value(s) to filter against
};

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  filters={[
    {
      model: 'dbt_users',
      field: 'browser',
      operator: FilterOperator.INCLUDE,
      value: ['chrome', 'safari'],
    },
  ]}
/>

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  filters={[
    {
      model: 'dbt_users',
      field: 'created_date_week',
      operator: FilterOperator.IN_BETWEEN,
      value: ['2024-08', '2024-10'],
    },
    {
      model: 'dbt_users',
      field: 'browser',
      operator: FilterOperator.INCLUDE,
      value: ['chrome', 'safari'],
    },
    {
      model: 'orders',
      field: 'status',
      operator: FilterOperator.EQUALS,
      value: 'completed',
    },
  ]}
/>

import Lightdash, { FilterOperator } from '@lightdash/sdk';

lightdash download --language-map

dashboard:
  sdk-dash:
    name: SDK dashboard demo
    description: "A dashboard demonstrating SDK features"
    filters:
      labels:
        Completed orders: Completed orders
        Order period: Order period
    tiles:
      - type: markdown
        properties:
          title: SDK demo dashboard
          content: >-
            This dashboard contains various tile types for showing SDK
            features.
      - type: saved_chart
        properties:
          title: "How do payment methods vary across different amount ranges?"

import i18n from 'i18next';

<Lightdash.Dashboard
  instanceUrl={lightdashUrl}
  token={lightdashToken}
  contentOverrides={i18n.getResourceBundle(
    i18n.language,      // Specify language
    'demo-dashboard',   // Specify namespace
  )}
/>

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import Locize from 'i18next-locize-backend';

i18next
  .use(Locize)  // Add Locize backend
  .use(initReactI18next)  // Bind react-i18next
  .init({
    // Locize configuration
    backend: {
      projectId: 'your-locize-project-id',
      apiKey: 'your-api-key',
      referenceLng: 'en',
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

import Lightdash, { type SdkUiOverrides } from '@lightdash/sdk';

const frenchUi: SdkUiOverrides = {
  'filters.addFilter': 'Ajouter un filtre',
  'filters.apply': 'Appliquer',
  'filters.operators.equals': 'est',
  'filters.operators.inThePast': 'au cours des derniers',
  'filters.unitsOfTime.days.plural': 'jours',
  'filters.unitsOfTime.days.completedPlural': 'jours révolus',
  'dateZoom.defaultZoom': 'Zoom par défaut',
  'tileMenu.downloadData': 'Télécharger les données',
};

<Lightdash.Dashboard
  instanceUrl={instanceUrl}
  token={token}
  contentOverrides={frenchLanguageMap} // your content
  uiOverrides={frenchUi}               // Lightdash's UI
/>;