Custom data fetcher
For dashboard pages in Kottster, you can define custom data fetchers to retrieve data from any source, including external APIs or unsupported databases. This is useful when you want to fetch data that is not directly available in your database or when you need to implement custom logic for data retrieval.
To set up a custom data fetcher, you need to use custom fetch (customFetch
) as a fetch strategy for your stats or charts in the dashboard configuration. This can be configured using the visual builder or by adding a customDataFetcher
function for a stat or chart config before passing it to defineTableController
.
customDataFetcher function
The customDataFetcher
function handles the logic for retrieving your data.
Arguments:
An object with the following optional properties:
periodStartDate
(string
, optional): The start date for the period filter, if enabled (YYYY-MM-DD
format).periodEndDate
(string
, optional): The end date for the period filter, if enabled (YYYY-MM-DD
format).
Return value for stats:
An object with the following properties:
value
(number
orstring
): The value to display in the stat.total
(number
orstring
, optional): The total value for the stat, if applicable.
Return value for line charts, area charts, and bar charts:
An object with the following properties:
items
(Array
): An array of objects representing the data points for the chart. Each object should have a date key property and one or more value properties.Example structure:
json{ "items": [ { "date": "2023-01-01", "users_count": 100, "orders_count": 200 }, { "date": "2023-01-02", "users_count": 150, "orders_count": 250 }, { "date": "2023-01-03", "users_count": 200, "orders_count": 300 } ] }
Basic example
Stats
Here's a simple custom data fetcher for a stat
import { app } from '../../_server/app';
const controller = app.defineDashboardController({
stats: [
{
key: 'stat_1', // Use the key of the stat you want to customize
fetchStrategy: 'customFetch',
customDataFetcher: async () => {
// Fetch data from any source
const response = await fetch('https://dummyjson.com/users');
const data = await response.json();
return {
value: data.total,
};
},
}
],
});
export default controller;
Line charts, area charts, and bar charts
For line charts, area charts, and bar charts, you can define a custom data fetcher that returns an array of data points:
import { app } from '../../_server/app';
const controller = app.defineDashboardController({
cards: [
{
key: 'card_1', // Use the key of the card you want to customize
fetchStrategy: 'customFetch',
customDataFetcher: async () => {
// Your custom data fetching logic here
return {
items: [
{ date: '2023-01-01', users_count: 100, orders_count: 200 },
{ date: '2023-01-02', users_count: 150, orders_count: 250 },
{ date: '2023-01-03', users_count: 200, orders_count: 300 }
]
};
},
}
],
});
export default controller;