How to load visual into entire div using Power Bi embed report

Question

I am embedding a Power BI report with a single page and single view in to my application using javascript.The visual is creating and loading fine but it is occupying in a particular portion of the parent div in which i am embedding my report.I need to stretch that visual into full width and height of the parent div.I tried this but it is not working for me.

Here is my current output

Here my visual is fit in to the centre of my parent div but i need to stretch that visual to cover all remaining red portion of my parent div

Here is my code

  let visualConfig = {
    type: 'report',
    tokenType: models.TokenType.Aad,
    accessToken: loggedInUser.accessToken,
    embedUrl: globalData.embedUrl,
    id: globalData.id,
    viewMode: models.ViewMode.View,
    permissions: models.Permissions.ReadWrite,
    datasetBinding: {
        datasetId: CurrentDataset
    },
    settings: {
        //layoutType: models.LayoutType.Custom,
        //customLayout: {
        //    pageSize: {
        //        type: models.PageSizeType.Custom,
        //        width: $("#idViewPreview").width(),
        //        height: 300
        //    },
        //    displayOption: models.DisplayOption.FitToPage
        //},
        panes: {
            filters: {
                visible: false
            },
            pageNavigation: {
                visible: false
            },

        },
        background: models.BackgroundType.Transparent,

        visualSettings: {
            visualHeaders: [
                {
                    settings: {
                        visible: false
                    }
                }
            ]
        }
    }
};

currentVisual.report = powerbi.embed($("#idViewPreview")[0], visualConfig);

//required for untag load event
currentVisual.report.off("loaded");

// Triggers when a report schema is successfully loaded
currentVisual.report.on("loaded", async function () {
    try {
        var newPage = await currentVisual.report.addPage("test_display");
        currentVisual.page = newPage;
        currentVisual.page.setActive();

        let models = window['powerbi-client'].models;

        const customLayout = {
            x: 0,
            y: 0,
            width: 1000,
            height: 800,
            displayState: {
                // Change the selected visuals display mode to visible
                mode: models.VisualContainerDisplayMode.Visible
            }
        };

        currentVisual.visuals = await currentVisual.page.createVisual("funnel", customLayout);
    }
    catch (ex) {
        console.log(ex);
    }

Answer 1

I just made some changes in the actual answer and i am posting it here. After embedding the report before creating a visual i am updating the page layout.

    let divWidth = $("div").width() - 10;
    let divHeight = $("div").height() - 10;

    let settings = {
        layoutType: models.LayoutType.Custom,
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: divWidth,
                height: divHeight
            },
            displayOption: models.DisplayOption.FitToPage
        }
    };

    await embedReport.report.updateSettings(settings);

    const customLayout = {
        x: 0,
        y: 0,
        width: divWidth,
        height: divHeight,
        displayState: {
            // Change the selected visuals display mode to visible
            mode: models.VisualContainerDisplayMode.Visible
        }
    };

    await embedReport.page.createVisual("column", customLayout);

Answer 2

When we change the page size, the report will be fixed rather than contracted or expanded. If we make the page width smaller than the report width, the visual report will be contracted. However, when we change the div size, the iframe resizes the report automatically. If you want to customise the height and width of your visual, you can do so.

1. Set custom height and width of your visual.

    defaultLayout: defaultLayout,
    visualsLayout: {
        "Required_Visual_Name": {
            x: "Required_Width",
            y: "Required_Height",
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        },
    }
};

2.Now Update the settings

    layoutType: models.LayoutType.Custom,
    customLayout: {
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: {
            "Your_Report_Id": pageLayout
        }
    },
}

3.Apply the settings

await report.updateSettings(settings);

References: https://learn.microsoft.com/javascript/api/overview/powerbi/custom-layout