Stat Change

Displays the increase, decrease, or neutral change in data. Use when you want the user to see changes in statistical data. User understanding is increased when paired with label or textual context (i.e. Dashboard Value).

Default

28.4%

6.1%

102%

Code Example

<%= pb_rails("stat_change", props: {
  change: "increase",
  value: 28.4,
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "decrease",
  value: 6.1
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "neutral",
  value: 102
}) %>

Icon

28.4%

6.1%

102%

Code Example

<%= pb_rails("stat_change", props: {
  value: 28.4,
  icon: "chart-line",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  value: 6.1,
  icon: "chart-line-down",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  value: 102,
}) %>

Colors

28.4%

6.1%

102%

Increase colors your icon GREEN & Decrease colors your icon RED.

Code Example

<%= pb_rails("stat_change", props: {
  change: "increase",
  value: 28.4,
  icon: "level-up",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "decrease",
  value: 6.1,
  icon: "level-down",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "neutral",
  value: 102,
}) %>

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
number_spacing
shadow
line_height
display
cursor
flex_direction
flex_wrap
justify_content
justify_self
align_items
align_content
align_self
flex
flex_grow
flex_shrink
order
id
data
aria
children
change
icon
value