Examples

Basics

trend_line(sample(1:10), style = "width: 100%")

trend_bar(sample(1:10), style = "width:100%;height:10rem;")

trend_column(sample(1:10), style = "width: 100%")

trend_pie(
  sample(1:3), 
  style = style(
    "--shape-color-1" = "#597BFC",
    "--shape-color-2" = "#e2445c",
    "--shape-color-3" = "#9CD326"
  )
)

Line

trend_line(
  sample(1:30), 
  min = 0,
  style = style(
    width = "100%",
    "--area-opacity" = .15
  )
)

trend_line(
  sample(-15:10), 
  min = 0,
  style = style(
    width = "100%",
    "--area-opacity" = .15,
    "--shape-color" = "#784BD1"
  )
)

trend_line(
  -sample(1:20), 
  min = 0,
  style = style(
    width = "100%",
    "--area-opacity" = .15,
    "--shape-color" = "#e2445c"
  )
)

Column

trend_column(
  sample(1:20), 
  style = style(
    width = "100%",
    "--area-opacity" = .15
  )
)

trend_column(
  -sample(1:20), 
  style = style(
    width = "100%",
    "--shape-color" = "#e2445c"
  )
)

trend_column(
  sample(1:30), 
  style = style(
    width = "100%",
    "--shape-gap" = 0
  )
)

trend_column(
  sample(1:20), 
  `shape-radius` = 10,
  style = style(
    width = "100%"
  )
)

Advanced

htmltools::div(
  style = "background-color:#7346d3;border-radius:1rem;color:white;",
  htmltools::div(
    style = "padding:1rem;",
    htmltools::h4(415),
    htmltools::p("Number of views (30 days)"),
  ),
  trend_line(
    sample(1:20), 
    min = 0L,
    style = style(
      width = "100%",
      "--shape-opacity" = .15,
      "--shape-color" = "#fff"
    )
  )
)

415

Number of views (30 days)

htmltools::div(
  style = "background-color:#0376EE;border-radius:1rem;color:white;text-align:center;",
  htmltools::div(
    style = "padding:1rem;",
    htmltools::h4(415),
    htmltools::p("Number of views (30 days)"),
  ),
  trend_column(
    sample(1:15), 
    min = 0,
    style = style(
      width = "100%",
      height = "7rem",
      "--shape-opacity" = .15,
      "--shape-color" = "#fff"
    )
  )
)

415

Number of views (30 days)

htmltools::div(
  style = "position:relative;width:5rem",
  trend_pie(
    75,
    min = 0,
    max = 100,
    `shape-size` = 6,
    style = style(
      "--shape-color" = "#F17A33"
    )
  ),
  htmltools::tags$i(
    class = "fa fa-user",
    style = "position:absolute;top:30%;left:30%;width:40%;color:#F17A33;"
  )
)

box <- function(
  title,
  value,
  img,
  colour
){
  htmltools::div(
    class = "d-flex",
    htmltools::div(
      class = "flex-shrink-1 me-2",
      htmltools::tags$img(
        src = img,
        style = "width:3rem;"
      )
    ),
    htmltools::div(
      class = "flex-grow-1",
      htmltools::p(title, class = "m-0"),
      trendchart::trend_bar(
        value,
        min = 0,
        max = 100,
        `shape-radius` = 4,
        `shape-gap` = 0,
        tooltip = "@V%",
        style = style(
          width = "100%",
          height = "1rem",
          "--shape-color" = colour,
          "--area-opacity" = 0.15,
          "--area-color" = "black"
        )
      )
    )
  )
}

htmltools::div(
  box(
    "The Y Company",
    73,
    "https://github.com/the-y-company.png",
    "#264653"
  ),
  box(
    "John Coene",
    42,
    "https://the-y-company.com/assets/img/team/john_coene.webp",
    "#e76f51"
  ),
  box(
    "Pierre Saouter",
    56,
    "https://the-y-company.com/assets/img/team/pierre.png",
    "#2a9d8f"
  )
)

The Y Company

John Coene

Pierre Saouter

iris |>
  dplyr::group_by(Species) |>
  dplyr::summarise(
    length = sum(Sepal.Length),
    plot = trend_column(
      values = Sepal.Width,
      style = style(
        width = "100%"
      )
    ) |> 
      as.character()
  ) |>
  DT::datatable(escape = FALSE)