Dashboards

Dashboards allow you to arrange different type of data on a board. The following three types of widgets are allowed:

• Chart
• Key Figure
• List

Widgets can be arranged in 12 columns that are distributed evenly per line. Each line has a height of 140px.

Create and Update Dashboards

Dashboard configurations are stored as time cockpit EntityView. The following creates or updates a dashboard with the specified name

model = Context.GetWritableModel()
dashboard = "USR_RevenueAndProfitDashboard"
entity = model.Entities.APP_Invoice

if model.ModelEntityViews.Contains(dashboard):
   view = model.ModelEntityViews[dashboard]
else:
   view = EntityView()
   view.Name = dashboard
   view.TypeName = "TimeCockpit.Data.DataModel.View.Dashboard"
   model.ModelEntityViews.Add(view)

print view.ConfigurationMarkup
view.TypeName = "TimeCockpit.Data.DataModel.View.Dashboard"
view.TargetEntity = entity
view.ConfigurationMarkup = '''{
   "title": "Revenue & Profit",
   "widgets": [ ... ]
}
'''

Context.SaveModel(model)

Add Dashboard to Menu

You can add dashboards to the menu similar to other entity views in the Modules configuration. The required configuration is as follows:

Configuration of Widgets

All widgets share some common information like title or type:

{
   "title": "Title of the widget",
   "infoTooltip": "Tooltip that is displayed in the title bar of the widget",
   "type": "chart" | "list" | "keyFigure",
   "layoutXs": { ... },
   "layoutSm": { ... },
   "layoutMd": { ... },
   "layoutLg": { ... },
   "layoutXl": { ... },
   "configuration": { ... }
}

The property configuration contains the actual configuration according to the type of the widget.

Layout

Each widget can contain 5 different layout configurations for different screens according to the breakpoints of angular/flex-layout.

The default configuration for charts and lists is as follows:

defaultLayoutXs = { colspan: 12, rowspan: 2, offset: 0, order: null };
defaultLayoutSm = { colspan: 6, rowspan: 2, offset: 0, order: null };
defaultLayoutMd = { colspan: 6, rowspan: 2, offset: 0, order: null };
defaultLayoutLg = { colspan: 4, rowspan: 2, offset: 0, order: null };
defaultLayoutXl = { colspan: 4, rowspan: 2, offset: 0, order: null };

Key figures only use a rowspan of 1 instead of 2. All other properties are identical to the chart and list default values.

The order property specifies the sort order within the grid. If no order is specified, the order of the elements in the configuration JSON for the widget is used.

If no custom layout is specified, the default values are used.

If not all layout sizes are specified, a layout is used for the specified size and all larger screen sizes with no specified layout.

Chart

For charts the name of a list has to specified as data source. Additionally, series, seriesDefaults, categoryAxis, valueAxis and legend can be specified according to the Kendo UI for Angular documentaion.

{
   ...,
   "configuration": {
      "title": "Unbilled Timesheets",
      "listDataSource": "USR_Dashboard_UnbilledTimesheets",
      "series": [
            {
               "name": "Revenue",
               "field": "USR_Revenue",
               "categoryField": "USR_Month",
               "groupField": "USR_Customer",
               "type": "column",
               "stack": true
            }
      ],
      "legend": {
            "position": "bottom",
            "orientation": "horizontal",
            "labels": {
               "font": "10px Roboto, sans-serif"
            }
      },
      "valueAxis": { "labels": { "format": "n0" }}
   }
}

In series there is one additional field groupField that does not exist in the Kendo UI API. It allows you to specify a field for grouping data within a category.

Key Figure

For key figures a list and a result column of this list has to be specified:

{
   ...,
   "configuration": {
      "listDataSource": "USR_Dashboard_RevenueAndProfitForecast",
      "valueField": "USR_RevenuePlanned",
      "aggregate": "count" | "sum" | "average" | "min" | "max" | "first" | "last"
   }
}

If no aggregate function is specified, the first row of the result is used.

List

For lists the name of the list has to be specified:

{
   ...,
   "configuration": {
      "listName": "USR_Dashboard_RevenueAndProfitForecast"
   }
}