Node.js Developer Guide
Other documentationsDemoCommunityGitHub
  • Forest Admin
  • Getting started
    • How it works
    • Quick start
    • Install
      • Create your agent
      • Expose an HTTP endpoint
        • For standalone agents
        • On Express
        • On Koa
        • On Fastify
        • On NestJS
      • Autocompletion & Typings
      • Troubleshooting
    • Migrating legacy agents
      • What's new
      • Pre-requisites
      • Recommendations
      • Migration steps
        • Run new agent in parallel
        • Configure database connection
        • Code transformations
          • API Charts
          • Live Queries
          • Smart Charts
          • Route overrides
          • Smart Actions
          • Smart Fields
          • Smart Relationships
          • Smart Segments
        • Compare schemas
        • Swap agents
      • Post-migration
        • Dropping Sequelize
        • Optimize your agent
  • Data Sources
    • Getting Started
      • Collection selection
      • Naming conflicts
      • Cross-data source relationships
      • Query interface and Native Queries
        • Fields and projections
        • Filters
        • Aggregations
    • Provided data sources
      • SQL (without ORM)
      • Sequelize
      • Mongoose
      • MongoDB
    • Write your own
      • Replication strategy
        • Persistent cache
        • Updating the replica
          • Scheduled rebuilds
          • Change polling
          • Push & Webhooks
        • Schema & References
        • Write handlers
      • Translation strategy
        • Structure declaration
        • Capabilities declaration
        • Read implementation
        • Write implementation
        • Intra-data source Relationships
      • Contribute
  • Agent customization
    • Getting Started
    • Actions
      • Scope and context
      • Result builder
      • Static Forms
      • Widgets in Forms
      • Dynamic Forms
      • Form layout customization
      • Related data invalidation
    • Charts
      • Value
      • Objective
      • Percentage
      • Distribution
      • Leaderboard
      • Time-based
    • Fields
      • Add fields
      • Move, rename and remove fields
      • Override binary field mode
      • Override writing behavior
      • Override filtering behavior
      • Override sorting behavior
      • Validation
    • Hooks
      • Collection hook
      • Collection override
    • Pagination
    • Plugins
      • Provided plugins
        • AWS S3
        • Advanced Export
        • Flattener
      • Write your own
    • Relationships
      • To a single record
      • To multiple records
      • Computed foreign keys
      • Under the hood
    • Search
    • Segments
  • Frontend customization
    • Smart Charts
      • Create a table chart
      • Create a bar chart
      • Create a cohort chart
      • Create a density map
    • Smart Views
      • Create a Map view
      • Create a Calendar view
      • Create a Shipping view
      • Create a Gallery view
      • Create a custom tinder-like validation view
      • Create a custom moderation view
  • Deploying to production
    • Environments
      • Deploy on AWS
      • Deploy on Heroku
      • Deploy on GCP
      • Deploy on Ubuntu
      • Deploy on Azure
    • Development workflow
    • Using branches
    • Deploying your changes
    • Forest Admin CLI commands
      • init
      • login
      • branch
      • switch
      • set-origin
      • push
      • environments:create
      • environments:reset
      • deploy
  • Under the hood
    • .forestadmin-schema.json
    • Data Model
      • Typing
      • Relationships
    • Security & Privacy
Powered by GitBook
On this page
  • Steps
  • Step 1: Retrieve the SQL query from the UI
  • Step 2: Create a new API chart
  • Step 3: Retrieve the URL of the generated chart
  • Step 4: Change the old chart configuration

Was this helpful?

  1. Getting started
  2. Migrating legacy agents
  3. Migration steps
  4. Code transformations

Smart Charts

PreviousLive QueriesNextRoute overrides

Last updated 4 months ago

Was this helpful?

This is the official documentation of the @forestadmin/agent Node.js agent.

Due to popular demand, Live Query Charts are planned to be reintroduced in a future version of the agent, but we don't have a timeline for it yet.

allowed the creation of charts from SQL queries from the UI.

You can find the full documentation of chart customization .

Steps

Step 1: Retrieve the SQL query from the UI

You can retrieve the SQL query of a Live query chart by clicking on the Cog icon of the chart when using the Edit Layout mode.

Step 2: Create a new API chart

agent.addChart('appointments', async (context, resultBuilder) => {
  const rows = await context.dataSource.getCollection('appointments').nativeDriver
    .rawQuery(`
      SELECT current.count AS value, previous.count AS previous
      FROM (
        SELECT COUNT(*)
        FROM appointments
        WHERE start_date BETWEEN '2018-01-01' AND '2018-02-01'
      ) as current, (
        SELECT COUNT(*)
        FROM appointments
        WHERE start_date BETWEEN '2017-12-01' AND '2018-01-01'
      ) as previous;`);

  return resultBuilder.value(rows[0].value, rows[0].previous);
});

Step 3: Retrieve the URL of the generated chart

When you create a new API chart, you will need to retrieve the URL of the generated chart.

It is printed to the console when the agent starts (in development mode).

sandro@forestadmin $ yarn start
yarn run v1.22.19
info: Successfully mounted on Standalone server (http://0.0.0.0:3351)
info: Schema was updated, sending new version
info: Chart 'appointments' was mounted at '/forest/_charts/appointments'

Step 4: Change the old chart configuration

If you are following this guide step by step, you are probably testing your agent on a temporary project.

You may want to postpone this step until you have replaced your old agent with the new one.

Instead of Query, select Smart in the data source selector, and enter the path that was printed to the console in the previous step.

The next step will be to create a new using the SQL query you retrieved in the previous step.

API chart
Live Query Charts ↗
here
Live Query Chart configuration screen