Often a customer has various ratings that will help employees better understand important information about who they are talking to. The new chart widgets for Page Builder help to build this dashboard.

Donut Chart

Use this widget to show how a value is in a range. You can set the format of the number to use Financial notation, for example.

  1. Drop the Donut Chart widget from the Toolbox to the Summary section
  2. Configure the source of the Value and the range Minimum, Maximum.
  3. Use the following table as a reference for all the settings:
PropertyDescription
Value (required)

Current value: used for chart and label

Static Value: number field, useful for demos

Model Field: select a field from the Data Model (only numeric for now)

Min Value (required)

The starting point for your chart. Can be a Static Value or a Model FIeld

Max Value (required)The endpoint for your chart. Can be a Static Value or a Model FIeld
LabelStatic text to describe the meaning of the chart value. For example, Loan Amount Level.
Chart Color

The default color for your chart.

Choose any DCM theme color: Blue, Green, Orange, or Red. (Blue is the default color).

Display FormatFormat of display the value: Select one of the formats for Number (#,###.##), Integer (#,###), or US Money ($ #,###)
Warning level, %You can set up a level from 0% to 100%; above this level, it will use another color and label for the chart (look at Advanced settings).
Size, pxYou can adjust chart Height & Width in the range from 30px to 300px (110px is the default value)
Colspan / RowspanStandard summary field setting: is the the number of columns/rows that a cell should span. 
Advanced Settings
Below Min LabelA label when the value is below the Min value.
Above Max LabelA label when the value is above the Max value.
Warning LabelA label when the value exceeds the Warning level.
Warning Color

The color of the chart if the value exceeded the Warning level. By default, the color is Orange.

Choose any DCM theme color: Blue, Green, Orange, or Red.

Above Max Color

Color of the chart if the value exceeds the max value. By default is the "Chart Color".

You can pick any DCM theme color: Blue, Green, Orange, or Red.

SLA Chart

It is possible to set up an SLA chart widget in the summary panel. The SLA chart widget has the same settings as the Donut chart widget (see the above description).

  1. Drop the SLA Chart widget from the Toolbox to the Summary section
  2. Configure the SLA Type: Goal or Deadline. Both SLA charts have the same functionality.

Date Chart

It is possible to set up a Date chart widget in the summary panel for any Date type attribute (even from the MDM). The Date chart widget has the same settings as the Donut chart widget (see the above description).

  1. Drop the SLA Chart widget from the Toolbox to the Summary section
  2. Configure the source of the Value and the range Minimum, Maximum.

Customization

PropertyDescription
formatFn

Use this function to customize the display value format.

This function has 2 arguments: value (raw value) and result (formatted value), and should return a formatted string.

For example, you can select Integer and add some currency symbol, like (value, result) => `${result} UAH`,

or use the ExtJs format function: (value) => Ext.util.Format.number(value,'0,000.###')

colorFn

Use this function to customize the colors of the chart.

This function has one argument, "result" which is an array of 2 strings: valueSegmentColor and emptySegmentColor.

To change the color by the current value, use this value (not available for the arrow function)

For example, (result) => ['yellow',result[1]], or colorFn(result) { return this.value < 500 ? result : ['yellow', this.emptyColor] }

labelFn

This function allows you to format the description of the displayed value, for example:

(result) => `This is exchange rate for ${Ext.Date.format(new Date, 'Y-m-d')}`

or

function() { return `Value excedded ${this.maxValue}` };

warningLevelFn

This function allows you to calculate the Warning Level not only in percentage (%) but as a static value, for example (res) => value > 500

dataFn

This function advanced property that allows you to calculate an object with 3 properties: value, chartValue and restValue.

Value: It is the raw value before the format. But you can prepare it, for example, by changing the negative value to 0.

chartValue: is "size" of the colored segment of the chart, and restSegment "size" of "empty" segment.

It is calculated depending on min/max values.

For example, (result) => result.value > 500 ? {...result,  value: 'Error'} : result;