grillade

library(grillade)

Create responsive matrix of interactive charts :

library(apexcharter)
data(economics, package = "ggplot2")
eco <- tail(economics, 350)

grillade(
  n_col = 2,
  knack(
    cols = 1, cols_sm = "all",
    apex(eco, aes(x = date, y = uempmed), "line")
  ),
  knack(
    cols = 1, cols_sm = "all",
    apex(eco, aes(x = date, y = psavert), "line")
  )
)

Detailed examples

A box to be used in examples:

box_example <- function(...) {
  tags$div(
    style = "box-sizing:border-box;border:5px solid #1C6EA4;height:50px;",
    ...
  )
}

Automatic grid

Default is to create as many columns as elements inside grillade()

grillade(
  box_example("Column 1"),
  box_example("Column 2"),
  box_example("Column 3"),
  box_example("Column 4"),
  box_example("Column 5")
)

Column 1

Column 2

Column 3

Column 4

Column 5

Add gutter between columns

Add a space between columns :

grillade(
  gutter = TRUE,
  box_example("Column 1"),
  box_example("Column 2"),
  box_example("Column 3"),
  box_example("Column 4"),
  box_example("Column 5")
)

Column 1

Column 2

Column 3

Column 4

Column 5

Other possible values for gutter are l or xl.

Fixed number of columns

You specify a number of columns, if the grillade have more elements than that, they will be on the next row :

grillade(
  n_col = 3,
  box_example("Column 1"),
  box_example("Column 2"),
  box_example("Column 3"),
  box_example("Column 4"),
  box_example("Column 5")
)

Column 1

Column 2

Column 3

Column 4

Column 5

Specific column’s width

There’s two way to specify custom width for columns, directly in grillade():

grillade(
  n_col = 5,
  cols_width = c(3, 2, NA, 3, "all"),
  box_example("Column 1"),
  box_example("Column 2"),
  box_example("Column 3"),
  box_example("Column 4"),
  box_example("Column 5")
)

Column 1

Column 2

Column 3

Column 4

Column 5

Note that we defined 5 columns in our grid and first element have width 3, so it will take 3/5 of the full width.

NA correspond to a width of 1.

Second way to specify widths is using knack() to build grid’s element:

grillade(
  n_col = 5,
  knack(
    cols = 3,
    box_example("Column 1")
  ),
  knack(
    cols = 2,
    box_example("Column 2")
  ),
  box_example("Column 3"),
  knack(
    cols = 3,
    box_example("Column 4")
  ),
  knack(
    cols = "all",
    box_example("Column 5")
  )
)

Column 1

Column 2

Column 3

Column 4

Column 5

Specific row’s height

With knack() you can also provide row height:

grillade(
  n_col = 3,
  knack(
    rows = 2,
    box_example("Column 1", style="height:100px;")
  ),
  box_example("Column 2"),
  box_example("Column 3"),
  knack(
    cols = 2,
    rows = 2,
    box_example("Column 4", style="height:100px;")
  ),
  box_example("Column 5")
)

Column 1

Column 2

Column 3

Column 4

Column 5

Responsive

You can specify the number of columns taken for small size screen:

grillade(
  n_col = 5,
  n_col_sm = 2,
  box_example("Column 1"),
  box_example("Column 2"),
  box_example("Column 3"),
  box_example("Column 4"),
  box_example("Column 5")
)

Column 1

Column 2

Column 3

Column 4

Column 5

Specify each columns width with small media:

grillade(
  n_col = 6,
  knack(
    cols = 2, cols_sm = 3,
    box_example("Column 1")
  ),
  knack(
    cols = 2, cols_sm = 3,
    box_example("Column 2")
  ),
  knack(
    cols = 2, cols_sm = 3,
    box_example("Column 3")
  ),
  knack(
    cols = 3, cols_sm = "all",
    box_example("Column 4")
  ),
  knack(
    cols = 3, cols_sm = "all",
    box_example("Column 5")
  )
)

Column 1

Column 2

Column 3

Column 4

Column 5