FUIKPIProgressView

open class FUIKPIProgressView : NibDesignableControl, FUIKPIContainer, FUIStateTintable, FUIStateTintableImplementation

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 (104px circle) or large (130px 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 86px 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 94px. Beyond that, it moves outside the circle and wraps to up to 2 lines of 216px 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.
  • 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

fdlFUIKPIProgressView {
progress-tint-color: @chart1;
track-tint-color: @primary5;
}

  • (optional) NumberFormatter for formatting the metric

    Declaration

    Swift

    public var metricFormatter: NumberFormatter?

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

    Declaration

    Swift

    public var fractionFormatter: NumberFormatter?

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

    Declaration

    Swift

    public var animationDuration: Float

  • Inititialization for a FUIKPIProgressView with a zero size frame

    Declaration

    Swift

    public init()

  • Inititialization for a FUIKPIProgressView.

    Declaration

    Swift

    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.

  • Chart circle size

    Declaration

    Swift

    @IBInspectable
public var isLarge: Bool { get set }

  • The color scheme of the button .light is set by default

    Declaration

    Swift

    public var colorScheme: FUIBackgroundColorScheme { get set }

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

    Declaration

    Swift

    open override var isEnabled: Bool { get set }

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

    Declaration

    Swift

    open override var isHighlighted: Bool { get set }

  • Undocumented

    Declaration

    Swift

    open override var tintColor: UIColor! { get set }

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

    Declaration

    Swift

    open var chartSize: FUIKPIProgressViewSize { get set }

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

    Declaration

    Swift

    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 122 px 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

    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

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

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

    Declaration

    Swift

    public func applyTintColor(forState state: UIControlState)

    Parameters

    state

    UIControlState