import { QuillProvider, useQuill } from "@quillsql/react";
function CustomComponent() {
// pass in any report created in the Quill BI Platform
const report = useQuill(QUILL_ID);
return <pre>{JSON.stringify(report, null, 2)}</pre>;
}
function App() {
return (
<QuillProvider
tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
publicKey={process.env.QUILL_API_KEY}
>
<CustomComponent />
</QuillProvider>
);
}
{
data: {
name: "My Report",
rows: [...],
columns: [...],
chartType: "table",
fields: [...],
xAxisField: "created_at",
yAxisField: "amount",
xAxisLabel: "Created"
yAxisLabel: "Total Amount",
queryString: "SELECT * FROM transactions;",
},
loading: false,
error: null
}
Make sure QuillProvider
is a parent of the component using the useQuill
hook.
Props
The id of the report you created in the Quill BI Platform.Don’t have an id yet? Learn how to create a chart in the Quill BI Platform to get started.