Преглед изворни кода

let SVG of `ui.matplotlib` fill its container as well (#4595)

Credits to @Guilhermwn for the original issue regarding Pyplot, @moi90
and @falkoschindler for raising the issue on `ui.matplotlib`

---

This PR resolves
https://github.com/zauberzeug/nicegui/discussions/3277#discussioncomment-12764697
by setting the width and height of an SVG element to 100% of its parent
container, which is the `ui.matplotlib` element itself. This way the
following plot stays inside the ui.card, which wasn't the case before.

Here is a comprehensive test script which tests `ui.matplotlib` (fix in
this PR), `ui.pyplot` (previously fixed), as well as `ui.echart` with
SVG rendering mode, just to be safe.

I personally do not forsee any more of this kind of fix. There should
not be any more UI components which generate SVG on server and render on
client. SVG which generate on client (`ui.mermaid`, for example) is a
different story!

```py
from nicegui import ui

with ui.card().classes('w-80'):
    with ui.matplotlib().figure as fig:
        fig.gca().plot([1, 2, 3], [1, 4, 3])

with ui.card().classes('w-80'):
    with ui.pyplot() as plot:
        plot.fig.gca().plot([1, 2, 3], [1, 4, 3])

# use ui.echart() to create a chart with the same data
with ui.card().classes('w-80'):
    ui.echart({
        'xAxis': {'type': 'category', 'data': [1, 2, 3]},
        'yAxis': {'type': 'value'},
        'series': [{
            'data': [1, 4, 3],
            'type': 'line'
        }],
        'title': {'text': 'Echart'}
    }, renderer='svg')

ui.run()
```
Before PR: 

<img width="200" alt="{7F68829D-C402-4D10-89CA-5DC156E686C2}"
src="https://github.com/user-attachments/assets/2ebbf826-8162-4db7-9913-6727b3d60f32"
/>

After PR: 

<img width="200" alt="{6698BA65-814C-4E70-91BC-FD3F0CA55002}"
src="https://github.com/user-attachments/assets/43865709-0f23-4ee5-9925-90e0ace6bd56"
/>

---

Sounds familiar to #3289? Because it is!
Evan Chan пре 1 месец
родитељ
комит
4cbc64c334
2 измењених фајлова са 2 додато и 1 уклоњено
  1. 1 1
      nicegui/elements/pyplot.py
  2. 1 0
      nicegui/static/nicegui.css

+ 1 - 1
nicegui/elements/pyplot.py

@@ -75,7 +75,7 @@ class Pyplot(Element, default_classes='nicegui-pyplot'):
         plt.close(self.fig)
 
 
-class Matplotlib(Element):
+class Matplotlib(Element, default_classes='nicegui-matplotlib'):
 
     def __init__(self, **kwargs: Any) -> None:
         """Matplotlib

+ 1 - 0
nicegui/static/nicegui.css

@@ -246,6 +246,7 @@ h6.q-timeline__title {
 .nicegui-code .codehilite {
   padding: 0 0.5rem;
 }
+.nicegui-matplotlib > svg,
 .nicegui-pyplot > svg {
   width: 100%;
   height: 100%;