Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gyang274/ygdashboard_app

an R shiny app template of ygdashboard.
https://github.com/gyang274/ygdashboard_app

Last synced: about 2 months ago
JSON representation

an R shiny app template of ygdashboard.

Awesome Lists containing this project

README 

        
---

output:

  md_document:

    variant: markdown_github

---



```{r, echo = FALSE}

knitr::opts_chunk$set(

  collapse = TRUE,

  comment = "#>",

  fig.path = "README-"

)

```



# ygdashboard



A modified shinydashboard to incorporate more functionality from adminLTE.



## Origination



I would like first express my sincere thanks to Winston Chang, the RStutio team, Almasaeed Studio and everyone involved in developing shiny and shinydashboard.



At first, I simply want have a sidebar that would still show menuItem icons when collapsed, so that me and other users can still switch between tabs without re-expanding the sidebar. I find this could only be completed (with my limited knowledge) by modifying shinydashboard source code. This is the begin I downloaded shinydashboard source code and started ygdashboard as a modified version.



Then, I fascinate on having a user info panel on the top right header, having a footer on the bottom of the body, having a menu segment on the side menu bar, having a right control panel with toggle on top right header. I implement the first three features, and leave the last one as a pure HTML holder - you still have it but via making a HTML input. This is the part I enjoyed the most seeing the capability of shinydashboard extending gradually.



At last, I would like to have versatile boxes, so I implements a calendar box, a chat box, and a timeline box. The calendar won't show up on shiny app page - I would happy if anyone knows the reason. The chat box is fun, as you would see in the show cases. The timeline box provides an excellent interface for logging, which I found as the most useful one. This is where the fun continues and I am start seeing ygdashboard showing some valuable extension on shinydashboard.



Along the way, I find that `leafletfix.css:8` in leaflet overrides shinydashboard css and makes the `sidebarUserPanel()` having  grey box prominent from the black background - unconformable aesthetically - fix it by adding `style="background-color:transparent;"` in `div(class = "user-panel", ..., div(class = "pull-left info", ...))` in `sidebarUserPanel()`. I also find that font awesome icon like `envira` is not recognized in shiny - all 30 new icons in 4.6 won't? Please see full development log at [ygdashboard on github](https://github.com/gyang274/ygdashboard/).



Welcome to view this [ygdashboard app on shinyapps.io](https://gyang.shinyapps.io/ygdashboard/)!



## Main Feature



+ Overview



```{r overview, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/overview.png")

```



+ New feature: show menu icons when sidebar collapse.



```{r collapse_siderbar, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/collapse_sidebar.png")

```



+ New component: 



    - Add user info panel on top right header.

    

    - Add footer on the bottom of the body.

    

    - Add menu segments on the side menu bar. 

    

    - Add a right control panel with toggle on top right header.



        ```{r user_info_panel, echo=FALSE, cache=TRUE}

        knitr::include_graphics("fig/user_info_panel.png")

        ```

        

        ```{r control_panel, echo=FALSE, cache=TRUE}

        knitr::include_graphics("fig/control_panel.png")

        ```



    - The user info panel can be created dynamically with userOutput() on client side and renderUser({ dashboardUser() }) on the server side. This allow login like feature, such as switching user info and possible UI design for different users at run time.

  

        ```{r switch_user_01, echo=FALSE, cache=TRUE}

        knitr::include_graphics("fig/switch_user_01.png")

        ```

        

        ```{r switch_user_02, echo=FALSE, cache=TRUE}

        knitr::include_graphics("fig/switch_user_02.png")

        ```

        

        ```{r switch_user_03, echo=FALSE, cache=TRUE}

        knitr::include_graphics("fig/switch_user_03.png")

        ```

        

        ```{r switch_user_04, echo=FALSE, cache=TRUE}

        knitr::include_graphics("fig/switch_user_04.png")

        ```



+ Dashboard Tab:



    - Add a new infoBox() with progress bar.

    

```{r dashboard, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/dashboard.png")

```    



+ Chat Tab:



    - Add a chatBox() together with chatContactList(), chatContact(), chatMessage() for creating direct chat.

    

```{r chat01, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/chat_box_01.png")

```



```{r chat02, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/chat_box_02.png")

```



```{r chat03, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/chat_box_03.png")

```



+ Calendar Tab:



    - TODO: why calendar won't show up?



```{r calendar, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/calendar_box.png")

```



+ Database Tab:



    - A worth mention feature is that we can use javascripts, such as enter_as_click.js along with this app, to bind the sidebar search form or general shiny input box with a button, so that we can catch the event when the search form or input box is focused and user hit enter key on keyboard, without requiring a must click on the button. 



```{r database, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/database.png")

```



+ Table Tab:



```{r table, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/table.png")

```



+ Figure Tab:



```{r figure, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/figure.png")

```



+ Map Tab:



```{r map, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/map.png")

```



+ Timeline Tab:



```{r timeline, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/timeline.png")

```



+ Documentation Tab:



```{r documenation, echo=FALSE, cache=TRUE}

knitr::include_graphics("fig/documentation.png")

```



## NEWS



+ 2016.08.10: Add `socialWidgetBox()` on __Chat Tab__, source from `boxes.R` in `ygdashboard`.



+ 2016.08.08: Add `carouselBox()`, `carouselSets()`, `carouselItem()` on __Carousel Tab__, source from `boxes.R` in `ygdashboard`.



## TODO



+ dashboardControlbar.R: create functions that can create sub-components in control-sidebar, like functions defined in dashboardSidebar.R.