Our state of the art Gantt chart


Post by capmo »

Hello there!

We have a few tasks and dependencies that fit on one page.

Here is the export configuration:

  • Single Page
  • A0 paper format (custom)
  • Landscape

Find the exported file in the attachment.

Is there a way to scale the content to fit the whole width of the page?

Attachments
3_TP.pdf
(148.29 KiB) Downloaded 79 times

Post by pmiklashevich »

Here is how the feature works: The client side sends html fragments to the server and the server opens the fragments in chromium (headless browser) to render the pages and glue them together. You can take the html and open in a browser page to see what result is going to be. You can specify scheduleRange to increase the width by showing more details, or you can subscribe to beforeExport and change the Gantt view (apply another view preset, apply some classes, style something differently, change row height, etc), then on export you can roll back.

Pavlo Miklashevych
Sr. Frontend Developer


Post by Maxim Gorkovsky »

Hello.
It appears that content is at normal scale but canvas is way too big. And it feels like you want content to upscale. Unfortunately that's not supported.
You can try overriding pageTpl method and adding your own style with your own scale.

const
        // this code prevents upscaling
        widthScale  = Math.min(1, me.getScaleValue(me.inchToPx(paperWidth), totalWidth)),
        heightScale = Math.min(1, me.getScaleValue(me.inchToPx(paperHeight), totalHeight)),
        scale       = Math.min(widthScale, heightScale);

    // Now add style to stretch grid vertically
    styles.push(
        `<style>
                #${client.id} {
                    height: ${totalClientHeight}px !important;
                    width: ${totalWidth}px !important;
                }
                
                .b-export-content {
                    ${me.centerContentHorizontally ? 'left: 50%;' : ''}
                    transform: scale(${scale}) ${me.centerContentHorizontally ? 'translateX(-50%)' : ''};
                    transform-origin: top left;
                    height: ${scale === 1 ? 'inherit' : 'auto !important'};
                }
            </style>`
    );

yield {
        html : me.pageTpl({
            html,
            header,
            footer,
            // you can add new, more important style here overriding scale. Use `this.exportMeta.totalWidth` to read total content width
            styles, 
            paperWidth,
            paperHeight
        })
    };

Post Reply