【问题标题】:how to change up arrow (green color) or down arrow (red color) or a dash (black color) in the flexdashboard如何在 flexdashboard 中更改向上箭头(绿色)或向下箭头(红色)或破折号(黑色)
【发布时间】:2023-01-18 04:45:56
【问题描述】:

我在 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()

```


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

```


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

```{r, include=FALSE}

theme_set(theme_bw(base_size = 20))

```


Row
-----------------------------------------------------------------------

### Heading 1

```{r}
valueBox(1, icon = "fa-pencil", color="success")
```

### Heading 2

```{r}

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

```

### Heading 3

```{r}
valueBox(3, icon = "fa-database", color = "danger")
```

Row
-------------------------------------------



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

Sidebar {.sidebar data-width=350}
-------------------------------------

<h3>Selection Area</h3>

```{r}

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

```{r}

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

```{r}

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

```

### Success

```{r}

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

```



Gauges 
-------------------------------------

### Success Rate

```{r}

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

```{r}

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!

```{r}

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


```

仪表板看起来像这样:

我正在尝试反应性地更改第一个 valueBox 中的向上箭头(绿色)或向下箭头(红色)或破折号(黑色),这意味着,当我在 NumericInput(在侧栏中)中提供数字时,然后单击在提交按钮上,然后只有 valueBox 的变化应该根据上面代码中应用的条件与向上或向下箭头图标(如图所示)一起反映出来。

但是后来我在这里遇到了两个问题:

  1. 第一次,当我启动仪表板(运行应用程序)时,我需要提供输入的数字,然后单击“提交”按钮,然后只有 valueBox 显示我刚刚输入的数字。
  2. 但是,当我第二次更改号码时,即使没有单击“提交”按钮,号码也会立即显示在 valueBoax 上,这不应该是这种情况。
  3. 箭头(红色向下或绿色向上)仍未显示

    我在这里做错了什么?有什么建议吗?

【问题讨论】:

    标签: r shiny flexdashboard


    【解决方案1】:
    1. 首先,要格式化您的icons 的样式,您需要将这块css 保存在样式.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 是用于此的功能:它暂停内部输入或反应对象的反应动作,并且仅在链接到其环境的另一个输入或反应对象发生更改时才进行评估。所以通过一些修改,你的块现在是这样的:
      ### 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")
      })
      
      

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-12-06
      • 2016-04-17
      • 2013-09-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多