KPI Progress View¶
open class FUIKPIProgressView: NibDesignableControl, FUIKPIContainer, FUIStateTintable, FUIStateTintableImplementation, FUIContentCopyableView
FUIKPIProgressView is an
UIView subclass, which enables a developer to present "KPI" information in a formatted manner consistent with the Fiori Design Language.
FUIKPIProgressView takes 4 types of component items, and a caption string:
KPIChartscan 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
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
- Note: This API of component items is conceptually similar to that of
setTintColor(_:for:)to configure tint color for disabled, normal, highlighted
tintColoris equivalent to call
setTintColor(color, for: UIControlState.normal). If
tintColoris not set by developer,
colorSchemewill be applied.
setTextColor(_:for:)to configure tint color for disabled, normal, highlighted
KPIViewand 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.
let kpiChartView = FUIKPIProgressView(frame: CGRect())
Inside a Storyboard or
- Drag and drop a
UIViewcomponent to Interface Builder's canvas.
- Switch custom class name from
FUIKPIProgressViewand set module to
- Create an outlet of the
FUIKPIProgressViewto be able to access its properties.
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"
KPIProgressView class paths:
1 2 3 4 5 6