topic Re: Custom Visual : Properties (Color picker) in Developer

Custom Visual : Properties (Color picker)

MichielVA — Thu, 06 Jun 2019 12:32:16 GMT

Hi all,

I have created a small and simple custom visual using pbiviz.

It all works great, but I'm having a minor issue with the custom formatting options I added.

So, one possibility I added is to change the two colors that are used in the visual, "Color OK", "Color NOK".

Almost everything works:

1) they are shown in the formatting pane and I can change them

2) the default colors that I set in the settings.ts file are used

However, one weird thing I see is the following.

In the formatting pane, as default they are always shown as grey (see picture I attached).

Although the default colors are green and red and these are the ones that are actually shown in the visual.

Part of the capabilities.json code:

    "objects":
    {
        "colors":{
            "displayName": "Data Colors",
            "properties": {
                "colorOK": {
                    "displayName": "Color OK",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "colorNOK": {
                    "displayName": "Color NOK",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        },

Part of the settings.ts code where defaults were set:

    export class VisualSettings extends DataViewObjectsParser {
      public colors: ColorSettings = new ColorSettings();
    }

     export class ColorSettings {
       // Default colors
       public colorOK : string = "green";
       public colorNOK : string = "red";
     }

Part of the visual.ts code:

        public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
            const settings: VisualSettings = this.visualSettings || VisualSettings.getDefault() as VisualSettings;
            return VisualSettings.enumerateObjectInstances(settings, options);
        }

Re: Custom Visual : Properties (Color picker)

Anonymous — Thu, 22 Aug 2019 11:15:23 GMT

Hi. I am facing the same issue. Did you manage to solve it?

Re: Custom Visual : Properties (Color picker)

MichielVA — Thu, 22 Aug 2019 11:26:11 GMT

Hi @Anonymous ,

I have spent some hours trying to find a solution.

But I'm sad to say I wasn't able to solve it.

If you find something :), you can always let me know.

Re: Custom Visual : Properties (Color picker)

jppp — Thu, 22 Aug 2019 11:47:51 GMT

Hi @MichielVA , @Anonymous ,

If you add the following line of code to the update method, it will set the visual this.ettings variable to either the default colors or the values from the formatting pane.

this.visualSettings = VisualSettings.parse(dataView) as VisualSettings

And in the rest of the code you can refer to this.settings to get the configured colors.

-JP

Re: Custom Visual : Properties (Color picker)

Anonymous — Thu, 22 Aug 2019 12:36:12 GMT

Hi @jppp-.

I have that method in my code:

    private static parseSettings(dataView: DataView): VisualSettings {
        return VisualSettings.parse(dataView) as VisualSettings;
    }

Also the enumerate object instances method:

    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] {
        let objectName: string = options.objectName;
        let objectEnumeration: VisualObjectInstance[] = [];
        switch( objectName ) {
            case 'colorPicker':
                objectEnumeration.push({
                    objectName: objectName,
                    properties: {
                        "firstColor":{
                            "type": {
                                "fill": {
                                    "solid": {
                                        "color": this.viewModel.minColor
                                    }
                                }
                            }
                        },
                        "secondColor":{
                            "type": {
                                "fill": {
                                    "solid": {
                                        "color": this.viewModel.midColor
                                    }
                                }
                            }
                        },
                        "thirdColor":{
                            "type": {
                                "fill": {
                                    "solid": {
                                        "color": this.viewModel.maxColor
                                    }
                                }
                            }
                        }
                    },
                    selector: null
                });
                break;
        };
    
        return objectEnumeration;
    }

And at the beginnning of my visualTransform method (takes VisualUpdateOptions and updates the viewmodel):

    public visualTransform(options: VisualUpdateOptions){

        this.viewModel = {
            dataPoints: [],
            dataIndex: {},
            dataMin: 0,
            dataMax: 1,
            highlighted: true,
            categoryName: '',
            minColor: this.settings.colorPicker.firstColor,
            midColor: this.settings.colorPicker.secondColor,
            maxColor: this.settings.colorPicker.thirdColor
        };

more code

And my objects element in capabilites json:

 "objects": {
        "colorPicker": {
            "displayName": "Gradient",
            "properties": {
                "firstColor":{
                    "displayName" : "Min value",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "secondColor":{
                    "displayName" : "Mid value",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "thirdColor":{
                    "displayName" : "Max value",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        }
    }

Basically, I can use the three color pickers and the visual gets updated with the selected color... but the app updates the color to gray in the selector (it does display the selected color for a bit amount of time, and the switches back to gray).

My version of API is 2.6.0.

Thanks for your help

Re: Custom Visual : Properties (Color picker)

jppp — Thu, 22 Aug 2019 12:55:16 GMT

Hi @Anonymous,

Do you call the parseSettings also in the update method?

The enumerateObjectInstances is only called when the formatting pane is used and not by the main code of the visual.

And the configured state of the formatting pane is being stored in the options.dataView object that is a parameter of the update method. That is why you have to parse the settings from the dataView in the update method as each change in the formatting pane will trigger that method.

-JP

Re: Custom Visual : Properties (Color picker)

Anonymous — Thu, 22 Aug 2019 12:59:02 GMT

Hi @jppp ,

firstly thanks for your prompt response 🙂

Here goes my update method. Second line is the call to visual.parseSettings.

    public update(options: VisualUpdateOptions) {
        let self = this;
        self.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);        
        self.visualTransform(options);
        self.svg.selectAll('path').each(self.updateHandler());
        self.fitSVGtoViewPort(options.viewport.width, options.viewport.height);
    }

Could it be related with the fact that selector is null when declaring the objectEnumeration?

Regards

Jorge

Re: Custom Visual : Properties (Color picker)

jppp — Thu, 22 Aug 2019 13:09:52 GMT

Hi @Anonymous ,

Looks like the colors are 'static' and not related to any data, so you can keep you enumerateObjectInstances method pretty simple like this:

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
    const settings: VisualSettings = this.visualSettings || VisualSettings.getDefault() as VisualSettings;
    return VisualSettings.enumerateObjectInstances(settings, options);
}

And define in your VisualSettings the default colors of your three colors. Probably you have to set them in the format #RRGGBB to let enerything work.

-JP

Re: Custom Visual : Properties (Color picker)

Anonymous — Thu, 22 Aug 2019 13:17:23 GMT

Hi @jppp

It worked 🙂 I can confirm after replacing the code now the selector is working as expected.

Thanks very much for your support

Jorge