Big Value
<BigValue />
displays a large value, and can be configured to include a comparison and a sparkline.
Example
<BigValue
data={query_name}
value='new_activations'
comparison='monthly_growth'
sparkline='date'
comparisonTitle="Month over Month"
maxWidth='10em'
/>
Multiple cards
Multiple cards will align themselves into a row.
All Options
Name | Description | Required? | Options | Default |
---|---|---|---|---|
data | Query name, wrapped in curly braces | Yes | query name | - |
value | Column to pull the main value from. | Yes | column name | - |
comparison | Column to pull the comparison value from. | - | column name | - |
sparkline | Column to pull the date from to create the sparkline. | - | column name | - |
title | Title of the card. | - | string | Title of the value column. |
comparisonTitle | Text to the right of the comparison. | - | string | Title of the comparison column. |
downIsGood | If present, negative comparison values appear in green, and positive values appear in red. | - | true | false | false |
minWidth | Overrides min-width of component | - | % or px value | 18% |
maxWidth | Adds a max-width to the component | - | % or px value | none |
fmt | Sets format for the value (see available formats) | - | Excel-style format | built-in format | custom format | - |
comparisonFmt | Sets format for the comparison (see available formats) | - | Excel-style format | built-in format | custom format | - |