rinterface / argonr

R interface to argon HTML design

RinteRfaceVerse

Wrap-up around RinteRface templates

Introduction

RinteRface gathers 4 templates to build nice looking dashboards with shiny. This package aims at bringing RinteRface templates closer to shiny beginners by suggesting plug and play boilerplates, ready to be customized. These templates are different from showcases you can find in each separate package.

Installation

devtools::install_github("RinteRface/RinteRfaceVerse")
library(RinteRfaceVerse)

Getting Started

Select the good template

The previewTemplate() function enables the user to preview 4 RinteRface templates, by selecting the relevant library:

previewTemplate(lib = "shinydashboardPlus")
previewTemplate(lib = "bs4Dash")
previewTemplate(lib = "argonDash")
previewTemplate(lib = "tablerDash")

Import a template

Once satisfied with a template, you can access its files with the useTemplate() function:

useTemplate(path = getwd(), lib = "shinydashboardPlus")

Deploy your app

Both shinyapps.io and RStudio Connect have an automated process to push your app online via deployTemplate(). For shiny server and shiny server pro, proceed "manually".

argonr's Issues

argonTab should seperate tabName and id property

There are cases where you want the same tab names on different part of the page. The current structure makes this hard to achieve. A separate id property will make this easier to achieve.

One possible way is to concatenate id of the tab with id of the tabset.

Couldn't find the tag() function

I'm using R version 3.4.3 and devtool version of argonR_0.2.0.9000.

library(argonR)

When I use argonPage(), it gives me following error

Error in tag(tagname, contents) : could not find function "tag".

@DivadNojnarg

argonCard background_color option does not apply to title

Make headroom.js working

"Hide your header until you need it"

Issue with argonTabSet

issue with argonTabSet when used without shiny (to generate static websites). Issue not observed in argonDash since shiny is loaded

Icons not getting displayed in argonInfoCard

Hi,

I am using argonR and argonDash packages version 0.2.0.9000.
I am using some argonInfoCards in my Shiny Dashboard.

While stat_icons are getting displayed, the issue is that icons (icon = argonIcon("chart-bar-32"),) are not getting displayedin argonInfoCard.

Here's my code:
argonRow(
argonInfoCard(
value = textOutput("ctr_increase"),
title = "CTR",
stat = 3.48,
stat_icon = argonIcon("bold-up"),
description = "compared to 7 day avg",
icon = argonIcon("chart-bar-32"),
hover_lift = TRUE,
width = 4,icon = NULL
),
argonInfoCard(
value = "2,356",
title = "Card Views",
stat = -3.48,
stat_icon = argonIcon("bold-down"),
description = "compared to 7 day avg",
icon = argonIcon("chart-bar-32"),
shadow = TRUE,
width = 4
),
argonInfoCard(
value = "924",
title = "Unique Users",
stat = -1.10,
stat_icon = argonIcon("bold-down"),
description = "compared to 7 day avg",
icon = argonIcon("chart-bar-32"),
gradient = TRUE,
background_color = '#DBAE58',
shadow = TRUE,
width = 4
)
)

And here's the output:

A few fixes for getting_started Rmd

Awesome package David!

In the getting_started vignette, there are a few lines in the last section that look like they need to be changed

• a few replacements for argonicon & icon vs. argonIcon (or replace icon with prefixed icon from shiny or fontawesome)
• a few commas separating attributes e.g. name ="spaceship" ,
• a few img src's that didn't display on my end

The vertical tabsets don't seem to flex wrap for some reason (I'm on the latest cran version) but this could be fixed in the latest dev version just making note.

Below is a proposed fix for the last section in getting_started

# This examples show how to create a simple static html page using argonR
library(argonR)
library(htmltools)
library(magrittr)

tabText1 <- "Raw denim you probably haven't heard of them jean shorts Austin.
            Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Raw denim you probably
haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
aliqua, retro synth master cleanse"

tabText2 <- "Cosby sweater eu banh mi, qui irure terry richardson ex squid.
Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
american apparel, butcher voluptate nisi qui."

tabText3 <- "Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse.
Mustache cliche tempor, williamsburg carles vegan helvetica.
Reprehenderit butcher retro keffiyeh dreamcatcher synth"

