SDK

The Upsolve SDK allows you to fully customize the appearance of your embedded dashboards through theme configuration. You can override any visual property to match your brand’s design system.

React SDK Usage

When deploying an <UpsolveDashboard />, provide a theme configuration object to the themeConfigs prop:

import { UpsolveDashboard } from "@upsolve-labs/sdk";
import { Theme } from "@upsolve-labs/utils";

const customTheme: Theme = {
  common: {
    // Layout & Spacing
    dashboardColumns: {
      lg: 8,
      md: 8,
      sm: 8,
      xs: 8,
      xxs: 8,
    },
    spacing: 10,

    // Typography
    dashboardFontFamily: "Helvetica",
    dashboardFontWeight: 400,
    chartFontWeight: 400,
    statCardTitleFontWeight: 400,
    statCardContentFontWeight: 400,
    labelFontSize: 16,

    // Card Styling
    cardBorderRadius: 25,
    cardPadding: {
      left: 10,
      right: 10,
      top: 10,
      bottom: 10,
    },
    cardTitlePosition: "left",

    // Button Styling
    buttonBorderRadius: 25,

    // Tabs & Labels
    tabsPlacement: "center",
    labelPadding: {
      left: 15,
      right: 15,
      top: 15,
      bottom: 15,
    },

    // Chart Subtitle
    chartSubtitlePosition: "left",
    chartSubtitleFontWeight: 400,
    chartSubtitleItalic: false,

    // Chart Configuration
    yAxisWidth: undefined, // Only used for bar charts

    // Filter Display
    hideFilterPills: false,
    hideFilterIcon: false,
    hideChartFilterIcon: false,

    // Info Tooltip
    infoTooltipIconSize: 20,
    infoTooltipIconPosition: "left",

    // Custom Messages
    noDataText: "No data available",
  },
  light: {
    // Background Colors
    dashboardBackgroundColor: "#50e3c2",
    widgetBackgroundColor: "rgba(245, 236, 105, 0.6)",
    chartBackgroundColor: "#f5a623",

    // Text Colors
    dashboardFontColor: "#000000",
    chartFontColor: "#000000",
    statCardTitleFontColor: "#000000",
    statCardContentFontColor: "#000000",
    chartSubtitleFontColor: "#000000",

    // Border Colors
    cardBorderColor: "#f5a623",
    sideBarBorderColor: "#f5a623",

    // Button Colors
    buttonColor: "#f5a623",
    buttonTextColor: "#ffffff",

    // Table Colors
    tableHeaderBackgroundColor: "rgba(245, 236, 105, 0.6)",
    tableActiveRowBackgroundColor: "#f5a623",
    tableDataBackgroundColor: "rgba(245, 236, 105, 0.6)",

    // Loading States
    chartSkeletonColor: "#e0e0e0",
  },
  dark: {
    // Background Colors
    dashboardBackgroundColor: "#4a8d61",
    widgetBackgroundColor: "#7c7c7c",
    chartBackgroundColor: "#7c7c7c",

    // Text Colors
    dashboardFontColor: "#ffffff",
    chartFontColor: "#ffffff",
    statCardTitleFontColor: "#ffffff",
    statCardContentFontColor: "#ffffff",
    chartSubtitleFontColor: "#ffffff",

    // Border Colors
    cardBorderColor: "#23f56a",
    sideBarBorderColor: "#23f56a",

    // Button Colors
    buttonColor: "#23f56a",
    buttonTextColor: "#ffffff",

    // Table Colors
    tableHeaderBackgroundColor: "#7c7c7c",
    tableActiveRowBackgroundColor: "#23f56a",
    tableDataBackgroundColor: "#7c7c7c",

    // Loading States
    chartSkeletonColor: "#4a4a4a",
  },
};

export default function MyDashboard() {
  return (
    <UpsolveDashboard
      dashboardId="your-dashboard-id"
      tenantJWT="your-jwt-token"
      themeConfigs={customTheme}
      theme="light" // or "dark"
    />
  );
}

Iframe Usage

When embedding dashboards via iframe, pass the theme configuration as a URL-encoded JSON string in the themeConfigs query parameter:

