KPI and Numeric Data

Numeric Data/KPIs (key performance indicators) are values for measuring and evaluating the success of an organization, an individual, a group, or an activity. This feature supports three different sizes: small, medium, and large.

The Anatomy of Numeric KPI

A numeric KPI may contain the following elements:

Except for the Value string, all the elements are optional.

How to Create a Numeric KPI

To create a numeric KPI, simply call the composable function FioriNumericKpi:

@Composable
fun FioriNumericKpi(
    data: FioriNumericKpiData,
    colors: FioriNumericKpiColors = FioriNumericKpiDefaults.colors(),
    textStyles: FioriNumericKpiTextStyles = FioriNumericKpiDefaults.textStyles(size = data.size),
    styles: FioriNumericKpiStyles = FioriNumericKpiDefaults.styles(size = data.size),
    modifier: Modifier = Modifier
) {
    ...
}

Supply the data with an object of FioriNumericKpiData:

data class FioriNumericKpiData(
    val value: String,
    val size: FioriNumericKpiSize = FioriNumericKpiSize.SMALL,
    val valueBeforePrefix: String? = null,
    val prefix: String? = null,
    val suffix: String? = null,
    val color: FioriSemanticColors? = null,
    val trend: FioriNumericKpiTrend? = null,
    val icon: FioriIcon? = null,
    val label: FioriNumericKpiLabel? = null,
    val useIntrinsicSize: Boolean = true,
)

data class FioriNumericKpiTrend (
    val type: FioriNumericKpiTrendType = FioriNumericKpiTrendType.UP,
    val color: FioriSemanticColors = FioriSemanticColors.NEUTRAL,
    val contentDescription: String? = ""
)

data class FioriNumericKpiLabel (
    val text: String,
    val color: FioriSemanticColors? = null,
    val alignment: FioriNumericKpiAlignment = FioriNumericKpiAlignment.END,
    val maxLines: Int = 2
)

enum class FioriSemanticColors {
    NEUTRAL, POSITIVE, NEGATIVE, CRITICAL, INFORMATIVE
}

Note that useIntrinsicSize is set to true by default. This means the maximum width of the entire numeric KPI is measured and constrained to the intrinsic size of the KPI string (i.e. the combined line of icon, prefix, value, and suffix, etc.). So the label will be truncated at the end and not exceed the width of the KPI string. However, in some cases, an application might want to use more horizontal space to display the full label regardless of the width of the KPI string. In order to support that, simply set this useIntrinsicSize flag to false. For example:

FioriNumericKpi(
    data = FioriNumericKpiData(
        size = FioriNumericKpiSize.MEDIUM,
        valueBeforePrefix = "07",
        value = "13",
        prefix = ":",
        suffix = "mins",
        label = FioriNumericKpiLabel(
            text = "Amount of time the transformer has been out of service",
            alignment = FioriNumericKpiAlignment.START
        ),
        useIntrinsicSize = false
    ),
    modifier = Modifier
)

---

Last update: February 29, 2024