Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
5 years ago
Solved

What fires the update () method?

Hi,

 

I am developing a pretty simple custom visual but I cannot fully understand what fires the update() method. 

 

I have three data roles and for some strange reason, the update() method is not fired for every field I add to the field pane. It does not seem to be which field I add that causes this issue, it is the order in which I add them. I add a field to the one of the data roles and update() fires. When I add the second field nothing happens. When I then add the third and final field, update() fires again. Could someone help me, I have added the code elements that I think could be relvant below. 

 

As said, it does not seem to matter which field I populate first, it is always the second field that results in "nothing". 

 

I have a feeling that it is my getViewModel that is the issue.

 

capabilities.json

 

 

 

    "dataRoles": [
        {
            "displayName": "KPI Name",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "KPI Value",
            "name": "kpimeasure",
            "kind": "Measure"
        },
        {
            "displayName": "Target Value",
            "name": "targetmeasure",
            "kind": "Measure"
        }
    ],



    "dataViewMappings": [ {
            "conditions": [
                {
                    "category": { "max": 1},
                    "kpimeasure": { "max": 1},
                    "targetmeasure": { "max": 1}
                }
            ],
            "categorical": {
                "categories": { 
                    "for": { "in": "category" },
                    "dataReductionAlgorithm": { "top": {} } 
                },
                "values": {
                    "select": [
                        { "bind": { "to": "kpimeasure" } },
                        { "bind": { "to": "targetmeasure" } }
                    ]
                }
            }
        }
    ]

 

 

 

 

visual.ts

 

 

 

 

public update(options: VisualUpdateOptions) {
        
        this.settings = VisualSettings.parse<VisualSettings>(options.dataViews[0]); 

        let viewModel = this.getViewModel(options);

        let width = options.viewport.width;
        let height = options.viewport.height;

        this.svg.attr("width", width);
        this.svg.attr("height", height);

        let labelbackground = this.labelBackground
            .attr("width", width)
            .attr("height", height * this.labelSectionPercentage)
            .attr("fill", viewModel.labelBackgroundColor);
        debugger;
        let labeltext = this.labelGroup
            .selectAll(".labelText")
            .data(viewModel.dataPoints, d => (d as DataPoint).label)
            .attr("x", width / 2)
            .attr("y", height * this.labelSectionPercentage / 2)
            .attr("alignment-baseline", "middle")
            .attr("text-anchor", "middle")
            .attr("fill", "white")
            .enter()
            .append("text")
            .classed("labelText", true)
            .text(d => d.label);
    



        this.labelGroup
            .selectAll(".labelText")
            .data(viewModel.dataPoints, d => (d as DataPoint).label)
            .exit()
            .remove();


    }

private getViewModel(options: VisualUpdateOptions): ViewModel {

        let dv = options.dataViews;

        let viewModel: ViewModel = {
            dataPoints: [],
            labelBackgroundColor: "none"
        };

        if (!dv
            || !dv[0]
            || !dv[0].categorical
            || !dv[0].categorical.categories
            || !dv[0].categorical.categories[0].source
            || !dv[0].categorical.values
            || !dv[0].metadata)
            
            {
                console.log(dv);
                return viewModel;
            }

        let view = dv[0].categorical;
        let categories = view.categories[0];
        let values = view.values[0];
        let targets = view.values[1];

        for (let i = 0, len = Math.max(categories.values.length, values.values.length, targets.values.length); i < len; i++) {
            viewModel.dataPoints.push({
                label: <string>categories.values[i],
                value: <number>values.values[i],
                target: <string>targets.values[i]
                
            });
        };
        
        viewModel.labelBackgroundColor = "blue"

        return viewModel;
    }

 

 

 

 

  • Hi Anonymous,

    In terms of what causes the developer visual host to call the update method, this is pretty good overview and should help you to understand what events you're calling in your code may set it going outside of anything Power BI might be doing.

    Regards,

    Daniel

3 Replies

  • dm-p's avatar
    dm-p
    Super User

    Hi Anonymous,

    In terms of what causes the developer visual host to call the update method, this is pretty good overview and should help you to understand what events you're calling in your code may set it going outside of anything Power BI might be doing.

    Regards,

    Daniel

  • Anonymous's avatar
    Anonymous
    Not applicable

    Hi again,

     

    I have checked some more, update() is actually firing but something happens inside the getViewModel when I add the second field.

     

    Cheers

  • Anonymous's avatar
    Anonymous
    Not applicable

    HI Anonymous,

    According to your decision, It sounds like you want to further debug with your custom visual update events.
    If that is the case, you can take a look at the following links about update event, debug with custom visual and local storage API(may be used to export the logs) of these helps:

    Visual API#update 

    Local Storage API 

    How to debug Power BI visuals 

    Regards,

    Xiaoxin Sheng