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