Как изменить метку flexdashbord::датчика в блестящем приложении с реактивными данными?

#r #shiny #flexdashboard

Вопрос:

Я бы хотел, чтобы метка датчика менялась при изменении значения.

Я создал 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 , даже когда значение изменяется. Что вы можете сделать, чтобы он менялся по мере изменения значения?

Ответ №1:

Для меня это похоже на жука. Вы можете открыть проблему в github {flexdashboard} и попросить их исправить ее.

А пока у меня есть для вас обходной путь. Это требует от вас некоторого продвинутого понимания Shiny, я думаю, что это выходит за рамки того, что вы узнали до сих пор, поэтому я не буду объяснять детали. Прочитайте эту статью, если вам интересно. Проще говоря, мы пишем наши собственные блестящие методы для взаимодействия с веб-интерфейсом и обновления пользовательского интерфейса.

 ---
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>