# ETL
library(tidyverse)
# Tables
library(reactable)
library(reactablefmtr)22 reactablefmtr
In this part, we’re going to introduce the package reactablefmtr.
As usual, we upload the libraries we will use : tidyverse for the ETL, and the 2 libraries reactable and reactablefmtr for the tables
Get data
First, let’s create a demo data frame with 2 variables : a period of time and a Demand
# create vectors
Period <- c(
"1/1/2020", "2/1/2020", "3/1/2020", "4/1/2020", "5/1/2020", "6/1/2020", "7/1/2020", "8/1/2020", "9/1/2020", "10/1/2020", "11/1/2020", "12/1/2020","1/1/2021", "2/1/2021", "3/1/2021", "4/1/2021", "5/1/2021", "6/1/2021", "7/1/2021", "8/1/2021", "9/1/2021", "10/1/2021", "11/1/2021", "12/1/2021")
Demand <- c(360, 458,300,264,140,233,229,208,260,336,295,226,336,434,276,240,116,209,205,183,235,312,270,201)
# assemble
df1 <- data.frame(Period,
Demand)
# format the Period as a date
df1$Period <- as.Date(df1$Period, format = '%m/%d/%Y')
glimpse(df1)Rows: 24
Columns: 2
$ Period <date> 2020-01-01, 2020-02-01, 2020-03-01, 2020-04-01, 2020-05-01, 20…
$ Demand <dbl> 360, 458, 300, 264, 140, 233, 229, 208, 260, 336, 295, 226, 336…23 Bars
And now, let’s format the variable [Demand], using the function data_bars() from the reactablefmtr package.
we start by creating a reactable, as we saw previously.
- we add a few attributes to it such as:
resizable = TRUEto be able to select and resize a column.striped = TRUEto display some stripes on the table and better differentiate the rows.highlight = TRUEto highlight the rows we are browsing.compact = TRUEto make the table look more compact.defaultPageSize = 20to set the number of rows we want to display by default.
- aiming to customize the appearance of the
reactable, for which they are original attributes.
- we add a few attributes to it such as:
inside the
colDef()function, we will use the syntaxcell = data_bars().this syntax and function, come from the library
reactablefmtr, we can directly use it inside a reactable.it takes only 3 arguments : the data frame, a color (fill_color) and a position for the text (text_position).
reactable(df1, resizable = TRUE,
striped = TRUE, highlight = TRUE, compact = TRUE,
defaultPageSize = 20,
columns = list(
Demand = colDef(
name = "Demand (units)",
cell = data_bars(df1,
fill_color = "#3fc1c9",
text_position = "outside-end"
)
)
) # close columns list
) # close reactableNote : we can sort the table depending on the variables, giving some nice animations.
24 Color tiles
Now we are going to highlight some cells based on some thresholds.
We place ourselves in the situation of a wide format, using the previous demo data frame coverage_data :
# create vectors
Item <- c("A", "B", "C", "D", "E")
Period1 <- c(3, 4, 5, 2, 1)
Period2 <- c(1, 6, 3, 3, 10)
Period3 <- c(8, 2, 5, 4, 6)
Period4 <- c(5, 4, 6, 2, 7)
Period5 <- c(6, 9, 8, 1, 3)
# combine into a data frame
coverage_data <- data.frame(Item,
Period1,
Period2,
Period3,
Period4,
Period5)
# display
coverage_data Item Period1 Period2 Period3 Period4 Period5
1 A 3 1 8 5 6
2 B 4 6 2 4 9
3 C 5 3 5 6 8
4 D 2 3 4 2 1
5 E 1 10 6 7 324.1 default formatting
Let’s apply the colors_tiles() function, from the package reactablefmtr .
By default, the colors_tiles() function uses a blue-white-orange three-color pattern.
reactable(coverage_data,
columns = list(Period1 = colDef(cell = color_tiles(coverage_data)))
)It’s a quick and simple way to format one variable, in a style similar to a heatmap, or a color scale.
24.2 custom formatting
If we only want 2 particular colors, we can specify them, using the vector colors = c(color1, color2) .
We get a similar result with the previous one, but with the colors that we specified.
reactable(coverage_data,
columns = list(Period1 = colDef(cell = color_tiles(coverage_data,
colors = c("skyblue", "gold")))))24.3 multiple variables | heatmap
In the previous examples, we only formatted one variable, naming it.
If we want to format several variables, we can use the feature span to apply colors to values in the entire data frame.
As we saw previously, we can have 2 approaches :
a default colors scale.
a customized colors scale.
24.3.1 default colors scale
Very simple syntax, applying the blue-white-orange three-color pattern to the whole data frame.
reactable(coverage_data,
defaultColDef = colDef(cell = color_tiles(coverage_data, span = TRUE)))24.3.2 custom colors scale
We can also create our own colors panel, and use span to apply colors to values in relation to the entire data frame.
reactable(coverage_data,
defaultColDef = colDef(cell = color_tiles(coverage_data,
colors = c("mediumseagreen",
"#FFFFFF",
"gold"),
span = TRUE)))24.3.3 specific variables
In the 2 previous examples, we formatted all the columns.
We also can decided to format only a few ones. For this, we can :
mention a few columns’ names.
or use the columns positions.
Both are using the the feature span.
Here is an example using the columns’ names :
reactable(coverage_data,
defaultColDef = colDef(cell = color_tiles(coverage_data,
span = c("Period2", "Period5"))
)
)And here is another example using the columns positions instead, formatting the variables from the positions 4 to 6 :
reactable(coverage_data,
defaultColDef = colDef(cell = color_tiles(coverage_data, span = 4:6))
)In the next chapters we will introduce the R package planr, and will use a lot the 2 packages reactable and reactablefmtr to create some visuals for Demand and Supply planning :
projected inventories and supply.
conditional formatting of projected coverages.
cockpits.
…