Skip to main content

    SingleValue

    The SingleValue is a simple and concise representation of a single data point or metric , which can either be a text or a number.

    OverviewProperties

    SingleValueProps

    extends
    NameTypeDefaultDescription
    loading?
    		false

    Show the loading indicator when truly.

    SingleValue.Sparkline​

    SingleValue.Sparkline provides a subcomponent where the Sparkline component can be added.

    SingleValueSparklineProps

    Signature:

    export declare type SingleValue = <<, >>;

    SparklineProps

    extends, ,
    NameTypeDefaultDescription
    data
    | []

    Data to show

    color?

    Sparkline color

    variant?

    Sparkline variant (line, area)

    showTicks?

    Whether Sparkline shows X Axis ticks or not

    loading?

    When true: Sets an overlay with default loader

    gapPolicy?

    Gap policy

    curve?
    		'linear'

    Curve shape of the series

    showContextValues?

    Whether Sparkline shows min/max values or not

    SparklineYAxisProps

    NameTypeDefaultDescription
    max?
    |
    		'data-max'

    Maximal value on the y-axis.

    min?
    |
    		'data-min'

    Minimal value on the y-axis.

    scale?
    		'linear'

    The scale of the Y axis values. Is only applied to the bar variant.

    SparklineThresholdProps

    Deprecated

    Use Sparkline.ThresholdIndicatorProps instead.

    NameTypeDefaultDescription
    data

    The threshold data to be graphed by the component

    color

    The unique color picked for this timeseries representation in HEX, RGB, Color Token or HSL.

    strokeOnly?

    Whereas to show the threshold ranges filled or only the strokes

    SingleValue.Sparkline.YAxis​

    SingleValue.Sparkline.YAxis provides a subcomponent to configure the Y-axis of the Sparkline incorporated into the SingleValue component.

    SparklineYAxisProps

    NameTypeDefaultDescription
    max?
    |
    		'data-max'

    Maximal value on the y-axis.

    min?
    |
    		'data-min'

    Minimal value on the y-axis.

    scale?
    		'linear'

    The scale of the Y axis values. Is only applied to the bar variant.

    SingleValue.Trend​

    SingleValue.Trend provides a subcomponent where the Trend component can be added.

    TrendProps

    NameTypeDefaultDescription
    direction?

    The direction of a trend.

    showIcon?
    		true

    Flag to show the icon or not.

    value?

    The trend value

    label?

    The trend label

    inverseTrend?
    		'none'

    Inverts 'upward' and 'downward' color options.

    colorsOverride?

    Overrides colors of the trend icon and value for trend directions.

    formatter?
    | <, >

    If specified, the value will be formatted with given formatter options.

    SingleValue.EmptyState​

    SingleValue.EmptyState provides a subcomponent where the Empty state wrapper can be set.

    EmptyStateProp

    NameTypeDefaultDescription
    children

    SingleValue.ErrorState​

    SingleValue.ErrorState provides a subcomponent where the Error state wrapper can be set.

    ErrorStateProps

    NameTypeDefaultDescription
    children
    | ((errorMessage: ) => .)

    SingleValueGrid​

    SingleValueGridProps

    extends, ,
    NameTypeDefaultDescription
    data
    ( | | <, >)[]

    The data source for the SingleValueGrid component.

    color?

    The default color for the SingleValues. This color will be overwritten by individual colors specified in the SingleValueGridData or ColorRules slot.

    colorAccessor?

    Accessor function to override colors for individual SingleValue components.

    applyThresholdBackground?

    This option will define if the color is applied to the value or to the background.

    thresholds?
    []

    Threshold configurations that define conditions to match a given value. These configurations will be overwritten by the color and colorRule props for the corresponding SingleValue components.

    labelAccessor?

    Accessor function for individual labels of each SingleValue component.

    prefixIconAccessor?

    Accessor function for individual prefix icons of each SingleValue component.

    alignment?
    		'start'

    Horizontal alignment of icons, values, units, labels, and trends within each SingleValue component.

    SingleValueGridValueProps

    NameTypeDefaultDescription
    dataAccessor?

    Accessor function to retrieve the data for the value.

    formatter?
    | <, >

    Formatter options for formatting the value.

    formatterAccessor?

    Accessor function to retrieve the formatter options for the value.

    unit?

    Unit for the value.

    unitAccessor?

    Accessor function to retrieve the unit for the value.

    SingleValueGridSparklineProps

    extends<, | >
    NameTypeDefaultDescription
    dataAccessor?

    Accessor function or string to retrieve the data for the sparkline.

    colorAccessor?

    Accessor function to retrieve the color of the sparkline.

    SingleValueGridTrendProps

    NameTypeDefaultDescription
    directionAccessor?

    Accessor to retrieve the trend direction.

    valueAccessor?

    Accessor to retrieve the trend value.

    labelAccessor?

    Accessor to retrieve the trend label.

    showIcon?
    		true

    Determines whether to show the trend icon.

    colorsOverride?

    Overrides the colors of the trend icon and value for different trend directions.

    formatter?
    | <, >

    Formatter options or function to format the trend value.

    formatterAccessor?

    Accessor to retrieve the formatter options for the trend value.

    inverseTrend?
    		'none'

    Inverts 'upward' and 'downward' color options.

    inverseTrendAccessor?

    Accessor to retrieve the inverse trend options.

    Still have questions?
    Find answers in the Dynatrace Community