cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Frequent Visitor

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 examples. Official documentation didn't help me/

{
    "dataRoles": [
        {
            "displayName""Categories",
            "name""category",
            "kind""Grouping"
        },
        {
            "displayName""Measures",
            "name""measure",
            "kind""Measure"
        },
        {
            "displayName""Series",
            "name""series",
            "kind""Measure"
        }
    ],
    "tooltips": {
        "supportedTypes": {
            "default"true,
            "canvas"true
        },
        "roles": [
            "tooltips"
        ]
    },
    "objects": {
        "rect": {
            "displayName""Заливка",
            "properties": {
                "rectColor": {
                    "displayName""Color",
                    "description""The fill color of the circle.",
                    "type": {
                        "fill": {
                            "solid": {
                                "color"true
                            }
                        }
                    }
                },
                "rectThickness": {
                    "displayName""Толщина рамки",
                    "description""The circle thickness.",
                    "type": {
                        "numeric"true
                    }
                },
                "sizeCenterValue": {
                    "displayName""Размер шрифта Центр",
                    "description""Размер шрифта центрального значения",
                    "type": {
                        "numeric"true
                    }
                },
                "sizeLeftValue": {
                    "displayName""Размер шрифта Левое",
                    "description""Размер шрифта левое значения",
                    "type": {
                        "numeric"true
                    }
                },
                "sizeRightValue": {
                    "displayName""Размер шрифта Правое",
                    "description""Размер шрифта левое значения",
                    "type": {
                        "numeric"true
                    }
                },
               
                "QQQRightValuewww": {
                    "displayName""Преобразовать в %",
                    "type": {
                        "bool"true
                    }
                }
            }
        }
    },
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in""category"
                    }
                },
                "values": {
                    "group": {
                        "by""series",
                        "select": [
                            {
                                "for": {
                                    "in""measure"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]
}
4 REPLIES 4
Highlighted
Frequent Visitor

Re: Add tooltip to custom visual

interface BarChartDataPoint {
    valuePrimitiveValue;
    categorystring;
    colorstring;
    strokeColorstring;
    strokeWidthnumber;
    selectionIdISelectionId;
}


interface VisualTooltipDataItem {
    displayNamestring;
    valuestring;
    color?: string;
    header?: string;
    opacity?: string;
}

import { createTooltipServiceWrapperTooltipEventArgsITooltipServiceWrapper } from "powerbi-visuals-utils-tooltiputils";

import * as d3 from "d3";
import { values } from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<Tanyanyany>;

export class Visual implements IVisual {
    // ...
    private hostIVisualHost;
    private svgSelection<SVGElement>;
    private containerSelection<SVGElement>;
    private rectSelection<SVGElement>
    private textValue_subSelection<SVGElement>;
    private textValue_sub_leftSelection<SVGElement>;
    private textValue_sub_rightSelection<SVGElement>;
    private visualSettingsVisualSettings;
    private barContainerSelection<SVGElement>;

    private tooltipServiceWrapperITooltipServiceWrapper;
    private gSelection<SVGElement>;

    constructor(optionsVisualConstructorOptions) {
        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circleCard'true);
        this.container = this.svg.append("g")
            .classed('container'true);
        this.rect = this.container.append("rect")
            .classed("rect"true);
        this.textValue_sub = this.container.append("text")
            .classed("textValue_sub"true);
        this.textValue_sub_left = this.container.append("text")
            .classed("textValue_sub_left"true);
        this.textValue_sub_right = this.container.append("text")
            .classed("textValue_sub_left"true);

        this.host = options.host;


        this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipServiceoptions.element);

        this.barContainer = this.svg
            .append('g')
            .classed('barContainer'true);

    }

    public enumerateObjectInstances(optionsEnumerateVisualObjectInstancesOptions😞 VisualObjectInstanceEnumeration {
        const settingsVisualSettings = this.visualSettings || <VisualSettings>VisualSettings.getDefault();
        return VisualSettings.enumerateObjectInstances(settingsoptions);
    }
Highlighted
Frequent Visitor

Re: Add tooltip to custom visual

   public update(optionsVisualUpdateOptions) {
        let dataViewDataView = options.dataViews[0];
        let widthnumber = options.viewport.width;
        let heightnumber = 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(0this.visualSettings.rect.rectThickness);
        this.visualSettings.rect.rectThickness = Math.min(100this.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 fontSizetextLabelnumber = Math.min(widthheight) / 7;

        
        function green_and_red(valnumber😞 string {
            let my_color = 'red';
            if (val > 1) {
                my_color = 'green'
            }
            else {
                my_color = 'red'
            }
            return my_color
        }

        function razryad(valnumberonPersentboolean😞 string {
            let zhachstring = "";

            if (val > 0) {
                zhach = '▲'
            }
            else {
                zhach = '▼'
            }

            let mymnumber = 0;
            let perstring = ""

            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(valnumber😞 string {
            let xnumber = 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'),
            (tooltipEventTooltipEventArgs<number>) => Visual.getTooltipData(tooltipEvent.data),
            (tooltipEventTooltipEventArgs<number>) => tooltipEvent.data[0]);




    }


    private static getTooltipData(valueany😞 any {
        return [{
            displayName: value.category,
            value: value.value.toString(),
            color: value.color
        }];
    }

}
Highlighted
Resolver II
Resolver II

Re: Add tooltip to custom visual

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....

Hopefully the code examples might point you in the right direction.

Highlighted
Frequent Visitor

Re: Add tooltip to custom visual

I've seen these articles. But I can't understand why I don't have tooltips pop up

Helpful resources

Announcements
May 2020 Community Highlights

May 2020 Community Highlights

It’s time for another PBI Community recap!

Community Blog

Community Blog

Visit our Community Blog for articles, guides, and information created by fellow community members.

Using the Community

Using the Community

Need help with the Power BI Community? Our 'Using the Community' support articles are a great place to start.

Galleries

Galleries

Looking for inspiration on how to present your data? Need instructional videos? Check out our Galleries!