[cloudwatch] position of the widget in a dashboard cannot be changed

Description of the bug

The position of the widget in the cloudwatch dashboard cannot be changed using the method described in the documentation.

Reproduction Steps

    initApiErrorWidgget(apiGateways: ApiGatewayConfig[]): cloudwatch.IWidget {
        let let apiErrorWidget = new cloudwatch.GraphWidget({
        // implem details
        })
        return apiErrorWidget;
    }


    constructor(scope: cdk.Construct, id: string, props: GlobalDashboardConfig) {
        super(scope, id);

        let globalDashboard = new cloudwatch.Dashboard(this, "globalDashboard", {
            dashboardName: props.name,
        })
        let apiErrorWidget = this.initApiErrorWidgget(props.apiGateways)
        globalDashboard.addWidgets(apiErrorWidget)
        apiErrorWidget.position(9, 0)
    }

Environment

• **CLI Version :1.50.0
• **Framework Version:1.50.0
• **Node.js Version:v12.18.1
• **OS :Darwin
• **Language (Version):TypeScript (3.9.6)

---

This is 🐛 Bug Report

[jain98]

Instead of hard-coding position using the position method inherited from the ConcreteWidget class a workaround and probably easier way to position widgets is to use Columns and Rows which can be used to set the widgets matrix in a dashboard.

Example usage -

        const dashboard = new Dashboard(this, "dashboard", {
            dashboardName: "foo",
            widgets: [
                [
                    new Column(widget1),
                    new Column(widget2, widget3, widget4)
                    new Column(widget5, widget6, widget7)
                ],
                [
                    widget8
                ],
                [
                    widget9,
                    widget10
                ]
            ]
        });

[peterwoodworth]

We’ve identified where the problem is.

The L2 construct is building a CfnDashboard object. In Cloudformation docs, widgets in the dashboard are built with a string. The CDK is building that string on line 101:

https://github.com/aws/aws-cdk/blob/6179ac16f2fcab5bf5e03a3629db281018d7585b/packages/%40aws-cdk/aws-cloudwatch/lib/dashboard.ts#L95-L109

Widgets are imported into that dashboard via rows:

https://github.com/aws/aws-cdk/blob/6179ac16f2fcab5bf5e03a3629db281018d7585b/packages/%40aws-cdk/aws-cloudwatch/lib/dashboard.ts#L125-L132

These widgets are turned into strings via the Column object as seen on line 99 of the first snippet. However, column position is adjusted in the following line.

And as you can see here:

https://github.com/aws/aws-cdk/blob/6179ac16f2fcab5bf5e03a3629db281018d7585b/packages/%40aws-cdk/aws-cloudwatch/lib/layout.ts#L83-L89

When column position is adjusted, it adjusts the position of individual widgets as well, thereby always setting them to 0.

We are investigating a possible fix