FUIKPIProgressView
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 defaultmetric
: 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 ofUIToolbar
‘s items: [UIBarButtonItem]?
property.
Color configuration:
- Call
setTintColor(_:for:)
to configure tint color for disabled, normal, highlightedUIControlState
. SettingtintColor
is equivalent to callsetTintColor(color, for: UIControlState.normal)
. IftintColor
is not set by developer,colorScheme
will be applied. - Call
setTextColor(_:for:)
to configure tint color for disabled, normal, highlightedUIControlState
of theKPIView
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
:
- Drag and drop a
UIView
component to Interface Builder’s canvas. - Switch custom class name from
UIView
toFUIKPIProgressView
and set module toSAPFiori
. - 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
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
-
Handler invoked when the FUIKPIProgressView is selected. Only works when the isEnabled property of the FUIKPIProgressView is set to true.
Declaration
Swift
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
open var isDisplayingCaptionOutsideCircle: Bool { get set }
-
Inititialization for a FUIKPIProgressView.
Declaration
Swift
public override init(frame: CGRect)
Parameters
frame
For best results, create
frame
withCGRect(origin:CGPoint, size: .zero)
as height and width ofCGRect
are zero’d out to allow for dynamic content. -
Undocumented
Declaration
Swift
open override var accessibilityLabel: String? { get set }
-
Chart circle size
Declaration
Swift
@IBInspectable public var isLarge: Bool { get set }
-
Color scheme for kpi progress view. Default value is
.device
Declaration
Swift
@available(*, deprecated, message: "Will be unavailble in newer SDK version.") 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 }
-
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 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
public var captionLabelText: String { get set }
-
Array of
FUIKPIViewItem
‘s, which are laid-out sequentially in theFUIKPIProgressView
. 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
-
This property indicates if the content is copyable or not.
The default is
true
.Declaration
Swift
public var isContentCopyable: Bool { get set }