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 | - |