Dashboard Editor

Dashboard Editor is a tool offered by Squirro which allows you to build meaningful dashboards by adding widgets and configuring them. The tool also exposes the conditional layers in the user interface where a layer is made visible when it satisfies a certain visibility condition.

Introduction

Squirro enables you to build very simple to very complex dashboards. It can be overwhelming for the first time users to get around with all the concepts and options available when creating their dashboards.

To simplify things, Squirro dashboards are made of components. There are three big layout components in a Squirro dashboard, they are called sections, layers and widgets. Let's have a look at each one in depth.

Sections

Sections are the top level components when it comes to designing Squirro dashboards.

They serve as containers to place layers and widgets inside. They provide the base structure for your dashboard layout. Most of the sections are optional, being the center section the single required one and will always be enabled.

When configuring sections, you have available a couple of actions:

- Remove. Clicking on this icon disables the correspondent section.
- Scroll independently. This option will force the content inside the section to scroll independently in case it exceeds the available space.
- Pin. This option forces the section to be always visible (pinned) to top or bottom of the dashboard. Please note that pinning is only allowed in the top or bottom sections.
- Resizing. In the inner edges of the sections you can find the resizing handle. Dragging this will make the section grow/shrink according to your needs. This set in number of columns, having a dashboard a total of 48 columns.

Layers

Layers can be seen as containers for widgets. They are good for organising your widgets but they are much more powerful than that. It is with layers that you can truly make your dashboard dynamic, in the sense of showing and hiding groups of widgets. Similar to sections, widgets inside layers also use a 48 unit grid system. This means that you can place and resize widgets to 1-48 columns (where 48 means the widget will use the full width of the section that it belongs to).

Layers can be set to free widget placement allowing the dashboard designer to place widgets freely in the grid. If this option is not enabled, then widgets will be placed immediately after the previous one, in a top to bottom order. If you need to create some distancing between widgets, this option will need to be turned on.

When it comes to layer resizing, there are three available methods:

No auto-sizing - The layer will grow to accommodate all widgets inside it, thus creating a vertical scroll bar in case it exceeds the browser height.
Autosize widgets to fit frame - This method will shrink and grow the widgets inside the layer to make sure everything is visible all the time. This comes with a cost if the browser height is too small for the widgets that we want to display. In that case some widgets will not look as well as they should.
Preserve minimum widget size - Allow widgets to grow in height but prevent them from shrinking. With this method, the widget dimensions set in the dashboard editor will be respected. They can grow to fill up the empty space of the dashboard, but if the window becomes too small they will not shrink.

In order to create a Single Page Application (SPA) experience, layers come with a condition builder mechanism to specify when they will be shown. This is called layer's Visibility condition.

Widgets

Squirro comes with a vast collection of widgets out of the box. Widgets are used to display data and they live inside layers. To add a widget to a layer, simply drag and drop from the widget browser. Every widget has its own set of properties. You can learn more about specific widgets in the widgets documentation.

Creating dashboards

To create a dashboard,

Navigate to the visualise tab under the 'Setup' space.
Click on the round + button at the top right of the dashboards list page.
Alternatively, you can use the 'More' button's dropdown to create a dashboard from the current search query.
Directly after creation, you are presented with a fresh dashboard where some widgets are put together to give you a head start, along with a link to the documentation to the widgets.
Continue with the next sections to learn how to configure the newly created dashboard.

Dashboard Editing Interface

On creating a new dashboard, you automatically land on the edit mode of the dashboard.
The navigation bar shows you the Project name and the dashboard name.
In the center of the nav bar are toggle buttons which allows you to switch between the desktop and the mobile version of the dashboard. More about the mobile dashboard editor here.
On the right of the nav bar, there is a switcher button which allows you to switch between the edit and the view mode of the dashboard. Clicking on 'Exit' button exists the editor and takes you back to the list of dashboards.
The dashboard editor consists of two panels, the tree panel on the left and the properties panel on the right.
The tree panel lists the entities like dashboard, sections, layers and widgets while the properties panel displays the config. options to configure the entity selected from the tree panel.
The properties panel has a L | R button which allows you to switch the positioning of the properties panel to the left or the right of the screen. The system also remembers your preference for the panel positioning.
At the bottom of the tree panel are the buttons to add a new layer or a new widget to the dashboard.

