¶ Indicator component
The Indicator component is used in interfaces to display a single KPI or aggregated value in a prominent way (for example, Total Sales, Profit, or Headcount). It is ideal for highlighting key metrics on dashboards and summary pages.
After we place an Indicator on the canvas, we configure it from the Component configuration panel on the right side of the screen, as shown in the image.
¶ Adding an Indicator
- Open or create an interface.
- From the component bar, select INDICATOR and click on the canvas to place it.
- Link the Indicator to a node whose result returns a scalar value (or a reduced value from a table/cube).
Once linked, the Indicator shows the node value in the center of the card, with the node title (or a custom label) in the header.
¶ General configuration
In the General section of the configuration panel we can:
- Select the source node that provides the value.
- Define the label to be displayed at the top of the card (e.g. “Total”).
- Map node dimensions to explicit indexes when the node result is multidimensional (for example, fixing a specific Year or Region to show in the Indicator). This lets us decide exactly which slice of a cube or table is displayed.
¶ Styles
The Styles section controls the visual appearance of the Indicator. We can adjust:
Value format
- Choose a format preset (Default, number, percentage, currency, etc.) to control how the value is rendered.
Font size
- Slider to define the font size of the numeric value (e.g.
30pxin the example).
Font style
- Bold, italic, underline options for the value text.
Text align
- Horizontal alignment of the value (left, center, right, justified).
Font color
- Color of the value text.
Background color
- Color of the Indicator card background (blue in the example).
These options allow us to match the Indicator with the visual style of the rest of the interface and emphasize the most important metrics.
¶ Conditional format
At the bottom of the panel we find Conditional format:
- We can Add condition to define rules that change the style of the Indicator based on its value (for example, red when value < 0, green when value > target).
- We can Delete all conditions to remove conditional formatting.
Conditional formatting is useful to quickly highlight good or bad performance directly in the interface.
The Indicator component is thus a configurable KPI card: we link it to a node, optionally fix dimensions, and then use style and conditional formatting options to present the metric clearly and consistently within our Pyplan interfaces.