Issues pulling dynamic color list in settings from a Categorial Custom Visual

[timseltman]

So I'm wracking my brain on what I am doing wrong. I have a custom visual that I have set up in a categorical design; non-matrix, non-table format. I am pulling from one of the value lists and generating a unique "status" list. I am able to dynamically add the status list as a color picker into the settings tab. However I am having great difficulties pulling the results of the settings color picker if a user changes the color.  When I do a console log, the datapoints list does not appear to update.

        // get groupped values for series
        // statusIndex is the index of values that the status list is generated from.
        const series = categorical.values[statusIndex];

        // iterate all series to generate selection and create button elements to use selections
        let seriesIndex = 0;
        for (let dataSeries of series.values) {

            // create selection id for series

            if (!this.dataPoints.find(element => element.status == dataSeries)) {
                debugger;
                const seriesSelectionId = this.host.createSelectionIdBuilder()
                    .withSeries(categorical.values, series)
                    .createSelectionId();
                let statusColor = this.getColumnColorByIndex(categorical.categories[0],series,seriesIndex,colorPalette,);
                this.dataPoints.push({
                    status: dataSeries as string,
                    color: statusColor,
                    selectionID: seriesSelectionId
                })
            }
            seriesIndex++;
        }
        this.dataPoints.sort((one, two) => (one.status > two.status ? -1 : 1));
        console.log(this.dataPoints);
        this.visualSettings = VisualSettings.parse<VisualSettings>(options.dataViews[0]);

        console.log(this.dataPoints);

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        let objectName: string = options.objectName;
        let objectEnumeration: VisualObjectInstance[] = [];

        switch( objectName ) {
            case "statusColor": {
                if (this.dataPoints) {
                    for (let sColor of this.dataPoints) {
                        objectEnumeration.push({
                            objectName: objectName,
                            displayName: sColor.status,
                            properties: {
                                fillColor: {
                                    solid: {
                                        color: sColor.color
                                    }
                                }
                            },
                            selector: sColor.selectionID.getSelector()
                        });
                    }
                    break;
                }
            }
            default: {
                break;
            }
        }
        if (objectEnumeration.length > 0) {
            return objectEnumeration;
        }
        else {
            return VisualSettings.enumerateObjectInstances(this.visualSettings, options);
        }
    }

And in my capabilities.json

        "statusColor": {
            "displayName": "Status Color",
            "properties": { 
                "fillColor": {
                    "displayName": "Color",
                    "description": "The fill color of the status.",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        },

Because I am dealing with the categorical values and not the categorical categories I figured I would needed to utilize the createSelectionIdBuilder().withSeries function instead of the withCategory function. However when I go into the Power BI website that I am using for testing, and go into the site console, it is showing the selectionId's key is null.

I am not sure how many issues I currently have but any help would be GREATLY appreciated.

Timothy Seltman

[dm-p]

Hi @timseltman,

To generate selection IDs on series rather than categories, you will need to convert your values array to a grouping first with categorical.values.grouped(). This will convert the values into an enumerable that you can iterate and generate the correct selectionId based on the overall group and the current array index.

This is the section of the documentation you'll need to refer to for an example (note the conversion is applied in the first line of the snippet).

Good luck!

Daniel

[timseltman]

I am trying multiple different ways of doing this but I am just not getting this to generate a selectionID.

This is my current itteration of the code using the grouped function. I think my issue is that I have multiple values

        const seriesTest = categorical.values.grouped();
        console.log(seriesTest);

        // iterate all series to generate selection and create button elements to use selections
        for (let i = 0; i < seriesTest.length; i++) {
            debugger;
            let dataSeries: powerbi.DataViewValueColumnGroup = seriesTest[i];
            if (statusIndex > -1 ) {
                let dataValues = dataSeries.values[statusIndex].values;
                const seriesSelectionId = this.host.createSelectionIdBuilder()
                    .withSeries(categorical.values, dataSeries)
                    .createSelectionId();
                for (let index = 0; index < dataValues.length; index++) {
                    let dataValue = dataValues[index];
                    if (!this.dataPoints.find(element => element.status == dataValue)) {
                        let statusColor = this.getColumnColorByIndex(categorical.categories[0],categorical.values[statusIndex],index,colorPalette,);
                        this.dataPoints.push({
                            status: dataValue as string,
                            color: statusColor,
                            selectionID: seriesSelectionId
                        })
                    }                
                }
            }
        };

I have tried and each one is giving me a null result: 

const seriesSelectionId = this.host.createSelectionIdBuilder()
                    .withSeries(categorical.values, dataSeries)
                    .createSelectionId();
const seriesSelectionId = this.host.createSelectionIdBuilder()
                    .withSeries(categorical.values, dataSeries.values[statusIndex])
                    .createSelectionId();
const seriesSelectionId = this.host.createSelectionIdBuilder()
                    .withSeries(categorical.values, categorical.values[statusIndex])
                    .createSelectionId();

 this is my dataview that I am working with:

Values are getting sent to the seriesTest variable.

[dm-p]

Hi @timseltman - it's hard to debug this without seeing the rest of of your code. This first approach looks correct, but I can see that you're doing a check against statusIndex in your for loop, and this branch generates the selection ID. However, this isn't declared in your code block for me to understand what its value might be and whether the condition is being met (could be worth moving your debugger statement to this part of the loop, or step through until you see the branch being hit; I assume it is though).

Can you share your visual's code via GitHub or similar? That way I can check it out and run it locally and see if anything jumps out (and maybe supply a PR if I can fix it).

Many thanks,

Daniel

[dm-p · Accepted solution]

I should also let you know that I have a 'real world' visual I've open-sourced for a course that has this use case as part of its logic, and you can see where I'm doing it here. Not sure if this will help much as it's very heavily refactored, but may give you some ideas if you aren't able to share your visual's code in a repo.

Cheers,

Daniel

[timseltman]

Yea unfortunatly, I cannot post the repo due to work-related reasons. However, this mostly worked for me. It still is not accepting the withSeries() function but I was able to get it to work withcategory() and withMeasure(). I may have to eventually switch to a table format to get it to accept properly.