在闪亮的反应计时器无效时，随着文本值的变化，更改文本输出的颜色

Question

我正在创建金融股票的仪表板。我有一个盒子，上面写着股票价格。股票价格每分钟都在变化。我想要的是随着股票价格的变化，颜色应该短暂变化以反映变化的类型。例如，如果最后的价格低于之前的最后价格，我希望文本的颜色在变化时闪烁红色，但返回到默认颜色，即黑色。这与 Google 财经上价格变化时发生的情况类似（例如，请参阅 jse:npn 的 google 搜索结果）这是我的代码的最精简版本。library(quantmod)library(shiny)library(shinydashboard)library(shinydashboardPlus)library(shinyWidgets)ui <- dashboardPage(  dashboardHeader(title = "Example"),  dashboardSidebar(    sidebarMenu(      ID = "tabs",      menuItem(text = "Naspers", tabName = "tabNaspers", icon = icon("chart-line"))    )  ),  dashboardBody(    tags$head(tags$style(HTML('.fas { font-size: 36px; }                          .fas {                            vertical-align: middle;                          }                          #'              ))),    tabItems(      tabItem(tabName = "tabNaspers",              fluidRow(                column(                  width = 7,                  boxPlus(title = span("ALL SHARE", style = "color: rgb(128,128,128); font-size: 22px"),                          collapsible = TRUE,                          closable = FALSE,                          enable_dropdown = TRUE,                          dropdown_icon = "NULL",                          status = 'success',                          valueBoxOutput('npn_price', 12),                          valueBoxOutput('npn_day_change', 12),                          width = 4                  )                )              )              )    )  ))npn_close <- 203059.00server <- function(input, output, session){    autoInvalidate <- reactiveTimer(intervalMs = 60000)    output$npn_price <- renderUI({      autoInvalidate()    })

Answer 1

当然。总之，我们存储价格，获取新的价格，如果价格下降，则使文本变为红色，然后我们快速再次运行以产生闪光效果。

为了进行测试，我添加了按钮来模拟价格的上涨和下跌。我还让它更频繁地检查更改。

可以在这一行更改闪光长度：invalidateLater(1200)。

library(quantmod)

library(shiny)

library(shinydashboard)

library(shinydashboardPlus)

library(shinyWidgets)

ui <- dashboardPage(

    dashboardHeader(title = "Example"),

    dashboardSidebar(

        sidebarMenu(

            ID = "tabs",

            menuItem(text = "Naspers", tabName = "tabNaspers", icon = icon("chart-line"))

        )

    ),

    dashboardBody(

        tags$head(tags$style(HTML('.fas { font-size: 36px; }.fas {vertical-align: middle;} #'))),

        tabItems(

            tabItem(tabName = "tabNaspers",

                    fluidRow(

                        column(

                            width = 7,

                            boxPlus(title = span("ALL SHARE", style = "color: rgb(128,128,128); font-size: 22px"),

                                    collapsible = TRUE,

                                    closable = FALSE,

                                    enable_dropdown = TRUE,

                                    dropdown_icon = "NULL",

                                    status = 'success',

                                    valueBoxOutput('npn_price', 12),

                                    valueBoxOutput('npn_day_change', 12),

                                    width = 4

                            )

                        )

                    ),

                    #Buttons to simulate stock going up, so that we don't have to wait for the stock to actually go up or down

                    actionButton('btn_stockgoesup',   'Simulate Stock Going Up'),

                    actionButton('btn_stockgoesdown', 'Simulate Stock Going Down')

            )

        )

    )

)

npn_close <- 203059.00

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

    autoInvalidate <- reactiveTimer(intervalMs = 6000)

    #Buttons to simulate stock going up, so that we don't have to wait for the stock to actually go up or down

    observeEvent(input$btn_stockgoesup,   {npn_last_stored <<- 0  ;  print('At the next update the stock will simulate going up')})

    observeEvent(input$btn_stockgoesdown, {npn_last_stored <<- Inf;  print('At the next update the stock will simulate going down')})

    output$npn_price <- renderUI({

        autoInvalidate()

        npn_last <- getQuote("NPN.JO", what=yahooQF("Last Trade (Price Only)"))[, 2]

        #Handle when app first starts and there is no stored value to compare against

        if(exists('npn_last_stored') == FALSE) {npn_last_stored <<- npn_last}

        if(npn_last < npn_last_stored) {

            #Stock went down

            print('stock went down')

            npn_color <- 'rgb(220, 50, 20)'

            invalidateLater(1200)

        } else {

            #Stock went up / not changed

            print('stock went up / not changed')

            npn_color <- 'rgb(0, 0, 0)'

        }

        #Update stored value

        npn_last_stored <<- npn_last

        npn_change <- round((npn_last - npn_close) / npn_close, 4) * 100

        arrow_color <- ifelse(npn_change > 0, 'rgb(15, 157, 88)' ,'rgb(226, 74, 26)')

        npn_diff <- npn_last - npn_close

        npn_diff <- ifelse(npn_diff < 0, paste0('-', npn_diff), paste0('+', npn_diff))

        tags$div(HTML(paste0('<span style="color:', npn_color, '; font-size: 24px"><strong>', npn_last, '</strong></span>', '<span style="color:', arrow_color, '; font-size: 14px">', npn_diff, '</span>')))

    })

    output$npn_day_change <- renderUI({

        autoInvalidate()

        npn_last <- getQuote("NPN.JO", what=yahooQF("Last Trade (Price Only)"))[, 2]

        npn_change <- round((npn_last - npn_close) / npn_close, 4) * 100

        npn_change <- paste0(npn_change, "%")

        arrow_color <- ifelse(npn_change > 0, 'rgb(15, 157, 88)' ,'rgb(226, 74, 26)')

        arrow_icon <- ifelse(npn_change < 0, '"fas fa-caret-down"', '"fas fa-caret-up"')

        tags$div(HTML(paste0('<i class=', arrow_icon, ' style = "color:', arrow_color,';"></i><span style="color:', arrow_color,'; font-size: 24px"><strong>',npn_change, '</strong></span>')))

    })

}

shinyApp(ui, server)