Trying to filter data in custom visual

[Anonymous]

Good evening,

I'm relatively new to Power BI and want to create a filter for my data in my custom visual so my data will be updated in every other visual/slicer on the same page. Right now I have this d3 graph with a click event on an edge which gives me an array of slection ids. These ids I am passing to the selectionManager and select them. The result is highlighted data in every other visual, but how can i create a filter out of this selection (like a filter I get from a slicer).

Code (summarized)

capabilities.json:

"dataRoles": [
        {
            "displayName": "Aktivität",
            "name": "activity",
            "kind": "Grouping"
        },
        {
            "displayName": "Aktivitäts-ID",
            "name": "activityid",
            "kind": "Grouping"
        },
        {
            "displayName": "Fall-ID",
            "name": "caseid",
            "kind": "Grouping"
        },
        {
            "displayName": "Variante",
            "name": "path",
            "kind": "Grouping"
        },
        {
            "displayName": "Zeitstempel",
            "name": "timestamp",
            "kind": "Grouping"
        }
    ],
    "dataViewMappings": [
        {
            "table":{
                "rows": {
                    "select": [
                        {
                            "for": { "in": "caseid"}
                        },
                        {
                            "for": { "in": "activity"}
                        },
                        {
                            "for": { "in": "activityid"}
                        },
                        {
                            "for": { "in": "path"}
                        },
                        {
                            "for": { "in": "timestamp"}
                        }
                    ],
                    "dataReductionAlgorithm": {
                      "top": {
                          "count": 500000
                      }
                    }
                }
            }
        }
    ],

visual.ts:

interface EventLogdata {
        activityid: any,
        activity: string,
        caseid: any,
        path: string,
        timestamp: any,
        selectionID: ISelectionId;
    }

------------------------------------------

function getSelectionIds(dataView: DataView, host: IVisualHost): ISelectionId[] {
        return dataView.table.identity.map((identity: DataViewScopeIdentity) => {
            const categoryColumn: DataViewCategoryColumn = {
                source: dataView.table.columns[1],
                values: null,
                identity: [identity]
            };

            return host.createSelectionIdBuilder()
                .withCategory(categoryColumn, 0)
                .createSelectionId();
        });
    }
-------------------------------------------

function visualTransform(options: VisualUpdateOptions, host: IVisualHost): FlowchartViewModel {
...
...
        let tableSelectionId: ISelectionId[] = getSelectionIds(dataViews[0],host);

...
...
for (let i = 0; i < rows.length; i++) {
            eventlogData.push({
                activityid: rows[i][index_activityid],
                activity: <string>rows[i][index_activity],
                caseid: rows[i][index_caseid],
                path: <string>rows[i][index_path],
                timestamp: valueFormatterUK.format(rows[i][index_timestamp]),
                selectionID: tableSelectionId[i],
            });
        }

------------------------------

public update(options: VisualUpdateOptions, edge) {

d3.selectAll("g.edgePath, .edgeLabel").on("click", function(e) { 
      
                   let selectionIdArray = PSEUDO: this is my array with the selected selection ids

                    selectionManager.select(selectionIdArray, true);
                }
            });

}

[v-viig · Accepted solution]

Hello @Anonymous,

At first you should add the filter option into capabilities.json:

"objects": {
    "general": {
        "displayName": "General",
        "properties": {
            "filter": {
                "type": {
                    "filter": true
                }
            }
        }
    }
}

As a final step you should call selectionManager.applySelectionFilter() after calling selectionManager.select.

Could you please apply the necessary changes to your code base and let us know if that works well?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

Hey @v-viig,

this works perfectly! Thank you