Create Dashboard Components

Overview

Dashboard components are used within a dashboard to display a graphical representation of the business data.

Dashboard components are defined through an XML file.

Getting Started

Component XML File

Dashboard component file should follow the structure below and use the defined Tags.

<?xml version="1.0" encoding="UTF-8"?><dashboardcomponent xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../xsd/dashboards.xsd">
	<title></title>
	<iconclass></iconclass>
	<ejb></ejb>
	<method></method>
	<type></type>
	<orientation></orientation>
	<xaxislabel></xaxislabel>
	<yaxislabel></yaxislabel>
	<settings>
		<setting>
			<id></id>
			<label></label>
			<classname></classname> 
		</setting>
	</settings>
	<summarypage></summarypage> 
	<summarypageparameters>
		<summarypageparameter>
			<name></name>
			<classname></classname>
			<field></field> 
			<axis></axis>
		</summarypageparameter> 
	</summarypageparameters>
	<columns>
		<column>
			<label></label>
		</column> 
	</columns>
</dashboardcomponent>

Tags

A dashboard component should consist of the following tags:

<title> - used to define a valid key defined in translation properties file to display the component's title.
<subTitle> - used to define a valid key defined in translation properties file to display the chart's title.

Use $currency variable to insert the default system currency symbol.
Use $period variable to insert the dashboard result's specific period (the default specific period is for the last 12 months).
<iconclass> - used to define a font awesome icon class that will be used to render the icon of the component.

The supported version of Font Awesome is version 4.7.0.
<ejb> - used to define a class name in which the method that will be used to retrieve chart’s data is implemented.
<method> - used to define the method that will be invoked to retrieve the chart's data.
<type> - used to define the type of the chart.

Allowed values are BAR, DONUT, LINE, PIE, STACKED_BAR and SUMMARY.
<orientation> - used to define the orientation of the chart's data.

Allowed values are VERTICAL and HORIZONTAL.
Applicable only for chart types BAR and STACKED_BAR.
<xaxislabel> - used to define a valid key defined in translation properties file to display the X axis title.

Applicable only for chart types BAR, LINE and STACKED_BAR.
Use $currency variable to insert the default system currency symbol.
Use $period variable to insert the dashboard result's specific period (the default specific period is for the last 12 months).
<yaxislabel> - used to define a valid key defined in translation properties file to display the Y axis title.

Applicable only for chart types BAR, LINE and STACKED_BAR.
Use $currency variable to insert the default system currency symbol.
Use $period variable to insert the dashboard result's specific period (the default specific period is for the last 12 months).
<settings> - used to define the chart settings and should follow the structure below.
```
<settings>
	<setting>
		<id></id>
		<label></label>
		<classname></classname> 
	</setting>
</settings>
```
Settings must have the same order as the ejb method parameters.
Each setting tag should consist of:
- <id> - used to define a unique id for the setting that will be used to construct dashboard component's xml.
- <label> - used to define a valid key defined in translation properties file. Its translation through the glossary will be used as the setting label.
- <classname> - used to define the class name of the setting data object.
<summarypage> - used to define the summary page that will be redirected upon clicking the chart's data.
<summarypageparameters> - used to define the filters that will be passed to the summary page upon clicking on chart's data and should follow the below structure.
```
<summarypageparameters>
	<summarypageparameter>
		<name></name>
		<classname></classname>
		<field></field> 
		<axis></axis>
	</summarypageparameter> 
</summarypageparameters>
```
Summary page parameters must have the same order as Settings order.
Each summary page parameter tag should consist of:
- <name> - used to define a valid summary criterion xpath of the specified summary page.
- <classname> - used to define the class name of the data object that is mapping with the specified xpath.
- <field> - used to define the class field that will be used to load the data object.
  
  Applicable only for objects of CRMDO type.
- <axis> - used to define the axis that will be used to get the parameter value.
  
  Applicable only for chart types BAR, LINE and STACKED_BAR.
<columns> - used to define the columns of a summary chart type and should follow the structure below.
```
<columns>
	<column>
		<label></label>
	</column> 
</columns>
```
Applicable only for chart type SUMMARY.
Columns are mapping with the chart's data. For example, if the method that retrieves chart's data returns HashMap<CRMDOSubscriptionType, HashMap<CRMDOProduct, Integer>> then the columns should be associated with subscription type, product and number respectively.
Each column tag should consist of:
- <label> - used to define a valid key defined in translation properties file to display the summary column header label.

Charts

Bar Chart

The following examples show a dashboard component of type BAR.

Vertical Bar Chart Example

Horizontal Bar Chart Example

Donut Chart

The following example show a dashboard component of type DONUT.

Donut Chart Example

Line Chart

Pie Chart

The following example shows a dashboard component of type PIE.

Pie Chart Example

Stacked Bar Chart

The following examples show a dashboard component of type STACKED_BAR.

Vertical Stacked Bar Chart Example

Horizontal Stacked Bar Chart Example

Summary Chart

The following examples show a dashboard component of type SUMMARY.

Simple Summary Example

Advance Summary Example