Gobierto Dashboards

Unlike the rest of gobierto modules, dashboards are slighly special. Despite of their code implementation is the same as other modules (see Gobierto modules), they don't start up on his own, they must be included inside another module.

Dashboards could be run as maker or viewer. The dashboard-maker wraps the dashboard-viewer with a toolbox in order to create, modify or delete the dashboards. Usually, the maker should belong only to the admin module.

This guide will show you to instantiate such dashboards within another module. So we start with the gobierto_dashboards pack already present.

In order to make this work, you've to fulfill the following steps:

1. Include the pack where corresponding. That is, for example, inside the gobierto_admin pack:

JavaScript

// app/javascript/admin.js
import 'lib/commons'
import 'gobierto_admin'
import 'gobierto_dashboards' // add the pack
import 'lib/i18n'

2. Add the HTML markup you need (viewer or maker) in the app/views/*.html.erb file you want to include them. As you notice, the viewer can be appended with data-id in order to load an specific dashboard, in case there are many.

HTML

<!-- Viewer -->
<div dashboard-viewer-app data-context="<%= @context %>"></div>
<div dashboard-viewer-app data-context="context" data-id="<%= @id %>"></div>

<!-- Maker -->
<div dashboard-maker-app data-context="<%= @context %>"></div>

3. By default, the dashboards will begin as soon as the website has been loaded (after DOMContentLoaded triggered). They will scan the DOM-tree looking for the above-mentioned tags (dashboard-viewer-app or dashboard-maker-app).
4. Also, gobierto_dashboards can be run on-demand, i.e. after user clicks on some button or a vue-component loads. In order to do so, you'll need to dispatch an Event (see JS Events):

JavaScript

// Ask for the dashboard-viewer
const event = new Event(GOBIERTO_DASHBOARDS.LOAD)
document.dispatchEvent(event)

// Ask for the dashboard-maker
const event = new Event(GOBIERTO_DASHBOARDS.CREATE)
document.dispatchEvent(event)

5. Besides, dashboard-viewer emits two additional events to control the flow in the container module. You can listen them as:

JavaScript

// Emitted after dashboards have been fetched from API
// detail will have an Array with all the dashboards
document.addEventListener(GOBIERTO_DASHBOARDS.LOADED, ({ detail }) => [])

// Emitted when user toggles between the list of dashboards and one dashboard
// detail will have an Object with the dashboard selected, or null, if none is selected (it displays the list)
document.addEventListener(GOBIERTO_DASHBOARDS.SELECTED, ({ detail }) => {})

6. If you're going to include the dashboards into a new route, you will need to update the config/routes.rb file. To do so, just include (accordingly to your module) the new paths in the container routes.

Ruby

namespace :gobierto_MODULE, path: "MODULE" do
  constraints GobiertoSiteConstraint.new do
    /* ... another routes ... */
    get "dashboards(/:dashboard_id)" => "VIEW#method"
  end
end