FUIChartCardView

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

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

Skeleton

view.showSkeleton()
view.hideSkeleton()

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;
  • The display mode for subtitle and trend components when both components are set.

    See more

    Declaration

    Swift

    public enum SubtitleAndTrendDisplayMode
  • The display mode for Subtitle and Trend components.

    The default is subtitle, displaying only the subtitle component when both subtitle and trend are set. If one of the subtitle or trend is not set. the other is displayed, regardless of the value for this property.

    Declaration

    Swift

    public var subtitleAndTrendDisplayMode: SubtitleAndTrendDisplayMode
  • This boolean value indicates if the space for the chartView should be preserved or not.

    The default is true, meaning the space for the chartView is there even if the dataSource fot the chartView is not set. If the value is false, and the dataSource for the chartView is not set, there is no space preserved for the chartView.

    Declaration

    Swift

    public var preserveChartViewSpacing: Bool
  • View containing the chart and plotted points

    Declaration

    Swift

    public let chartView: FUIChartView
  • FUIText value for chart trend

    Declaration

    Swift

    public private(set) var trend: FUIText { get }
  • UIImage value representing chart trend

    Declaration

    Swift

    public var trendImage: UIImage? { get set }
  • UIColor used to show trend

    Declaration

    Swift

    public var trendSemanticColor: UIColor?
  • Size for trend image.

    Set size to nil if the intrinsic image size should be used. Default value is 16 * 16.

    Declaration

    Swift

    public var trendImageSize: CGSize?
  • Array of title strings for each data series in the plot. Will be drawn into the chart legend.

    • Theming: Styleable in .nss file using Text type of properties. Class name: fdlFUIChartChardView_seriesTitles.
    • Styleable: using FUIPropertyRef.seriesTitles.

    Declaration

    Swift

    public var seriesTitles: [FUIText] { get set }
  • Developer formatted NSAttributedString to be displayed as the seriesTitle

    Declaration

    Swift

    public var seriesTitlesAttributedText: NSAttributedString! { get set }
  • Declaration

    Swift

    open override var intrinsicContentSize: CGSize { get }