topic Re: Add tooltip to custom visual in Developer

Add tooltip to custom visual

power_bi_dev — Sat, 27 Jun 2020 20:13:07 GMT

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"

}

]

}

]

}

Re: Add tooltip to custom visual

power_bi_dev — Sat, 27 Jun 2020 20:15:03 GMT

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

}

Re: Add tooltip to custom visual

power_bi_dev — Sat, 27 Jun 2020 20:15:29 GMT

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

}];

}

Re: Add tooltip to custom visual

Anonymous — Tue, 30 Jun 2020 10:13:39 GMT

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.

Re: Add tooltip to custom visual

power_bi_dev — Wed, 01 Jul 2020 07:54:44 GMT

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