import { QuillProvider , Dashboard } from "@quillsql/react" ; function App () { return ( < QuillProvider tenants = { [ 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 Ant Design Material Design
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 } /> ); }
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 } /> ); }
import { Dashboard } from "@quillsql/react" ; import { MaterialDateRangePickerComponent } from "./ui/material/DateRangePickerComponent" ; import { MaterialTableComponent } from "./ui/material/TableComponent" ; import { MaterialSelectComponent } from "./ui/material/SelectComponent" ; import { MaterialChartComponent } from "./ui/material/ChartComponent" ; import { MaterialMetricComponent } from "./ui/material/MetricComponent" ; import { MaterialFilterContainerComponent } from "./ui/material/Layout" ; export function MaterialDashboard () { return ( < Dashboard name = "Transactions" containerStyle = { dashboardStyles } DateRangePickerComponent = { MaterialDateRangePickerComponent } SelectComponent = { MaterialSelectComponent } TableComponent = { MaterialTableComponent } MetricComponent = { MaterialMetricComponent } ChartComponent = { MaterialChartComponent } FilterContainerComponent = { MaterialFilterContainerComponent } /> ); } Props 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.
The current report.
See the API Reference for a QuillReport
here .
onClick
(report: QuillReport) => void
A callback that should be fired when the user clicks on this report.
Whether this report is loading.
An error message that resulted from the loading of this report, if
any.
ChartComponent
(props: QuillReportProps) => JSX.Element
A component that wraps a report for non-metric, non-table chart types.
The current report.
See the API Reference for a
QuillReport here .
onClick
(report: QuillReport) => void
A callback that should be fired when the user clicks on this report.
Whether this report is loading.
An error message that resulted from the loading of this report, if any.
The child of a chart component is a chart graph by default.
You can override this behavior by not passing children in your implemented
version and instead rendering your own Chart.
TableComponent
(props: QuillReportProps) => JSX.Element
A component that wraps a report for ‘table’ chart types.
The current report.
See the API Reference for a
QuillReport here .
onClick
(report: QuillReport) => void
A callback that should be fired when the user clicks on this
report.
Whether this report is loading.
An error message that resulted from the loading of this report, if any.
SelectComponent
(props: SelectComponentProps) => JSX.Element
A select component.
export function SelectComponent ({ value , label , width , onChange , options }) { return ( < label > { label } < select value = { value } onChange = { onChange } style = { { width } } > { options . map (({ value , label }) => < option value = { value } > { label } </ option > ) } </ select > </ label > ); } The value of the select element.
The width of the select element in pixels.
The label above the select element.
onChange
(event: ChangeEvent<HTMLSelectElement>) => void
required
An event callback that is fired when the select value changes.
options
{ value: string; label: string; }[]
required
An array of value, label pairs which represent the select options.
DateRangePickerComponent
(props: DateRangePickerComponentProps) => JSX.Element
A date range picker component.
DateRangePickerComponentProps
The label above the date range picker.
dateRange
{ startDate: Date; endDate: Date }
required
presetOptions
{ label: string; value: string }[]
required
A set of options to select presets from.
onChangeDateRange
({ startDate, endDate }: { startDate: Date; endDate: Date; }) => void
required
A callback that is fired when the selected date range changes.
onChangePreset
(event: ChangeEvent<HTMLSelectElement>) => void
required
An event callback that is fired when the preset value changes.
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.
DashboardSectionComponentProps
section
'metrics' | 'charts' | 'tables'
required
The children of the dashboard section.
DashboardSectionContainerComponent
(props: DashboardSectionContainerComponentProps) => JSX.Element
A component that wraps all dashboard sections.
DashboardSectionContainerComponentProps
The children of the dashboard section.
FilterContainerComponent
(props: FilterContainerComponentProps) => JSX.Element
A component that wraps the row of dashboard filters.
FilterContainerComponentProps
The children of the filter container.
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.
Whether to hide dashboard filters.
Whether the date range filters on the dashboard are hidden.
Whether to hide the xAxis for all charts on this dashboard.
Whether to hide the yAxis for all charts on this dashboard.
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.
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.
The CSS styles that wrap the dashboard container.
This container is the parent of all the filtering buttons as well as any
dashboard sections.
The styles for the chart container.
QuillReport The name of the dashboard this report belongs to.
The rows of data returned from this report’s query.
The columns data returned from this report’s query.
chartType
'line' | 'pie' | 'table' | 'bar' | 'column' | 'metric'
dateField
{ table: string; field: string } | null
The table and field this chart uses for date filtering.
The pivot used in this query, if any.
aggregationType
'sum' | 'average' | 'count' | 'min' | 'max'
required
The aggregation type for the values in this pivot.
The type of the row field.
The column field, if any.
The type of the column field, if any.
The type of the value field, if any.
The formatted primary range aggregation value, if any.
The formatted comparison range aggregation value, if any.
The percent change in the aggragations, if any.
The field to use for the report’s xAxis.
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.
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.
The rows of data returned from this report’s query over the comparison date
range as opposed to the primary date range.
A map of filters that have been applied to this query.