Dashboard Properties

Click on the dashboard in the tree panel to edit its properties.
Here you can configure:
- Dashboard title
- Dashboard query
- Time range to limit the dashboard results by time
- Sections (center, left, right, top and bottom)
- Dashboard loader and theme loader
- Set defaults for the dashboard store
- Reset button positioning
Once done, press the SAVE button at the top to save your changes.

Tip

When adding a query to the Dashboard, it can make it easier to have the Explore page open in another tab. The search bar, typeahead and facets can be used to validate the query.

Layer Properties

Click on a layer in the tree panel to edit that layer's properties.
Rename the layer title.
Add visibility condition to the layer by clicking on the + button. This will open a modal where the visibility rules can be defined.
Once the visibility conditions are saved, the layer config. displays a green tick.
'Autosize to fit frame' resizes all widgets on a layer proportionately on resizing the browser window.
'Free widget placement' ignores the fixed spacing between the widgets and allows you to arrange the widgets in any desired layout.
Hover over the layer in the tree panel to delete or duplicate a layer.

Widget Properties

The available widget types are listed on the page Widgets.
Click on a widget in the tree panel to edit that widget's properties.
Alternatively, you can also hover over a widget and click on the edit icon displayed inside a button pill
All widget properties are divided into three sections:
The topmost general section where the widget type and the widget title can be configured.
The DATA section which lists all data configuration related options like facet, no. of values, additional widget query, etc. are listed together.
The VISUALISATION section where all chart options and other visualisation related config. options are listed together.
Besides, there is an additional section called DEVELOPER OPTIONS which exposes general API related config. options in the UI.

Widget Browser

Widgets are the building blocks of a dashboard. Each widget represents data in a particular form. Currently, Squirro offers a number of built-in widgets, such as pie charts, time frequency graphs (line charts) and word clouds.

Add widget

To add a widget,

Enter edit mode of the dashboard.
At the bottom of the tree panel on the left, click the 'Add Widget' button.
This open the widget browser panel on the left where widgets are listed in functional categories.
Either scroll the browser to find a widget or use the built-in search functionality to search for a widget.
Drag and drop the widget to the desired location on the dashboard.
You can add as many widgets as you want in one go as long as the widget browser is open. Close the browser by clicking on the CLOSE button at the bottom of the browser.
To save the changes, click on the SAVE button at the top right of the nav bar.
. .

Move widget

Enter edit mode of the dashboard.
Hovering anywhere over the widget area will display drag handlebars.
Drag the widget and drop it to the desired location.
To save the changes, click on the SAVE button at the top right of the nav bar.

Edit widgets

Enter edit mode of the dashboard.
Hover over a widget and click on the edit icon displayed inside a button pill on the top right corner of the widget.

Duplicate widget

Enter edit mode of the dashboard.
Hover over a widget and click on the duplicate icon displayed inside a button pill on the top right corner of the widget.

Delete widget

Enter edit mode of the dashboard.
Hover over a widget and click on the delete icon displayed inside a button pill on the top right corner of the widget.
Confirm the deletion in the resulting dialog.

Facet Value Formatting

Have a look here.

Embedding and Sharing Dashboards

To share or embed the current dashboard, click the Dashboard Setting Button and select "Share Dashboard" or "Embed iFrame"

The Embed iFrame offers an iframe HTML tag, which can be used for embedding the dashboard in a 3rd-party web site or application. The Share Dashboard option offers a URL, which can be easily shared via email or other means.

Dashboard URL API Reference

The URL which is generated by the Embed and Share options in the dashboard can be extended with additional options. The following URL parameters can be used to change the behavior of the dashboard.

Parameter	Description	Example Value
query	Override the Dashboards search query as documented here.	&query=(blue OR green OR red)
selection	Set the Foreground query for all Significant Terms widgets	&selection=blue
created_before	Only display results with a created_at value lower than this	&created_before=2014-12-31 &created_before=2014-12-31T18:30:00
created_after	Only display results with a created_at value higher than this	&created_after=2012-12-31 &created_after=2012-12-31T18:30:00
relative_start	Only display results with a created_at value higher than this, in relative terms to today	&relative_start=2y &relative_start=8w
relative_end	Only display results with a created_at value lower than this, in relative terms to today	&relative_end=1y &relative_end=4w