Quill is a react library and management system that allows SaaS companies to build dashboards quickly with the flexibility of code, while allowing non-engineers to manage queries and chart types in parallel.

To gain insight on how Quill works, you will walk through building a lightweight version of Quill. For simplicity, no need to worry about multi-tenancy (separating data by organization), authentication, filters, etc. Charts can either be a line or bar chart, with an x-axis field and a y-axis field (no multivariate axes or multi-axis). Use recharts as your charting library.

React frontend

<Dashboard /> Renders a grid of Charts associated with the dashboard name.

A date filter (I recommend using shadcn “Date Range Picker”) will be displayed that should filter all of the charts by dateField. There should also be a dropdown with preset date ranges ('LAST_90_DAYS', 'LAST_60_DAYS', 'LAST_30_DAYS', 'CURRENT_MONTH'). Use date-fns for calculating these ranges. Note that the initialDateRange field of the dashboard should be applied via sql to every query upon the initial request of dashboard items.

To be clear, there are three cases of date filtering:

1. The initial fetch of a dashboard item (uses initial range from dashboard). It filters date on a SQL level. Ex: if a chart has sqlQuery: ”select * from transactions” and dateField: { table: “transactions, field: “created_at” }, it should apply a filter to the query so that the transactions table created_at field ranges only between the startDate and endDate of the date filter. I recommend using WITH statements or subqueries.
2. the date range is in between the initial range fetched (ex: initial range is LAST_90_DAYS, new range filtered via the date filter in the UI is CURRENT_MONTH , so we already have that data surfaced on the frontend and can filter it without fetching new data)
3. the date range in outside of the initial range fetched. then filtering has to be down on the SQL level

Props

• name: string fetches dashboard by name from the server
• containerStyle: React.CSSProperties wraps the dashboard in a container
• onClickDashboardItem: (dashboardItem: Chart) => void callback function that fires when a chart in the dashboard is clicked

<Chart />

Props

• chartId: string fetches chart by id from the server
• containerStyle: React.CSSProperties wraps the chart in a container

Backend of your choice

Endpoints

/dashboard/:name