In dreamRs/grillade: Grid System for the Web

knitr::opts_chunk$set(echo = FALSE)
library(ggplot2)
library(apexcharter)
library(grillade)
library(leaflet)

spark_data <- data.frame(
  date = Sys.Date() + 1:20,
  var1 = round(rnorm(20, 50, 10)),
  var2 = round(rnorm(20, 50, 10)),
  var3 = round(rnorm(20, 50, 10)),
  var4 = round(rnorm(20, 50, 10)),
  var5= round(rnorm(20, 50, 10))
)

Example of grillade document

5 columns with autogrid in plain markdown

:::: {.autogrid .has-gutter}

::: {}

spark_box(
  data = spark_data[, c(1, 2)],
  title = mean(spark_data$var1), 
  subtitle = "Variable 1"
)

:::

::: {}

spark_box(
  data = spark_data[, c(1, 3)],
  title = mean(spark_data$var2), 
  subtitle = "Variable 2"
)

:::

::: {}

spark_box(
  data = spark_data[, c(1, 4)],
  title = mean(spark_data$var3), 
  subtitle = "Variable 3"
)

:::

::: {}

spark_box(
  data = spark_data[, c(1, 5)],
  title = mean(spark_data$var4), 
  subtitle = "Variable 4", 
  type = "line",
  color = "#FFF", background = "#2E93fA",
  title_style = list(color = "#FFF"),
  subtitle_style = list(color = "#FFF")
)

:::

::: {}

spark_box(
  data = spark_data[, c(1, 6)],
  title = mean(spark_data$var5), 
  subtitle = "Variable 5", 
  type = "line",
  color = "#FFF", background = "#2E93fA",
  title_style = list(color = "#FFF"),
  subtitle_style = list(color = "#FFF")
)

:::

::::

Works with gpplot figure and leaflet htmlwidget and custom grid

:::: {.grid-5 .has-gutter}

::: {.col-2}

ggplot(mpg) + geom_bar(aes(manufacturer))

:::

::: {.col-3}

leaflet(width = "100%") %>%
  addTiles() %>% 
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")

:::

::::

Use grillade() also works

a1 <- apex(
  data = tail(economics, 350),
  mapping = aes(x = date, y = uempmed),
  type = "line", height = "400px"
)
a2 <- apex(
  data = tail(economics, 350),
  mapping = aes(x = date, y = psavert),
  type = "line"
)

grillade(a1, a2)