Custom Visuals Spread Out "rect" 4 columns to the left and as many columns downwards as possible:

[Anonymous]

I am creating a custom visual that will append data to a rectangle like this:

I have already bound the data from the table which looks like this:

This is how the table looks like in the unedited powerbi report:

My Visual.ts file looks like this:

module powerbi.extensibility.visual {
    interface DataPoint {
        label: string;
        name: string;
        quantity: number;
        center: number;
        route: string;
        color: string;
        destination: string;
        size: string;
    };

    interface ViewModel {
        dataPoints: DataPoint[];
    }

    export class Visual implements IVisual {

        private host: IVisualHost;
        private svg: d3.Selection<SVGAElement>;
        private labelGroup: d3.Selection<SVGAElement>;

        private xPadding: number = 0.1;
        private yPadding: number = 0.1;


        constructor(options: VisualConstructorOptions) {
            this.host = options.host;
            this.svg = d3.select(options.element)
                .append("svg")
                .classed("labels", true);
            this.labelGroup = this.svg.append("g")
                .classed("label-group", true);

        }

        public update(options: VisualUpdateOptions) {

            let viewModel = this.getViewModel(options);

            let width = options.viewport.width;
            let height = options.viewport.height;


            this.svg.attr({
                width: width,
                height: height
            });

            let numOfRows = options.dataViews[0].table.rows.length;
            let rows = options.dataViews[0].table.rows;

            let labels = this.labelGroup
                .selectAll(".label")
                .data(options.dataViews[0].table.rows);

            labels.enter()
                .append("rect")
                .classed("label", true);

            labels.attr({
                width: width / 4,
                height: height / numOfRows / 4,
                x: 0, //? 
                y: 0, //?
            });

            labels.exit()
                .remove();





        }

        private getViewModel(options: VisualUpdateOptions): ViewModel {

            let dv = options.dataViews;


            let viewModel: ViewModel = {
                dataPoints: [],
            };

            if (!dv
                || !dv[0].table
                || !dv[0].table.rows
                || !dv[0].table.rows[0]
                || !dv[0].table.columns)
                return viewModel;

            let view = dv[0].table;
            let rows = view.rows;
            let values = view.columns;

            for (let i = 0, len = Math.max(rows.length, values.length); i < len; i++) {
                viewModel.dataPoints.push({
                    label: <string>rows[i][0],
                    name: <string>rows[i][1],
                    quantity: <number>rows[i][2],
                    center: <number>rows[i][3],
                    route: <string>rows[i][4],
                    color: <string>rows[i][5],
                    destination: <string>rows[i][6],
                    size: <string>rows[i][7]

                });
            }


            return viewModel;
        }

        





    }
}

And my capibilities.json files looks like this:

{
    "dataRoles": [
        {
            "displayName": "Label",
            "name": "label",
            "kind": "Grouping"
        },
        {
            "displayName": "Name",
            "name": "name",
            "kind": "Grouping"
        },
        {
            "displayName": "Quantity",
            "name": "quantity",
            "kind": "Grouping"
        },
        {
            "displayName": "Center",
            "name": "center",
            "kind": "Grouping"
        },
        {
            "displayName": "Route",
            "name": "route",
            "kind": "Grouping"
        },
        {
            "displayName": "Color",
            "name": "color",
            "kind": "Grouping"
        },
        {
            "displayName": "Destination",
            "name": "destination",
            "kind": "Grouping"
        },
        {
            "displayName": "Size",
            "name": "size",
            "kind": "Grouping"
        }
    ],
    "dataViewMappings": [
        {
            "table": {
                "rows": {
                    "select": [
                        {
                            "for": {
                                "in": "label"
                            }
                        },
                        {
                            "for": {
                                "in": "name"
                            }
                        },
                        {
                            "for": {
                                "in": "quantity"
                            }
                        },
                        {
                            "for": {
                                "in": "center"
                            }
                        },
                        {
                            "for": {
                                "in": "route"
                            }
                        },
                        {
                            "for": {
                                "in": "color"
                            }
                        },
                        {
                            "for": {
                                "in": "destination"
                            }
                        },
                        {
                            "for": {
                                "in": "size"
                            }
                        }
                    ]
                }
            }
        }
    ]
}

I tried using ordinal scale to achieve this, but as you can see in the picture above I've only managed to get the rectangles to go as far as possible to the left. How can I achieve this?!!

[v-viig]

If I'm not mistaken you can use CSS Flex Box mode (dislay: flex) to achieve what you need.

Have a look at this article to find out more.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com