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 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"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]
}
Need Help
Tips and Tricks

4 Replies

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

      }