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

}