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
loading?		false	Show the loading indicator when truly.
width?	|	100%	Chart width. When a number is specified, it's treated in pixels, otherwise a valid width string is expected (e.g., "100%", "200px").
height?	|	100%	Chart height. When a number is specified, it's treated in pixels, otherwise a valid height string is expected (e.g., "100px", "50%").

SingleValue.Sparkline

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

SingleValueSparklineProps

Signature:

export declare type SingleValue = <<, | | >>;

SparklineProps

extends, , ,

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
showContextValues?			Whether Sparkline shows min/max values or not
labelsAlignment?			Whether Sparkline aligns labels to left or right Curve shape of the series
labelsFixedWidth?			When Sparkline labels have a fixed width
width?	|		Width of the sparkline component Accepts string values (e.g., '100%', '200px') or numeric values (rendered as pixels)
height?	|		Height of the sparkline component Accepts string values (e.g., '50px', '100%') or numeric values (rendered as pixels)

SparklineYAxisProps

Name	Type	Default	Description
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.
formatter?	| <, >		Sparkline Y tick formatter

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.
scale?		'linear'	The scale of the Y axis values. Is only applied to the bar variant.
formatter?	| <, >		Sparkline Y tick formatter

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

extends, , ,

Name	Type	Default	Description
loading?		false	Show the loading indicator when truly.
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.
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.
seriesActions?	(data: <, >) =>		Actions to be shown in individual SingleValue components
'aria-label'?			Accessible name for the component, announced by screen readers instead of the default.
'aria-describedby'?			ID of an element that provides an additional accessible description.

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.