Skip to content

Analytics Card

Cards display a variety of charts and KPIs with key information. Users can tap the card to navigate to the full interactive chart floorplan.

image

The SDK has three Card variants, delivered as UICollectionViewCell specializations:

  • FUIChartCardCollectionViewCell
  • FUIKPICardCollectionViewCell
  • FUIKPIProgressCardCollectionViewCell

Usage

The Card types share several common properties among themselves, and also with the other Chart-related components (FUIChartFloorplanViewController, FUIObjectHeaderChartView), including common 'Component' protocols such as FUITitleComponent, FUIKPIComponent, FUIStatusComponent, and FUITrendComponent.

Text values can be set, using the FUIText type, which behaves similarly to UILabel, or using the NSAttributedString type, which overrides any values supplied to the FUIText property. The NSAttributedString API from iOS is a powerful tool for custom text and paragraph layouts, though in general, the FUIText API should be sufficient.

When using the .nss file stylesheet, the style classes may be appended using the *StyleClassPath property (for example: titleStyleClassPath: [FioriStyle]).

All three cards utilize the FUIKPIViewItem API, which composes a formatted string for a list of 'KPI items' (units, metrics, icons, fractions). The formatting will vary from Card to Card.

Chart Card

The FUIChartCardCollectionViewCell exposes a FUIChartView property, which can be configured by the developer to display the appropriate data & labels. Keep in mind that in the Card context, the data is not user-interactive (the user should navigate to a full Chart Floorplan for that), so it is recommended to display only summary content in this small frame, and the detailed content in the floorplan.

To implement some of the Chart Cards above, see the following configurations:

Cell #1 (Total Sales)

cell.title.text = "Total Sales"
cell.kpiItems = [FUIKPIUnitItem(string: "$"), FUIKPIMetricItem(string: "265,849.98")]
cell.status.text = "20 min ago"
cell.seriesTitles = ["2016", "2017"]
cell.chartView.chartType = .line
cell.chartView.numericAxis.labels.isHidden = true
cell.chartView.dataSource = data

Cell #3 (Power)

cell.title.text = "Power"
cell.status.text = "Past 30 Days"
cell.trendImage = FUIIconLibrary.analytics.trendUp.withRenderingMode(.alwaysTemplate)
cell.trend.text = "11.5%"
cell.kpiItems = [FUIKPIMetricItem(string: "265"), FUIKPIUnitItem(string: "hp")]
cell.chartView.categoryAxis.labels.isHidden = true
cell.chartView.numericAxis.labels.isHidden = true
cell.chartView.series.colors = [UIColor.preferredFioriColor(forStyle: .negative)]
cell.chartView.dataSource = data

Cell #4 (Total Sales - Store 541)

cell.title.text = "Total Sales"
cell.subtitle.text = "Store 541"
cell.kpiItems = [FUIKPIUnitItem(string: "$"), FUIKPIMetricItem(string: "6,590.57")]
cell.chartView.chartType = .column
cell.chartView.numericAxis.labels.isHidden = true
cell.chartView.dataSource = data

KPI & KPI Progress Cards

The FUIKPICardCollectionViewCell and FUIKPIProgressCardCollectionViewCell both display KPI strings, centered in the card. The developer should use the kpiItems: [FUIKPIViewItem] interface generally, but may use the kpiAttributedText: NSAttributedString property to display completely custom KPI text.

The FUIKPIProgressCardCollectionViewCell adds the progress property, to set the fraction complete of the circular plot.

To implement the KPI Progress Card above, see the following configuration:

Cell #5 (Tasks Completed)

cell.title.text = "Tasks Completed"
cell.status.text = "20 min ago"
cell.kpiItems = [FUIKPIFractionItem(string: "88"), FUIKPIFractionItem(string: "/"), FUIKPIFractionItem(string: "98")]
cell.progress = Float(88) / Float(98)

Layout

The Cards should be laid out in either a horizontal scroll, or an auto-sizing flow layout. Cards have fixed sizes and should be 192pt tall. To simplify layout, the SDK includes a UITableViewCell specialization, FUICardCollectionViewTableViewCell, which implements the Fiori design layouts by default.

The FUICardCollectionViewTableViewCell uses horizontal scroll by default when on iPhone SE devices. Elsewhere, it will default to flow layout, unless isAllowingFLowLayout == false.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = super.tableView(tableView, cellForRowAt: indexPath) as! FUICardCollectionViewTableViewCell
    cell.collectionView.register(FUIChartCardCollectionViewCell.self, forCellWithReuseIdentifier: FUIChartCardCollectionViewCell.reuseIdentifier)
    cell.collectionView.dataSource = <#UICollectionViewDataSource#>
    cell.isAllowingFlowLayout = true // defaults to `true`

    return cell
}

Last update: December 8, 2020