如何使用反应性数据更改 shiny 应用程序中 flexdashbord::gauge 的标签?

How change flexdashbord::gauge's label in shiny application with reactive data?

我希望仪表标签随着值的变化而变化。

我创建了 f_3 函数来尝试调整它,但没有成功。

我的rmarkdown代码:

---
title: "Label of gauge"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: yeti
---

side{.sidebar}
-------------------------------------------

```{r}
library(tibble)
library(shiny)
library(shinyWidgets)
library(flexdashboard)
```

**Analysis**

```{r}
autonumericInput(
    inputId = "a", 
    value = 10, 
    label = "Value 1", 
    align = "center", 
    currencySymbol = "$", 
    currencySymbolPlacement = "p",
    digitGroupSeparator = ".",
    decimalCharacter = ",", 
    decimalPlaces = 0, 
    minimumValue = 0, 
    maximumValue = 100
)

autonumericInput(
    inputId = "b", 
    value = 10, 
    label = "Value 2", 
    align = "center", 
    currencySymbol = "R$", 
    currencySymbolPlacement = "p", 
    digitGroupSeparator = ".",
    decimalCharacter = ",", 
    decimalPlaces = 0, 
    minimumValue = 0, 
    maximumValue = 100
    )
```

```{r}
f_1 <- function(a, b) {
  a + b
}

reac <- reactive({
  tibble(
    a = input$a, 
    b = input$b
  )
})

pred <- reactive({
  temp <- reac()
  f_1(
    a = input$a, 
    b = input$b
  )
})
```

abc{}
--------------------------------------

###
```{r}
f_3 <- function(x) {
  if (x <= 40) {
    "Danger"
  } else if (x <= 80) {
    "Warning"
  } else ("Success")
}

renderGauge({
  gauge(
    value = round(x = pred(), digits = 0), min = 0, max = 100, symbol = "%", 
    label = f_3(x = pred())
    )
})
```

标签的值始终显示为 Danger,即使值发生变化也是如此。你可以做些什么让它随着值的变化而变化?

这对我来说就像是一个错误。您可以在 {flexdashboard} github 中提出问题并告诉他们解决它。

同时,我为您准备了一个解决方法。这需要你对 Shiny 有一些深入的了解,我想这超出了你目前所学的范围,所以我不会解释细节。如果您有兴趣,请阅读此 article。简而言之,我们编写自己的 Shiny 方法来与网络通信 UI 并更新 UI.

---
title: "Label of gauge"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: yeti
---

side{.sidebar}
-------------------------------------------

```{r}
library(tibble)
library(shiny)
library(shinyWidgets)
library(flexdashboard)
```

**Analysis**

```{r}
autonumericInput(
    inputId = "a", 
    value = 10, 
    label = "Value 1", 
    align = "center", 
    currencySymbol = "$", 
    currencySymbolPlacement = "p",
    digitGroupSeparator = ".",
    decimalCharacter = ",", 
    decimalPlaces = 0, 
    minimumValue = 0, 
    maximumValue = 100
)

autonumericInput(
    inputId = "b", 
    value = 10, 
    label = "Value 2", 
    align = "center", 
    currencySymbol = "R$", 
    currencySymbolPlacement = "p", 
    digitGroupSeparator = ".",
    decimalCharacter = ",", 
    decimalPlaces = 0, 
    minimumValue = 0, 
    maximumValue = 100
    )
```

```{r}
f_1 <- function(a, b) {
  a + b
}

reac <- reactive({
  tibble(
    a = input$a, 
    b = input$b
  )
})

pred <- reactive({
  temp <- reac()
  f_1(
    a = input$a, 
    b = input$b
  )
})
```

abc{}
--------------------------------------

###
<div id="gauge">

```{r}
f_3 <- function(x) {
  if (x <= 40) {
    "Danger"
  } else if (x <= 80) {
    "Warning"
  } else "Success"
}

renderGauge({
    session$sendCustomMessage("gauge-text",list(text = f_3(x = pred())))
  gauge(
    value = round(x = pred(), digits = 0), min = 0, max = 100, symbol = "%",
    label = "Danger"
    )
})
```

<script>
Shiny.addCustomMessageHandler('gauge-text', data=>{
    document.querySelector('#section-gauge svg text[font-size="10px"] tspan').innerHTML = data.text 
})
</script>
</div>