color_tiles: Add color tiles to cells in a column

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

Add color tiles to cells in a column

Description

The 'color_tiles()' function conditionally colors the background of each cell similarly to color_scales(). The difference is that color_tiles() uses round colored tiles around values instead of the entire background of the cell. Another difference is color_tiles() allows number formatting with number_fmt whereas color_scales() does not. The colors can be provided within a vector in 'colors' or via another column in the dataset by referencing the column by name with 'color_ref'. The opacity of the colors provided can be adjusted by providing a value between 0 and 1 in 'opacity'. 'text_color' can be used to change the color of the values. If values are displayed within a dark-colored background, 'brighten_text' will display the values in white text so they are more visible. The color of 'brighten_text_color' can be changed to a color other than white if desired. If the user wants to assign colors row-wise instead of column-wise, set 'span' equal to TRUE to apply across all columns. Or can provide the names of the columns by either column name or column position number to apply to only a subset of the columns. 'color_tiles()' needs to placed within the cell argument in reactable::colDef.

Usage

color_tiles(
  data,
  colors = c("#15607A", "#FFFFFF", "#FA8C00"),
  color_ref = NULL,
  color_by = NULL,
  opacity = 1,
  bias = 1,
  number_fmt = NULL,
  min_value = NULL,
  max_value = NULL,
  even_breaks = FALSE,
  text_size = NULL,
  text_color = "black",
  text_color_ref = NULL,
  show_text = TRUE,
  brighten_text = TRUE,
  brighten_text_color = "white",
  bold_text = FALSE,
  box_shadow = FALSE,
  border_width = NULL,
  border_style = NULL,
  border_color = NULL,
  span = FALSE,
  animation = "background 1s ease",
  tooltip = FALSE,
  tooltip_show_name = FALSE,
  tooltip_number_fmt = NULL,
  tooltip_style = NULL,
  tooltip_dotted_line = FALSE,
  tooltip_theme = "material",
  tooltip_arrow = TRUE,
  tooltip_trigger = "mouseenter",
  tooltip_animation = "fade",
  tooltip_duration = c(275, 250),
  tooltip_distance = 10,
  tooltip_placement = "top",
  tooltip_auto_adjust = TRUE,
  tooltip_img_size = c(26, 26),
  tooltip_secondary_columns = NULL,
  tooltip_show_name_secondary = TRUE,
  tooltip_number_fmt_secondary = NULL,
  tooltip_style_secondary = NULL
)

Arguments

