Dashboard designer

In EDA, you can construct your own dashboard pages to display the data you deem important for your operation.

The Dashboards page allows you to construct a dashboard, which itself can contain one or more layouts. Each layout is a separate dashboard page, selectable using a drop-down on the main dashboard.

Each dashboard layout can be either a page consisting of a collection of dashlets, each displaying its own source data; or a single list, which is a conventional data grid displaying a single set of source data.

For dashboard layouts, you can construct each layout by selecting from a set of pre-defined dashlets. Each dashlet can show a particular type of data like counters, lists, and charts. You can then add these dashlets to a page you design, optionally distributing them among a set of rows and columns you have specified within the page. Individual dashlets can be set to span multiple rows or columns.

For each list layout or dashlet layout in the dashboard, you define source data by constructing an EDA query, natural language query, GVK definition, or specifying a URL endpoint. You can then specify details about which parts of that data are displayed, set thresholds for highlighting, and make other formatting choices depending on the dashlet type.

The Dashboard designer only displays dashboards that were created by the current user. A future release will allow users to publish and share dashboards with other users.

Dashboards page

The Dashboards page is the point from which you can access existing dashboards, and begin creating new dashboards.

Figure 1. The dashboards page
Table 1. Elements of the Dashboards page
# Name Function
1 Breadcrumb bar Displays the current position in the set of Dashboard designer pages.

Clicking on the Custom part of the Breadcrumb bar displays a drop-down that includes a Core option. The Core designer is not yet enabled, and selecting Core in this drop-down results in a message to that effect.

2 Row actions Clicking the Table row actions icon reveals the actions available for dashboards displays in the data grid.
  • Preview: Displays a preview of the selected dashboard.
  • Edit: Opens the Dashboard designer view for this dashboard.
  • Delete: Deletes the selected dashboard.
3 Create Click to open the Dashboard Designer view for a new dashboard.
4 Create List Layout Click to open the Dashboard Designer view for a new dashboard consisting of a single list.
5 Import Click to open a file selection dialog. Select the file for a previously exported dashboard and click Open to import the selected dashboard. The new dashboard is then displayed in the Dashboards list.
6 Information panel A standard EDA information panel, displaying details about the selected dashboard.

Dashboard designer page

The dashboard designer page is the space in which to create a dashboard and its constituent layouts, and to configure the data displayed on each.

Figure 2. The dashboard designer page
Table 2. Elements of the Dashboard Designer page
# Name Function
1 Definition/Libraries panel The Definition tab displays basic parameters about the current dashboard layout, like its name and description.

The Library tab displays elements that you can add to the current dashboard layout: flex rows, flex columns, and dashlets.

2 Layout panel This is the area that displays the dashboard layout you are designing.

Drag objects from the Libraries tab into this space to add elements to the dashboard layout.

Select objects in this panel to view and configure their properties in the Properties tab.

3 Properties/Components panel The Properties tab displays properties for the current dashboard, and for the row, column, or dashlet currently selected in the layout panel.

Use this tab to configure the dashboard, and to configure the behavior of dashlets, including the query or other data source for the dashlet.

4 Add Click to add another dashboard layout to the dashboard.
5 Add List Layout Select this option in the drop-down to add a List page to the dashboard.
6 Save Click to save the current dashboard design.
7 Reset Click to discard all changes since you last saved the layout, after confirmation.
8 More icon Click to view a list of available actions for the current Dashboard:
  • Preview saved changes: open a new tab that displays the current dashboard design.
  • Export: save the dashboard design as a file, which others can import into their copy of EDA.

Dashlet types

Dashlets are the building block from which you can build your dashboard. Several types of dashlets are available in EDA; each can be dragged and dropped on to your dashboard design. If you have added flex columns or rows, you can distribute dashlets within the resulting grid.

The counts dashlet

The counts dashlet displays a simple count of qualifying instances of something in EDA. You select a data source, and can then specify criteria to distinguish qualifying instances of the selected data that are counted and highlighted, versus the basic number of all records in the selected data source.

Figure 3. A sample counter dashlet
Table 3. Count dashlet properties
Property Description
Common properties
Title The title of the dashlet when displayed in the EDA UI.
Subtitle A subtitle, displayed below the title and in a smaller font.
Navigation target Adds a 'View' button to the dashlet that links to the specified UI navigation target.
Fill available width Dynamically changes the dashlet width based on the browser window and neighboring dashlets.
Dashlet width The width of the dashlet.
Dashlet height The height of the dashlet.
API Specification
Query Click the More icon to open a page on which to configure the data source for this dashlet.

On that page you configure the data source as one of the following:

  1. EQL Query
  2. Natural Language query
  3. GVK Definition
  4. URL Endpoint
Counters These properties configure the highlighting of values that meet criteria on the counts dashlet:
  • Label: the label shown beside qualifying values
  • Color: the color used to highlight qualifying values
  • Field: the field within the data source to be evaluated for possible highlighting
  • Criteria (Equals, Not Equal, Greater Than, Less Than): the logical operator that qualifies for this highlight (in combination with Value)
  • Value: the comparison value for the logical criterion.
