Dashboard pages
Kottster dashboard pages let you visualize and monitor data through statistics and charts.
Dashboard pages support a variety of visualization components, including:
- Statistics blocks for key metrics
- Line charts for trend analysis
- Area charts for cumulative data
- Bar charts for categorical comparisons
Page structure
Each dashboard page requires a page.json
configuration file in its own directory under app/pages/<pageKey>
. The <pageKey>
becomes the URL path where your page will be accessible (e.g., /analytics
for a page in ./app/pages/analytics/
).
Configuration file (page.json
)
This file defines the dashboard page configuration and is the only required file. You can edit it using the visual builder or modify the file manually.
Example:
{
"type": "dashboard",
"title": "Analytics Dashboard",
...
"config": {
// Dashboard configuration goes here
"stats": [...],
"cards": [...],
"withDateRangePicker": true,
...
}
}
Optional customization files
If you need additional customization beyond what the visual builder provides, you can add these optional files:
Backend controller (api.server.js
)
You can modify this file when you need custom data fetching, aggregations, or other custom backend logic beyond what's configured in page.json
.
Example:
import { app } from '../../_server/app';
const controller = app.defineDashboardController({});
export default controller;
Frontend component (index.jsx
)
The file should export the DashboardPage
component, which renders the dashboard and automatically connects to your backend configuration. You can customize the UI and add additional components by passing props to the DashboardPage
component.
Example:
import { DashboardPage } from '@kottster/react';
export default () => (
<DashboardPage />
);
Creating dashboard pages
You have two options for creating dashboard pages:
Option 1: Using visual builder (recommended)
The fastest way to create dashboard pages is using Kottster's visual builder. It connects to your database, analyzes available data, and helps you configure statistics and charts with a point-and-click interface.
When you use the visual builder, it creates a page.json
file with your dashboard configuration. It contains your page configuration and is automatically managed by the visual builder. If you need additional customization beyond what the visual builder offers, you can create optional api.server.js
and index.jsx
files as described above.
INFO
The visual builder manages the page.json
file automatically. Even though you can edit it manually, it's recommended to use the visual builder for creating and configuring dashboard pages. This ensures that all necessary configurations are correctly set up and reduces the risk of errors.
Option 2: Manual creation
For more control or custom requirements, you can manually create the page.json
file in your ./app/pages/<pageKey>
directory. Add optional api.server.js
and index.jsx
files only if you need additional customization beyond the base dashboard functionality.