flexdashboard中集成esquisse Shiny模块时ggplot图无法渲染的咨询

• flexdashboard开启vertical_layout: fill后会自动按视口计算子元素尺寸，原代码给esquisse设置固定700px高度会触发布局冲突，导致模块内部绘图面板的容器尺寸被错误计算为0，无法完成渲染。
• 页面未明确给esquisse模块分配独立列空间，模块UI被flexdashboard的默认布局挤压，导致 aesthetics 配置面板无法随数据切换同步更新。
• esquisse模块初始化时和flexdashboard的渲染流程未做时序对齐，首次加载时模块未拿到父容器的有效尺寸，触发渲染逻辑中断，后续的数据更新无法触发重绘。

• 替换esquisse的固定高度容器为适配flexdashboard的响应式容器，去掉硬编码的像素值。
• 用flexdashboard的列块标签明确给控制组件、esquisse模块分配独立的宽度占比，避免UI挤压。
• 拆分UI渲染逻辑、服务端逻辑为独立代码块，对齐esquisse模块和flexdashboard的初始化时序。
• 关闭esquisse的多余页脚组件，减少不必要的空间占用。

---
title: "Quick demo for Data"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

Test
=====================================     

## 侧边控制栏 {.sidebar}
```{r}
library(esquisse)
radioButtons(
    inputId = "data", 
    label = "Data to use:", 
    choices = c("iris", "mtcars"))

checkboxGroupInput(
    inputId = "aes", 
    label = "Aesthetics to use:", 
    choices = c(
      "fill", "color", "size", "shape", 
      "weight", "group", "facet", "facet_row", "facet_col"
    ),
    selected = c("fill", "color", "size", "facet"))
```

## 图表配置面板 {data-width=700}
```{r}
esquisse_ui(
    id = "esquisse", 
    header = FALSE,
    container = esquisseContainer(height = "100%", fixed = FALSE),
    insert_footer = FALSE)
```

```{r}
data_rv <- reactiveValues(data = iris, name = "iris")
  
observeEvent(input$data, {
    data_rv$data <- get(input$data)
    data_rv$name <- input$data
})
  
esquisse_server(
    id = "esquisse", 
    data_rv = data_rv, 
    default_aes = reactive(input$aes)
)
```

调整后运行逻辑说明：侧边栏集中放置数据、美学参数选择控件，主面板全宽放置esquisse模块，容器100%适配flexdashboard的fill布局自动计算的高度，切换数据集时esquisse会同步更新列字段、配置面板，正常渲染ggplot图表。

内容的提问来源于stack exchange，提问作者Lod