Progress View KPI

Progress View KPIs (key performance indicators) are used to evaluate, highlight, or summarize important statistics.

Anatomy

The Progress View KPI includes a circular progress indicator that corresponds to the metric, an embedded numeric KPI inside the progress indicator, and a title below the progress indicator.

The Progress View KPI provides two default sizes: the larger circular progress indicator is 145.dp in width and height and the smaller circular progress indicator is 100.dp in width and height.

Usage

Developers can display a Progress View KPI by calling the FioriProgressViewKpi Composable function. The arguments consist of:

• progress - specifies the progress of the circular progress indicator, where 0.0f represents no progress and 1.0f represents full progress. Values outside of this range are coerced into the range.
• modifier - specifies the Modifier to be applied to this control.
• title - specifies the title below the progress indicator.
• size - specifies the predefined size of this control.
• kpi - specifies the KPI content inside circular progress indicator, typically a FioriNumericKpi control.

FioriProgressViewKpi(
    progress = 0.5f,
    modifier = Modifier.padding(vertical = 16.dp),
    title = "Spending",
    size = Size.Large,
    kpi = {
        FioriNumericKpi(
            data = FioriNumericKpiData(
                size = FioriNumericKpiSize.LARGE,
                value = "50",
                suffix = "%",
                label = FioriNumericKpiLabel(
                    text = "Increase",
                    alignment = FioriNumericKpiAlignment.CENTER
                ),
                trend = FioriNumericKpiTrend(
                    type = FioriNumericKpiTrendType.UP
                )
            )
        )
    }
)

Size

FioriProgressViewKpi provides two default sizes:

• FioriNumericKpiSize.LARGE: The circular progress indicator has 145.dp in width/height. The border weight of the circle is 4.dp. The maximum width of the title is 300.dp.
• FioriNumericKpiSize.SMALL: The circular progress indicator has 100.dp in width/height. The border weight of the circle is 2.dp. The maximum width of the title is 200.dp.

Use the size argument to specify the size of Progress View KPI:

// Large Size
FioriProgressViewKpi(
    progress = 0.5f,
    size = FioriProgressViewKpiSize.LARGE,
    title = "Large Progress View KPI. The title can wrap over two lines and gets truncated at the end."
) {
    FioriNumericKpi(
        data = FioriNumericKpiData(
            size = FioriNumericKpiSize.LARGE,
            value = "50",
            suffix = "%"
        )
    )
}

// Small Size
FioriProgressViewKpi(
    progress = 0.5f,
    size = FioriProgressViewKpiSize.SMALL,
    title = "Small Progress View KPI. The title can wrap over two lines and gets truncated at the end."
) {
    FioriNumericKpi(
        data = FioriNumericKpiData(
            size = FioriNumericKpiSize.SMALL,
            value = "50",
            suffix = "%"
        )
    )
}

Customizing Style

FioriProgressViewKpi supports customizing the style using colors, typography, and styles arguments.

For details, see:

• FioriProgressViewKpiDefaults

API Reference

See Package com.sap.cloud.mobile.fiori.compose.kpi.ui.

---

Last update: February 29, 2024