Forum Discussion
Add tooltip to custom visual
Good afternoon! Please help me develop the Power BI visual element. I can't add a popup tooltip (rendering another page). Please look at my code and suggest changes or provide links to simple example...
public update(options: VisualUpdateOptions) {
let dataView: DataView = options.dataViews[0];
let width: number = options.viewport.width;
let height: number = options.viewport.height;
this.svg.attr("width", width);
this.svg.attr("height", height);
this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);
this.visualSettings.rect.rectThickness = Math.max(0, this.visualSettings.rect.rectThickness);
this.visualSettings.rect.rectThickness = Math.min(100, this.visualSettings.rect.rectThickness);
this.rect
.style("fill", this.visualSettings.rect.rectColor)
//.style("stroke", "red")
.style("stroke-width", this.visualSettings.rect.rectThickness)
.attr("x", 10)
.attr("y", 1)
.attr("width", width - 20)
.attr("height", height - 20)
let fontSizetextLabel: number = Math.min(width, height) / 7;
function green_and_red(val: number๐ string {
let my_color = 'red';
if (val > 1) {
my_color = 'green'
}
else {
my_color = 'red'
}
return my_color
}
function razryad(val: number, onPersent: boolean๐ string {
let zhach: string = "";
if (val > 0) {
zhach = 'โฒ'
}
else {
zhach = 'โผ'
}
let mym: number = 0;
let per: string = ""
if (onPersent === false) {
mym = 1
}
else {
mym = 100
per = '%'
}
let two_val = val * mym
let new_v = zhach + " " + (two_val).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + per
return new_v
}
function razryadn(val: number๐ string {
let x: number = Math.round(val)
let new_v = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
var parts = val.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
return parts.join(".")
}
let my_arry = dataView.categorical.values.map(values)
this.textValue_sub
.text(razryadn(my_arry[1][1]))
//.text('ValueCenter')
.attr("x", "50%")
.attr("y", "30%")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
//.attr('fill', green_and_red(my_arry[0][1]))
.style("font-size", this.visualSettings.rect.sizeCenterValue + "px");
this.textValue_sub_left
.text(razryad(my_arry[0][1], this.visualSettings.rect.QQQRightValuewww))
//.text('ValueLeft')
.attr("x", "30%")
.attr("y", "70%")
.attr("dy", "0.35em")
.attr("format", "")
.attr("text-anchor", "middle")
.attr('fill', green_and_red(my_arry[0][1]))
.style("font-size", this.visualSettings.rect.sizeLeftValue + "px");
this.textValue_sub_right
.text("ะบ ัะฐะบัั")
.attr("x", "70%")
.attr("y", "70%")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.style("font-size", this.visualSettings.rect.sizeRightValue + "px");
this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),
(tooltipEvent: TooltipEventArgs<number>) => Visual.getTooltipData(tooltipEvent.data),
(tooltipEvent: TooltipEventArgs<number>) => tooltipEvent.data[0]);
}
private static getTooltipData(value: any๐ any {
return [{
displayName: value.category,
value: value.value.toString(),
color: value.color
}];
}
}
Hi power_bi_dev
Without pulling your code into a solution it's quite difficult to see what might be going wrong.
Have you seen the custom visual samples that Microsoft provide on GitHub?
https://github.com/microsoft?q=powerbi-visuals&type=&language=typescript
One of these (Sample Bar Chart) has notes on adding report page tooltips.
https://github.com/microsoft/PowerBI-visuals-sampleBarChart/blob/master/Tutorial/ReportPageTooltips.md
Hopefully the code examples might point you in the right direction.
I've seen these articles. But I can't understand why I don't have tooltips pop up