public render()

in src/UXClient/Components/Grid/Grid.ts [240:307]
61 lines of code
9 McCabe index (conditional complexity)

	public render(data: any, options?: any, aggregateExpressionOptions?: any, chartComponentData: ChartComponentData = null) {
        data = Utils.standardizeTSStrings(data);
        this.chartOptions.setOptions(options);
        this.gridComponent = d3.select(this.renderTarget);
        if (chartComponentData) {
            this.chartComponentData = chartComponentData;
        } else {
            this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(data, aggregateExpressionOptions);
        }

        this.setFilteredTimestamps();

        super.themify(this.gridComponent, this.chartOptions.theme);        

        this.gridComponent
            .classed("tsi-gridComponent", true)
            .classed("tsi-fromChart", !!options.fromChart)
		var grid = this.gridComponent
			.append('div')
			.attr("class", "tsi-gridWrapper")
			.attr("tabindex", 0)
			.on("click", () => { 
				if (this) {
					this.focus(0,0);
				} 
            });
            
		var headers = Object.keys(data.reduce((p,c) => {
			Object.keys(c).forEach(k => {
				if(k != this.rowLabelKey && k != this.colorKey)
					p[k] = true;
			})
			return p;
        }, {})).sort();

        if (!this.table) {
            this.table = grid.append('table').classed('tsi-gridTable', true);
            this.tableHeaderRow = this.table.append('tr').classed('tsi-gridHeaderRow', true);
            this.tableHeaderRow.append('th')
                .attr("tabindex", 0)
                .attr("class", "tsi-topLeft " + this.cellClass(0,0))
                .on("keydown", () => {this.arrowNavigate(d3.event, 0, 0)})
                .attr("aria-label", `${this.getString('A grid of values')} - ${this.getString('Use the arrow keys to navigate the values of each cell')}`)
        }

        this.addHeaderCells();
        this.addValueCells();

        if (this.chartOptions.fromChart) {
            this.gridComponent.selectAll('.tsi-closeButton').remove();
            this.closeButton = grid.append('button')
                .attr("class", "tsi-closeButton")
                .attr('aria-label', this.getString('close grid'))
                .html('&times')
                .on('keydown', () => {
                    if (d3.event.keyCode === 9) {
                        this.focus(0, 0);
                        d3.event.preventDefault();
                    }
                })
                .on("click", () => {
                    if(!!options.fromChart) {
                        Utils.focusOnEllipsisButton(this.renderTarget.parentNode);
                        this.gridComponent.remove();
                    }
                });
        } 
    }