Home Components Big Value

Big Value

Big Value displays a large value, and can be configured to include a comparison and a sparkline.

Num Orders

304

▲ 2.7% vs. Last Month 

<BigValue 
  data={orders_with_comparisons} 
  value=num_orders
  sparkline=month
  comparison=order_growth
  comparisonFmt=pct1
  comparisonTitle="vs. Last Month"
/>

Examples

Default

Num Orders

304 
<BigValue 
  data={orders_with_comparisons} 
  value=num_orders
/>

Comparisons

Num Orders

304

▲ 2.7% MoM 

<BigValue 
  data={orders_with_comparisons} 
  value=num_orders
  comparison=order_growth
  comparisonFmt=pct1
  comparisonTitle="MoM"
/>

Multiple cards

Multiple cards will align themselves into a row.

Sales

$9,905

▼ -11.0% MoM

Orders

304

▲ 2.7% MoM

Average Order Value

$32.58

▼ -13.3% MoM 

<BigValue 
  data={orders_with_comparisons} 
  value=sales
  fmt=usd0
  comparison=sales_growth
  comparisonFmt=pct1
  comparisonTitle="MoM"
/>
<BigValue 
  data={orders_with_comparisons} 
  value=num_orders
  title="Orders"
  comparison=order_growth
  comparisonFmt=pct1
  comparisonTitle="MoM"
/>
<BigValue 
  data={orders_with_comparisons} 
  value=aov
  title="Average Order Value"
  fmt=usd2
  comparison=aov_growth
  comparisonFmt=pct1
  comparisonTitle="MoM"
/>

Linking to other pages

The link property makes the Value component clickable, allowing navigation to other pages.

Num Orders

304

▲ 2.7% vs. Last Month 

<BigValue 
  data={orders_with_comparisons} 
  value=num_orders
  sparkline=month
  comparison=order_growth
  comparisonFmt=pct1
  comparisonTitle="vs. Last Month"
  link='/components/big-value/'
/>

Non-Delta Comparisons

Num Orders

304

296 Last Month

<BigValue 
  data={orders_with_comparisons} 
  value=num_orders
  comparison=prev_month_orders
  comparisonTitle="Last Month"
  comparisonDelta=false
/>

Sparkline

Sales

9,905.10

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 (<a class=markdown href='/core-concepts/formatting'>see available formats<a/>)
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
link

Used to navigate to other pages. Can be a full external link like https://google.com or an internal link like /sales/performance

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 (<a class=markdown href='/core-concepts/formatting'>see available formats<a/>)
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