Interaction manager custom classic skin

#1

Hello, I’m developing an app with react and I’m using toolkit for the data visualization, the problem is when I apply a filter, the filter in the Interaction manager looks too different from the styles that my app uses in general, is there a way to modify each of the UI components of a filter in the IM?

#2

Well, if you use the classic skin yes, it is possible, check the classic skin styles configuration, you can set the styles of each component like this:


.set("skin", {
  type: 'classic',
  imContainer: {
    style: 'display: grid; grid-template-columns: auto 100px;'
  },
  filters: {
      containerStyle: 'grid-row: 1; grid-column: 1',
      filterToggle: 'border-radius: 0px;box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);border: 2px dashed #69f0ae;',
      filterName: 'border-radius: 0px;box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);border: 2px dashed #ffea00;background: linear-gradient(90deg, rgba(255,235,59,1) 0%, rgba(255,152,0,1) 47%, rgba(198,255,0,1) 100%);',
      filterOperation: 'border-radius: 0px;box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);border: 2px dashed #ff1744;',
      filterValues: 'border-radius: 0px;box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);border: 2px dashed #00bfa5;'
  },
  trash: {
    containerStyle: 'grid-column: 2'
  }
})
#3

I more or less understand how it works, it doesn’t seem complicated at all, I had the idea that maybe it was possible only with the classic skin but I see that it is also possible with the modern skin

#4

Yes you can, just remember that you cannot create the NOT IN version of the filter with the modern skin

#5

I See, yes you have the reason, and thaks for your help.