coatless / quarto-webr

Community developed Quarto Extension to Embed webR for HTML Documents, RevealJS, Websites, Blogs, and Books.
https://quarto-webr.thecoatlessprofessor.com/
395 stars 19 forks source link

Can width and height of graph output be controlled? #125

Closed ute closed 10 months ago

ute commented 10 months ago

What's your question?

Is there a way to set the width and / or height of graph output somehow?

For my web book project, the default canvas width 700px seems always too large. I patched qwebr-compute-engine.js and replaced "700px" with "100%", which works fine. Could I have done this from within the quarto document?

Thank you so much for this fantastic extension, and I am thrilled with the new possibilities to install packages in a hidden context: setup cell 👍👍👍

coatless commented 10 months ago

@ute thanks for the question. Once #120 is finished, then fig-height and fig-width will work. Check back probably by mid-week.

We're trying to incorporate more of the Quarto options as discussed in #117. If there are any more that should be considered; please let me know (here or there)! 😃

ute commented 10 months ago

Cool, and thanks for answering so quickly! I'd suggest to add out-width (and perhaps out-height for completeness), since fig-width only measures in inches, not in percent of absolute width. For folks that like to have plots adjust to text width 😃

ute commented 10 months ago

For my web book project, the default canvas width 700px seems always too large. I patched qwebr-compute-engine.js and replaced "700px" with "100%", which works fine. Could I have done this from within the quarto document?

Realized that a document wide setting can easily be achieved with css:

.qwebr-output-graph-area {
  width:100%;
}
coatless commented 10 months ago

@ute I like that solution even more! I forgot that we recently added CSS classes across all elements:

https://quarto-webr.thecoatlessprofessor.com/qwebr-theming.html#css-class-and-id-identifiers

As we're entering a bit of uncharted territory, one thing to keep in mind is we need to account for a 2x scaling approach with width and height values feed into webR.

https://docs.r-wasm.org/webr/latest/plotting.html#plotting-with-a-html-canvas

Also, if you want to explore the non-interactive cells working with the packages key, then you'll be happy to know I just pushed a set of changes that should make them more robust in terms of sequencing and use of the packages key. To switch to the dev version, please use:

quarto add coatless/quarto-webr@cell-state-manager
ute commented 10 months ago

Yes, these classes are so useful - no longer hacking internal files... very smart addition 😊