Home components big value

Big Value

<BigValue /> displays a large value, and can be configured to include a comparison and a sparkline.

Example

	

		
		

<BigValue 
  data={orders_with_comparisons} 
  value=sales_usd0k
  sparkline=month
  comparison=sales_change_pct0
  comparisonTitle="vs. Last Month"
/>

bigvalue

Multiple cards

Multiple cards will align themselves into a row.

bigvalue

Non-Delta Comparisons

	

		
		

<BigValue 
  data={orders_with_comparisons}
  value=sales_usd0k
  title="Category Sales"
  comparison=sales_change_pct0
  comparisonTitle="of Total"
  comparisonDelta=false
/>

bigvalue

Options

Data

data
REQUIRED
Query name, wrapped in curly braces
Options:
query name
value
REQUIRED
Column to pull the main value from.
Options:
column name
title
Title of the card.
Options:
string
Default:
Title of the value column.
minWidth
Overrides min-width of component
Options:
% or px value
Default:
18%
maxWidth
Adds a max-width to the component
Options:
% or px value
fmt
Sets format for the value (see available formats)
Options:
Excel-style format | built-in format | custom format
emptySet
Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed.
Options:
Default:
error
emptyMessage
Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.).
Options:
string
Default:
No records

Comparison Options

comparison
Column to pull the comparison value from.
Options:
column name
comparisonTitle
Text to the right of the comparison.
Options:
string
Default:
Title of the comparison column.
comparisonDelta
Whether to display delta symbol and color
Options:
Default:
true
downIsGood
If present, negative comparison values appear in green, and positive values appear in red.
Options:
Default:
false
neutralMin
Sets the bottom of the range for 'neutral' values - neutral values appear in grey rather than red or green
Options:
number
Default:
0
neutralMax
Sets the top of the range for 'neutral' values - neutral values appear in grey rather than red or green
Options:
number
Default:
0
comparisonFmt
Sets format for the comparison (see available formats)
Options:
Excel-style format | built-in format | custom format

Sparkline

sparkline
Column to pull the date from to create the sparkline.
Options:
column name
sparklineType
Chart type for sparkline
Options:
Default:
line
sparklineValueFmt
Formatting for tooltip values
Options:
format code
Default:
same as fmt if supplied
sparklineDateFmt
Formatting for tooltip dates
Options:
format code
Default:
YYYY-MM-DD
sparklineColor
Color of visualization
Options:
CSS name | hexademical | RGB | HSL
sparklineYScale
Whether to truncate the y-axis of the chart to enhance visibility
Options:
Default:
false
connectGroup
Group name to connect this sparkline to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected
Options:
string