const themeConfig = {
  common: {
    cardBorderRadius: 25,
    dashboardColumns: { lg: 8, md: 8, sm: 8, xs: 8, xxs: 8 },
    spacing: 10,
    dashboardFontFamily: "Helvetica",
    dashboardFontWeight: 400,
    chartFontWeight: 400,
    cardTitlePosition: "left",
    statCardTitleFontWeight: 400,
    statCardContentFontWeight: 400,
    buttonBorderRadius: 25,
    tabsPlacement: "center",
    labelPadding: { left: 15, right: 15, top: 15, bottom: 15 },
    labelFontSize: 16,
  },
  light: {
    chartBackgroundColor: "#f5a623",
    cardBorderColor: "#f5a623",
    sideBarBorderColor: "#f5a623",
    tableHeaderBackgroundColor: "rgba(245, 236, 105, 0.6)",
    tableActiveRowBackgroundColor: "#f5a623",
    tableDataBackgroundColor: "rgba(245, 236, 105, 0.6)",
    dashboardBackgroundColor: "#50e3c2",
    widgetBackgroundColor: "rgba(245, 236, 105, 0.6)",
    buttonColor: "#f5a623",
    buttonTextColor: "#ffffff",
    dashboardFontColor: "#000000",
    chartFontColor: "#000000",
    statCardTitleFontColor: "#000000",
    statCardContentFontColor: "#000000",
  },
  dark: {
    chartBackgroundColor: "#7c7c7c",
    cardBorderColor: "#23f56a",
    sideBarBorderColor: "#23f56a",
    tableHeaderBackgroundColor: "#7c7c7c",
    tableActiveRowBackgroundColor: "#23f56a",
    tableDataBackgroundColor: "#7c7c7c",
    dashboardBackgroundColor: "#4a8d61",
    widgetBackgroundColor: "#7c7c7c",
    buttonColor: "#23f56a",
    buttonTextColor: "#ffffff",
    dashboardFontColor: "#ffffff",
    chartFontColor: "#ffffff",
    statCardTitleFontColor: "#ffffff",
    statCardContentFontColor: "#ffffff",
  },
};

// Encode the theme config as a URL parameter
const iframeSrc = `https://hub.upsolve.ai/share/dashboard/${dashboardId}?theme=light&jwt=${jwtToken}&themeConfigs=${encodeURIComponent(JSON.stringify(themeConfig))}`;

// Use in iframe
<iframe
  src={iframeSrc}
  width="1000"
  height="1000"
  title="Embedded Dashboard"
/>

Complete Iframe Example

import React, { useState, useEffect } from "react";
import axios from "axios";

function EmbeddedDashboard() {
  const [jwtToken, setJwtToken] = useState(null);
  const dashboardId = "your-dashboard-id";

  useEffect(() => {
    // Get your JWT token (example)
    const fetchToken = async () => {
      const response = await axios.post("/api/register-tenant", {
        // your registration payload
      });
      setJwtToken(response.data.token);
    };
    fetchToken();
  }, []);

  const themeConfig = {
    common: {
      dashboardColumns: { lg: 12, md: 12, sm: 8, xs: 6, xxs: 4 },
      spacing: 16,
      dashboardFontFamily: "Inter",
      dashboardFontWeight: 400,
      cardBorderRadius: 8,
      buttonBorderRadius: 8,
    },
    light: {
      dashboardBackgroundColor: "#ffffff",
      widgetBackgroundColor: "#f9fafb",
      cardBorderColor: "#e5e7eb",
      buttonColor: "#3b82f6",
      buttonTextColor: "#ffffff",
    },
    dark: {
      dashboardBackgroundColor: "#1f2937",
      widgetBackgroundColor: "#374151",
      cardBorderColor: "#4b5563",
      buttonColor: "#60a5fa",
      buttonTextColor: "#ffffff",
    },
  };

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

  const iframeSrc = `https://hub.upsolve.ai/share/dashboard/${dashboardId}?theme=light&jwt=${jwtToken}&themeConfigs=${encodeURIComponent(JSON.stringify(themeConfig))}`;

  return (
    <iframe
      src={iframeSrc}
      width="100%"
      height="800"
      style={{ border: "none" }}
      title="Embedded Dashboard"
    />
  );
}

Complete Theme Configuration Reference

Common Properties

Properties that apply to both light and dark themes:

