R/useful-items.R

In argonDash: Argon Shiny Dashboard Template

#' Create a Boostrap 4 dashboard info card
#'
#' Build an argon dashboard info card
#'
#' @param value info card value.
#' @param title info card title.
#' @param stat info card stat value.
#' @param stat_icon info card stat icon. Expect \link[argonR]{argonIcon} or \link[shiny]{icon}.
#' @param description info card stat description.
#' @param icon info card icon. Expect \link[argonR]{argonIcon} or \link[shiny]{icon}.
#' @param icon_background info card icon background color.
#' @param hover_lift Whether to apply a lift effect on hover. FALSE by default.
#' Not compatible with floating.
#' @param shadow Whether to apply a shadow effect. FALSE by default.
#' @param background_color Card background color. NULL by default.
#' @param gradient Whether to apply a gradient effect on the card background. FALSE by default.
#' @param width info card width. Between 1 and 12.
#'
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
argonInfoCard <- function(
  value,
  title = NULL,
  stat = NULL,
  stat_icon = NULL,
  description = NULL,
  icon,
  icon_background = "default",
  hover_lift = FALSE,
  shadow = FALSE,
  background_color = NULL,
  gradient = FALSE,
  width = 3
) {
  iconCl <- "icon icon-shape text-white rounded-circle shadow"
  if (!is.null(icon_background))
    iconCl <- paste0(iconCl, " bg-", icon_background)

  cardCl <- "card card-stats mb-4 mb-xl-0"
  if (hover_lift) cardCl <- paste0(cardCl, " card-lift--hover")
  if (shadow) cardCl <- paste0(cardCl, " shadow")
  if (gradient) {
    if (!is.null(background_color))
      cardCl <- paste0(cardCl, " bg-gradient-", background_color)
  } else {
    if (!is.null(background_color))
      cardCl <- paste0(cardCl, " bg-", background_color)
  }

  if (!is.null(background_color))
    if (background_color == "default") text_color <- "text-white" else
      text_color <- NULL else text_color <- NULL

  infoCardTag <- shiny::tags$div(
    class = cardCl,
    shiny::tags$div(
      class = "card-body",
      # upper part
      shiny::fluidRow(
        argonR::argonColumn(
          shiny::tags$h5(
            class = paste0("card-title text-uppercase mb-0 ", text_color),
            title
          ),
          shiny::span(
            class = paste0("h2 font-weight-bold mb-0 ", text_color),
            value
          )
        ),
        shiny::tags$div(
          class = "col-auto",
          shiny::tags$div(
            class = iconCl,
            icon
          )
        )
      ),
      # lower part
      shiny::fluidRow(
        class = "mx-2 mt-3 mb-0 text-sm",
        if (!is.null(stat)) {
          shiny::tagList(
            shiny::span(stat_icon, class = "mr-2"),
            shiny::tagAppendAttributes(shiny::div(stat), class = "mr-2")
          )
        },
        shiny::span(class = paste0("mt-0 h5 ", text_color), description)
      )
    )
  )

  argonR::argonColumn(width = width, infoCardTag)
}


