create ggplot output in vuetify dialog experiment

Author: timelyportfolio

inst/experiments/experiment_vuetify_dialog_with_ggplot_output.R

@@ -0,0 +1,94 @@
+library(shiny)
+library(htmltools)
+library(ggplot2)
+library(vueR)
+
+ui <- tagList(
+  tags$head(
+    tags$link(href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900", rel="stylesheet"),
+    tags$link(href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css", rel="stylesheet"),
+    tags$link(href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css", rel="stylesheet")
+  ),
+  tags$div(
+    id = "app",
+    HTML(
+      sprintf("
+        <v-app>
+          <v-main>
+            <v-container
+              class='fill-height'
+            >
+              <v-row justify='center' align='center'>
+                <v-dialog
+                  v-model='dialog'
+                  width='500'
+                >
+                <template v-slot:activator='{ on, attrs }'>
+                  <v-btn
+                    color='red lighten-2'
+                    dark
+                    v-bind='attrs'
+                    v-on='on'
+                  >
+                    Create Plot
+                  </v-btn>
+                </template>
+                  %s
+                </v-dialog>
+              </v-row>
+            </v-container>
+          </v-main>
+        </v-app>
+      ",
+        plotOutput("plot")
+      )
+    )
+  ),
+  html_dependency_vue(),
+  tags$script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"),
+  tags$script(HTML("
+const app = new Vue({
+  el: '#app',
+  vuetify: new Vuetify(),
+  data: {dialog: false},
+  watch: {
+    dialog: {
+      handler: function(val) {
+        if(val === true) {
+          Vue.nextTick(() => {
+            // force bind to bind plot
+            if(!Shiny.shinyapp.$bindings.hasOwnProperty('plot')) {
+              Shiny.bindAll($('.v-dialog'))
+            }
+            // or this seems to work as well without checking
+            //   since Shiny ignores already bound
+            // Shiny.bindAll($('.v-dialog'))
+          })
+        }
+        Shiny.setInputValue('dialog', val)
+      }
+    }
+  }
+})
+
+$(document).on('shiny:sessioninitialized', function() {
+  Shiny.setInputValue('dialog', app.$data.dialog)
+})
+  "))
+)
+
+server <- function(input, output, session) {
+  output$plot <- renderPlot({
+    input$dialog
+    if(input$dialog == TRUE) {
+      # plot with random data
+      ggplot(data = data.frame(x=1:20,y=runif(20)*10), aes(x=x, y=y)) +
+        geom_line()
+    } else {
+      # empty ggplot
+      ggplot() + geom_blank()
+    }
+  })
+}
+
+shinyApp(ui, server)