Percent Bar Config

The Predefined Configuration for the Percent Bar Function

Percent Bar State

It contains a list of Percent Bars:

PropertyDescription
PercentBarsCollection of Percent Bars - contain either Ranges OR a Column Comparison

Percent Bar

A Percent Bar is defined as follows:

PropertyDescriptionDefault
BackColorBack colour for Percent Bar cells; leave unset if none requiredGray
ColumnComparisonCompares cell values to another Column
ColumnIdColumn on which Percent Bar should be applied
DisplayPercentageValueDisplays cell value as percentage of maximum value (requires ShowValue or ShowToolTip to be true)
DisplayRawValueDisplay actual cell value (requires ShowValue or ShowToolTip to be true)
RangesRanges in Percent Bar (e.g. to allow a traffic light effect)
ShowToolTipDisplay tooltip when mouse hovers over cell in Percent Barfalse
ShowValueDisplay cell value (in addition to Percent Bar)false

Percent Bar Range

Each Percent Bar will contain either a Percent Bar Range:

PropertyDescription
ColorCell colour to use for values that fall inside the Range
MaxEnd number of the Range
MinStart number of the Range

Column Comparison

Or a Column Comparison:

PropertyDescription
ColorColour to use for the Percent bar
MaxValueEnd value - either numeric or Column name
MinValueStart value - either numeric or Column name

Percent Bar Config Example

export default {
PercentBar: {
PercentBars: [
{
ColumnId: 'InvoicedCost',
Ranges: [
{ Min: 0, Max: 500, Color: '#ff0000' },
{ Min: 500, Max: 1000, Color: '#ffa500' },
{ Min: 1000, Max: 3000, Color: '#008000' },
],
ShowValue: false,
},
{
BackColor: '#d3d3d3',
ColumnId: 'ItemCost',
DisplayPercentageValue: true,
DisplayRawValue: true,
Ranges: [{ Min: 0, Max: 200, Color: '#87cefa' }],
ShowValue: true,
},
{
ColumnId: 'CurrentFill',
ColumnComparison: {
MinValue: 0,
MaxValue: 'Quantity',
Color: 'brown',
},
ShowValue: true,
ShowToolTip: true,
},
],
},
} as PredefinedConfig;

In this example we have created Percent Bars for 3 Columns:

  • 'InvoicedCost': has 3 Ranges (0-500 Red, 500-1000 Orange, 1000-3000 Green)
  • 'ItemCost': has 1 Range, shows both the Cell Value and the equivalent Percent Value and has a back colour.
  • 'CurrentFill': has a Column Comparison against the 'Quantity' column

Percent Bar State

PropertyDescription
PercentBarsCollection of Percent Bars - contain either Ranges OR a Column Comparison

More Information