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

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

`f7SplitLayout()` is the third layout introduced with shinyMobile. This template is focused for 
tablet use. It is composed of a sidebar, and a main panel. The sidebar goes in its dedicated slot, corresponding to `f7Panel()`. While `f7Panel()` may also be embedded
in both `f7SingleLayout()` and `f7TabsLayout`, it accepts extra arguments like `f7PanelMenu()` and
`f7PanelItem()`, which are very similar to sidebar items of shinydashboard:

```r
f7Panel(
  title = "Sidebar",
  side = "left",
  theme = "light",
  f7PanelMenu(
    id = "menu",
    f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("email"), active = TRUE),
    f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("home"))
  ),
  style = "reveal"
)
```

The content must be passed in `...` If you have a menu in the sidebar, you must use the
corresponding body function, namely `f7Items()` and `f7Item()`. Particularly, the *tabName*
argument provided in `f7PanelItem()` and `f7Item()` must exactly match (like in shinydashboard, again).
If you don't have any `f7PanelMenu()`, you can pass tags in the `...` directly. However, 
this prevents you from having a tabbed navigation. 


<div class="marvel-device ipad black">
<div class="camera"></div>
<div class="screen">
<iframe width="100%" src="https://dgranjon.shinyapps.io/miniUI2Split" allowfullscreen="" frameborder="0" scrolling="no" height="770px"></iframe>
</div>
<div class="home"></div>
</div>


```r
library(shiny)
library(shinyMobile)
library(echarts4r)

# polar diagram
df <- data.frame(
  x = seq(50),
  y = rnorm(50, 10, 3),
  z = rnorm(50, 11, 2),
  w = rnorm(50, 9, 2)
)

# sankey plot
sankey <- data.frame(
  source = c("a", "b", "c", "d", "c"),
  target = c("b", "c", "d", "e", "e"),
  value = ceiling(rnorm(5, 10, 1)),
  stringsAsFactors = FALSE
)

# webgl plot
vectors <- expand.grid(x = -3:3, y = -3:3)
mu <- 1
vectors$sx <- vectors$y
vectors$sy <- mu * (1 - vectors$x^2) * vectors$y - vectors$x
vectors$color <- log10(runif(nrow(vectors), 1, 10))

shiny::shinyApp(
  ui = f7Page(
    title = "My app",
    init = f7Init(hideNavOnPageScroll = FALSE, hideTabsOnPageScroll = FALSE),
    f7SplitLayout(
      sidebar = f7Panel(
        title = "Sidebar",
        side = "left",
        theme = "light",
        f7PanelMenu(
          id = "menu",
          f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("email"), active = TRUE),
          f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("home")),
          f7PanelItem(tabName = "tab3", title = "Tab 3", icon = f7Icon("home"))
        ),
        uiOutput("selected_tab"),
        effect = "reveal"
      ),
      navbar = f7Navbar(
        title = "Split Layout",
        hairline = FALSE,
        shadow = TRUE
      ),
      toolbar = f7Toolbar(
        position = "bottom",
        f7Link(label = "Link 1", src = "https://www.google.com"),
        f7Link(label = "Link 2", src = "https://www.google.com", external = TRUE)
      ),
      # main content
      f7Items(
        f7Item(
          tabName = "tab1",
          f7Sheet(
            id = "sheet1",
            label = "Plot Parameters",
            orientation = "bottom",
            swipeToClose = TRUE,
            backdrop = TRUE,
            f7Slider(
              "obs",
              "Number of observations:",
              min = 0, max = 1000,
              value = 500
            )
          ),
          br(),
          plotOutput("distPlot")
        ),
        f7Item(
          tabName = "tab2",
          f7Swiper(
            id = "swiper",
            spaceBetween = 100,
            f7Slide(
              f7Text(
                inputId = "sankey_name",
                label = "Sankey Name",
                placeholder = "Plot Name"
              ),
              echarts4rOutput("sankey_plot")

            ),
            f7Slide(
              df %>%
                e_charts(x) %>%
                e_polar() %>%
                e_angle_axis(x) %>% # angle = x
                e_radius_axis() %>%
                e_bar(y, coord_system = "polar") %>%
                e_scatter(z, coord_system = "polar")
            )
          )
        ),
        f7Item(
          tabName = "tab3",
          f7Toggle(
            inputId = "plot_show",
            label = "Show Plot?",
            checked = TRUE
          ),
          echarts4rOutput("flow_plot")
        )
      )
    )
  ),
  server = function(input, output, session) {

    observeEvent(input$obs, {
      if (input$obs < 500) {
        f7Notif(
          text = paste0("The slider value is only ", input$obs, ". Please
                        increase it"),
          icon = f7Icon("bolt_fill"),
          title = "Alert",
          titleRightText = Sys.Date(),
          session = session
        )
      }
    })

    output$sankey_plot <- renderEcharts4r({
      sankey %>%
        e_charts() %>%
        e_sankey(source, target, value) %>%
        e_title(input$sankey_name)
    })

    output$selected_tab <- renderUI({
      HTML(paste0("Access the currently selected tab: ", strong(input$menu)))
    })

    output$distPlot <- renderPlot({
      dist <- rnorm(input$obs)
      hist(dist)
    })

    output$flow_plot <- renderEcharts4r({
      if (input$plot_show) {
        vectors %>%
          e_charts(x) %>%
          e_flow_gl(y, sx, sy, color) %>%
          e_visual_map(
            min = 0, max = 1, # log 10
            dimension = 4, # x = 0, y = 1, sx = 3, sy = 4
            show = FALSE, # hide
            inRange = list(
              color = c('#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8',
                        '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026')
            )
          ) %>%
          e_x_axis(
            splitLine = list(show = FALSE)
          ) %>%
          e_y_axis(
            splitLine = list(show = FALSE)
          )
      }
    })

  }
)
```
