Rearrange altair chart content

[laguill]

Description

Hello,

I am trying to rearrange the output of a chart made with altair.
As followed here https://quarto.org/docs/authoring/contents.html

The output is not displayed.
Is it only working with matplotlib ?

---
title: Rearrange altair chart content
format: html
---

## A section

Here we define a plot.

```{python}
#  | echo: false
#  | label: a-cell

import altair as alt
from vega_datasets import data

source = data.iowa_electricity()
alt.Chart(source).mark_area(opacity=0.3).encode(x="year:T", y=alt.Y("net_generation:Q").stack(None), color="source:N")
```

## Another section

Here we use the plot, inside a callout:

::: callout-note

## Note the following plot

{{< contents a-cell >}}

:::

``` 

[mcanouil]

Why do you have two spaces in # | .
Formatters (like Black, autopep8, etc.) usually adds only one.

I don't think Quarto allowed any number of spaces here.

You can open your HTML, use "inspect / developer mode" of your favourite browser to see if your figure has a "a-cell" ID which I doubt.

[laguill]

My mistakes I am using ruff as formatter but it seams ruff is not working with qmd documents

[mcanouil]

The Quarto VSCode/Positron extension uses your default Python formatter if one.

[laguill]

Ruff is not formatting the cells

Here is my config

[cderv]

It seems the content shortcode does not work well with altair plot. I can reproduce using

---
title: Rearrange altair chart content
format: html
---

## A section

Here we define a plot.

```{python}
#| echo: true
#| label: a-cell

import altair as alt
from vega_datasets import data

source = data.iowa_electricity()
alt.Chart(source).mark_area(opacity=0.3).encode(x="year:T", y=alt.Y("net_generation:Q").stack(None), color="source:N")
```

## Results

{{< contents a-cell >}}

Let's open an issue and look into this.

[cderv]

What if you add an extra div outside the code cell?

What do you mean ?

FWIW I opened an issue to track and look into this

• contents shortcode not working with altair plot  #12078

[mcanouil]

I mean¹:

---
title: Rearrange altair chart content
format: html
---

## A section

Here we define a plot.

::: {#b-cell}

```{python}
#| echo: true
#| label: a-cell

import altair as alt
from vega_datasets import data

source = data.iowa_electricity()
alt.Chart(source).mark_area(opacity=0.3).encode(x="year:T", y=alt.Y("net_generation:Q").stack(None), color="source:N")
```

:::

## Results

{{< contents b-cell >}}

Footnotes

1. I can't install/setup the dependencies to test the above workaround, but last time I checked (yesterday) it worked. ↩

[cderv]

Interesting !! Yes this is working. Thank you. i'll add to the issue

[mcanouil]

The other issue with knitr code cell is basically the same.
I believe the two are related in the sense that the shortcode is likely missing something in the structure of the code cell or its output.

[cderv]

is likely missing something in the structure of the code cell or its output.

Yes definitely. Good to have workaround.