Additional dashlet properties
Show total Indicates whether to display a count of all values retrieved in the source data set should be displayed on the chart, in addition to qualifying values.
Show total at end When the total is shown, controls the position of the total display. Toggles between the total being the first count, or the last.
Show percentage Indicates whether the counter should display what percentage of all values are represented by qualifying values.
Vertical lists When the total is shown, controls the position of the total count and qualifying count. Toggles between the total being above, or below the count of qualifying values.

The line chart dashlet

A line chart dashlet places a line chart on the dashlet. It supports both stacked line charts (in which values are successively added to show a series of cumulative totals) and overlaid (a standard line chart in which values are displayed independently, not as a sum).

Figure 4. A sample line chart dashlet
Table 4. Line chart dashlet properties
Property Description
Common properties
Title The title of the dashlet when displayed in the EDA UI.
Subtitle A subtitle, displayed below the title and in a smaller font.
Navigation target Adds a 'View' button to the dashlet that links to the specified UI navigation target.
Fill available width The width of the dashlet.
Dashlet width When placed in a grid with flexcolumns, the number of adjacent columns this dashlet occupies.
Dashlet height The height of the dashlet.
API Specification
Query Click the More icon to open a page on which to configure the data source for this dashlet.

On that page you configure the data source as one of the following:

  1. EQL Query
  2. Natural Language query
  3. GVK Definition
  4. URL Endpoint
Chart Configuration These properties control the display of the line chart:
  • Maximum number of data points
  • Y-Axis Units
  • Scaling Function (None, Metric Prefix Scaling)

The donut dashlet

A donut dashlet places a pie chart on the dashboard layout. You must configure a data source, and then set criteria for various pie slices describing qualifying subsets of that data. Many parameters are available to control the way the appearance of the chart and the individual pie slices.

Figure 5. A sample donut dashlet
Table 5. Donut dashlet properties
Property Description
Common properties
Title The title of the dashlet when displayed in the EDA UI.
Subtitle A subtitle, displayed below the title and in a smaller font.
Navigation target Adds a 'View' button to the dashlet that links to the specified UI navigation target.
Fill available width Dynamically changes the dashlet width based on the browser window and neighboring dashlets.
Dashlet width The width of the dashlet.
Dashlet height The height of the dashlet.
Charts
Charts A single pie chart dashlet can include multiple pie charts.

Use this space to add and configure each pie chart.

After configuring a pie chart, click the + icon to add and configure an additional pie chart for this dashlet.

Donut Chart Details

An individual pie chart within the donut dashlet is configured on this page.

Query Definition Specifies the data source on which the pie chart's segments is based. Choose from:
  • EQL Query
  • Natural Language query
  • GVK Definition
  • URL Endpoint
Hide title Indicates whether to show the chart title on the chart, or not.

Toggles Yes or No.

Show total Indicates whether the sum of all segments should be displayed on the chart, or not.

Toggles Yes or No

Show slice labels

Indicates whether each chart segment should display a label for its data.

Possible values: All, Percent, None

Slices: these properties control the display of each slices in the chart.

Configure and add as many slices as your chart requires.

Label Indicates whether this slice should display its own label.
Color The shading color applied to this slice.
Field From the selected data source, the individual field corresponding to this slide.
Criteria The logical criterion for this slide (Equals, Not Equal, Greater Than, Less Than)
Value The fixed value against which the current field value and the Criteria are compared.
+ Click this icon to add the slice configuration to the set of slices included in this chart.

The data view dashlet

A data view dashlet places a data grid on the dashboard. You must specify a data source as part of the dashlet design..

Figure 6. A sample dataview dashlet
Table 6. Dataview dashlet properties
Property Description
Common properties
Title The title of the dashlet when displayed in the EDA UI.
Subtitle A subtitle, displayed below the title and in a smaller font.
Navigation target Adds a 'View' button to the dashlet that links to the specified UI navigation target.
Fill available width Dynamically changes the dashlet width based on the browser window and neighboring dashlets.
Dashlet width The width of the dashlet.
Dashlet height The height of the dashlet.
Charts
Query Click the More icon to open a page on which to configure the data source for this dashlet.

On that page you configure the data source as one of the following:

  1. EQL Query
  2. Natural Language query
  3. GVK Definition
  4. URL Endpoint
Show information panel Indicates whether an information panel should be available on this dashlet.
Show status bar Indicates whether to include a status bar on the dashlet, showing (for example) whether any filters are applied, and the total number of rows in the list.

Using the dashboards list

  1. Open the Dashboards page in the EDA GUI by selecting Main > Dashboards.
    The Dashboards list displays, showing all currently configured dashboards.
    Note: By default, the list shows Custom dashboards. The Core dashboards list (selectable using a drop-down the navigation bar at the top of the page) is not currently enabled.
  2. Do any of the following:
    • To preview an existing dashboard, click the Table row actions icon and select Preview from the displayed list.
    • To edit an existing dashboard, click the Table row actions icon and select Edit from the displayed list.
    • To delete an existing dashboard, click the Table row actions icon and select Delete from the displayed list, then click OK in the resulting confirmation dialog.

