Charts

This is the official documentation of Forest Admin Cloud.

Forest Admin is designed to provide you with the most flexible admin panel framework, allowing you to create charts with code to customize the visuals or the way data is retrieved.

The following sections assume that you have correctly followed all the steps in the Code Customization Getting Started guide.

TL;DR

src/index.ts
import type { Agent } from '@forestadmin/forest-cloud';
import { Schema } from '../typings';

export default function customizeAgent(agent: Agent<Schema>) {
  agent.addChart('monthlyRecurringRevenue', async (context, resultBuilder) => {
    // Your business logic to retrieve data here.
    return resultBuilder.value(10000000);
  });
}

Implementing backend logic to retrieve data

Forest Admin allows you to code how the data powering any given chart. To do it, select the API tab in the Data section, and fill the API endpoint URL:

  • If the chart is part of the global dashboard, then the URL should be /forest/_charts/<chart_name>

  • If the chart is part of the Analytics tab of a specific collection, then the URL should be: /forest/_charts/<collection_name>/<chart_name>

To make the code easier to read, all the code snippets below should be wrapped in the following code.

import type { Agent } from '@forestadmin/forest-cloud';
import { Schema } from '../typings';

export default function customizeAgent(agent: Agent<Schema>) {
  // Insert the code snippet here.
}

To create a chart, you can use the agent.addChart() method.

Arguments:

  • name* String: The name of the chart.

  • handle* Function: A function that has the context and resultBuilder as arguments.

agent.addChart('monthlyRecurringRevenue', async (context, resultBuilder) => {
  // Your business logic to retrieve data here.
  return resultBuilder.value(10000000);
});

Coding the visualization

If you need to create custom charts, you can also create the right visuals using HTML, CSS, and JavaScript, you can make unique visualizations

Last updated