FUIKPIHeader

@IBDesignable
open class FUIKPIHeader : FUIDrawingView

FUIKPIHeader extends UIView for a tableview header displaying KPI items, of type FUIKPIView and FUIKPIProgressView. A maximum of four KPI values can be displayed in the header, hence if more than four items are provided in the items array as input to the header, only the first four are diplayed and the rest of the items are ignored. When both FUIKPIView and FUIKPIProgressView items are provided, the items are sorted such that the FUIKPIProgressViews are displayed first, followed by the FUIKPIViews. Only FUIKPIProgessViews with chartSize of ‘large'can be displayed in the header , if an FUIProgressView of charSize 'small'is supplied, it is ignored. Based on the number of KPI items that can be shown based on the screen size, a page control is used to display multiple pages in the header, as required. The kpi items in the header can be enabled or disabled. The default KPI header background is of color scheme .dark, hence to display the kpi items with the appropriate tintColor as per the fiori design guidelines for iOS, it is required that the kpi items supplied to the header have a color scheme of .dark as well. The developer can choose to supply a custom tint color for the kpis. It is important to set the colorScheme of the kpi before the call to override the tintColor, as shown below.( since setting the colorScheme resets the tintColor to the defaults, if the calls are not in order, then the custom tintColors are not displayed.)

 kpiView.colorScheme = .dark
 kpiView.setTintColor(.yellow, for: .normal)

## Regular (Landscape) Horizontal Size Class: Variations

## Compact (Portrait) Horizontal Size Class: Variations

## Example Initialization and Configuration:

In table view controller’s viewDidLoad function:

 //Programmatically add a KPIHeader to tableview

 let kpiView1 = FUIKPIView()
 let kpiView1Icon = FUIKPIIconItem(icon: #imageLiteral(resourceName: "asset").withRenderingMode(.alwaysTemplate))
 let kpiView1Metric = FUIKPIMetricItem(string: "5")
 let kpiView1Unit1 = FUIKPIUnitItem(string: "k")
 kpiView1.items = [kpiView1Icon, kpiView1Metric,kpiView1Unit1]
 kpiView1.captionlabel.text = "Orders processed"
 kpiView1.isEnabled = false
 kpiView1.colorScheme = .dark

 var kpiChartLarge: FUIKPIProgressView!
 kpiChartLarge = FUIKPIProgressView()
 kpiChartLarge.chartSize = FUIKPIProgressViewSize.large
 let fractionLarge = FUIKPIFractionItem(string: "12")
 let unitLarge = FUIKPIFractionItem(string: "/")
 let fractionLarge2 = FUIKPIFractionItem(string: "25")
 kpiChartLarge.items = [fractionLarge, unitLarge, fractionLarge2]
 kpiChartLarge.progress = Float(0.64)
 kpiChartLarge.captionLabelText = "Completed"
 kpiChartLarge.colorScheme = .dark

 let kpiArray = [kpiView1, kpiChartLarge]

 let KPIHeader = FUIKPIHeader()
 KPIHeader.items = kpiArray
 self.tableView.tableHeaderView  = KPIHeader

## Note:

FUIKPIHeader added to UITableView as tableHeaderView is compatible with UIRefreshControl added to the same table view. Please note that if an UIRefreshControl object is set after adding an FUIKPIHeader object as tableHeaderView, the UIRefreshControl subview must be moved to the front in the tableView; otherwise, the UIRefreshControl object will be hidden.

 //set kpiHeader to tableHeaderView first
 self.tableView.tableHeaderView = kpiHeader
 //set a refresh control next
 self.refreshControl = UIRefreshControl()
 self.refreshControl?.addTarget(self, action: #selector(refreshTriggered), for: .valueChanged)
 self.refreshControl?.tintColor = UIColor.white
 //bring refresh control to the front to make it visible
 self.tableView.bringSubview(toFront: self.refreshControl!)

## Theming

 fdlFUIKPIHeader_background {
 background-color: @backgroundGradientTop;
 }

 fdlFUIKPIHeader_kpiView {
 tint-color: @primary6;
 }