Me gustaría integrar un código JS en una aplicación Shiny para cargar un widget TradingView JS.
El problema es que cuando la aplicación se está cargando, la entrada del selector desaparece y el widget TradingView reemplaza toda la interfaz de usuario, no sé por qué.
library(shiny) library(shinyjs) jsCode <- 'shinyjs.pageCol = function(para){new TradingView.widget( {"width": 640,"height": 400,"symbol": para,"interval": "D","timezone": "Etc/UTC","theme": "light", "style": "1", "locale": "en", "toolbar_bg": "#f1f3f6","enable_publishing": false, "allow_symbol_change": true,"container_id": "tradingview_e9634"} );}' shinyApp( ui = fluidPage( div(selectInput("ticker", "Ticker:", c('NASDAQ:AMD', 'NASDAQ:TSLA', 'NASDAQ:GE'))), tags$head(HTML('<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>')) , useShinyjs(), div(extendShinyjs(text = jsCode, functions = c("pageCol"))) ), server = function(input, output) { observeEvent(input$ticker, { js$pageCol(input$ticker) }) } )Hay dos formas de hacerlo funcionar, como se describe en esta otra publicación (relacionada solo con Javascript): el widget TradingView reemplazando todo el cuerpo HTML .
Da el nombre del atributo ID que elegiste en tu jsCode a la etiqueta div:
div(id="tradingview_e9634", extendShinyjs(text = jsCode, functions = c("pageCol")))O use un iframe : coloque el siguiente archivo chart.html en una subcarpeta www de la carpeta de su aplicación.
<html> <head> <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> <script> function getParameterByName(name, url) { if (!url) { url = window.location.href; } name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } var para = getParameterByName('value'); console.log(para); var fxWidget = new TradingView.widget({ "width": 640, "height": 400, "symbol": para, "interval": "1", "timezone": "Etc/UTC", "theme": "light", "style": "1", "locale": "en", "toolbar_bg": "#f1f3f6", "enable_publishing": false, "allow_symbol_change": true, "container_id": "tradingview_e9634" }); </script> </head> <body> </body> </html>y use esta aplicación.R (más simple que la otra versión, no necesita shinyjs):
library(shiny) shinyApp( ui = fluidPage( div(selectInput("ticker", "Ticker:", c('NASDAQ:AMD', 'NASDAQ:TSLA', 'NYSE:GE'))), htmlOutput("frame") ), server = function(input, output) { observeEvent(input$ticker, { query <- paste0("chart.html?value=", input$ticker) output$frame <- renderUI({ tags$iframe(src=query, width=660, height=450) }) }) })