Dashboard

App.tsx

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

function App() {
  return (
    <QuillProvider
      tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
      publicKey={process.env.QUILL_PUBLIC_KEY}
    >
      <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 BI Platform to get started.

Examples

Ant Design
Material Design

Edit [Ant Design] Quill React Components

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}
    />
  );
}

Edit [Material Design] Quill React Components

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

name

string

required

The name of the dashboard you created in the Quill BI Platform.

MetricComponent

(props: QuillReportProps) => JSX.Element

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

Show props

QuillReportProps

object

Show properties

report

QuillReport

required

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.

isLoading

boolean

Whether this report is loading.

error

string

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.

Show props

QuillReportProps

object

Show properties

report

QuillReport

required

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.

isLoading

boolean

Whether this report is loading.

error

string

An error message that resulted from the loading of this report, if any.

children

ReactNode

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.

Show props

QuillReportProps

object

Show properties

report

QuillReport

required

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.

isLoading

boolean

Whether this report is loading.

error

string

An error message that resulted from the loading of this report, if any.

SelectComponent

(props: SelectComponentProps) => JSX.Element

A select component.

Show props

Example

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>
	);
}

SelectComponentProps

object

Hide properties

value

string

required

The value of the select element.

width

number

required

The width of the select element in pixels.

label

string

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.

Show props

DateRangePickerComponentProps

object

Show properties

preset

string

required

The date preset.

label

string

The label above the date range picker.

dateRange

{ startDate: Date; endDate: Date }

required

The current date range.

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.

Show props

DashboardSectionComponentProps

object

Show properties

section

'metrics' | 'charts' | 'tables'

required

The name of the section.

children

ReactNode

required

The children of the dashboard section.

DashboardSectionContainerComponent

(props: DashboardSectionContainerComponentProps) => JSX.Element

A component that wraps all dashboard sections.

Show props

DashboardSectionContainerComponentProps

object

Show properties

children

ReactNode

required

The children of the dashboard section.

FilterContainerComponent

(props: FilterContainerComponentProps) => JSX.Element

A component that wraps the row of dashboard filters.

Show props

FilterContainerComponentProps

object

Show properties

children

ReactNode

required

The children of the filter container.

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

The full QuillReport schema is documented on the Types reference page.

Getting Started

Use cases

Components

Hooks

Functions

Reference

Examples

Props

QuillReport

Getting Started

Use cases

Components

Hooks

Functions

Reference

Documentation Index

​Examples

​Props

​QuillReport

Examples

Props

QuillReport