Forum Discussion

power_bi_dev's avatar
power_bi_dev
Frequent Visitor
6 years ago

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...
Need Help
Tips and Tricks
power_bi_dev's avatar
power_bi_dev
Frequent Visitor
6 years ago
interface BarChartDataPoint {
    value: PrimitiveValue;
    category: string;
    color: string;
    strokeColor: string;
    strokeWidth: number;
    selectionId: ISelectionId;
}


interface VisualTooltipDataItem {
    displayName: string;
    value: string;
    color?: string;
    header?: string;
    opacity?: string;
}

import { createTooltipServiceWrapper, TooltipEventArgs, ITooltipServiceWrapper } from "powerbi-visuals-utils-tooltiputils";

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

export class Visual implements IVisual {
    // ...
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private rect: Selection<SVGElement>
    private textValue_sub: Selection<SVGElement>;
    private textValue_sub_left: Selection<SVGElement>;
    private textValue_sub_right: Selection<SVGElement>;
    private visualSettings: VisualSettings;
    private barContainer: Selection<SVGElement>;

    private tooltipServiceWrapper: ITooltipServiceWrapper;
    private g: Selection<SVGElement>;

    constructor(options: VisualConstructorOptions) {
        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.tooltipService, options.element);

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

    }

    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions๐Ÿ˜ž VisualObjectInstanceEnumeration {
        const settings: VisualSettings = this.visualSettings || <VisualSettings>VisualSettings.getDefault();
        return VisualSettings.enumerateObjectInstances(settings, options);
    }
  • power_bi_dev's avatar
    power_bi_dev
    Frequent Visitor
    6 years ago
       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
            }];
        }

    }