Indicator
Indicators are important tools to benchmark, target and monitor performance.
Different types of indicators are used in monitoring and evaluation, such as ‘quantitative’ or ‘qualitative’. Colors and thresholds can be set to guide decision.
The Method To Use
The method is s.plt.indicator()
It must contain the following input variables:
order: int,
data: Union[str, pd.DataFrame, List[Dict], Dict],
And accepts the following input variables as optional:
data: Union[str, pd.DataFrame, List[Dict], Dict],
order: int,
vertical: Union[bool, str] = False,
**component_params
In the data parameter, the key value pairs that will have an effect in the result are:
{
title: string,
value: string,
description?: string,
color?: 'success' 'warning' 'error' 'neutral' 'caution',
align?: 'left' 'center' 'right',
targetPath?: string,
icon?: string,
bigIcon?: string,
variant?: 'default' 'outlined' 'contained' 'topColor',
info?: string,
hideIcons?: boolean,
backgroundImage?: string
}
Styles
"color"
: "default
", "success
", ""warning
", "error
", "caution
"
If you don't set any "color"
style, the color is black.

"alignment"
: left
, center
, right
by default the value right
is taken. Note that the alignment only applies to the value, not to the title nor description.

"variant
" : "default
" , "outlined
", "contained
", "topColor
" The variants are used to modify the container, making the same color that used only the text before, for example, with the contained variant, serve to put this color in the background.

"backgroundImage
" set a url to get a beautiful indicator with background image.
"icon
" : set an icon from a list.
"icon" : "Line/subscriptions"
"bigIcon
" : set a bigIcon inside the indicator. BigIcon and icon can be different and coexist in the same indicator
"bigIcon" : "Line/calendar"
"target_path
": set a path so that when the indicator is clicked it redirects to the specified path in the dashboard.
Example
data_ = [{
"color": "success",
"variant": "contained",
"description": "This indicator has a Link",
"targetPath": "/indicators/indicator/1",
"title": "Target Indicator",
"align": "left",
"value": "500€"
}, {
"color": "warning",
"backgroundImage": "https://images.unsplash.com/photo-1535957998253-26ae1ef29506?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80",
"variant": "outlined",
"description": "This has a background",
"title": "Super cool indicator",
"align": "left",
"value": "Value"
}, {
"color": "error",
"variant": "outlined",
"description": "This hasn't got any icons",
"title": "Error indicator",
"align": "left",
"value": "Value",
}, {
"color": "caution",
"variant": "contained",
"description": "Aligned to right and full of icons",
"title": "Multiple cases",
"align": "right",
"value": "Value",
}]
s.plt.indicator(
data=data_, order=2, rows_size=2, cols_size=12,
)

Modifying Size And Padding
It is possible to personalize the size and add padding. One example could be obtained using:
s.plt.indicator(
order=0, cols_size=7,
padding="0,0,0,2",
data=[
{
"description": "Seda incolora",
"title": "Largo (m)",
"value": "1200",
"color": "grey",
},
{
"description": "Precio",
"title": "Cambio €/$",
"value": "1.19",
"color": "warning",
},
],
)

padding="0,0,0,2",
and size with cols_size=7
. Size can be modified with attention to the text to be fit in.Featured Content
Changing the Menu Path
The menu_path
can be modified.
It is possible to use any number of rows.
Last updated
Was this helpful?