shiny.Rmd

---
title: "Shiny"
author: "John Coene"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Shiny}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

library(echarts4r)

e_common(
    font_family = "Raleway"
)
```

<div class="panel panel-default">
<div class="panel-heading">New Features</div>
<div class="panel-body">
Use (almost) any function on a dynamic proxy!
</div>
<div class="panel-footer">
<a href="development" class="btn btn-warning">
Documentation
</a>
</div>
</div>

`echarts4r` comes with proxies (functions ending in `_p`) as well as the ability access selected data. You will find a demo of shiny working with `echarts4r` [here](http://shiny.john-coene.com/echarts4rShiny/).

<a href = "http://shiny.john-coene.com/echarts4rShiny/" target ="_blank" class = "btn btn-default">
  Shiny Demo
</a>

## Deploy

A note if you are publishing on [shinyapps.io](https://www.shinyapps.io/), if you have _locally_ installed the development version of the package from [Github](https://github.com/JohnCoene/echarts4r) with `remotes` as indicated on the [homepage](/) of the website please reinstall it `devtools`. Otherwise shinyapps.io will intall the CRAN version which might lead to issues.

```r
# install.packages("devtools")
devtools::install_github("JohnCoene/echarts4r")
```

If you are using the [Shiny Server](), remember to install the package on the respective server with the following command:

```
# stable version
sudo su - -c "R -e \"install.packages('echarts4r', repos = 'https://cran.rstudio.com')\""
# dev version
sudo su - -c "R -e \"remotes::install_github('JohnCoene/echarts4r')\""
```

## Events

Get data from shiny with the following:

* `elementId` + `_brush` - returns data on brushed data points.
* `elementId` + `_legend_change` - returns series name of legend selected/unselected.
* `elementId` + `_legend_selected` - returns list of selected status for each series.
* `elementId` + `_clicked_data` - returns data of clicked data point.
* `elementId` + `_clicked_data_value` - returns value of clicked data point.
* `elementId` + `_clicked_row` - returns row number of clicked data point.
* `elementId` + `_clicked_serie` - returns name of serie of clicked data point.
* `elementId` + `_mouseover_data` - returns data on hovered data point.
* `elementId` + `_mouseover_data_value` - returns value of hovered data point.
* `elementId` + `_mouseover_row` - returns row o hovered data point.
* `elementId` + `_mouseover_serie` - returns name of serie of hovered data point.

If you want to implement a missing callback with `e_distpatch_action_p`.

[Paul Simmering](https://github.com/psimm) kindly created a demo app showcasing callbacks.

<a href = "https://psim.shinyapps.io/echarts4r_callbacks/" target ="_blank" class = "btn btn-default">
  Callbacks demo
</a>

## Proxies

Interact with the charts without redrawing (proxies):

* `e_append1_p` and `e_append2_p` - to add data to your chart.
* `e_highlight_p` and `e_downplay_p` - to highlight or downplay a serie.
* `e_showtip_p` and `e_hidetip_p` - to Show or hide the tooltip.
* `e_draw_p` to draw the chart, see function documentation for examples.
* `e_focus_adjacency` and `e_unfocus_adjacency` - to focus or unfocus on adjacent nodes (networks).
* `e_mark_p` to dynamically mark points, lines, and areas.

See the example below and the various proxies documentation.

```{r, eval=FALSE}
library(shiny)
library(echarts4r)

ui <- fluidPage(
  actionButton("add", "Add Data to y"),
  echarts4rOutput("plot"),
  verbatimTextOutput("selected")
)

server <- function(input, output, session){

  data <- data.frame(x = rnorm(10, 5, 3), y = rnorm(10, 50, 12), z = rnorm(10, 50, 5))
  
  react <- eventReactive(input$add, {
    set.seed(sample(1:1000, 1))
    data.frame(x = rnorm(10, 5, 2), y = rnorm(10, 50, 10))
  })
  
  output$plot <- renderEcharts4r({
    data |> 
     e_charts(x) |> 
     e_scatter(y) |>
     e_scatter(z) |> 
     e_brush(throttleDelay = 1000)
  })
  
  observeEvent(input$add, {
    echarts4rProxy("plot") |> 
      e_append1_p(0, react(), x, y)
  })
  
  output$selected <- renderPrint({
    input$plot_brush
  })
  
}

shinyApp(ui, server)
```

## Loading

You can also show a spinner while shiny recalculates.

Without loading, chart redraws with neat animation.

```{r, eval=FALSE}
# no redraw
# no loading
library(shiny)
ui <- fluidPage(
  fluidRow(
    column(12, actionButton("update", "Update"))
  ),
  fluidRow(
    column(12, echarts4rOutput("plot"))
  )
)

server <- function(input, output){
  data <- eventReactive(input$update, {
    data.frame(
      x = 1:10,
      y = rnorm(10)
    )
  })
  
  output$plot <- renderEcharts4r({
    data() |> 
      e_charts(x) |> 
      e_bar(y)
  })
}

shinyApp(ui, server)
```

With loading.

```{r, eval=FALSE}
# keep UI
# add loading
server <- function(input, output){
  data <- eventReactive(input$update, {
    Sys.sleep(1) # sleep one second to show loading
    data.frame(
      x = 1:10,
      y = rnorm(10)
    )
  })
  
  output$plot <- renderEcharts4r({
    data() |> 
      e_charts(x) |> 
      e_bar(y) |> 
      e_show_loading()
  })
}

shinyApp(ui, server)
```