Download function not working when using dynamic styling

[alexaustinquintin]

Org Chart download function ceases to work when using dynamic styling in .nodeContent()

I catched the bug as I have been trying to use dynamic styling in my nodeContent() Reference: https://stackblitz.com/edit/js-rkjhzz and I have observed the download function (.exportImg()) is not working. There is also no error shown on the .js plugin file used.

After hours of debugging, I tried removing the ternary condition inside nodeContent() and it works again!

Is it an Org Chart plugin error or html2canvas error?

[bumbeishvili]

Hi, not sure why it is not working

It works for the same styling here

https://stackblitz.com/edit/js-ue1cpj?file=index.html

[alexaustinquintin]

Honestly, I'm not so sure myself. But in case someone has the same problem as mine, they can look into dynamic styling.

I'm using C# MVC, JQuery with prototype if that helps.

I'll look more into this and will report my findings.

[alexaustinquintin]

I got it, and the cause is such a rookie mistake by me lol.

This is the nodeContent() that has the bug.

.nodeContent(function (d, i, arr, state) {
    return `
            <div style="padding-top:30px;background-color:none;margin-left:1px;height: ${d.height}px;border-radius:2px;overflow:visible">
                <div style="height: ${d.height - 32}px;padding-top:0px;background-color:white;border: ${d.data._highlighted || d.data._upToTheRootHighlighted ? '5px solid #E27396"' : '1px solid lightgray"'};" >
                    <img src="${d.data.fileUrl}" style="margin-top:-30px;margin-left: ${d.width / 2 - 30}px;border-radius:100px;width:60px;height:60px;" />
                    <div style="margin-right:10px;margin-top:15px;float:right">${d.data.id}</div>
                    <div style="margin-top:-30px;background-color:#672A7F;height:10px;width: ${d.data._highlighted || d.data._upToTheRootHighlighted ? 'd.width - 10"' : 'd.width - 2"'}px;border-radius:1px"></div>
                    <div style="padding:10px; padding-top:35px;text-align:center">
                        <div style="color:#111672;font-size:16px;font-weight:bold">${d.data.parentName}</div>
                        <div style="color:#404040;font-size:12px;margin-top:4px">${d.data.parentPosition}</div>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding-left:15px;padding-right:15px;">
                        <div> Manages:  ${d.data.ChildrenCount} 👤</div>
                        <div> Oversees: ${d.data.TotalSubsCount} 👤</div>
                    </div>
                </div>
            </div>
    `;
})

And see dynamic styling, I have added an unnecessary double quote (") inside and that is the cause of the error.

here is the working one.

.nodeContent(function (d, i, arr, state) {
    return `
            <div style="padding-top:30px;background-color:none;margin-left:1px;height: ${d.height}px;border-radius:2px;overflow:visible">
                <div style="height: ${d.height - 32}px;padding-top:0px;background-color:white;border: ${d.data._highlighted || d.data._upToTheRootHighlighted ? '5px solid #E27396' : '1px solid lightgray'};" >
                    <img src="${d.data.fileUrl}" style="margin-top:-30px;margin-left: ${d.width / 2 - 30}px;border-radius:100px;width:60px;height:60px;" />
                    <div style="margin-right:10px;margin-top:15px;float:right">${d.data.id}</div>
                    <div style="margin-top:-30px;background-color:#672A7F;height:10px;width: ${d.data._highlighted || d.data._upToTheRootHighlighted ? 'd.width - 10' : 'd.width - 2'}px;border-radius:1px"></div>
                    <div style="padding:10px; padding-top:35px;text-align:center">
                        <div style="color:#111672;font-size:16px;font-weight:bold">${d.data.parentName}</div>
                        <div style="color:#404040;font-size:12px;margin-top:4px">${d.data.parentPosition}</div>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding-left:15px;padding-right:15px;">
                        <div> Manages:  ${d.data.ChildrenCount} 👤</div>
                        <div> Oversees: ${d.data.TotalSubsCount} 👤</div>
                    </div>
                </div>
            </div>
    `;
})

But, should there be an error catching inside the plugin?

Anyway, I hope my findings will help other devs using your plugin!

[bumbeishvili]

Makes sense, so it was an HTML mistake.

Not sure how to catch similar errors, to be honest, it happens when I want to convert an SVG string to an image

Most probably this is the line where it fails

https://github.com/bumbeishvili/org-chart/blob/c8ebb0490ecfcf1424c16a8528a4a835d3efde53/src/d3-org-chart.js#L1532