Announcing the integration of Metabase and Forest Admin

Introduction

Metabase is a popular open-source BI (business intelligence) tool that enables organizations to analyze data and derive insights from it. It has a user-friendly interface that makes it easy to create charts, dashboards, and business queries. With Metabase, companies can easily visualize data, identify trends, and make data-driven decisions.

The synergy between Forest Admin and Metabase is perfect. While Forest Admin provides an easy way to manage data, Metabase enables you to analyze and extract insights from that data. By using both tools together, organizations can streamline their data management and analytics processes, ultimately making their data-driven decision making more efficient and effective.

Analytics and Operations - all in one place

All you have to do to embed your Metabase dashboard into Forest Admin is to create a new chart on Forest Admin and select the Chart type: "Smart Chart"

Then, click on "Edit in builder" to start creating your smart chart.

Component

No custom javascript is required to integrate Metabase, so you can leave the Component code by default:

import Component from '@glimmer/component';
import { loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';

export default class extends Component {}

Style

To create a visually attractive look, you can alter the CSS to fit your preferences, but this style should provide a quite good design experience.

.c-smart-chart {
  height: 100%;
  width: 100%;
}

.c-smart-chart__content {
  display: flex; 
  width: 100%; 
  height: 100%; 
  flex-direction: column; 
  overflow: hidden;
  color: var(--color-beta-on-surface_medium);
}

.c-smart-chart__metabase {
  flex-grow: 1; 
  border: none; 
  margin: 0; 
  padding: 0;
}

Template

The integration is done using an <iframe> to be included in your template. The src tag must be modified to specify the correct METABASE_SITE_URL and JWT_TOKEN.

<div class="c-smart-chart">
  <div class="c-smart-chart__content">
    <iframe src="https://METABASE_SITE_URL/embed/dashboard/JWT_TOKEN#theme=transparent&bordered=false&titled=true" frameborder="0" allowtransparency class="c-smart-chart__metabase">
    </iframe>
  </div>
</div>

METABASE_SITE_URL

This corresponds to the hostname of your Metabase instance. For example, if your Metabase instance is accessible through https://myanalytics.mycompany.com, then you must set your METABASE_SITE_URL to myanalytics.mycompany.com.

JWT_TOKEN

The JWT_TOKEN ensures valid authentication when retrieving the Metabase dashboard. The simplest way to do this is to generate it online using https://token.dev. To sign the JWT token, you need to use the METABASE_SECRET_KEY provided by Metabase.

You must replace METABASE_DASHBOARD_ID by the the correct dashboard ID provided by Metabase.

{
  "resource": { "dashboard": METABASE_DASHBOARD_ID },
  "params": {}
}

And voilà! Your Metabase dashboard is now fully integrated into Forest Admin 💚.

As you can see, trying out this new integration is quite easy. Simply head to https://www.forestadmin.com and start the installation process!