删除仪表板四开中标题和正文之间的白色区域

Question

当我创建四开仪表板时，我有时需要使用

css

代码调整一些布局。对于以下仪表板，我们使用一些 CSS 来调整值框中值的大小。问题是，当我们在代码块中使用 css 并将其放置在文档顶部时，仪表板的标题和正文之间会出现空白。这是一些可重现的代码：

---
title: "Gapminder"
author: "Quinten"
format: dashboard
theme: yeti
---

```{r}
#| warning: false
#| message: false
#| echo: false
library(tidyverse)
library(DT)
library(gapminder)
library(ggpmisc)
library(ggbump)
library(plotly)
library(leaflet)
library(countrycode)
library(sf)
library(rnaturalearth)
library(crosstalk)
```

```{css, echo=FALSE}
.quarto-dashboard .bslib-value-box .value-box-value {
    font-size: clamp(.1em, 10cqw, 2em) !important;
}
```

```{r}
# Calculate some values
# Average gdpPercap per year
mean_gdpPercap <- gapminder %>%
  group_by(year) %>%
  reframe(mean_gdpPercap = mean(gdpPercap)) %>%
  pull(mean_gdpPercap)

perc_growth_gdpPercap <- 100*((mean_gdpPercap[length(mean_gdpPercap)] - mean_gdpPercap[1])/mean_gdpPercap[1])

# Average lifeExp per year
mean_lifeExp <- gapminder %>%
  group_by(year) %>%
  reframe(mean_lifeExp = mean(lifeExp)) %>%
  pull(mean_lifeExp)

perc_growth_lifeExp <- 100*((mean_lifeExp[length(mean_lifeExp)] - mean_lifeExp[1])/mean_lifeExp[1])

```

```{r}
# Create dataset for leaflet map
df <- gapminder %>% #filter(year == 2007) %>% 
  mutate(iso_a3 = countrycode(country, "country.name", "iso3c"), 
         gdpPercap = round(gdpPercap, 0), 
         lifeExp = round(lifeExp, 0))

world <- ne_countries(type = "countries",  returnclass = 'sf') %>% 
  left_join(., df, by = "iso_a3") %>% 
  filter(!is.na(country)) %>% 
  select("country", "continent" = "continent.y", "year", "lifeExp", "pop", "gdpPercap", "geometry") %>% 
  as('Spatial')

world_NA <- ne_countries(type = "countries",  returnclass = 'sf')

sd <-  SharedData$new(world)
sd_df <- SharedData$new(world@data, group = sd$groupName())
```


# {.sidebar}

This is a static dashboard with some hover options to give you some insights of the Gapminder dataset. This dashboard is developed using [Quarto](https://quarto.org) [v1.4](https://quarto.org/docs/blog/posts/2024-01-24-1.4-release/).

***

Below you can select some settings to filter the map and table:

```{r}
filter_select("year", "Choose the year:", sd_df, ~year)
filter_slider("lifeExp", "Life expectancy (years):", sd_df, ~lifeExp)
filter_slider("gdpPercap", "Income per person ($):", sd_df, ~gdpPercap)
```

***

::: {.callout-note collapse="true"}
## Disclaimer
This is just a simple static dashboard as demonstration to show what is possible with the latest version of Quarto.
:::

# Analysis

## Row {height=20%}

```{r}
#| content: valuebox
#| title: "Percentage growth 1952-2007 of average lifeExp"
list(
  icon = "arrow-up",
  color = "green",
  value = paste0(round(perc_growth_lifeExp,1), "%")
)
```

```{r}
#| content: valuebox
#| title: "Percentage growth 1952-2007 of average gdpPercap"
list(
  icon = "graph-up",
  color = "light",
  value = paste0(round(perc_growth_gdpPercap,1), "%")
)
```

## Row {height=80%}

### Column {.tabset}

```{r}
#| title: "World map"
pal <- colorFactor(c("#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd"), domain = c("Africa", "Americas", "Asia", "Europe", "Oceania"), ordered = FALSE)

leaflet(sd) %>% 
  addProviderTiles("CartoDB.Positron") %>% 
  addPolygons(data = world_NA, color = "#969696", weight = 1, fillColor = "#808080") %>% 
  addPolygons(color = "#969696", weight = 2, fillColor = ~pal(continent), fillOpacity = 0.8)
```


```{r}
#| title: "gdpPercap vs lifeExp"
gapminder %>%
  ggplot(aes(x = gdpPercap, y = lifeExp)) +
  geom_point() +
  geom_smooth(method = loess) +
  theme_minimal()
```


### Column {.tabset}

```{r}
#| title: "Top 10 countries life expectancy per year"
df <- gapminder %>% 
  group_by(year) %>%
  arrange(desc(lifeExp)) %>% 
  slice(1:10) %>%
  mutate(rank = row_number()) %>%
  ungroup()

p <- ggplot(df, aes(year, rank, color = continent, group = country)) +
  geom_bump() +
  geom_point() +
  geom_text(data = df %>% filter(year == min(year)),
            aes(x = year - .1, label = country), size = 2, vjust = -1.5) +
  geom_text(data = df %>% filter(year == max(year)),
            aes(x = year + .1, label = country), size = 2, vjust = -1.5) +
  scale_x_continuous(breaks = c(unique(df$year))) +
  scale_y_continuous(breaks = c(1:10), trans = "reverse") +
  guides(x =  guide_axis(angle = 45)) +
  theme(panel.grid.major = element_blank(), 
        panel.grid.minor = element_blank(),
        panel.background = element_blank()) +
  labs(x = "Year", y = "Rank", color = "Continent") +
  coord_cartesian(clip = "off") 
p
```

```{r}
#| title: "Average life expectancy per continent over time"
p <- gapminder %>%
  group_by(continent, year) %>%
  summarise(lifeExp=mean(lifeExp)) %>%
  ggplot(aes(x=year, y=lifeExp, color=continent)) +
  geom_line() + 
  geom_point() +
  theme_minimal()
plotly::ggplotly(p)
```

输出：

正如您所看到的，仪表板标题和主体之间有一个大的白色区域。当我们在 css 代码中使用

echo=FALSE

时，甚至会发生这种情况。我尝试使用这个答案：删除标题和正文之间的空白，但不幸的是这不起作用。所以我想知道是否有人知道为什么会发生这种情况以及我们如何防止白色区域？

Answer 1

我认为做到这一点的方法是将 CSS 添加到单独的文件中。当您使用主题时，我们可以遵循docs：

要使用您自己的一组变量和/或规则自定义现有的 Bootstrap 主题，只需提供基本主题，然后提供您的自定义主题文件

在我们的例子中，这意味着创建一个 SCSS（而不是 CSS）文件，

styles.scss

:

/*-- scss:rules --*/
.quarto-dashboard .bslib-value-box .value-box-value {
    font-size: clamp(.1em, 10cqw, 2em) !important;
}

然后将其包含在标头 yaml 中：

---
title: "Gapminder"
author: "Quinten"
format: dashboard
theme: 
    - yeti
    - styles.scss
---

从文档中删除

{css}

块，瞧 - 不再有间隙：