Skip to content

A simple package to integrate Metabase dashboards and questions to Laravel

License

Notifications You must be signed in to change notification settings

devatreides/metavel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Total Downloads Issues Open Total Downloads Latest Version License


Metabase is an open source business intelligence platform where you can create charts/grids (known as questions) or a collection of questions (known as dashboards) as a custom visualization for your data. One of Metabase's features is embedding. Therefore, this package provides blade components that abstract the platform integration, allowing you to easily embed your question/dashboard in a Laravel application.

image

REQUIREMENTS

PHP 8.1+

Laravel 10

HOW TO INSTALL

To install the package, just use composer:

composer require tombenevides/metavel

HOW TO USE

Configuring Metabase credentials

After installing, publish your config file using:

php artisan vendor:publish --tag=metavel-config

This will create a metavel.php file in your config folder. There, you'll see the environment variables to set the Metabase's base url and secret key.

METAVEL_BASE_URL #Metabase base url
METAVEL_SECRET_KEY #Metabase secret key

You will also find in the config file a expiration_time option. Since the communication between Laravel and Metabase works with JWT, using this option you can set an exp date for you generated token. The value is in seconds using NumericDate format.

Call the component

After setting the platform credentials, you just need to call the match component in your blade file. There's two components, one for questions and other for dahsboards:

<body>
  <x-metavel-question :resource=89 />
  
  <x-metavel-dashboard :resource=10 />
</body>

The components have some properties that you can set to customize the embbeding. Most of them are optional, except for resource, which is the ID of the element on Metabase (question or dashboard). Besides that, you can also set:

Property Type default value Description
params array [ ] if your question/dashboard have implicit filters
bordered boolean true to load (or not) borders in the element
titled boolean true to load (or not) the element original title
darkTheme boolean false to load (or not) the element with dark theme
width int 1366 set the width of the element
height int 768 set the height of the element

Styling

As a blade component, you can add HTML attributes as classes for styling, for example. The Metabase element is loaded in an iframe but it's encapsulated by a div that receives the attributes, as shown below::

<body>
  <x-metavel-question :resource=89 class="w-full" />
</body>

This will generate:

<div class="w-full">
   <iframe....
</div>

LICENSE

Metavel is a software under the MIT License

UPDATES

👋 Follow the author @devatreides on Twitter to know more about the last updates and other projects. Say Hi!