Custom visual retaining dynamic fill colors for supplemental data

[timseltman]

I am in the middle of developing a categorical custom visual where I have different status; but they are not the primary data for the visual. These are a supplemental data value. As such the status' are grouped with the primary data. However I am trying to color code the data based off of the status. Using the 5.1 API, I have been able to generate a dynamic color fill list based on the statuses used in the data by adding a SelectionID associated with the Status measure querryName. The issue though is if the view changes, the color may not hold.

It appears that the fill object gets held along with the value for the status measure. Currently I am adding the status to an array, the first time the status shows up. I then send that array to the dynamic settings. But if the view changes and the first status shows up later in the data, the default color changes.

I am thinking I need some form of global array, but I am not sure if that is the correct way to somehow save group status information; or if the color changes, to somehow change all of the data. If anyone can shed some light on how to retain colors even if they are not being saved, I would be most appreciated.

Edit: As an example, I am posting this to show what I mean. I am wanting to make it so that no matter what happens, the colors hold their value.

[AlekseiSemenov]

Hello, can you please address your question to pbicvsupport@microsoft.com email? Team responsible for custom visuals development will try to help you there. 

[SriHarshAmur]

From the image provided, the colors of the data seem to match the values supplied in the formatting pane. Is this not the desired behavior? Are you manually changing those colors in the formatting pane or does it happen p[programmatically? 

[timseltman]

No, I'm not manually changing the colors. Power BI is changing the colors automatically. This is the problem. I don't know how to stop Power BI from automatically changing the colors when I modify the filters.

In my example, the top picture shows "In Progress" status as light purple for Cat 5 and Cat 6. Because there are two "In Progress" statuses listed, I am using the first instance of "In Progress" to populate the other "In Progress" status.

When I changed the slicer in the middle table, it did not filter out Cat 5 and Cat 6, so Power BI did not update the colors.

However, if I change the slicer to filter out Cat 5, there is now just one instance of "In Progress", and instead of using the original light-purple color, Power BI selects a random color (orange in this example), for Cat 6 "In Progress" color.

Power BI should retain the light-purple color for "In Progress". Not select a random color.

How can you get colors selectors to stick for status in custom visuals?

[SriHarshAmur]

Are you making use of the Color Pallete Service from Power BI? I personally have not used this but I can provide a solution that does not use this.

I am assuming you have default colors for each status in the settings.ts file. It might look something like

export class StatusColors {
  public completed: string = "";
  public inAnalysis: string = "";
  public inProgress: string = "";
}

export class VisualSettings extends DataViewObjectParser {
  public statusColors: StatusColors = new StatusColors();
}

Using these, since there are only 3 possible values for status, you can simply check the type of status for a data point and assign it the color.

import { StatusColors } from "./settings"
class Visual implements IVisualHost {
  .
  .
  .
  public update (options: VisualUpdateOptions) {
    this.visualSettings = VisualSettings.parse(options.dataViews[0])

    // while rendering the color of the category, you can use the status to get the colors associated with that status
    // for example, assuming data[] has all the information
    let html = ""
    for (let dataPoints in data) {
      const status = dataPoints.status;
      const color = this.getColor(status);
      html += `
        <div>
          <div>
            ${status}
          </div>
          <div style={"color": ${color}}>
            ${color}
          </div>
        </div>
      `
    }
  }

  private getColor(status: string) {
    const statusColors: StatusColors = this.visualSettings.statusColors;
    switch(status) {
      case 'completed': return statusColors.completed
      case 'inAnalysis': return statusColors.inAnalysis
      case 'inProgress': return statusColors.inProgress
      default: return statusColors.completed
    }
  }
  .
  .
  .
} 

[timseltman]

Thank you, but the status may change, I just provided those three as examples. We may not know what the status are, and users should select a color for each status, and Power BI should hold* that status regardless of what filters are applied. Is there a way to do this same thing, but with dynamic status values?