private addValueCells()

in src/UXClient/Components/Grid/Grid.ts [157:238]
73 lines of code
6 McCabe index (conditional complexity)

    private addValueCells () {
        let rowData = this.getRowData();
        let rows = this.table.selectAll('.tsi-gridContentRow').data(rowData);
        let self = this;
        let allTimeStampMap = this.filteredTimestamps.reduce((tsMap, ts) => {
            tsMap[ts] = {};
            return tsMap;
        }, {});

        let headerCellData = this.filteredTimestamps;

        let rowsEntered = rows.enter()
            .append('tr')
            .classed('tsi-gridContentRow', true)
            .each(function(d, i) {
                let aggKey = d[0];
                let splitBy = d[1];
                let seriesData = self.convertSeriesToGridData(allTimeStampMap, self.chartComponentData.timeArrays[aggKey][splitBy]);
                let cells = d3.select(this).selectAll<HTMLTableCellElement, any>('.tsi-valueCell').data(seriesData);
                let measuresData = self.chartOptions.spMeasures ? self.chartOptions.spMeasures : self.chartComponentData.displayState[aggKey].splitBys[splitBy].types;

                //Row header with the name of the series
                let headerCell = d3.select(this).selectAll<HTMLTableCellElement, any>('tsi-rowHeaderCell').data([d]);
                
                let getRowHeaderText = (d) => {
                    return `${self.chartComponentData.displayState[aggKey].name}${(splitBy !== '' ? (': ' + splitBy) : '')}`;
                }

                headerCell.enter()  
                    .append('td')
                    .attr("tabindex", 1)
                    .merge(headerCell as d3.Selection<HTMLTableCellElement, any, any, unknown>)
                    .attr('class', (d, col) => `tsi-rowHeaderCell ${self.cellClass(i + 1, 0)}`)
                    .on("keydown", (d, col) => {self.arrowNavigate(d3.event, i + 1, 0)})
                    .attr('aria-label', d => {
                        return `${self.getString('row header for')} ${Utils.stripNullGuid(getRowHeaderText(d))}`;
                    })
                    .each(function (d) {
                        d3.select(this).select('*').remove();
                        let container = d3.select(this).append('div').attr('class', 'tsi-rowHeaderContainer');
                        let seriesName = container.append('div')
                            .attr('class', 'tsi-rowHeaderSeriesName');
                        Utils.appendFormattedElementsFromString(seriesName, getRowHeaderText(d));
                        let measureContainer = container.append('div')
                            .attr('class', 'tsi-rowHeaderMeasures');

                        let measureNames = measureContainer.selectAll('.tsi-measureName').data(measuresData);
                        measureNames.enter()
                            .append('div')
                            .attr('class', 'tsi-measureName')
                            .text((d: any) => d);
                    })
                headerCell.exit().remove();

                cells.enter()
                    .append('td')
                    .merge(cells as d3.Selection<HTMLTableCellElement, any, any, unknown>)
                    .attr('class', (d, col) => `tsi-valueCell ${self.cellClass(i + 1, col + 1)}`)
                    .on("keydown", (d, col) => {self.arrowNavigate(d3.event, i + 1, col + 1)})
                    .attr("tabindex", 1)
                    .attr('aria-label', (d: any, i) => {
                        if (!d.measures || Object.keys(d.measures).length === 0) {
                            return `${self.getString('no values at')} ${getRowHeaderText(d)} and ${self.getFormattedDate(new Date(headerCellData[i]))}`; 
                        }
                        let formattedValues = Object.keys(d.measures).map((measureName) => {
                            return `${measureName}: ${d.measures[measureName]}`;
                        }).join(', ');
                        return `${self.getString('values for cell at')} ${getRowHeaderText(d)} ${self.getString('and')} ${self.getFormattedDate(d.dateTime)} ${self.getString('are')} ${formattedValues}`;
                    })
                    .each(function (d: any, i) {      
                        let measures = d3.select(this).selectAll('.tsi-measureValue').data(measuresData);
                        measures.enter()
                            .append('div')
                            .attr('class', 'tsi-measureValue')
                            .text((measure: string) => d.measures ? d.measures[measure] : '');
                        measures.exit().remove(); 
                    });
                cells.exit().remove();
            });

        rowsEntered.exit().remove();
    }