A Report Generator

Dash Python
1

Hi DASH community

I have a DASH app (speakerbench.com) that in multiple tabs present the user with 7-8 graphs as a result of whatever simulation they have run. Once they close the app, all information is lost. I wonder if there is a recommended way to generate a report, for example a single HTML page where the graphs are shown in a single page or possibly a PDF file, which the user can save (for future reference, without re-running the app).

Any suggestions for a suitable report generator? All tips and suggestions are welcome.

With kind regards,
Claus

2

Design your app as if it was supposed to be printed with a A4 layout. Or even A3, if you want.

Then, users will just need to do a CTRL + P, and save as PDF.

3

Hi David22

I’ve studied and it seems like what you propose is the way.

I have a multi-page and multi-tab app, and a whole bunch of graphs that doesn’t fit on a single page (or two), and it is not convenient for the user to scroll through a single (but long) web-page to use our app, so it probably has to stay this way (multi-tab).

I found this thread interesting, as it seems to be targeting something like what I’d like to do (but to no avail):

I see DASH Enterprise has a report generator, but we (Jeff and I) are not an enterprise, and our app is free to use as in free beer, so we have no income from this app.

Best regards,
Claus

4

Hello @cfuttrup,

You could potentially do something like this:

Or something similar to this:

1 Like
5

@ cfuttrup You can design a multipage app, whose individual page are all put in a container in your main container, each on being in a div whose width is 297mm and height 209.8mm. There are a few tricks to keep in mind here; if you set up the layout with a 210 mm height, then when you print there will be an offset of 0.1-0.2mm on your output page. Long story short, if you put 210 mm, you will print 2 pages when you see one, 3 pages when you see 2, etc.

It is a point that is frequently mentioned everywhere on the internet. It seems that browser add something somewhere, but it’s unclear what.

On my side I do “powerpoint like” dashboards, so, it works great. At some point in the future I will share the base app. I just need to simplify it before doing it. One more advice: start with an empty page, and then add the div inside and around, the one after the other, and check at every step that a CTRL + P does print what you expect. Use minimal CSS, start with nothing. It will make your life much easier. Use the @page css rule, put your margin at 0, minimize the number of unnecessary rules, an you shoulld be able to make it quite quickly.

On my side in CSS I have something like this:


@page {
    size: A4 landscape;
    margin: 0;
    padding:0;
}
@media print {
    html, body {
        width: 297mm;
        height: 209.8mm;
    }

    .wrapper-navbar-and-_pages_content{
        display:block;
        padding:0;
        margin:0;
        outline:none;
    }
    .navbar {
        display:none;
    }
    .wrapper-of-wrapper-page-and-toolbar{
        display:block;
        padding:0;
        margin:0;
        grid-row-gap:0mm;
        outline:none;
        border:none;
    }
    .wrapper-page-and-toolbar{
        grid-template-columns: 297mm;
        background-color:white;
        margin:0;
        padding:0;
        outline:none;
    }
    .page {
        margin: 0;
        padding-top: 0mm;
        padding-bottom: 0mm;
        padding-left: 13.5mm;
        padding-right: 13.5mm;
        /*border: initial;*/
        border:0;
        /*border-radius: initial;*/
        /*width: initial;*/
        width:297mm;
        min-height: initial;
        height: 209.8mm;
        box-shadow: initial;
        background: initial;
        page-break-before: always;
        outline:none;
    }
    .toolbar {
        display:none;
    }

    .dash-debug-menu {
        display:none;
    }
    .dash-debug-menu__outer.dash-debug-menu__outer--closed{
        display:none;
    }

    .dash-debug-menu.dash-debug-menu--closed {
        display:none;
    }


    #table .previous-next-container {
        display:none;
    }
}

But you will have to adapt this to your own layout of course.

Then, the way you navigate from section to section, or from chapter to chapter, is up to you. You can use tabs, or you can use a sidebar with a menu. Sidebars that will disappear when you print, because hidden.

3 Likes
6

Somehow same issue, Upon attempting to render multiple graphs from different simulation runs in a single report, I noticed that the graphs were not being displayed correctly within the report page. Instead, they appeared distorted and misplaced, making it difficult for users to interpret the results accurately. Ensuring that the graph components were added correctly to the HTML structure, the issue persisted.

1 Like