example <- argonPage(
  title = "ArgonR Static Template",
  author = "Divad Nojnarg",
  description = "HTML Static Template",
  navbar = argonNavbar(
    id = "main-navbar",
    src = "https://picsum.photos/600/600?random=1",
    # left menu
    argonNavMenu(
      argonDropdown(
        name = "Components",
        size = "lg",
        argonDropdownItem(
          name = "Getting Started",
          description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla",
          src = "test.html",
          icon = argonIcon(name = "spaceship", color = "primary")
        ),
        argonDropdownItem(
          name = "Foundation",
          description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla",
          src = "",
          icon = argonIcon(name = "palette", color = "warning")
        ),
        argonDropdownItem(
          name = "Components",
          description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla",
          src = "",
          icon = argonIcon(name = "ui-04", color = "success")
        )
      )
    ),
    # right menu
    argonNavMenu(
      side = "right",
      argonNavItem(
        name = "facebook",
        src = "https://www.facebook.com",
        icon = argonIcon("facebook-square"),
        tooltip = "Like us on Facebook"
      ),
      argonNavItem(
        name = "instagram",
        src = "https://www.instagram.com",
        icon = argonIcon("instagram"),
        tooltip = "Follow us on Instagram"
      ),
      argonNavItem(
        name = "twitter",
        src = "https://www.twitter.com",
        icon = argonIcon("twitter-square"),
        tooltip = "Follow us on Twitter"
      ),
      argonNavItem(
        name = "github",
        src = "https://www.github.com",
        icon = argonIcon("github"),
        tooltip = "Star us on Github"
      )
    )
  ),
  footer = argonFooter(
    has_card = FALSE,
    # status = "info",
    # gradient = TRUE,
    argonContainer(
      size = "lg",
      argonRow(
        argonColumn(
          width = 6,
          argonIconWrapper(
            iconTag = argonIcon("atom"),
            size = "lg",
            status = "success",
            shadow = TRUE,
            hover_shadow = TRUE
          ),
          argonH1(
            display = 3,
            "Insert anything in the footer"
          ),
          argonLead(
            "The Arctic Ocean freezes every winter and much of
            the sea-ice then thaws every summer, and that process
            will continue whatever"
          )
        ),
        argonColumn(
          width = 6,
          argonCarousel(
            width = 12,
            id = "carousel2",
            argonCarouselItem(
              src = "https://picsum.photos/600/600?random=2",
              active = TRUE
            ),
            argonCarouselItem(
              src = "https://picsum.photos/600/600?random=3",
              active = FALSE
            )
          ) %>% argonPersp(side = "right")
        )
      )
    )
  ) %>% argonMargin(orientation = "t", value = 20),
  # main content
  argonSection(
    size = "lg",
    status = "default",
    gradient = TRUE,
    separator = TRUE,
    separator_color = "white",
    shape = TRUE,
    argonColumn(
      argonRow(
        argonColumn(
          width = 6,
          argonH1(
            display = 3,
            "ArgonR, HTML static template for R",
            htmltools::span("completed with examples")
          ) %>% argonTextColor(color = "white"),
          argonLead(
            "Argon is a great free UI package based on Bootstrap
            4 that includes the most important components and features"
          ) %>% argonTextColor(color = "white")
        ),
        argonColumn(
          width = 6,
          argonImage(
            src = "inst/images/imac.svg",
            floating = TRUE
          ) %>% argonPersp(side = "right")
            %>% argonBlur()
        )
      )
    ) %>% argonPadding(orientation = "x", value = 0)
  ),
  argonSection(
    size = "lg",
    status = NULL,
    gradient = FALSE,
    separator = FALSE,
    separator_color = NULL,
    shape = FALSE,
    argonRow(
      argonColumn(
        width = 4,
        argonCard(
          status = "primary",
          width = 12,
          title = "Card 1",
          hover_lift = TRUE,
          shadow = TRUE,
          icon = argonIcon("check-bold"),
          src = "#",
          "Argon is a great free UI package based on Bootstrap 4
          that includes the most important components and features."
        ) %>% argonTooltip(position = "left", title = "I am a nice card")
      ),
      argonColumn(
        width = 4,
        argonCard(
          status = "success",
          width = 12,
          title = "Card 2",
          hover_lift = TRUE,
          shadow = TRUE,
          icon = argonIcon("istanbul"),
          src = "#",
          "Argon is a great free UI package based on Bootstrap 4
          that includes the most important components and features"
        ) %>% argonTooltip(position = "top", title = "I am a nice card")
      ),
      argonColumn(
        width = 4,
        argonCard(
          status = "warning",
          width = 12,
          title = "Card 3",
          hover_lift = TRUE,
          shadow = TRUE,
          icon = argonIcon("planet"),
          src = "#",
          "Argon is a great free UI package based on Bootstrap 4
          that includes the most important components and features"
        ) %>% argonTooltip(position = "bottom", title = "I am a nice card")
      )
    ),

    # badges
    argonH1(display = 3, "ArgonR elements") %>% argonPadding(orientation = "t", value = 5),
    argonLead("Badges") %>% argonMuted(),
    argonRow(
      argonColumn(
        width = 3,
        argonBadge(
          text = "My badge",
          src = "https://www.google.com",
          pill = TRUE,
          status = "danger"
        )
      ),
      argonColumn(
        width = 3,
        argonBadge(
          text = "My badge",
          src = "https://www.google.com",
          pill = TRUE,
          status = "primary"
        )
      ),
      argonColumn(
        width = 3,
        argonBadge(
          text = "My badge",
          pill = TRUE,
          status = "warning"
        )
      ),
      argonColumn(
        width = 3,
        argonBadge(
          text = "My badge",
          src = "https://www.google.com",
          pill = FALSE,
          status = "success"
        )
      )
    ),

    # progress
    argonLead("Progress") %>% argonMuted(),
    argonRow(
      argonColumn(
        width = 4,
        argonProgress(value = 10, status = "danger", text = "Custom Text")
      ),
      argonColumn(
        width = 4,
        argonProgress(value = 40, status = "info", text = NULL)
      ),
      argonColumn(
        width = 4,
        argonProgress(value = 90, status = "warning", text = argonIcon("atom"))
      )
    ),

    # alerts
    argonLead("Alerts") %>% argonMuted(),
    argonRow(
      argonColumn(
        width = 4,
        argonAlert(
          icon = argonIcon("basket"),
          status = "danger",
          "This is an alert",
          closable = TRUE
        )
      ),
      argonColumn(
        width = 4,
        argonAlert(
          icon = argonIcon("ui-02"),
          status = "success",
          "This is an alert",
          closable = TRUE
        )
      ),
      argonColumn(
        width = 4,
        argonAlert(
          icon = argonIcon("ui-03"),
          status = "info",
          "This is an alert",
          closable = TRUE
        )
      )
    ),

    # tabs
    argonLead("Tabs") %>% argonMuted(),
    argonRow(
      argonTabSet(
        id = "tab-1",
        card_wrapper = TRUE,
        horizontal = TRUE,
        circle = FALSE,
        size = "sm",
        width = 6,
        iconList = list(
          argonIcon("cloud-upload-96"),
          argonIcon("bell-55"),
          argonIcon("calendar-grid-58")
        ),
        argonTab(
          tabName = "Tab 1",
          active = FALSE,
          tabText1
        ),
        argonTab(
          tabName = "Tab 2",
          active = TRUE,
          tabText2
        ),
        argonTab(
          tabName = "Tab 3",
          active = FALSE,
          tabText3
        )
      ),
      argonTabSet(
        id = "tab-2",
        card_wrapper = TRUE,
        horizontal = FALSE,
        circle = TRUE,
        size = "sm",
        argonTab(
          tabName = "Tab 4",
          active = FALSE,
          tabText1
        ),
        argonTab(
          tabName = "Tab 5",
          active = TRUE,
          tabText2
        ),
        argonTab(
          tabName = "Tab 6",
          active = FALSE,
          tabText3
        )
      )
    )
  ) %>% argonMargin(orientation = "t", value = -200)
    %>% argonPadding(orientation = "t", value = 0),
  argonSection(
    size = "lg",
    status = "warning",
    gradient = TRUE,
    separator = TRUE,
    separator_color = "white",
    shape = FALSE,
    argonContainer(
      size = "lg",
      argonRow(
        argonColumn(
          width = 6,
          argonH1(
            display = 3,
            "Load modals",
            htmltools::span("by clicking on buttons")
          ) %>% argonTextColor(color = "white"),
          argonButton(
            name = "Click me!",
            status = "danger",
            icon = argonIcon("atom"),
            size = "lg",
            toggle_modal = TRUE,
            modal_id = "modal1"
          )
        ),
        argonColumn(
          width = 6,
          argonModal(
            id = "modal1",
            title = "This is a modal",
            status = "danger",
            gradient = TRUE,
            "YOU SHOULD READ THIS!",
            br(),
            "A small river named Duden flows by their place and supplies it with the necessary regelialia."
          ),
          argonImage(
            floating = TRUE,
            src = "https://picsum.photos/600/600?random=4",
            hover_lift = TRUE
          ) %>% argonTooltip(position = "right", title = "I am a nice floating image")
            %>% argonBlur(text = "Hi There!", text_color = "white")
        )
      ) %>% argonPadding(orientation = "y", value = 5),
      argonPagination(
        size = "lg",
        align = "center",
        argonPaginationItem(
          name = 1,
          src = "test.html"
        ),
        argonPaginationItem(
          name = 2,
          src = "https://www.google.com"
        )
      )
    )
  ),
  argonSection(
    size = "lg",
    status = "white",
    argonRow(
      argonIconWrapper(
        iconTag = argonIcon("atom"),
        size = "lg",
        status = "danger",
        shadow = TRUE,
        hover_shadow = TRUE
      ),
      argonH1(display = 3, "ArgonR social") %>% argonPadding(orientation = "l", value = 5)
    ),
    argonRow(
      argonColumn(
        width = 3,
        argonUser(
          title = "Ryan Tompson",
          subtitle = "Web Developer",
          src = "https://picsum.photos/600/600?random=5"
        ) %>% argonBlur(text = "Ryan Tompson", text_color = "default")
      ),
      argonColumn(
        width = 3,
        argonUser(
          title = "Romina Hadid",
          subtitle = "Marketing Strategist",
          src = "https://picsum.photos/600/600?random=6"
        ) %>% argonBlur(text = "Romina Hadid", text_color = "default")
      ),
      argonColumn(
        width = 3,
        argonUser(
          title = "Alexander Smith",
          subtitle = "UI/UX Designer",
          src = "https://picsum.photos/600/600?random=7"
        ) %>% argonBlur(text = "Alexander Smith", text_color = "default")
      ),
      argonColumn(
        width = 3,
        argonUser(
          title = "John Doe",
          subtitle = "Founder and CEO",
          src = "https://picsum.photos/600/600?random=8"
        ) %>% argonBlur(text = "John Doe", text_color = "default")
      )
    )
    # br(), br(),
    # argonContainer(
    #   argonProfile(
    #     title = "John",
    #     subtitle = "Japan, Kagoshima",
    #     src = "https://image.flaticon.com/icons/svg/1006/1006540.svg",
    #     url = "https://www.google.com",
    #     url_1 = "https://www.google.com",
    #     url_2 = "https://www.google.com",
    #     stats = argonProfileStats(
    #       argonProfileStat(
    #         value = 22,
    #         description = "Friends"
    #       ),
    #       argonProfileStat(
    #         value = 10,
    #         description = "Photos"
    #       ),
    #       argonProfileStat(
    #         value = 89,
    #         description = "Comments"
    #       )
    #     ),
    #     "An artist of considerable range, Ryan —
    #     the name taken by Melbourne-raised,
    #     Brooklyn-based Nick Murphy — writes,
    #     performs and records all of his own music,
    #     giving it a warm, intimate feel with a solid
    #     groove structure. An artist of considerable
    #     range."
    #   )
    # )
  ),
  argonSection(
    size = "lg",
    status = "default",
    cascade = TRUE,
    argonH1(display = 3, "ArgonR Cascade Effect") %>%
      argonPadding(orientation = "l", value = 5) %>%
      argonPadding(orientation = "b", value = 5) %>%
      argonTextColor(color = "white"),
    argonCascade(
      argonCascadeItem(name = "diamond", src = "https://www.google.com"),
      argonCascadeItem(name = "album-2", size = "sm"),
      argonCascadeItem(name = "app", size = "sm"),
      argonCascadeItem(name = "atom", size = "sm"),
      argonCascadeItem(name = "bag-17", src = "https://www.google.com"),
      argonCascadeItem(name = "bell-55"),
      argonCascadeItem(name = "credit-card"),
      argonCascadeItem(name = "briefcase-24", size = "sm", "https://www.google.com"),
      argonCascadeItem(name = "building", size = "sm"),
      argonCascadeItem(name = "button-play", size = "sm"),
      argonCascadeItem(name = "calendar-grid-58"),
      argonCascadeItem(name = "camera-compact"),
      argonCascadeItem(name = "chart-bar-32")
    )
  )
)

if(interactive()){
  # create dir
  dir_path = "inst/argon"

  if(!dir.exists(dir_path)){
    dir.create(dir_path)
    argonInstall(path = dir_path)
  }

  argonPageTemplate(filename = "example", path = dir_path, example)

}

^{Created on 2022-02-21 by the reprex package (v2.0.1)}

Change Argon CSS colors?

This may be really obvious, but figured I'd ask here. Is there any way to manually change the card background colors outside of the Argon styles (e.g. primary, secondary, success, warning, etc. as shown here: https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html)

Below, I was able to switch the overall card color using css, but cannot "fix" the basic argonInfoCards

Sidebar ID

How to access which sidebar item is active. I am giving id = "sidebar in argonDashSidebar() but not able to access the tabitem with input$sidebar.
Thanks

argonModal options

It's possible to change text in the button that close modal? The default text it's "Close" but in portuguese it's "Fechar". I want the possibilitie to modify this text.

Many thanks!

Write better documentation

As suggested by @shawnlinxl

TO DO!

Encoding Character Problem

I'm from Brazil, when i try write a portuguese word like "Você" (you in english) the html page renders "Voc�". The same happens with "pain�is " (panels in english).

It seems a character encoding problem.

Many thanks!