SelectionIds are incorrect - table data view mapping

[giammariam]

I have a custom visual that is a combination of a line chart and Gantt. I am using table data view mapping. I'm using .withTable() to generate my selectionIds. Each datapoint is given its own selectionId. Each Gantt time-series block is made up of multiple datapoints. For each block, the individual selectionIds are stored in an array. When I select a block (see second screenshot below), the correct number of datapoints are selected in external visuals, but the data points themselves are incorrect. For example: Item 1, Phase 2 is selected and is made up of 161 datapoints, but the table has datapoints selected that are for different items and phases. There's probably something pretty obvious that I'm missing, but I'm not sure what it is.

If anyone is willing to take a look, shoot me a message and I'll send you my code and a demo .pbix.

Thanks!

Here is my code that generates the selectionIds and stores them in each time-series block.

 private static getGanttDataPoints(options: VisualUpdateOptions, highlights: powerbi.PrimitiveValue[], viewModel: IViewModel, host: IVisualHost): IGanttDataPoint[] {
        let rows: powerbi.DataViewTableRow[] = options.dataViews[0].table.rows;
        let fieldIndices: IFieldIndices = viewModel.fieldIndices;

        let ganttDataPoints: IGanttDataPoint[] =
            rows.map((d: powerbi.DataViewTableRow, i: number) => ({
                axes: +this.rowToDataRoleValue(rows[i], fieldIndices.axisIndex),
                ganttItem: this.rowToDataRoleValue(rows[i], fieldIndices.ganttItemIndex),
                ganttLegend: this.rowToDataRoleValue(rows[i], fieldIndices.ganttLegendIndex),
                ganttBlock: this.rowToDataRoleValue(rows[i], fieldIndices.ganttBlockLabelIndex),
                ganttItemSort: +this.rowToDataRoleValue(rows[i], fieldIndices.ganttItemSortIndex),
                ordinalSeries: null,
                selectionId: host.createSelectionIdBuilder()
                    .withTable(options.dataViews[0].table, i)
                    .createSelectionId(),
                identityIndices: i,
                start: null,
                end: null,
                color: null
            }))
                .sort((a: IGanttDataPoint, b: IGanttDataPoint) => a.ganttItem.localeCompare(b.ganttItem) || +a.axes - +b.axes);

        //get the ordinalseries values
        ganttDataPoints
            .forEach((d: IGanttDataPoint, i: number, s: IGanttDataPoint[]) => {
                if (i === 0) { //first row gets ordinalseries = 1 
                    d.ordinalSeries = 1;
                } else if (s[i - 1].ganttItem === d.ganttItem //if current row has the same ganttitem and ganttlegend as previous row, give it the same ordinalseries
                    && s[i - 1].ganttLegend === d.ganttLegend) {
                    d.ordinalSeries = s[i - 1].ordinalSeries;
                } else { //otherwise increase the ordinalseries by 1
                    d.ordinalSeries = s[i - 1].ordinalSeries + 1;
                }
            });

        //reduce the dataset into time-series blocks
        //populate remaining datapoints
        ganttDataPoints = ganttDataPoints
            .reduce((blocks: IGanttDataPoint[], ganttData: IGanttDataPoint, i: number, s: IGanttDataPoint[]) => {
                if (!blocks[ganttData.ordinalSeries]) {
                    ganttData.start = <number>ganttData.axes
                    ganttData.end = max(ganttDataPoints.filter((d: IGanttDataPoint) => +d.ordinalSeries === +ganttData.ordinalSeries).map((d: IGanttDataPoint) => <number>d.axes))
                    ganttData.axes = <number[]>s.filter((d: IGanttDataPoint) => +d.ordinalSeries === +ganttData.ordinalSeries).map((d: IGanttDataPoint) => d.axes)
                    ganttData.identityIndices = <any>s.filter((d: IGanttDataPoint) => +d.ordinalSeries === +ganttData.ordinalSeries).map((d: IGanttDataPoint) => d.identityIndices)
                    ganttData.selectionId = <any>s.filter((d: IGanttDataPoint) => +d.ordinalSeries === +ganttData.ordinalSeries).map((d: IGanttDataPoint) => d.selectionId)
                    ganttData.color = ganttData.ganttLegend ? viewModel.legendItems.gantt.filter((l: IGanttLegendItem) => l.legendItem === ganttData.ganttLegend)[0].color : viewModel.settings.colorSelector.ganttColor0
                    blocks[ganttData.ordinalSeries] = ganttData;
                }
                return blocks;
            }, [])
            .filter((d, i) => i != 0); //above reduce starts with an empty array, remove 

        return ganttDataPoints;
    }

 @v-viig, 

[v-rzhou-msft]

Hi @giammariam 

I think you can try Group function between two visuals. Just select two visuals, right click and select Group. Then you can combine two visuals as one.

Best Regards,
Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[giammariam]

Thanks. The line and gantt is one custom visual.