Tall svg?

[zoell]

Hi Marcus,

I am trying to put a relatively tall SVG (it is like 440px X 825px) but for some reason the SVG panel won't extend my SVG's div to the bottom of the panel.

Here is my SVG:

<svg x="0px" y="0px" width="440" height="825" viewBox="0 0 440 825">
<style type="text/css">
    svg { background-color: red; }
    .st0{fill:#999999;}
    .st1{fill:#1A1A1A;}
</style>
<rect id="bgbox" x="11" y="13" class="st0" width="420" height="802"/>
<rect id="box4" x="22" y="22" class="st1" width="113" height="313"/>
<rect id="box3" x="22" y="492" class="st1" width="113" height="313"/>
<rect id="box2" x="308" y="24" class="st1" width="113" height="313"/>
<rect id="box1" x="308" y="494" class="st1" width="113" height="313"/>
</svg>

I put a red background just to see what is going on, and this is how it looks like:

I am wondering how it would be possible to make this SVG the full height of this panel?

Thanks, zoell

[MarcusCalidus]

sorry for my late reply. As it seems a Grafana panel cannot get higher than wide. Maybe it helps to adjust your viewbox to be square. Maybe 825 by 825. Please let me know if this helps.

cheers Marco

[zoell]

Hi Marco,

Thanks for your reply. Originally I wanted to put in a very high SVG 440x825px that is why I have setup that panel to be tall, I also played with the viewbox and tried 825 by 825 but does not matter what I try the div that holds the SVG is always resized to square.

I noticed that in the code the plot-canvas div that is always resized to a square, while the outer divs like svg-panel and the panel-content's height looks OK:

Looks like it should be possible to have a high panel, or not?

Thanks, zoell

[MarcusCalidus]

You are exactly right. It's actually my fault since I do the following in rendering.js

 function resizePlotCanvas() {
    var width = elem.width();
    var height = elem.height();

    var size = Math.min(width, height); // <--- ERROR HERE

    var plotCss = {
      top: '10px',
      margin: 'auto',
      position: 'relative',
      height: (size) + 'px'
    };
    plotCanvas.css(plotCss);
  }

I am busy today and over the weekend. I will look into it by Monday next week

[zoell]

Hi Marco, May I ask if you had the chance to check this? Many thanks!

[MarcusCalidus]

Sorry, haven't had any time yet.

zoell notifications@github.com schrieb am Di., 12. Nov. 2019, 23:53:

Hi Marcus,

I am trying to put a relatively tall SVG (it is like 440px X 825px) but for some reason the SVG panel won't extend my SVG's div to the bottom of the panel.

Here is my SVG:

I put a red background just to see what is going on, and this is how it looks like:

[image: svgtest] https://user-images.githubusercontent.com/3702564/68717562-0597e100-059f-11ea-9c98-2e78eddfbd37.png

I am wondering how it would be possible to make this SVG the full height of this panel?

Thanks, zoell

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/MarcusCalidus/marcuscalidus-svg-panel/issues/41?email_source=notifications&email_token=AA7MHVTIZDWAZVS7ICDSKQDQTMXV7A5CNFSM4JMKF4OKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HY2ZP3A, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA7MHVRT3PKRPYPSMAG73JDQTMXV7ANCNFSM4JMKF4OA .

[midnightconman]

It seems like we can just use the height here, instead of the weird min(width, height), like this?

function resizePlotCanvas() {
    var width = elem.width();
    var height = elem.height();

    var plotCss = {
      top: '10px',
      margin: 'auto',
      position: 'relative',
      height: (height) + 'px'
    };
    plotCanvas.css(plotCss);
  }

[MarcusCalidus]

I am really sorry, but I won't get around this issue in the next days. If you want to test it with your own setup you may checkout the repo and fiddle around. If you succeed I would be grateful for a PR. Thank you.

[zoell]

I have tested this and seems to be working.

It seems like we can just use the height here, instead of the weird min(width, height), like this?

function resizePlotCanvas() {
    var width = elem.width();
    var height = elem.height();

    var plotCss = {
      top: '10px',
      margin: 'auto',
      position: 'relative',
      height: (height) + 'px'
    };
    plotCanvas.css(plotCss);
  }

[MarcusCalidus]

But we have to make sure that it does not break the layout of other people‘s dashboards. I‘m sure the assignment was for a reason. I just don‘t remember which .. I know bad commenting. I guess it should be optional with the current setting as default.

[zoell]

You can add a checkbox like "Advanced panel size support" and use the above mentioned solution only when it is checked. This way if someone wants a tall SVG it will be possible but you can keep the support for others.

[MarcusCalidus]

Should be fixed now in version 0.3.3. Will post it to the Grafana repo too. I would recommend though, that you remove the static size from the svg root node. This way the SVG will resize to the container correctly.

<svg viewBox="0 0 440 825">

[zoell]

Hi Marcus, May I ask if you could push this out to the Grafana repo?

[MarcusCalidus]

A pull request is already pending for quite a while https://github.com/grafana/grafana-plugin-repository/pull/525