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

function App() {
  return (
    <QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
      <Dashboard name="Transactions" />
    </QuillProvider>
  );
}

Dynamically displays a filterable grid of charts, metrics, and tables with live data from your database. Once implemented, Quill lets you perform zero-downtime, zero-code updates to your dashboard on an org-level as well as company-wide.

Make sure QuillProvider is a parent of the Dashboard component.

Don’t have a dashboard name yet? Learn how to create a dashboard in the Quill portal to get started.

​
Examples

import { Dashboard } from "@quillsql/react";
import { AntDateRangePickerComponent } from "./ui/ant/DateRangePickerComponent";
import { AntTableComponent } from "./ui/ant/TableComponent";
import { AntSelectComponent } from "./ui/ant/SelectComponent";
import { AntChartComponent } from "./ui/ant/ChartComponent";
import { AntMetricComponent } from "./ui/ant/MetricComponent";

export function AntDashboard() {
  return (
    <Dashboard
      name="Transactions"
      containerStyle={dashboardStyles}
      DateRangePickerComponent={AntDateRangePickerComponent}
      SelectComponent={AntSelectComponent}
      TableComponent={AntTableComponent}
      MetricComponent={AntMetricComponent}
      ChartComponent={AntChartComponent}
      FilterContainerComponent={AntFilterContainerComponent}
    />
  );
}

​
Props

name
string
required

The name of the dashboard you created in the Quill Portal.

MetricComponent
(props: QuillReportProps) => JSX.Element

A component that wraps a report for ‘metric’ chart types.

ChartComponent
(props: QuillReportProps) => JSX.Element

A component that wraps a report for non-metric, non-table chart types.

TableComponent
(props: QuillReportProps) => JSX.Element

A component that wraps a report for ‘table’ chart types.

SelectComponent
(props: SelectComponentProps) => JSX.Element

A select component.

DateRangePickerComponent
(props: DateRangePickerComponentProps) => JSX.Element

A date range picker component.

DashboardSectionComponent
(props: DashboardSectionComponentProps) => JSX.Element

A component that wraps each dashboard section.

Each dashboard is grouped into three sections: metrics, charts, and tables (in that order). Some sections may be empty, in which case they are omitted.

DashboardSectionContainerComponent
(props: DashboardSectionContainerComponentProps) => JSX.Element

A component that wraps all dashboard sections.

FilterContainerComponent
(props: FilterContainerComponentProps) => JSX.Element

A component that wraps the row of dashboard filters.

EmptyDashboardComponent
() => JSX.Element

A fallback component displayed when an active dashboard has no reports.

onClickReport
(report: QuillReport) => void

Callback function that fires when a report is clicked. A common use case is navigating to a new page based on the report’s id. A dashboard is composed of a list of reports that could be metrics, charts, or tables.

See the API Reference for a QuillReport here.
onChangeLoading
(isLoading: boolean) => void

A callback that is fired when the loading status of the dashboard changes.

hideFilters
boolean
default: false

Whether to hide dashboard filters.

hideDateRangeFilter
boolean
default: false

Whether the date range filters on the dashboard are hidden.

hideXAxis
boolean
default: false

Whether to hide the xAxis for all charts on this dashboard.

hideYAxis
boolean
default: false

Whether to hide the yAxis for all charts on this dashboard.

hideCartesianGrid
boolean
default: false

Whether to hide the cartesian grid for all charts on this dashboard.

comparisonLineStyle
'solid' | 'dashed'
default: "solid"

The line style for comparison ranges on all line charts on this dashboard.

className
string

Applies the following classes to the ReportBuilder.

This container is the parent of all the filtering buttons as well as any dashboard sections. This can be useful for TailwindCSS-style classname strings.

containerStyle
React.CSSProperties

The CSS styles that wrap the dashboard container.

This container is the parent of all the filtering buttons as well as any dashboard sections.

chartContainerStyle
React.CSSProperties

The styles for the chart container.

​
QuillReport

id
string
required

The report’s unique id.

name
string
required

The name of the report.

dashboardName
string
required

The name of the dashboard this report belongs to.

rows
{ [key: string]: any }[]

The rows of data returned from this report’s query.

columns
any[]

The columns data returned from this report’s query.

chartType
'line' | 'pie' | 'table' | 'bar' | 'column' | 'metric'

The type of this chart.

dateField
{ table: string; field: string } | null

The table and field this chart uses for date filtering.

pivot
Pivot | null

The pivot used in this query, if any.

primaryAggregation
string

The formatted primary range aggregation value, if any.

comparisonAggregation
string

The formatted comparison range aggregation value, if any.

aggregationPercentChange
number

The percent change in the aggragations, if any.

xAxisLabel
string
required

The label of the xAxis.

xAxisField
string
required

The field to use for the report’s xAxis.

xAxisFormat
string
required

The format for the report’s xAxis.

yAxisFields
{ field: string; label: string; format: string; }[]
required

A list of metadata bout the yAxes of this report.

order
number
required

The relative ordering of this report in relation to its siblings. Ordering starts at 1 and counts up.

Reports in the same section are first grouped by chartType and then each group is sorted by order.

Currently, the first group is metric and the last group is table with the rest of the reports in between.

compareRows
{ [key: string]: any }[]

The rows of data returned from this report’s query over the comparison date range as opposed to the primary date range.

filtersApplied
{ [key: string]: any }

A map of filters that have been applied to this query.

QuillProviderReportBuilder