Perfomance

[naveganth]

Let's talk about performance, is there any way to improve the pan and zooming feature in the organogram? It's very slow with a lot of nodes open and that's not ideal.

[ZornitsaPesheva]

I notice that your photos are loading very slow. Please check with ours. You can compare in a simple example.

[naveganth]

I tried changing the images extension from PNG to JPG and decreased the resolution and size of each one from 400kB to 10kB each, but there's still a lot of lag. I have no clue how to fix that.

[ZornitsaPesheva]

I just checked... this is not loading any image for example: https://old.tjap.jus.br/portal/images/OG0.2.nonsense

[naveganth]

Tried removing all images, but the lag still continues so it probably doesn't have to do with the photos

[ZornitsaPesheva]

Oh, this is something else, okay...

[naveganth]

I just checked... this is not loading any image for example: https://old.tjap.jus.br/portal/images/OG0.2.nonsense

I didn't expect you to reply so soon, I was messing with the links and removing them.

Try with: (https://old.tjap.jus.br/portal/images/SPGOG_29.jpg)

[naveganth]

Maybe it has to do with nodes inside groups?

When you use the toolbar buttons to zoom: toolbar: {zoom: true,} , it doesn't produce any lag.

[ZornitsaPesheva]

Looks like it's because of these google fonts or whatever it is. Try using that locally and not loading it then from the link:

    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"  rel="stylesheet">

[naveganth]

Looks like it's because of these google fonts or whatever it is. Try using that locally and not loading it then from the link:

    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"  rel="stylesheet">

You are right, so I tried removing the font from HTML <link href... but the lag continued. Them i tried removing all the instances of Montserrat, and it made the perfomance better but i ended with my organogram like this:

What would be the solution for using the Orgchart Templates i made

[ZornitsaPesheva]

You don't need this link to use the same templates as up to now. I don't even know what you are using if for.

[naveganth]

You don't need this link to use the same templates as up to now. I don't even know what you are using if for.

Well, as you may know i was delevoping it on Visual Studio on my enviroment and that was needed to render the montserrat font in the website

[ZornitsaPesheva]

You should be able to remove it . I don't know what is this and why it is needed to render a font and why do you need this font.

[naveganth]

You should be able to remove it . I don't know what is this and why it is needed to render a font and why do you need this font.

I removed it from HTML but the lag continued

Them i tried removing all the instances of Montserrat, and it made the perfomance better but i ended with my organogram like this:

I guess it has to be with placing the font style in the OrgChart.templates i'll try overriding the style with montserrat in CSS, maybe that will fix the lag.

I just have no clue how to get the selector for each field, such as Field_0 and Field_1

[ZornitsaPesheva]

need to add it https://balkan.app/OrgChartJS/Docs/CSSCustomization#fieldClass

[naveganth]

need to add it https://balkan.app/OrgChartJS/Docs/CSSCustomization#fieldClass

How about for the field_0 but for other templates?

[ZornitsaPesheva]

You can use different class names for the different templates

[naveganth]

You can use different class names for the different templates

Found out how to do that, question: Can i use . in the class? Tried to use the name of the template for the class which is myTemplate.field_0 but i guess i can't use dots when naming the class right?

[naveganth]

So I realized yesterday and now but there's this weird little glitch where when hovering changes the font size and position, and sometimes even blurs the phrase itself, especially when using the selector for group. (this also happens with other types of filters such as drop-shadow and saturation...)

https://github.com/BALKANGraph/OrgChartJS/assets/159157666/3971be6b-db63-43fc-a9e7-3ea8522041ef

[ZornitsaPesheva]

It is coming from this transition transition: filter 0.5s .03s ease-in-out;

[naveganth]

It is coming from this transition transition: filter 0.5s .03s ease-in-out;

Yes I realized that, I wanted to know if theres anyway around it cause using it looks good.

[ZornitsaPesheva]

I am not sure it this is what you need to achieve, but you may need to change a style of one element when hovering on another. [data-n-id] rect:hover ~ .banana{ fill: yellow !important; }

[naveganth]

need to add it https://balkan.app/OrgChartJS/Docs/CSSCustomization#fieldClass

So i did add the font to CSS, but the lags still exists. It has to do with the font MontSerrat Is there any way to keep MontSerrat, or i'm gonna have to get rid of it?

[ZornitsaPesheva]

You can try to add it locally on your webserver when creating the local app.

[naveganth]

You can try to add it locally on your webserver when creating the local app.

I have no clue how to even start with that, but thanks for the help.

[naveganth]

So i went with gil-sans cause it looks similar to montserrat, also it runs good.

I just need to know how to bind image to pdf export cause mine looks like this:

[ZornitsaPesheva]

I guess the issue is in your images. They are not public, they are loading slow or both. Please test with one of our images. If the issue still exist, please create a simple example to isolate the issue.

[naveganth]

I guess the issue is in your images. They are not public, they are loading slow or both. Please test with one of our images. If the issue still exist, please create a simple example to isolate the issue.

Just tested, it has to do with where my images are hosted. You are like an angel 😄