Dashboard example

Get the example

The Vite dashboard example is a single page with stat tiles that carry a sparkline, an area chart, a donut chart, a ranked list of pages, a schedule, and modals opened from code. Copy the folder and run it:

yarn
yarn dev

Install recharts for the charts

The charts use recharts, which is an optional peer dependency. Add it to the project that uses them:

pnpm add recharts

The charts are exported from their own entry, so a project that does not use them never loads recharts:

import { AreaChart, DonutChart } from '@bolio-ui/core/charts'

Every other component, such as Sparkline, BarsList, Schedule and JsonViewer, comes from @bolio-ui/core and needs nothing extra.

Stat tiles with a sparkline

Stat has an extra slot on the right. Put a Sparkline in it, give it a name, and set trend so the color follows the change from the first to the last value:

<Stat
  label="Visits"
  value="24,300"
  change="+12.4% this month"
  extra={<Sparkline trend aria-label="Visits, last six months" data={[12, 14, 13, 18, 21, 24]} />}
/>

Modals from code

Wrap the app in ModalsProvider once, in the entry file. Then any component can call useModals() instead of keeping a visible state:

<BolioUIProvider>
  <ModalsProvider>
    <App />
  </ModalsProvider>
</BolioUIProvider>

const modals = useModals()

modals.openConfirm({
  title: 'Delete this report?',
  onConfirm: () => setToast({ text: 'Report deleted', type: 'success' })
})

The same hook opens any content, such as a JsonViewer with the raw data, or the details of a clicked event in the schedule.