data	Dataset containing at least one numeric column.
colors	A vector of colors to color the cells. Colors should be given in order from low values to high values. Default colors provided are blue-white-orange: c("#15607A", "#FFFFFF", "#FA8C00"). Can use R's built-in colors or other color packages.
color_ref	Optionally assign colors to from another column by providing the name of the column containing the colors in quotes. Only one color can be provided per row. Default is NULL.
color_by	Assign colors to a column based on the values of another column. The column in reference must contain numeric data. The column in which the colors are being assigned to can be either numerical or character. Default is NULL.
opacity	A value between 0 and 1 that adjusts the opacity in colors. A value of 0 is fully transparent, a value of 1 is fully opaque. Default is 1.
bias	A positive value that determines the spacing between multiple colors. A higher value spaces out the colors at the higher end more than a lower number. Default is 1.
number_fmt	Optionally format numbers using formats from the scales package. Default is NULL.
min_value	The minimum value used for the color assignments. This value must expand the range of the data within the column. Therefore, the value must be less than or equal to the minimum value within the column. Default is NULL.
max_value	The maximum value used for the color assignments. This value must expand the range of the data within the column. Therefore, the value must be greater than or equal to the maximum value within the column. Default is NULL.
even_breaks	Logical: if TRUE, the colors will be assigned to values in distinct quantile bins rather than on a normalized scale. The number of breaks in the quantile bins is equal to the number of colors provided within 'colors'. For example, if 4 colors are provided within 'colors', the values in the bottom 25 the values within 25-50 Default is FALSE.
text_size	Numeric value representing the size of the text labels. Default is NULL.
text_color	Assigns text color to values. Default is black.
text_color_ref	Optionally assign text color from another column by providing the name of the column containing the text colors in quotes. Only one color can be provided per cell. Default is NULL.
show_text	Logical: show text or hide text. Default is TRUE.
brighten_text	Logical: automatically assign color to text based on background color of cell. Text within dark-colored backgrounds will turn white, text within light-colored backgrounds will be black. Default is TRUE.
brighten_text_color	Assigns text color to values if values are within a dark-colored backgrounds. Default is white.
bold_text	Logical: bold text. Default is FALSE.
box_shadow	Logical: add a box shadow to the tiles. Default is FALSE.
border_width	The width of the four-sided border around the cell. Options are "thin", "medium", "thick", or a numeric value. Default is NULL.
border_style	The style of the four-sided border around the cell. Options are "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", or "none". Default is NULL.
border_color	The color of the four-sided border around the cell. Default is NULL.
span	Optionally apply colors to values across multiple columns instead of by each column. To apply across all columns set to TRUE. If applying to a set of columns, can provide either column names or column positions. Default is FALSE.
animation	Control the duration and timing function of the animation when sorting/updating values shown on a page. See [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) for available timing functions and examples. Animation can be turned off by setting to "none". Default is "background 1s ease".
tooltip	Logical: hover tooltip. Default is FALSE.
tooltip_show_name	Logical: If set to TRUE, shows the name of the column before the value. If set to FALSE, hides the name of the column and only shows the value. Default is FALSE.
tooltip_number_fmt	Format values using formatters from the scales package or a user-defined function. Default is NULL.
tooltip_style	Apply a CSS style to the value within the tooltip. Must provide valid CSS code, i.e. color:red; font-style:italic;, etc. Default is NULL.
tooltip_dotted_line	Add a dotted line underneath the values in the column to signal to users a tooltip is enabled. Default is NULL.
tooltip_theme	The theme of the tooltip. Options are: 'light', 'light-border', 'material', or 'translucent'. See https://atomiks.github.io/tippyjs/v5/themes/ for examples. Default is 'material'.
tooltip_arrow	Logical: determines if the tooltip box has an arrow. Default is TRUE.
tooltip_trigger	An event that causes the tooltip to show. Options are: 'click', 'focus', 'focusin', 'manual', or 'mouseenter'. Default is 'mouseenter'.
tooltip_animation	The type of transition animation for the tooltip. Options are: 'fade', 'perspective', 'shift-away', 'shift-toward', or 'scale'. Default is 'fade'.
tooltip_duration	The duration of the transition animation for the tooltip. Possible values are a single number or a vector of two numbers for the show/hide, i.e. c(200,300). If only one value is provided, it will be used for both the show/hide. Default is c(275,250).
tooltip_distance	How far in pixels the tooltip is from the cell. Possible values are a number, i.e. 5 or a string with units 'rem', i.e. '5rem'. Default is 10.
tooltip_placement	Where the tooltip appears relative to the cell. Options are: 'top', 'right', 'bottom', or 'left'. Default is 'top'.
tooltip_auto_adjust	Logical: if TRUE, then automatically adjust placement of tooltip show it can be viewed within viewport. Default is TRUE.
tooltip_img_size	The size (height, width) of the image displayed (if valid image link is present). Possible values are a single number or a vector of two numbers for height/width, i.e. c(50,40). Default is c(26,26).
tooltip_secondary_columns	Show text/values from other columns within the dataset. Can provide a single column name or a vector of column names, i.e. c('col1','col2','col3) Default is NULL.
tooltip_show_name_secondary	Logical: if TRUE, then show the name of the secondary column before the value. If set to FALSE, hides the name of the secondary column and only shows the value. Default is TRUE.
tooltip_number_fmt_secondary	Format secondary values using formatters from the scales package or a user-defined function. The number of formatters must be the same as the number of column names provided with 'secondary_columns'. The order of the formatters must match the order of names provided within 'secondary_columns'. If you do not want to format one or more of the columns, use NA for that column, i.e. c(scales::percent, NA, scales::dollar) Default is NULL.
tooltip_style_secondary	Apply a CSS style to the secondary values within the tooltip. Must provide valid CSS code, i.e. color:red; font-style:italic;, etc. Default is NULL.

Value

a function that applies conditional color tiles to a column of numeric values.

Examples

data <- iris[10:29, ]

## By default, the colors_tiles() function uses a blue-white-orange three-color pattern
reactable(data,
 columns = list(
 Petal.Length = colDef(cell = color_tiles(data))))

## If only two colors are desired,
## you can specify them with colors = 'c(color1, color2)';
reactable(data,
 columns = list(
 Petal.Length = colDef(cell = color_tiles(data,
 colors = c("red", "green")))))

## Use span to apply colors to values in relation to the entire dataset
reactable(data,
defaultColDef = colDef(cell = color_tiles(data, span = TRUE)))

## Span can take column names
reactable(data,
defaultColDef = colDef(cell = color_tiles(data, span = c("Sepal.Length", "Sepal.Width"))))

## Or it can also take column positions instead
reactable(data,
defaultColDef = colDef(cell = color_tiles(data, span = 1:2)))

## Use number_fmt to format numbers using the scales package
car_prices <- MASS::Cars93[20:49, c("Make", "Price")]

reactable(car_prices,
defaultColDef = colDef(cell = color_tiles(car_prices,
number_fmt = scales::dollar)))

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