Designing a dashboard

This task guides you through the steps of adding and configuring layouts within a single dashboard by:
  • creating the new dashboard
  • adding a single layout: either a list layout, or a dashboard layout consisting of one or more dashlets
  • configuring the data source for each list or dashlet, and configuring the appearance and behavior of each.
  • optionally adding more list or dashboard layouts to the same dashboard
  • saving your layout
  1. Open the Dashboards page by selecting Main > Dashboards form the navigation menu.
    This opens the Dashboards page, showing a list of already-configured dashboards.
  2. Choose one of the following:
    • To create a dashboard with a list layout, go to step 3.
    • To create a dashboard with a set of dashlets, go to step 9.
  3. Use the drop-down control beside the Create button to select Create List Layout.
  4. In the Definition panel, configure basic properties for the dashboard:
    • Layout name: an internal name for this layout. This name cannot include spaces or special characters.
    • Display name: the name for this layout, as displayed within the EDA GUI. Unlike the layout name, you can include spaces in the Display name.
    • Description: an optional description of the layout and its purpose.
    • Show navigation toolbar?: governs whether a breadcrumb bar displays above the dashboard.
  5. Click on the list in the center configuration panel to reveal properties for the list in the Properties panel.
  6. Configure display properties for the list:
    • Show information panel
    • Show status bar
    • Show column filters
  7. Configure the source data for the list:
    1. Click the vertical dots icon beside the Query field to open a window in which to configure data source for the list.
    2. In the Data View Details window, use the first drop-down to select a source type for the dashlet's query:
      • EQL Query
      • Natural Language query
      • GVK Definition
      • URL Endpoint
    3. Use the second field to enter the query expression, or to specify the GVK definition or URL endpoint.
    4. Click Query to retrieve data associated with the expression you entered.
    5. Click Save.
  8. Go to step 19
  9. Click Create.
  10. In the Definition panel, configure basic properties for the dashboard:
    • Layout name: an internal name for this layout. This name cannot include spaces or special characters.
    • Display name: the name for this layout, as displayed within the EDA GUI. Unlike the layout name, you can include spaces in the Display name.
    • Description: an optional description of the layout and its purpose.
    • Show navigation toolbar?: ADD DEFINITION
  11. In the Properties panel, configure screen properties for the dashboard:Screen Name:
    • Screen Name: DEFINE
    • Screen Type: This is set to Dashboard and cannot be altered.
    • Show screen in Navigation Bar?:
    • Default screen when layout is loaded?:
  12. Click the Library tab to configure the dashboard layout.
  13. Optionally, add rows and columns to the dashboard:
    Note: You can arrange dashlets on the dashboard even without creating rows and columns in advance; but configuring a grid gives you more control over dashlet positioning, and allows you to configure dashlets to span multiple cells in the grid arrangement.
    1. To add rows to the dashboard, drag the Flex Row control into the layout panel. Repeat this to add more rows to the dashboard.
    2. To add columns to the dashboard, drag the Flex Column control into the layout panel. Repeat this to add more columns to the dashboard.
    3. In the Properties panel, configure the flex row or flex column you added by setting the Vertical Alignment and Horizontal Alignment properties.
  14. Add a dashlet to the dashboard by selecting a Dashlet control from those displayed, and dragging it into the layout area. If you previously added rows or columns, drop the dashlet into the appropriate position.
  15. Click on the dashlet in the center configuration panel to reveal properties for the dashlet in the Properties panel.
  16. Configure the dashlet by setting:
    • Screen properties (these are common to all dashlets).
    • Dashlet properties (some are common to all dashlets; others vary by dashlet type).
    Note: See the topics for dashlet types for details about the individual parameters available for each type of dashlet.
  17. To configure the source data for the dashlet (among the dashlet properties):
    1. Click the vertical dots icon beside the EQL Query field to open a window in which to configure data source for the dashlet.
    2. In the Details window, use the first drop-down to select a source type for the dashlet's query:
      • EQL Query
      • Natural Language query
      • GVK Definition
      • URL Endpoint
    3. Use the second field to enter the query expression, or to specify the GVK definition or URL endpoint.
    4. Click Query to retrieve data associated with the expression you entered.
    5. Click Save.
    6. Configure additional properties for the data, if they are available for your dashlet type.
      Note: For example, a Counter dashlet allows you to specify here whether the counter should display a total, total at end, percentage, or a vertical list of values.
  18. Repeat steps 14, 16 and 17 to add more dashlets to the dashboard if required, until all dashlets are configured.
  19. Do any of the following:
    • To save your dashboard, click the Save icon.
    • To add a new dashboard layout to your dashboard, click Add.
    • To add a new list layout to your dashboard, use the drop-down beside the Add control to select Add list Layout.
    • To preview your dashboard, click the More icon and select Preview Saved Changes from the list of actions.
    • To save your dashboard layout as a file, suitable for others to import into their EDA system, click the More icon and select Export from the list of actions.