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.

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

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.

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