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.

Left to right 1st line: success, warning, caution. Left to right 2on line: default, error, black(no color set)

"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.

Left to right: left, center, right

"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.

Left to right: default, contained, outlined, topColor

"backgroundImage" set a url to get a beautiful indicator with background image.

"icon" : set an icon from a list.

"icon" : "Line/subscriptions"

This list will be added soon

"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:

Consult using the grid for more details about padding and size

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",

        },
    ],
)

Note the space before the component using 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.

Using the Grid

It is possible to use any number of rows.