Dynamic Legend Color - Format Pane

[Paulhaha]

Hi everyone,

Today I want to reach your help to resolve a problem I face since several days.

What I'm trying to do is to have a dynamic "Format Pane" allowing me to have a ColorPicker for each of my distinct categories.

I've managed to do something but the problem is that every time the update function is called (so every time I change a color in the pane) it resets the colors and so it's impossible to recover the user's selection.

Here are a few code snippets from my project to help you understand my logic:

In the update method:

export interface Legend {
    category: powerbi.PrimitiveValue;
    color: string
}

// let uniqueLegend = ["A", "B", "C"]

uniqueLegend.forEach((legend, i) => {
            const color = colorPalette.getColor(legend).value
            DataLegend.push({
                category: legend,
                color
            })
        })

this.formattingSettings.populateColorSelector(DataLegend)

In the formatting settings:

class ColorSelectorCardSettings extends Card {
    name: string = "colorSelector";
    displayName: string = "Data Colors";
    slices = [];
}

export class VisualFormattingSettingsModel extends FormattingSettingsModel {
    // Create formatting settings model formatting cards
    generalSettings = new ColorSelectorCardSettings();

    cards = [this.generalSettings];

    populateColorSelector(dataPoints: Legend[]) {
        const slices: formattingSettings.ColorPicker[] = this.generalSettings.slices;
        
        dataPoints.forEach(d => {
            // console.log(d.category)
            slices.push(new formattingSettings.ColorPicker({
                name:"fill",
                displayName: d.category.toString(),
                value: {value:d.color}
            }))
        })
    }
}

What I'd like, and what I can't yet figure out how to do, is to be able to have this property pane display as many colorpickers as there are different values in my uniqueLegend array.

What's more, the behavior I'd like to see is for me to be able to store these values for later use in my visual without them being reset every time the update function is called (I guess the logic isn't to make sure that the values don't reset every time the update method is called, but you get the idea, so that I can have a dynamic and functional pane format).

Could someone help me out and clarify the use of dynamic pane formats depending on the data?

Thanks in advance 🙂

[dm-p]

Hi @Paulhaha,

This is quite a big question to sort out, made slightly more complicated that (a) your data role/mapping information from your capabilities isn't supplied and (b) I haven't tried this yet with the new formatting model, so I can't provide a working example.

However, the one thing that sticks out is that you're not adding anything to the properties pane with a suitable selector in the object, which means that it doesn't map to the data point where you're interested in styling. Selectors are how Power BI reconciles interactivity and properties to your data. Power BI will apply the selected value to the specified location in the data view if a valid selector is supplied when adding a property to the pane. Once this has been applied, it's a case of knowing where to read it out when processing your view model.

The following may help you get moving:

• Information on creating selectors is documented here. Typically, for legend-type scenarios, you will have a categorical mapping with a 'series' role mapped in your data view. An example of how to create a selection ID from this setup is documented here, lower down on the page.
• Information on the selector in the properties pane is documented here.
• The sample bar chart has an example for assignment by data value, with the selector property here. You should be able to track this back to the selector generation to see a more complete example.

Good luck!

Daniel

[Paulhaha]

Hey @dm-p , and thank you very much for you answer.

I watched the documentation you provided and I think I start to understand the mechanism by retro-engineering the sample bart chart 😌

However, I still have a problem adapting the methods used in the sample bar chart since:

• My data role/mapping is for a table
• I use table mapping to be able to collect all the data without aggregation (GroupingOrMeasure or just Grouping)
• The aim of the visual is to display X/Y coordinates and be able to diffentiate points using a legend field. (so should I, as you mentioned, create a selection for series instead of a selection fortable? )

Here are the code uploaded on github:

• capabilities.json
• settings.ts
• visual.ts

I can't find out a solution to adapte the method getColumnColorByIndex() to a table data view.

I think it's the key for my problem, as this method to either selects the default color from the color palette or either select the color from the object properties (which are defined by the user and populating the format pane)

Do you have any recommendations (or documentation) on how I could adapt this method to cover my needs?

Thank you very much and I wish you a nice day 😃