Dashboard Appearance
Let us first explore different features of dashboards and tiles that help us control the appearance of the dashboard content
Common Settings
Certain settings dealing with appearance and nomenclature are applicable to different types of tiles that may be defined in the bippDash model. These are as follows.
-
Name: The name of the tile can be used to identify the tile in code. It is not mandatory and an underscore may be used instead of the name. Following is sample code for specifying the name.
tile _ //Tile without a name tile logotile //Tile with a name
-
Title: The title of the tile that would be displayed on the tile panel. Following example specifies a title
Efficiency By Date
for a tilegraphTile
.tile graphTile title Efficiency By Date
-
Sub-Title: The sub-title would be displayed next to the title on the tile panel in a smaller font. Following example specifies a tile with a title and subtitle.
tile graphTile title Productivity subtitle Months Vs Quantity
-
Basis: This denotes the percentage width that the tile would occupy on the screen. The sum of the basis of all the tiles in a row should be less than or equal to 100%. If the sum of the basis exceeds 100, some of the tiles will wrap over to the next row when the dashboard is rendered on the screen. An example for specifying the basis is as follows.
tile graphTile basis 50.00
-
Tooltip: Additional information about a tile may also be displayed as a tooltip. Specifying a tooltip in code, results in a small (i) icon on the tile panel. You can view the tooltip by clicking this icon. Following is the code for including a tooltip on a specific tile.
tile graphTile tooltip X:Months;Y:Quantity
-
Display settings: Display settings can be used to control the appearance of the panel, margins and borders. These settings are inherited from the parent tile by default if not specified in the model. Following table shows the different display settings available with examples.
Setting | Description of the setting | Possible Values | Sample Use |
---|---|---|---|
Margin Visibility | Control margins inside the tile. | show,hide | margin_visibility show |
Panel Visibility | Control if the panel should be shown with a header bar | show,hide | panel_visibility hide |
Box Shadow | Control if panel should be shown as a shadowed box | show,hide | box_shadow hide |
Panel Background | Specify the panel background | default,none | panel_background default |
Border Style | Specify the type of border required | default,solid,dashed,dotted | border_style dashed |
Tile Background | Specify the tile background. This would be specifically relevant when displaying metric sheets. | Specify the tile background | default,none |
Layout of nested tiles
Dashboards may sometimes require layouts with multiple nested tiles. bippDash container tiles can be used to include other tiles. The container tile may have child-tiles laid out horizontally or vertically within it. The orientation of the tile can be specified by the type property as shown in the following code snippet.
tile VertContainer
basis 20.00
type vertical
tile logotile
//describe content here
tile nametile
//describe content here
Here the two tiles logotile
and nametile
would be laid out vertically one below the other in the container tile VertContainer
. Note that, when defining child-tiles in code, the tile definition should be indented by one tab-stop with respect to the parent tile as shown in the code snippet.
Including Custom Content
There may be a need to include custom content on a dashboard for example logos, static text and hero-images. bippDash provides the ability to build such content through the use of custom widgets. Content inside custom widgets is static and can be defined using a combination of Markdown and HTML tags. Custom HTML and CSS may be used and combined with images and links to achieve the desired user interface. The content should be specified using the markdown
property of the widget. Following example shows the definition of a simple custom widget with a formatted heading.
tile _
content customwidget
markdown """ <h1 style="text-align: center; color: Blue" ;="" bgcolor:="" black"=""><b>bipp Inc</b></h1>"""
Complex html may also be included as follows using the html keyword.
tile logotile
content customwidget
markdown m1
html """ <h1 style="text-align: center; color: Blue" ;="" bgcolor:="" black"=""><b>bipp Inc</b></h1><div><img src="https://bipp.io/img/Hero01.svg"></div>"""
Links to other dashboards may also be included in the HTML using the following code.
tile ContentwithLink
content customwidget
markdown m1
html """ Click {{ id1 }} for Productivity Graph"""
link id1
ID D~I1b2emZVa //Dashboard Id
type dashboard
The {{ id1 }}
will be replaced by a link to another dashboard with ID D~I1b2emZVa
when this dashboard is rendered. When clicked, the dashboard D~I1b2emZVa
will open in the same window replacing the original dashboard.
Custom widgets may also be used to create other HTML components like buttons, tabs or links on the dashboard.
Conditional Rendering of Tiles
Certain tiles can be shown on the dashboard only if a specific condition is true. This is called conditional rendering of tiles. bippDash provides a construct required to define such conditions. Conditions may be based on the click of a specific custom widget or selection of a specific filter value on the dashboard.
-
Using Custom Widgets: Custom widgets can be used to create tabs or links in the dashboard. Consider a use case where data may be presented in two types of views, eg., table view and map view. Each of these views are a different sheet included on the dashboard. The sheets should be shown based on which view the user has selected on the dashboard. Following image shows two tabs created using custom widgets.
Following is the bippDash code for creating these tabs
tile MapTab basis 25.00 content customwidget markdown """<div style="text-align: center;">Map View</div>""" tile TableTab basis 25.00 content customwidget markdown """<div style="text-align: center;">Table View</div>"""
We create a factor at the top level of the bippDash model to declare the condition as follows.
dashboard tabbedDb factor ShowView default_value Map. //Map sheet will be shown by default.
The markdown for each of the tabs is modified to set the applicable value for the factor using the data-factor-details attribute. For the custom widget
MapTab
it becomes.markdown """<div style="text-align: center;" data-factor-details="factor:ShowView@Map">Map View</div>"""
For the custom widget
TableTab
it becomesmarkdown """<div style="text-align: center;" data-factor-details="factor:ShowView@Tab">Table View</div>"""
Now to actually define the condition based on which a tile will be rendered we use the
show_if
construct in the tile definition. If we have two tiles, one containing the map and the other containing the table, we can show them based on which tab is clicked. To do this include the following code in the tile definition.// For the map tile tile MapSheet show_if _ name ShowView compare_value Map operator = content sheet ID N~hmkfnNRLA // For the table tile tile TabSheet show_if _ name ShowView compare_value Tab operator = content sheet ID N~Jt8tMKwEN
-
Using Channels/Filters: This method can be used when we want to show a particular tile only when a specific value is selected in another tile or filter widget. Let’s say we have two columns called
PerpetratorEthnicity
andPerpetratorRace
in our dataset and we want to display a sheet containing count of crimes byPerpetratorRace
only when a specific value is selected forPerpetratorEthnicity
. We have a channel defined to propagate the selected value forPerpetratorEthnicity
as follows.clickevent channel_462 table XLSX_SHT__Crimes column PerpetratorEthnicity
The factor we use to control tile visibility can subscribe to this channel as follows
factor ShowDetails default_value 0 subscribe channel_462
Any tile can now be shown based on the value selected for
PerpetratorEthnicity
by including the following code in the tile definition.tile _ show_if _ name ShowDetails compare_value Not Hispanic operator = content sheet ID N~zbNreEN12