如何更改flexdashboard中的向上箭头(绿色)或向下箭头(红色)或破折号(黑色)

k3bvogb1  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(124)

bounty将在6天后过期。回答此问题可获得+50声望奖励。LeMarque希望引起更多人对此问题的关注:我需要一个答案来帮助我实施问题中提到的所需选项。

我有一个在R中的flexdashbard的以下示例代码:

---
title: "My Dashboard"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
always_allow_html: yes
---

```{r init, include=FALSE, echo=FALSE}
gc()
library(flexdashboard)
library(thematic)
library(ggplot2)
library(bslib)
library(shiny)
library(plotly)
library(tidyverse)
library(dplyr)
library(htmltools)

Home {data-icon="fa-home" .main}


theme_set(theme_bw(base_size = 20))

Row

Heading 1

valueBox(1, icon = "fa-pencil", color="success")

Heading 2


valueBox(2, icon = "fa-file-text-o", color="info")

Heading 3

valueBox(3, icon = "fa-database", color = "danger")

Row

Screen 2 {data-icon="fa-signal"}


hr(style = "border-top: 1px solid #000000;")

sliderInput("contact_rate", "Set contact rate", value = 91, min = 0, max = 100)

hr()

numericInput(inputId="my_input", "Enter a number:", 4, min = 0)

actionButton("submit", "Submit")

Value Boxes

Primary


observeEvent(input$submit, {
  arrow_icon_temp <- ifelse(input$my_input > 3, icon("fa-arrow-up", class = "text-success"), 
                            icon("fa-arrow-down", class = "text-danger"))
  output$arrow <- renderValueBox({
    valueBox(
      input$my_input, caption = "Days", 
      color = "white",
      icon = arrow_icon_temp
    )
  })
})

renderValueBox({
  valueBoxOutput("arrow")
})

Info


valueBox(2, caption = "Weeks", color = "red", icon = "fa-chart-line")

Success


valueBox(3, caption = "Weeks", color = "green", icon = "fa-chart-line")

Gauges

Success Rate


renderGauge({
  gauge(input$contact_rate, min = 0, max = 100, symbol = '%', 
        sectors = gaugeSectors( danger = c(0, 20), warning = c(20, 80), success = c(80, 100)))
  })

Warning metric


renderGauge({
  gauge(input$contact_rate, min = 0, max = 100, symbol = '%', 
        sectors = gaugeSectors( danger = c(0, 20), warning = c(20, 80), success = c(80, 100)))
  })

Danger!


renderGauge({
  gauge(input$contact_rate, min = 0, max = 100, symbol = '%', 
        sectors = gaugeSectors( danger = c(0, 20), warning = c(20, 80), success = c(80, 100)))
  })

 Jmeter 板是这样的:

![](https://i.stack.imgur.com/aZeZl.jpg)

我试图改变向上箭头(绿色)或向下箭头(红色)或破折号(黑色)在第一个valueBoxReact,这意味着,当我在NumericInput中提供一个数字(在侧栏),然后点击提交按钮,然后只应该是valueBox的变化反映沿着向上或向下箭头图标(如图所示)的基础上应用于上述代码的条件。
但我在这里遇到了两个问题:
1.第一次,当我启动 Jmeter 板(运行应用程序),我需要提供输入的数字,然后点击提交按钮,然后只有valueBox显示我刚刚输入的数字。
1.但是,当我第二次更改数字时,即使没有点击提交按钮,数字也会立即显示在valueBoax上,这不应该是这种情况。
1.箭头(红色、向下或绿色、向上)仍未显示
我做错了什么?有什么建议吗?
qxsslcnc

qxsslcnc1#

1.首先,要格式化icons的样式,需要将css的这一部分保存在***www*文件夹中的 * a styles.css文件中:

.value-box .icon i.fa.fa-arrow-up{
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 80px;
      color: rgba(0, 153, 0);
    }
    
    .value-box .icon i.fa.fa-arrow-down{
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 80px;
      color: rgba(255, 0, 0);
    }

1.请记住将此文件包含在yaml:

---
title: "My Dashboard"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
always_allow_html: yes
css: www/styles.css 
---

1.您需要打破renderValueBoxinput$my_input的依赖关系,因为只有在单击input$submit时才需要renderValueBoxisolate是用于此目的的函数:它会暂停内部输入或React对象的React行为,并且只有当与其环境链接的另一个输入或React对象发生变化时才会进行评估。因此,经过一些修改,您的块现在如下所示:

### Primary

```{r}

observeEvent(input$submit, {
  
  output$arrow <- renderValueBox({
    
    valueBox(
      ifelse(input$submit == 0, "Select number of days", isolate(input$my_input)), caption = "Days", 
      color = "white",
      icon = ifelse(isolate(input$my_input) > 3, "fa-arrow-up", "fa-arrow-down"))
    
  })
}, ignoreNULL = FALSE)

renderValueBox({
  valueBoxOutput("arrow")
})

相关问题