Build and Deploy Your First Dashboard

Welcome to Upsolve AI, your go-to platform for enabling embedded business intelligence for your customers. By following this example we will walk you through the essentials of connecting your data, setting up tenancy, building your first dashboard, sharing your insights, and deploying your dashboards in your product.

​

Connecting data:

We’ve already set up a sample database to help you quickly explore and test the platform without needing to connect your own data source.

To view this connection, please go to the Connect tab as seen below:

If you would like to connect to a different data source, please have a look at how to set up your connection.

​

Build your first dashboard

In order to build your first dashboard you should begin by creating your first chart before adding to the dashboard.

​

Build your first chart

It requires five steps to build your first chart. In the below example, you will build a grouped bar chart using the aggregations table.

​

Configure your dashboard

You are able to customise your dashboard by adding dashboard filters, controlled filters and additional charts.

To resize charts you can hover over the dashboard, and then simply drag the chart to the size you would like.

To move a chart you can hover over the dashboard, and then simply drag and drop the chart.

​

Add dashboard filters

To add a dashboard filter please click on New Filter,

​

Add charts

To add additional charts you can go to through the steps of creating a new chart.

Alternatively if you have already built a chart you can click on Add Chart to use on your dashboard.

​

Share your dashboard and collaborate

You can share your dashboard via email with anyone by clicking on the share button and sharing it, if you would like a preview of the dashboard please click on the preview.

By sharing your dashboard, they will become a team member of your organization and can view, edit and collaborate on the dashboard(s) with you.

​

User Authorization (Tenant Registration)

To set up tenant registration please follow the steps outlined in Backend Setup.

Alternatively if you are using our sample database and do not intend to go live with the dashboard this step is optional.

​

Preview dashboard as your designated end users

If you have completed the Backend Setup, you are able to view the dashboard as one of your customers. Please click on the View As button in your hub.

If you do not intend to go live with the dashboard, and thus did not setup your backend accordingly, you could use the platform to create a testing tenant instead and preview the dashboard as the testing tenant. We have provided two sample testing tenants for you for the sample database, which you could use to preview the example dashboard built as the tenant.

If you are using the sample database and want to add more to add more Preview Tenants, please click on Home, then Deploy and then Registered Tenants

Click on Create tenant You can use the following values to simulate creating a tenant:

• Tenant Display Name: {customer-1}
• Filter Column: {CustomerID}
• Filter Value: {User_1}

​

Deploy your dashboard

Please click on the Deploy button in the Hub.

You will need to get the JWT for the current user and the dashboard ID to render the correct dashboard. The JWT is generated by following the steps in Backend Setup. The dashboard ID could be found in the URL when you are viewing the dashboard you want to embed.

Below is an example of deploying component with JWT using Clerk middleware:

"use client";
import React from "react";
import { useUser } from "@clerk/nextjs";

const Analytics: React.FC = () => {
  // Get the user information from Clerk and extract the Upsolve token from the metadata
  const { user } = useUser();
  const upsolveToken = user?.publicMetadata?.["upsolveToken"];

  // Embed the component into your app
  return (
    <>
      {upsolveToken != null && typeof upsolveToken === "string" && (
        <iframe
          id="c5da5cb3-fedb-4656-9170-0cc65c9db29a"
          title="Example Dashboard"
          width="1000"
          height="1000"
          src="https://hub.upsolve.ai/share/dashboard/c5da5cb3-fedb-4656-9170-0cc65c9db29a?theme=light&jwt=<upsolveToken>"
        />
      )}
    </>
  );
};

export default Analytics;