In kcuilla/reactablefmtr: Streamlined Table Styling and Formatting for Reactable

knitr::opts_chunk$set(echo = TRUE, warning = FALSE, message = FALSE)

Sparklines

In order to use the sparkline functions within {reactablefmtr}, one must first download the {dataui} package from GitHub.

Once installed, users will have the ability to create highly customizable interactive sparkline line charts and bar charts.

react_sparkline()

We will start off with an example of react_sparkline() using data from the {palmerpenguins} package.

The first thing we need to do is convert the flipper_length_mm column to a list format:

# Load packages
library(reactablefmtr)
library(tidyverse)
library(palmerpenguins)

df <- penguins %>%
  filter(!is.na(sex)) %>%
  group_by(species, sex) %>%
  summarize(flipper_length = list(flipper_length_mm))

Then, we can call react_sparkline() within the cell of {reactable}:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    flipper_length = colDef(
      cell = react_sparkline(df)
    )
  )
)

Tooltip options

| Parameter | Description | Default Value | |:----------------------|:------------------------------------|:--------------------| | tooltip | turn the tooltip on or off | TRUE | | tooltip_type | the tooltip type (1 or 2) | 1 | | tooltip_color | the color of the tooltip | NULL | | tooltip_size | the size of the tooltip labels | '1.1em' |

By default, the color of the tooltip matches the color of the corresponding line. However, you can change the color of the tooltip with tooltip_color:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        tooltip_color = 'red'
      )
    )
  )
)

You may also increase of decrease the size of the tooltip labels with tooltip_size:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        tooltip_size = '2em'
      )
    )
  )
)

There are two different tooltips available to choose from within tooltip_type. Below is the 2nd tooltip option which is recommended to show the values more clearly if you are displaying larger sparklines:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        tooltip_type = 2
      )
    )
  )
)

You may also turn off the interactive tooltip by setting the tooltip to FALSE:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        tooltip = FALSE
      )
    )
  )
)

Line appearance options

| Parameter | Description | Default Value | |:----------------------|:----------------------------------------------|:---------------------------------| | line_color | the color of the sparkline | 'slategray' | | line_color_ref | column containing sparkline color assignments | NULL | | line_width | the width of the sparkline | 1 | | line_curve | the curvature of the sparkline | 'cardinal' | | height | height of the sparkline | 22 | | show_line | show or hide sparkline | TRUE |

We can change the color of the line with line_color and the width of the line by adjusting the line_width:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        line_color = "red",
        line_width = 3
      )
    )
  )
)

If we want to assign line colors to specific groups, we can do so by creating a columns with the color assignments and calling that column name within line_color_ref:

# Assign colors to each species of penguins
df <- df %>%
  mutate(
    cols = case_when(
      species == "Adelie" ~ "#f5a24b",
      species == "Chinstrap" ~ "#af52d5",
      species == "Gentoo" ~ "#4c9b9b",
      TRUE ~ "grey"
    )
  )

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        line_color_ref = "cols"
      )
    )
  )
)

Note that the color of the tooltip will automatically match the color of the line.

By default, the curvature of the line is of type "cardinal", but we have the option to change it to "linear" as well as "monotoneX", or "basis" within line_curve:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        line_color_ref = "cols",
        line_curve = "linear"
      )
    )
  )
)

To change the height of the sparklines, you can set a value within the height parameter. By default, this value is 22.

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        line_color_ref = "cols",
        height = 80,
        tooltip_type = 2
      )
    )
  )
)

Add area beneath sparkline

| Parameter | Description | Default Value | |:----------------------|:----------------------------------------------|:----------------------------------| | show_area | show or hide the area beneath the sparkline | FALSE | | area_color | the color of the area | NULL (inherited from line_color)| | area_color_ref | column containing area color assignments | 1 | | area_opacity | the opacity of the area | 0.1 |

By setting show_area to TRUE, we can show the filled area beneath the line, and by default, the color of the area will automatically be inherited from the line_color.

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        show_area = TRUE,
        tooltip_type = 2
      )
    )
  )
)

We can use the "cols" column we used earlier to conditionally assign colors to each of the penguin species and the color of the area will automatically be inherited from those color assignments:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        show_area = TRUE,
        line_color_ref = "cols",
        tooltip_type = 2
      )
    )
  )
)

The color of the filled area is 90% transparent, but we are able to darken the colors by increasing the opacity within area_opacity:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        show_area = TRUE,
        area_opacity = 1,
        line_color_ref = "cols",
        tooltip_type = 2
      )
    )
  )
)

Alternatively, we can conditionally assign colors to just the area using area_color_ref.

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        show_area = TRUE,
        line_width = 2,
        area_color_ref = "cols",
        tooltip_type = 2
      )
    )
  )
)

Add points and labels

| Parameter | Description | Default Value | |:----------------------|:---------------------------------------------------|:---------------------------------| | highlight_points | highlight min, max, first, last, and/or all points | NULL | | point_size | the size of the points | 1.1 | | labels | show labels for min, max, first, last, all points | 'none' | | label_size | the size of the labels | '0.8em' | | decimals | the number of decimals displayed in the labels | 0 |

If we wanted to add points to particular data points on the sparkline, we could do so using highlight_points. Within highlight_points, we can call a helper function, which is also called highlight_points, and assign colors to either the min, max, first, last, and/or all data points.

Below, we are assigning the color red to the minimum values on the sparkline and the color blue to the maximum values:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        highlight_points = highlight_points(min = "red", max = "blue")
      )
    )
  )
)

