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.

    className?
    		-

    Class names to be attached to the outer container.

    style?
    		-

    Inline styles that will override the outer container.

    SingleValue.Sparkline​

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

    SingleValueSparklineProps

    Signature:

    export declare type SingleValue = <<, >>;

    SparklineProps

    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

    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

    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 thresholds prop.

    colorAccessor?
    		-

    Accessor function to override colors for individual SingleValue components.

    thresholds?
    []
    		-

    Threshold configurations that define conditions to match a given value. These configurations will overwrite the color prop 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