Percent Bar Config
The Predefined Configuration for the Percent Bar Function
Percent Bar State
It contains a list of Percent Bars:
| Property | Description |
|---|---|
| PercentBars | Collection of Percent Bars - contain either Ranges OR a Column Comparison |
Percent Bar
A Percent Bar is defined as follows:
| Property | Description | Default |
|---|---|---|
| BackColor | Back colour for Percent Bar cells; leave unset if none required | Gray |
| ColumnComparison | Compares cell values to another Column | |
| ColumnId | Column on which Percent Bar should be applied | |
| DisplayPercentageValue | Displays cell value as percentage of maximum value (requires ShowValue or ShowToolTip to be true) | |
| DisplayRawValue | Display actual cell value (requires ShowValue or ShowToolTip to be true) | |
| Ranges | Ranges in Percent Bar (e.g. to allow a traffic light effect) | |
| ShowToolTip | Display tooltip when mouse hovers over cell in Percent Bar | false |
| ShowValue | Display cell value (in addition to Percent Bar) | false |
Percent Bar Range
Each Percent Bar will contain either a Percent Bar Range:
| Property | Description |
|---|---|
| Color | Cell colour to use for values that fall inside the Range |
| Max | End number of the Range |
| Min | Start number of the Range |
Column Comparison
Or a Column Comparison:
| Property | Description |
|---|---|
| Color | Colour to use for the Percent bar |
| MaxValue | End value - either numeric or Column name |
| MinValue | Start 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
| Property | Description |
|---|---|
| PercentBars | Collection of Percent Bars - contain either Ranges OR a Column Comparison |