Dashboard Structure with Ding

In Ding the dashboard is compartmentalized into layers of tiles and each tile is then defined individually. Tiles can have attributes such as basis, height, title, content and others. A tile can hold other child tiles, dashboards, sheets or widgets. Thus the dashboard can be defined as a tree structure in the Ding model file. Following diagram represents the structure of a Ding dashboard.

Ding Structure

Components

A Ding model consists of the following components.

  1. Dashboard: This is the root for all other components that are defined in the model. A Ding model file defines the layout of a single Dashboard. A dashboard may be viewed directly as a web page or incorporated in other dashboards. Ding allows for nesting of dashboards as well as invoking one dashboard as a pop-up from another dashboard.

  2. Tiles: Tiles are used to compartmentalize the dashboard. By default, the dashboard has a main container tile that holds all the other tiles. Tiles may be nested and there is no defined limit on the depth of the tile-tree possible. Following are the different types of tiles that can be defined in Ding.

    • Container: These are the tiles that can contain other tiles or a dashboard. A container tile can have any number of other tiles or a single dashboard.
    • Custom Widget: These tiles help you in creating custom content using Markdown. Images and HTML may also be embedded in custom widgets.
    • Filter Widget: These tiles can be used to create filters on the sheets that have been added to the dashboard. A filter can be created based on any table-column from the underlying dataset.
    • Sheet: These tiles can be used to incorporate sheets that have been created by you or shared with you.
    • Avocado: These are special tiles which are replicated in the dashboard based on the available range of values for a specific variable.
  3. Channels: Channels provide a communication mechanism between tiles on the dashboard. They can be used to filter data on the dashboard when you select or click on any of the data elements in tiles.

Syntax and Semantics

Following syntax represents the general structure of a Ding model in code.

dashboard [DashboardName]
    clickevent [ChannelName]
        table [Filter Table]
        column [Filter Column]
    tile [tilename or _]  //top level tile
        settings
            [Available UI settings]
        type [horizontal or vertical]
        basis [% width of the tile]
        height [height in pixels]
        title [Title to be displayed]
        content [sheet/filterwidget/customwidget]
        tile [nested tilename or _] //2nd level tile

The Ding model file follows strict indentation rules based on the hierarchical structure of the model. Any error in indentation would result in errors when committing or processing the file.

Last updated 2 months ago.