Analytics Cards

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

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

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
}

  • UITableViewCell containing a UICollectionView, configured for displaying Card collection view items.

    Takes responsibility for correct layout and sizing for the card items, for different screen dimensions.

    See more

    Declaration

    Swift

    open class FUICardCollectionViewTableViewCell : FUIBaseCollectionViewTableViewCell

  • UICollectionViewCell subclass for FUIChartCardView with FUIChartView plotted in cell.

    Developer should use the FUIKPIViewItem API set to build KPI content, and set to the kpiItems: [FUIKPIViewItem] property.

    The optional trendSemanticColor: UIColor? will be applied to the trend and trendImage properties, if not nil.

    Developer should configure the chartView: FUIChartView.

    Note

    the default Card configuration for the FUIChartView will cause only the first and last category title to be displayed.

    Extends FUIChartCardView API, by extension on FUIBaseDrawingCollectionViewCell.

    Data Source

    Developer should implement the FUIChartViewDataSource, to supply data to the card’s chartView property.

    Usage

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUIChartCardCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIChartCardCollectionViewCell
cell.title.text = "Completed"
cell.status.text = "Updated 20 min ago"
cell.kpiItems = [<#FUIKPIViewItem#>]
cell.trend.text = "11.5 %"
cell.trendImage = FUIIconLibrary.analytics.trendUp.withRenderingMode(.alwaysTemplate)
cell.trendSemanticColor = UIColor.preferredFioriColor(forStyle: .positive)
cell.chartType = .line
cell.series.colors = [UIColor.preferredFioriColor(forStyle: .negative)]
cell.categoryAxis.labels.isHidden = true

    Theming

    Supported TEXT class paths:

    fdlFUIChartCardCollectionViewCell_title {}
fdlFUIChartCardCollectionViewCell_kpiUnitItem {}
fdlFUIChartCardCollectionViewCell_kpiMetricItem {}
fdlFUIChartCardCollectionViewCell_kpiFractionItem {}
fdlFUIChartCardCollectionViewCell_status {}
fdlFUIChartCardCollectionViewCell_trend {}
fdlFUIChartCardCollectionViewCell_seriesTitles {}

    Supported TEXT properties:

    font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

    Supported IMAGE class paths:

    fdlFUIChartCardCollectionViewCell_kpiIconItem {}
fdlFUIChartCardCollectionViewCell_trendImage {}

    Supported IMAGE properties:

    tint-color: Color;
    See more

    Declaration

    Swift

    open class FUIChartCardCollectionViewCell : FUIBaseDrawingCollectionViewCell<FUIChartCardView>, FUIAttributesConsumer

  • UICollectionViewCell subclass for FUIKPICardView card type, where KPI values are centered in the card.

    Developer should use the FUIKPIViewItem API set to build KPI content, and set to the kpiItems: [FUIKPIViewItem] property.

    Extends FUIKPICardView API, by extension on FUIBaseDrawingCollectionViewCell.

    Usage

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUIKPICardCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIKPICardCollectionViewCell
cell.title.text = "Completed"
cell.status.text = "Updated 20 min ago"
cell.kpiItems = [<#FUIKPIViewItem#>]
return cell

    Theming

    Supported TEXT class paths:

    fdlFUIKPICardCollectionViewCell_title {}
fdlFUIKPICardCollectionViewCell_kpiUnitItem {}
fdlFUIKPICardCollectionViewCell_kpiMetricItem {}
fdlFUIKPICardCollectionViewCell_kpiFractionItem {}
fdlFUIKPICardCollectionViewCell_status {}

    Supported TEXT properties:

    font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

    Supported IMAGE class paths:

    fdlFUIKPICardCollectionViewCell_kpiIconItem {}

    Supported IMAGE properties:

    tint-color: Color;
    See more

    Declaration

    Swift

    open class FUIKPICardCollectionViewCell : FUIBaseDrawingCollectionViewCell<FUIKPICardView>

  • UICollectionViewCell subclass for FUIKPIProgressCardView, where KPI values are centered in the card, inscribed within circular progress ring.

    Developer should use the FUIKPIViewItem API set to build KPI content, and set to the kpiItems: [FUIKPIViewItem] property.

    Extends FUIKPIProgressCardView API, by extension on FUIBaseDrawingCollectionViewCell.

    Usage

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUIKPICardCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIKPICardCollectionViewCell
cell.title.text = "Completed"
cell.status.text = "Updated 20 min ago"
cell.kpiItems = [<#FUIKPIViewItem#>]
cell.progress = 0.6
return cell

    Theming

    Supported TEXT class paths:

    fdlFUIKPIProgressCardCollectionViewCell_title {}
fdlFUIKPIProgressCardCollectionViewCell_kpiUnitItem {}
fdlFUIKPIProgressCardCollectionViewCell_kpiMetricItem {}
fdlFUIKPIProgressCardCollectionViewCell_kpiFractionItem {}
fdlFUIKPIProgressCardCollectionViewCell_status {}

    Supported TEXT properties:

    font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

    Supported IMAGE class paths:

    fdlFUIKPIProgressCardCollectionViewCell_kpiIconItem {}

    Supported IMAGE properties:

    tint-color: Color;
    See more

    Declaration

    Swift

    open class FUIKPIProgressCardCollectionViewCell : FUIBaseDrawingCollectionViewCell<FUIKPIProgressCardView>

  • Chart card type, where KPI values are centered in the card, inscribed within circular progress ring.

    Developer should use the FUIKPIViewItem API set to build KPI content and set to the kpiItems: [FUIKPIViewItem] property.

    The optional trendSemanticColor: UIColor? will be applied to the trend and trendImage properties, if not nil.

    Developer should configure the chartView: FUIChartView.

    Note

    the default Card configuration for the FUIChartView will cause only the first and last category title to be displayed.

    Data Source

    Developer should implement the FUIChartViewDataSource, to supply data to the card’s chartView property.

    Usage

    let view = FUIChartCardView()
view.title.text = "Completed"
view.status.text = "Updated 20 min ago"
view.kpiItems = [<#FUIKPIViewItem#>]
view.trend.text = "11.5 %"
view.trendImage = FUIIconLibrary.analytics.trendUp.withRenderingMode(.alwaysTemplate)
view.trendSemanticColor = UIColor.preferredFioriColor(forStyle: .positive)
view.chartView.chartType = .line
view.chartView.series.colors = [UIColor.preferredFioriColor(forStyle: .negative)]
view.chartView.categoryAxis.labels.isHidden = true

    Theming

    Supported TEXT class paths:

    fdlFUIChartCardView_title {}
fdlFUIChartCardView_kpiUnitItem {}
fdlFUIChartCardView_kpiMetricItem {}
fdlFUIChartCardView_kpiFractionItem {}
fdlFUIChartCardView_status {}
fdlFUIChartCardView_trend {}
fdlFUIChartCardView_seriesTitles {}

    Supported TEXT properties:

    font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

    Supported IMAGE class paths:

    fdlFUIChartCardView_kpiIconItem {}
fdlFUIChartCardView_trendImage {}

    Supported IMAGE properties:

    tint-color: Color;
    See more

    Declaration

    Swift

    @IBDesignable
open class FUIChartCardView : FUICardBaseView, FUISeriesTitleComponent, FUISubtitleComponent, FUITrendComponent

  • Chart card type, where KPI values are centered in the card.

    Developer should use the FUIKPIViewItem API set to build KPI content, and set to the kpiItems: [FUIKPIViewItem] property.

    Usage

    let view = FUIKPICardView()
view.title.text = "Completed"
view.status.text = "Updated 20 min ago"
view.kpiItems = [<#FUIKPIViewItem#>]

    Theming

    Supported TEXT class paths:

    fdlFUIKPICardView_title {}
fdlFUIKPICardView_kpiUnitItem {}
fdlFUIKPICardView_kpiMetricItem {}
fdlFUIKPICardView_kpiFractionItem {}
fdlFUIKPICardView_status {}

    Supported TEXT properties:

    font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

    Supported IMAGE class paths:

    fdlFUIKPICardView_kpiIconItem {}

    Supported IMAGE properties:

    tint-color: Color;
    See more

    Declaration

    Swift

    @IBDesignable
open class FUIKPICardView : FUICardBaseView

  • Chart card type, where KPI values are centered in the card, inscribed within circular progress ring.

    Developer should use the FUIKPIViewItem API set to build KPI content, and set to the kpiItems: [FUIKPIViewItem] property.

    Usage

    let view = FUIKPIProgressCardView()
view.title.text = "Completed"
view.status.text = "Updated 20 min ago"
view.kpiItems = [<#FUIKPIViewItem#>]
view.progress = 0.6

    Theming

    Supported TEXT class paths:

    fdlFUIKPIProgressCardView_title {}
fdlFUIKPIProgressCardView_kpiUnitItem {}
fdlFUIKPIProgressCardView_kpiMetricItem {}
fdlFUIKPIProgressCardView_kpiFractionItem {}
fdlFUIKPIProgressCardView_status {}

    Supported TEXT properties:

    font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

    Supported IMAGE class paths:

    fdlFUIKPIProgressCardView_kpiIconItem {}

    Supported IMAGE properties:

    tint-color: Color;
    See more

    Declaration

    Swift

    @IBDesignable
open class FUIKPIProgressCardView : FUIKPICardView