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