FUIKPIProgressView

@MainActor
open class FUIKPIProgressView : NibDesignableControl, FUIKPIContainer, FUIStateTintable, FUIStateTintableImplementation, FUIContentCopyableView
extension FUIKPIProgressView: FUIStateSelectable

The FUIKPIProgressView is an UIView subclass, which enables a developer to present “KPI” information in a formatted manner consistent with the Fiori Design Language.

The FUIKPIProgressView takes 4 types of component items, and a caption string:

  • chartSize: KPICharts can be small (104 px circle) or large (130 px circle). Large is default
  • metric: The value which is being displayed. For example, in: “42%” and “42/100”, the metric is “42”.
  • fraction: The value which is being displayed when in a fraction form. For example, in: 42/100, the fraction elements are “42” and “100” with “/” being a “unit” item.

  • unit: the unit information for the metric displayed. For example, in “42%”, the unit is “%”. Multiple unit components are permitted per metric. However, a maximum of two units should be used on each side of the metric.

  • progress: The percentage of the KPI chart/circle that should be filled in. For example, to have half of the circle chart filled in, the progress is “0.50”. Progress bar animates on load.

  • captionLabel: An optional label displayed directly beneath the KPI components. The label will shift to underneath the circle if sizing requires. For small charts, the caption can be up to 86 px in length. Greater than that, it moves outside of the circle and can wrap to up to 2 lines of 122 px per line. For large charts, the caption inside the circle can be up to 94 px. Beyond that, it moves outside the circle and wraps to up to 2 lines of 216 px per line.

The KPI components are implemented as FUIKPIMetricItem, FUIKPIFractionItem, or FUIKPIUnitItem. All implement FUIKPIViewItem protocol. The developer should create instances of each of these components, and pass them to the items: [FUIKPIViewItem] property of the FUIKPIProgressView.

Note

This API of component items is conceptually similar to that of UIToolbar‘s items: [UIBarButtonItem]? property.

Color configuration:

  • Call setTintColor(_:for:) to configure tint color for disabled, normal, highlighted UIControlState. Setting tintColor is equivalent to call setTintColor(color, for: UIControlState.normal). If tintColor is not set by developer, colorScheme will be applied.
  • Call setTextColor(_:for:) to configure tint color for disabled, normal, highlighted UIControlState of the KPIView and caption text.
  • Disabled: Color to be used when control is disabled.
  • Normal: Color to be used when control is enabled.
  • Highlighted: Color to be used when control is tapped on.

Initialization

Programmatically:

let kpiChartView = FUIKPIProgressView(frame: CGRect())

Inside a Storyboard or xib:

  1. Drag and drop a UIView component to Interface Builder’s canvas.
  2. Switch custom class name from UIView to FUIKPIProgressView and set module to SAPFiori.
  3. Create an outlet of the FUIKPIProgressView to be able to access its properties.

Usage


self.kpiChartView.chartSize = FUIKPIProgressViewSize.small
let metric = FUIKPIMetricItem(string: "33")
let unit = FUIKPIUnitItem(string: "%")
self.kpiChartView.items = [metric, unit]
self.kpiChartView.progress = Float(0.33)
self.kpiChartView.captionLabelText = "Complete"

Theming

Supported KPIProgressView class paths:

fdlFUIKPIProgressView {}
fdlFUIKPIProgressView_captionLabel {}

Supported KPIProgressView attributes:

tint-color (Color)
tint-color-disabled (Color)
font-color (Color)
font-color-disabled (Color)
progress-tint-color (Color)
track-tint-color (Color)

  • (optional) NumberFormatter for formatting the metric

    Declaration

    Swift

    @MainActor
public var metricFormatter: NumberFormatter?

  • (optional) NumberFormatter for formatting the metric as a fraction

    Declaration

    Swift

    @MainActor
public var fractionFormatter: NumberFormatter?

  • property to determine duration of chart circle animation 0.5 by default

    Declaration

    Swift

    @MainActor
public var animationDuration: Float

  • Handler invoked when the FUIKPIProgressView is selected. Only works when the isEnabled property of the FUIKPIProgressView is set to true.

    Declaration

    Swift

    @MainActor
open var didSelectHandler: (() -> Void)?

  • Set this property to true to force the caption lable be displayed outside the circle even if it’s size is small enough that could be placed in the circle.

    The default is false.

    Declaration

    Swift

    @MainActor
open var isDisplayingCaptionOutsideCircle: Bool { get set }

  • Inititialization for a FUIKPIProgressView.

    Declaration

    Swift

    @MainActor
public override init(frame: CGRect)

    Parameters

    frame

    For best results, create frame with CGRect(origin:CGPoint, size: .zero) as height and width of CGRect are zero’d out to allow for dynamic content.

  • Undocumented

    Declaration

    Swift

    @MainActor
open override var accessibilityLabel: String? { get set }

  • Chart circle size

    Declaration

    Swift

    @IBInspectable
@MainActor
public var isLarge: Bool { get set }

  • Boolean value to determine whether a user is able to interact with the control

    Declaration

    Swift

    @MainActor
open override var isEnabled: Bool { get set }

  • Boolean value to determine whether the control should be displayed in a highlighted state

    Declaration

    Swift

    @MainActor
open override var isHighlighted: Bool { get set }

  • Size of the chart circle to be displayed. .large has a diameter of 130px and .small

    Declaration

    Swift

    @MainActor
open var chartSize: FUIKPIProgressViewSize { get set }

  • Amount of the progress circle to be filled in as a Float 0.0..1.0

    Declaration

    Swift

    @MainActor
open var progress: Float { get set }

  • An optional label displayed directly beneath the KPI components. The label will shift to underneath the circle if sizing requires. For small charts, the caption can be up to 86px in length. Greater than that, it moves outside of the circle and can wrap to up to 2 lines of 122px per line. For large charts, the caption inside the circle can be up to 94px. Beyond that, it moves outside the circle and wraps to up to 2 lines of 216px per line.

    Declaration

    Swift

    @MainActor
public var captionLabelText: String { get set }

  • Array of FUIKPIViewItem‘s, which are laid-out sequentially in the FUIKPIProgressView. Items will be baseline-aligned.

    Important

    developer should set the complete array value to this property, not attempt to mutate the array after it has been set. Subsequent mutations will not be tracked.

    Declaration

    Swift

    @MainActor
public var items: [FUIKPIViewItem]? { get set }

  • Changes the tint color for the control based on the given state

    Declaration

    Swift

    @MainActor
public func applyTintColor(forState state: UIControlState)

    Parameters

    state

tint color

FUIContentCopyable

  • This property indicates if the content is copyable or not.

    The default is true.

    Declaration

    Swift

    @MainActor
public var isContentCopyable: Bool { get set }