Property	Type	Description	Default
`dashboardColumns`	`number` or `{lg, md, sm, xs, xxs}`	Number of columns in the dashboard layout. Can be a single number or an object with breakpoint-specific values.	`{lg: 8, md: 8, sm: 8, xs: 8, xxs: 8}`
`spacing`	`number`	Spacing between dashboard elements in pixels.	`10`
`dashboardFontFamily`	`string`	Font family used in the dashboard. See Available Fonts below.	`"Helvetica"`
`dashboardFontWeight`	`number`	Font weight used in the dashboard. Valid values: 200, 300, 400, 600, 700, 800, 900.	`400`
`chartFontWeight`	`number`	Font weight used in charts.	`400`
`statCardTitleFontWeight`	`number`	Font weight for stat card titles.	`400`
`statCardContentFontWeight`	`number`	Font weight for stat card content.	`400`
`cardBorderRadius`	`number`	Border radius for cards in pixels.	`undefined`
`cardPadding`	`{left, right, top, bottom}`	Padding for cards in pixels.	`undefined`
`cardTitlePosition`	`"left"` \| `"right"` \| `"center"`	Position of card titles.	`"left"`
`buttonBorderRadius`	`number`	Border radius for buttons in pixels.	`undefined`
`tabsPlacement`	`string`	Placement of tabs.	`"left"`
`labelPadding`	`{left, right, top, bottom}`	Padding for labels in pixels.	`undefined`
`labelFontSize`	`number`	Font size for labels in pixels.	`undefined`
`chartSubtitlePosition`	`"left"` \| `"right"` \| `"center"`	Position of chart subtitles.	`"left"`
`chartSubtitleFontWeight`	`number`	Font weight for chart subtitles.	`400`
`chartSubtitleItalic`	`boolean`	Whether chart subtitles should be italic.	`false`
`yAxisWidth`	`number`	Width of the y-axis in pixels (only used for bar charts).	`undefined`
`hideFilterPills`	`boolean`	Whether to hide the filter pills display below filters.	`false`
`hideFilterIcon`	`boolean`	Whether to hide the filter icon button on charts.	`false`
`hideChartFilterIcon`	`boolean`	Whether to hide the chart filter icon button on charts.	`false`
`infoTooltipIconSize`	`number`	Size of the chart info tooltip icon in pixels (8-48).	`20`
`infoTooltipIconPosition`	`"left"` \| `"right"`	Position of the chart info tooltip icon relative to the title.	`"left"`
`noDataText`	`string`	Custom text to display when charts have no data.	`undefined`

Light/Dark Theme Properties

Properties that can be set separately for light and dark themes:

Property	Type	Description	Default
`dashboardBackgroundColor`	`string`	Background color for the dashboard.	`"transparent"`
`dashboardFontColor`	`string`	Font color used in the dashboard.	`"inherit"`
`widgetBackgroundColor`	`string`	Background color for widgets/cards.	`"transparent"`
`chartBackgroundColor`	`string`	Background color for charts.	`undefined`
`buttonColor`	`string`	Color of buttons.	`"inherit"`
`buttonTextColor`	`string`	Color of button text.	`"#7C3AED"`
`chartFontColor`	`string`	Font color used in charts.	`"inherit"`
`statCardTitleFontColor`	`string`	Font color for stat card titles.	`"inherit"`
`statCardContentFontColor`	`string`	Font color for stat card content.	`"inherit"`
`cardBorderColor`	`string`	Border color for cards.	`undefined`
`sideBarBorderColor`	`string`	Border color for the sidebar.	`undefined`
`tableHeaderBackgroundColor`	`string`	Background color for table headers.	`undefined`
`tableActiveRowBackgroundColor`	`string`	Background color for active rows in tables.	`undefined`
`tableDataBackgroundColor`	`string`	Background color for table data cells.	`undefined`
`chartSkeletonColor`	`string`	Color of the chart skeleton/loading state.	`undefined`
`chartSubtitleFontColor`	`string`	Color of chart subtitles.	`"inherit"`

Available Fonts

The following font families are available for dashboardFontFamily:

Arial
Roboto
Helvetica
Inter
Times New Roman
Courier New
Georgia
Verdana
Trebuchet MS
Gill Sans
Noto Sans
Avantgarde
TeX Gyre Adventor
URW Gothic L
Optima
Arial Narrow
sans-serif
Didot
Palatino
URW Palladio L
Bookman
URW Bookman L
New Century Schoolbook
TeX Gyre Schola
American Typewriter
Andale Mono
Courier
FreeMono
OCR A Std
DejaVu Sans Mono
Overpass
Libre Franklin
franklin-gothic-atf
Space Grotesk
Open Sans
Spline Sans
DM Sans
Maven Pro
Poppins

Tips

Color Formats: Use hex colors (e.g., "#ff0000"), RGB/RGBA (e.g., "rgba(255, 0, 0, 0.5)"), or CSS color names.
Responsive Columns: Use the object form of dashboardColumns to create responsive layouts that adapt to different screen sizes.
Theme Inheritance: Properties not specified will inherit from the default theme, so you only need to override what you want to change.
Iframe URL Length: Be mindful of URL length limits when using iframes. Very large theme configs may need to be passed via other methods.

Analytics Layer

Data Connection

Charts

Dashboards

Filtering

Data Permissioning

Scheduled Reporting

Sharing & Export

Customize

Deployment

React SDK Usage

Iframe Usage

Complete Iframe Example

Complete Theme Configuration Reference

Common Properties

Light/Dark Theme Properties

Available Fonts

Tips

Analytics Layer

Data Connection

Charts

Dashboards

Filtering

Data Permissioning

Scheduled Reporting

Sharing & Export

Customize

Deployment

Documentation Index

​React SDK Usage

​Iframe Usage

​Complete Iframe Example

​Complete Theme Configuration Reference

​Common Properties

​Light/Dark Theme Properties

​Available Fonts

​Tips

React SDK Usage

Iframe Usage

Complete Iframe Example

Complete Theme Configuration Reference

Common Properties

Light/Dark Theme Properties

Available Fonts

Tips