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.

Common Settings

  1. 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
  2. Title: The title of the tile that would be displayed on the tile panel. Following example specifies a title Efficiency By Date for a tile graphTile.

     tile graphTile
         title Efficiency By Date
  3. 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
  4. 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
  5. 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  
  6. 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 Margin Visibility
Description of the setting Control margins inside the tile.
Possible Values show, hide
Sample Use margin_visibility show
Setting Panel Visibility
Description of the setting Control if the panel should be shown with a header bar
Possible Values show, hide
Sample Use panel_visibility hide
Setting Box Shadow
Description of the setting Control if panel should be shown as a shadowed box
Possible Values show, hide
Sample Use box_shadow hide
Setting Panel Background
Description of the setting Specify the panel background
Possible Values default, none
Sample Use panel_background default
Setting Border Style
Description of the setting Specify the type of border required
Possible Values default, solid, dashed, dotted
Sample Use border_style dashed
Setting Tile Background
Description of the setting Specify the tile background. This would be specifically relevant when displaying metric sheets.
Possible Values default, none
Sample Use tile_background 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 Markdown tag or 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 custom widget with a formatted heading.

tile _
	content customwidget
        markdown """ <h1 style="text-align: center; color: Blue" ;="" bgcolor:="" black"=""><b>bipp Inc</b></h1>"""

Custom content 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.

  1. 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 report included on the dashboard. The reports should be shown based on which view the user has selected on the dashboard. Following image shows two tabs created using custom widgets.

    Custom Tabs

    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 becomes

     markdown """<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
  2. 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 and PerpetratorRace in our dataset and we want to display a report containing count of crimes by PerpetratorRace only when a specific value is selected for PerpetratorEthnicity. We have a channel defined to propagate the selected value for PerpetratorEthnicity 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