QuillProvider

App.tsx
import { QuillProvider } from "@quillsql/components";

function App() {
  return (
    <QuillProvider
      publicKey={process.env.QUILL_API_KEY}
      organizationId={user.organizationId}
      authToken={user.jwt}
      theme={THEME}
    >
      / * the rest of your app * /
    </QuillProvider>
  );
}
publicKey
string
required

The public Quill API key. This can be found in the Quill portal in the “Settings” tab.

organizationId
string
required

The organization id of the user

authToken
string?

The jwt token of the user. This is only needed if you are authenticating requests with Quill (this means you are using the Quill nodejs, go, or python server SDK).

theme
Theme

The theme

Dashboard

App.tsx
import { QuillProvider, Dashboard } from "@quillsql/components";

function App() {
  return (
    <QuillProvider
      organizationId={organizationId}
      publicKey={API_KEY}
      authToken={user.jwt}
      theme={THEME}
    >
      <Dashboard
        name="spend_dashboard"
        containerStyle={{ width: "100%", height: 400 }}
        onClickDashboardItem={(dashboardItem) => console.log(dashboardItem)}
      />
    </QuillProvider>
  );
}
name
string
required

The name of the dashboard you created in the Quill Portal. To learn more about creating dashboards, learn how to (link) create dashboards in portal.

containerStyle
React.CSSProperties

The CSS styles that wrap the dashboard.

onClickDashboardItem
(dashboardItem: DashboardItem) => void

Callback function that fires when a dashboard item is clicked. A common use case is navigating to a new page based on the dashboardItemId. Dashboard items are the list of charts that are in a Dashboard. Note the properties of a DashboardItem below:

DashboardItem
object

useQuill

App.tsx
import { QuillProvider, useQuill } from "@quillsql/components";

function CustomComponent() {
  // pass in any report or chart created in the Quill Portal
  const report = useQuill(QUILL_ID);
  // do anything with report object
  return <div>Custom component</div>;
}

function App() {
  return (
    <QuillProvider
      organizationId={organizationId}
      publicKey={API_KEY}
      authToken={user.jwt}
      theme={THEME}
    >
      <CustomComponent />
    </QuillProvider>
  );
}

Params

name
string
required

The name of the dashboard you created in the Quill Portal. To learn more about creating dashboards, learn how to (link) create dashboards in portal.

Result

QuillQuery
object
id
string

The dashboard item’s id. You can pass this into the Chart component as the chartId. You can also pass this into the useQuill hook to get the dashboard item.

data
object[]

The font family you want Quill to use. This is usually the same font your app uses. ex: “Inter”

queryType
'DashboardItem' | 'Table' | 'SavedReport'

The type associated with the query. A Quill query can either be a dashboard item (think chart, metric tile, etc), a table (a query that is formatted into a table in the quill portal), or a saved query (just a query and the corresponding data - not located on a dashboard)

chartType
'bar' | 'pie' | 'line' | 'metric'

The chart type associated with the report.

dateField
string?

The chart type associated with the report.

Chart

App.tsx
import { QuillProvider, Chart } from "@quillsql/components";

function App() {
  return (
    <QuillProvider
      organizationId={organizationId}
      publicKey={API_KEY}
      authToken={user.jwt}
      theme={THEME}
    >
      <Chart
        chartId="2348yfge987fq348fg"
        containerStyle={{ width: "100%", height: 400 }}
        colors={["#6269E9", "#E14F62"]}
      />
    </QuillProvider>
  );
}
chartId
string
required

The chart id. The most usage is through a detail page built to navigate from the dashboard - using onClickDashboardItem to get the dashboardItemId, and navigating to a route (say, reports/:id) where the url param is passed in as the chartId. For a standalone chart, you can find the chartId in the Quill Portal and pass it in directly.

containerStyle
React.CSSProperties

The CSS styles that wrap the chart.

colors
string[]

The chart colors you want Quill to use. Optional because Quill will use your theme colors by default, but this will override the theme colors.