Problems with host.colorPalette not picking theme colors

[Anonymous]

Hello community,

I am trying to implement colors in my custom visual. So far it is looking really good, however I have troubles with the coloring.

Everything works fine, if the visual is added, while no filter on projects is active:

Project A will have color 1, Project B will have color 2 and so on. After that I can filter for Project B and it will stay color 2.

The problem: 
If I add my visual while there is an active filter on projects somewhere in the dashboard (e.g. only show project B), my visual will assign color 1 to Project B, while all other visuals pick the according color 2 for the Project B. 

I tried the same behaviour with Microsoft's visuals and they can pick the correct color, even when added with an active filter.

Does anybody have an idea what could cause this?
Thanks in advance!

THE CODE IN THIS POST IS OLD, PLEASE CHECK MY NEXT REPLY

I am using categorical dataViewMappings with grouping by project (old):

  "dataRoles": [
    {
      "displayName": "Date",
      "name": "date",
      "kind": "Grouping"
    },
    {
      "displayName": "Milestones",
      "name": "milestones",
      "kind": "Measure"
    },
    {
      "displayName": "Project Name",
      "name": "project",
      "kind": "Grouping"
    }
  ],
  "dataViewMappings": [
    {
      "categorical": {
        "categories": {
          "for": {
            "in": "date"
          }
        },
        "values": {
          "group": {
            "by": "project",
            "select": [
              {
                "for": {
                  "in": "milestones"
                }
              }
            ]
          }
        }
      }
    }
  ]

I am getting the colors like this (old):

let projects = dataViews[0].categorical.values.grouped();
host.colorPalette.reset();
projects.forEach(p => {
    const project = {
        name: p.name.toString(),
        milestones: [],
        colorLine: host.colorPalette.getColor(p.name.toString()).value),
        selectionId: host.createSelectionIdBuilder().withSeries(dataViews[0].categorical!.values!, p).createSelectionId()
    };
    // do something with project
}

[Anonymous]

I had to update my dataViewMappings to support more columns. It now looks like this:

  "dataRoles": [
    {
      "displayName": "Reporting Date",
      "name": "date",
      "kind": "Grouping"
    },
    {
      "displayName": "Milestone Date",
      "name": "milestoneDate",
      "kind": "Measure"
    },
    {
      "displayName": "Milestone Name",
      "name": "milestone",
      "kind": "Grouping"
    },
    {
      "displayName": "Project Name",
      "name": "project",
      "kind": "Grouping"
    }
  ],
  "dataViewMappings": [
    {
      "categorical": {
        "categories": {
          "select": [
            {
              "for": {
                "in": "date"
              }
            },
            {
              "for": {
                "in": "project"
              }
            },
            {
              "for": {
                "in": "milestone"
              }
            }
          ]
        },
        "values": {
          "for": {
            "in": "milestoneDate"
          }
        }
      }
    }
  ]

and setting the selectionId like this:

const values = dataViews[0].categorical.values[0].values;
const col_project = dataViews[0].categorical.categories[index_project];

//...

values.forEach((value, i) => {
  //...
  project[index].selectionId = host.createSelectionIdBuilder().withCategory(col_project, i).createSelectionId();
  //...
}

Unfortunately the problem from my previous post persists.

Furthermore, when selecting a category by clicking on it in my legend all other visuals notice a selection, but all categories in those visuals getting "unhighlited" / half-transparent, as if a category which doesnt exists is selected. I must be doing something wrong while creating the selction?

Selecting via onClick:

host.createSelectionManager().select(viewModel.projects[i].selectionId);

Again, thank you for any pointers of code examples 🙂