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.
To install the package, just use composer:
composer require tombenevides/metavelAfter installing, publish your config file using:
php artisan vendor:publish --tag=metavel-configThis 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 keyYou 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.
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 |
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>Metavel is a software under the MIT License
👋 Follow the author @devatreides on Twitter to know more about the last updates and other projects. Say Hi!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent