Kottster Docs

Appearance

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:

app/pages/analytics/page.json
json
{
  "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:

app/pages/analytics/api.server.js
js
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:

app/pages/analytics/index.jsx
jsx
import { DashboardPage } from '@kottster/react'; 

export default () => (
  <DashboardPage />
);

Creating dashboard pages ​

You have two options for creating dashboard pages:

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.