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;
}