#' Create a Boostrap 4 table container
#'
#' Build an argon table container
#'
#' @param ... \link{argonTableItems}.
#' @param cardWrap Whether to wrap the table in a card. FALSE by default.
#' @param title Card title if any.
#' @param headTitles Table header names. Must have the same length as the number of
#' \link{argonTableItem} in \link{argonTableItems}. Set "" to have an empty title field.
#' @param dark Whether to enable dark mode. FALSE by default.
#' @param width Table width. 12 by default.
#'
#' @examples
#' if (interactive()) {
#'  library(shiny)
#'  library(argonR)
#'  library(argonDash)
#'  shinyApp(
#'   ui = argonDashPage(
#'     navbar = argonDashNavbar(),
#'     sidebar = argonDashSidebar(id = "mysidebar"),
#'     header = argonDashHeader(),
#'     body = argonDashBody(
#'      argonTable(
#'       headTitles = c(
#'        "PROJECT",
#'        "BUDGET",
#'        "STATUS",
#'        "USERS",
#'        "COMPLETION",
#'        ""
#'       ),
#'       argonTableItems(
#'        argonTableItem("Argon Design System"),
#'        argonTableItem(dataCell = TRUE, "$2,500 USD"),
#'        argonTableItem(
#'         dataCell = TRUE,
#'         argonBadge(
#'          text = "Pending",
#'          status = "danger"
#'         )
#'        ),
#'        argonTableItem(
#'         argonAvatar(
#'          size = "sm",
#'          src = "images/undraw_profile-pic_fatv.svg"
#'          )
#'        ),
#'        argonTableItem(
#'         dataCell = TRUE,
#'         argonProgress(value = 60, status = "danger")
#'        ),
#'        argonTableItem(
#'         argonButton(
#'          name = "Click me!",
#'          status = "warning",
#'          icon = "atom",
#'          size = "sm"
#'         )
#'        )
#'       )
#'      )
#'     ),
#'     footer = argonDashFooter()
#'   ),
#'   server = function(input, output) { }
#'  )
#' }
#'
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
argonTable <- function(
  ...,
  cardWrap = FALSE,
  title = NULL,
  headTitles,
  dark = FALSE,
  width = 12
) {
  # handle theme
  if (dark) {
    headCl <- "thead-dark"
    tableCl <- "table align-items-center table-dark table-flush"
    wrapperCl <- "card bg-default shadow"
  } else {
    headCl <- "thead-light"
    tableCl <- "table align-items-center table-flush"
    wrapperCl <- "card shadow"
  }

  # column headers
  tableHead <- shiny::tags$thead(
    class = headCl,
    shiny::tags$tr(
      lapply(
        seq_along(headTitles),
        function(i) shiny::tags$th(scope = "col", headTitles[[i]])
      )
    )
  )

  # body rows
  tableBody <- shiny::tags$tbody(...)

  # table tag
  tableTag <- shiny::tags$div(
    class = "table-responsive",
    shiny::tags$table(
      class = tableCl,
      tableHead,
      tableBody
    )
  )

  # card wrapper or not
  if (cardWrap) {
    wrapper <- argonR::argonColumn(
      width = width,
      center = TRUE,
      shiny::tags$div(
        class = wrapperCl,
        shiny::tags$div(
          class = if (dark) "card-header bg-transparent border-0" else
            "card-header border-0",
          shiny::tags$h3(class = if (dark) "mb-0" else "text-white mb-0", title)
        ),
        tableTag
      )
    )

    return(wrapper)
  } else {
    return(tableTag)
  }
}


#' Create a Boostrap 4 table item row
#'
#' Build an argon table item row
#'
#' @param ... Slot for \link{argonTableItem}.
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
argonTableItems <- function(...) {
  shiny::tags$tr(...)
}


#' Create a Boostrap 4 table item
#'
#' Build an argon table item
#'
#' @param ... Any HTML element.
#' @param dataCell Whether the cell should be contain data or text. <td> by default.
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
argonTableItem <- function(..., dataCell = FALSE) {
  if (dataCell) {
    shiny::tags$td(...)
  } else {
    shiny::tags$th(...)
  }
}


#' Create a Boostrap 4 avatar container
#'
#' Build an argon avatar container
#'
#' @param ... Slot for \link{argonAvatar}.
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
argonAvatars <- function(...) {
  shiny::tags$div(class = "avatar-group", ...)
}


#' Create a Boostrap 4 avatar
#'
#' Build an argon avatar
#'
#' @param src Avatar inag path or url.
#' @param toolTip Optional tooltip triggered on mouse hover.
#' @param size Avatar size: choose one of "sm", "md" or "lg".
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
argonAvatar <- function(src, toolTip = NULL, size = c("sm", "md", "lg")) {
  size <- match.arg(size)
  avatarCl <- paste0("avatar avatar-", size)

  shiny::tags$a(
    href = NULL,
    class = avatarCl,
    `data-toggle` = "tooltip",
    `data-original-title` = toolTip,
    shiny::tags$img(
      src = src,
      class = "rounded-circle"
    )
  )
}