We may also apply the labels directly to the sparkline by specifying which values we would like to display with labels. The label options are the same as highlight_points where we can label either the first, last, min, max, or all values. Note that the labels option will work with or without the highlight_points option:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        highlight_points = highlight_points(first = "green", last = "purple"),
        labels = c("first", "last")
      )
    )
  )
)

Add a statline

| Parameter | Description | Default Value | |:----------------------|:-------------------------------------------------------|:---------------------------------| | statline | insert a dotted line for the mean, median, min, or max | NULL | | statline_color | the color of the statline | 'red' | | statline_label_size | the size of the label next to the statline | '0.8em' |

We may want to display summary statistics about each sparkline series and can do this by using the statline option. The statistical summary options that are available are mean, median, min, or max.

The example below adds a mean reference line to each of the sparklines and displays the mean value to the right of each line:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      minWidth = 200,
      cell = react_sparkline(
        df,
        height = 80,
        statline = "mean",
        tooltip_type = 2
      )
    )
  )
)

There are additional options to control the appearance of the dotted line and label as well:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        statline = "mean",
        statline_color = "orange",
        statline_label_size = "1.1em",
        tooltip_type = 2
      )
    )
  )
)

Add a bandline

| Parameter | Description | Default Value | |:----------------------|:-------------------------------------------------------|:---------------------------------| | bandline | insert a bandline for the inner-quartile or full range | NULL | | bandline_color | the color of the bandline | 'red' | | bandline_opacity | the opacity of the bandline | 0.2 |

To add a bandline to each of the sparklines, we can use the bandline option as shown below. The options within bandline are "innerquartiles" which shows the inner-quartile range of each series, and "range" which will show the full range of the sparkline from the minimum value to the maximum value.

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        line_width = 1,
        line_color_ref = "cols",
        bandline = "innerquartiles",
        tooltip_type = 2
      )
    )
  )
)

The color and opacity of the bandline can also be adjusted as shown below:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        line_color_ref = "cols",
        bandline = "innerquartiles",
        bandline_color = "green",
        bandline_opacity = 0.4,
        tooltip_type = 2
      )
    )
  )
)

We may also stack multiple elements together, such as showing the bandline with a mean statline:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkline(
        df,
        height = 80,
        line_color_ref = "cols",
        highlight_points = highlight_points(min = "red", max = "blue"),
        labels = c("min", "max"),
        statline = "mean",
        bandline = "innerquartiles",
        tooltip_type = 2
      )
    )
  )
)

react_sparkbar()

To display the sparkline chart as a bar chart rather than a line chart, we can use react_sparkbar():

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkbar(df)
    )
  )
)

Bar appearance options

| Parameter | Description | Default Value | |:----------------------|:----------------------------------------------|:---------------------------------| | fill_color | the color of the bars | 'slategray' | | fill_color_ref | column containing bar color assignments | NULL | | fill_opacity | the opacity of the bar color | 1 | | outline_color | the color of the outline around the bars | 'transparent' | | outline_color_ref | column containing outline color assignments | NULL | | outline_width | the width of the outline around the bars | 1 |

Many of the options that are available within react_sparkline() are also available within react_sparkbar() with some few minor differences. For example, if we wanted to assign custom colors to each of the bars, we could use fill_color_ref:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkbar(
        df,
        fill_color_ref = "cols")
    )
  )
)

Add labels and highlight particular bars

| Parameter | Description | Default Value | |:----------------------|:---------------------------------------------------|:---------------------------------| | highlight_bars | highlight min, max, first, last, and/or all bars | NULL | | labels | show labels for min, max, first, last, all bars | 'none' | | label_size | the size of the labels | '0.8em' | | decimals | the number of decimals displayed in the labels | 0 |

Another difference in react_sparkbar is if we want to highlight particular data points, we would use highlight_bars instead of highlight_points. The options in which data points to highlight are the same (first, last, min, max, or all).

The height of the bars auto-starts at the minimum value in each series. Therefore, if we assign a color to the minimum value within highlight_bars, we will be unable to see it unless we declare the minimum value as a number less than the minimum value present in the dataset.

Note: you can control the minimum and maximum value of the bars with min_value and max_value, respectively. Here is an example of all labels applied (species and sex columns hidden to better show labels):

df %>% 
  filter(species == "Chinstrap") %>% 
reactable(
  .,
  columns = list(
    species = colDef(show = FALSE),
    sex = colDef(show = FALSE),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      name = "Chinstrap Penguin Flipper Length (min and max values highlighted)",
      cell = react_sparkbar(
        .,
        height = 140,
        min_value = 150,
        max_value = 225,
        fill_color = "#9f9f9f",
        labels = c("all"),
        label_size = "0.8em",
        highlight_bars =  highlight_bars(min = "red", max = "blue"),
        tooltip_type = 2
      )
    )
  )
)

Add a statline and bandline

Just like with react_sparkline(), statlines and bandlines can be layered onto react_sparkbar using the same options outlined above:

reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    cols = colDef(show = FALSE),
    flipper_length = colDef(
      cell = react_sparkbar(
        df,
        height = 80,
        fill_color_ref = "cols",
        bandline = "innerquartiles",
        statline = "mean",
        tooltip_type = 2
      )
    )
  )
)

kcuilla/reactablefmtr documentation built on Jan. 13, 2023, 11:36 p.m.