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

Name	Type	Default	Description
label?		-	Optional label text to show above the value.
prefixIcon?		-	Optional icon to show left of the value.
color?		'default'	State of the value. This affects text and prefix icon color.
unit?		-	Optional unit to show in the right of the value
data	|	-	Data to show within the chart.
formatter?	| <, >	-	If specified, value will be formatted with given formatter options.
thresholds?	[]	-	Threshold configurations defining conditions to match a given value.
alignment?		-	Horizontal alignment of icon, value and unit.
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

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
children	.	-

SingleValue.ErrorState

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

ErrorStateProps

Name	Type	Default	Description
children	. | ((errorMessage: ) => .)	-

SingleValueGrid

SingleValueGridProps

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
dataAccessor?		-	Accessor function or string to retrieve the data for the sparkline.
colorAccessor?		-	Accessor function to retrieve the color of the sparkline.

SingleValueGridTrendProps

Name	Type	Default	Description
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.