How to use host services? | SelectionManager - Visual Interactions

az2451 — Mon, 26 Mar 2018 14:58:27 GMT

Hello 🙂

I was trying to assign Selection Ids to each data point and got an error message that says:

(168,19) Cannot find name 'host'.

I marked line 168 below in red. By the way i was using this Tutorial

Did i forgot something?

Here is my full code:

module powerbi.extensibility.visual {
	
/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {number} value             - Data value for point.
 * @property {string} category          - Corresponding category of data value.
 * @property {string} color             - Color corresponding to data point.
 * @property {ISelectionId} selectionId - Id assigned to data point for cross filtering
 *                                        and visual interaction.
 */
 
	// Eingabevariablen-Deklaration (mit Datentyp)
	export interface items {
		
		counter: number;
		totalValue: string;
		selectionId: ISelectionId;

	}

	// Visual-Klasse (erbt Superklasse IVisual)
	export class Visual implements IVisual {
		
		private host: IVisualHost;
		private selectionManager: ISelectionManager;
		
		private svg: d3.Selection<SVGElement>; // SVG-Element (Container) Deklaration
		private g: d3.Selection<SVGElement>; // SVG-Element (group "g") Deklaration
		private margin = {top: 20, right: 20, bottom: 30, left: 40}; // Definiert Ränder innerhalb der Sandbox (oben,rechts,unten,links)

		// Konstruktor dient der Auflösung von Objekten anhand der Klasse "Visual"
		constructor(options: VisualConstructorOptions) {
    
			// Initialisiere svg-Grafiken; Wende Datenpunkte als SVG-Elemente an und diese als group "g"
			this.svg = d3.select(options.element).append('svg'); // SVG-Element (Container)
			this.g = this.svg.append('g'); // Die SVG-Grafik soll gruppiert, also wie ein einzelnes Bild dargestellt/behandelt werden (append("g"))
			
			this.host = options.host;
			this.selectionManager = options.host.createSelectionManager();
		
		}

		// Die "Main-Methode", hier finden Objekt-Instanziierungen, Festsetzen von Attribut-Eigenschaften, Erzeugung von SVG-Grafiken etc. statt
		public update(options: VisualUpdateOptions) {
			
			// Spricht das jeweilige Objekt (Datenpunkt) an
			var _this = this;

			// Höhen- und Breitenattribute des SVG-Containers
			_this.svg
				.attr({
					height: options.viewport.height,
					width: options.viewport.width
				});
			
			// Definiert Breite des Visuals innerhalb der Sandbox (Ränder werden abgezogen)  
			var gHeight = options.viewport.height
				- _this.margin.top
				- _this.margin.bottom;
			
			// Definiert Höhe des Visuals innerhalb der Sandbox (Ränder werden abgezogen)
			var gWidth = options.viewport.width
				- _this.margin.right
				- _this.margin.left;
			
			// Festsetzen von Höhen- und Breitenattributen der SVG-Grafik
			_this.g
				.attr({height: gHeight, width: gWidth})
				.attr('transform','translate(' + _this.margin.left + ',' + _this.margin.top + ')'); // Definiert Koordinatensystem ausgehend von oben links mit Einbezug der Ränder
			
			// Ruft Konstruktor auf, erzeugt Objekte ("dat") und konvertiert das Datenformat anhand der "converter"-Methode
			var dat =
				Visual.converter(options.dataViews["0"].table.rows);
				
			// Skalenbreite x-Achse
			var x = d3.scale.linear()
				.range([ 0, gWidth ]) // Definiert die numerische Skalenbreite der x-Achse (vom Ausgangspunkt bis zur Visual-Länge)
				.domain([d3.min(dat, function(d) { return parseInt(d.totalValue); }), d3.max(dat, function(d) { return parseInt(d.totalValue); })]); // Trägt jeden Wert für die x-Achse ein
				
			// Skalenhöhe y-Achse
			var y = d3.scale.linear()
				.range([ gHeight, 0 ]) // Definiert die numerische Skalenhöhe der y-Achse (von der maximalen Höhe bis zum Ausgangspunkt)
				.domain([0, d3.max(dat, function (d) { return d.counter })]); // Trägt jeden Wert für die y-Achse ein

			// Entferne bereits existierende Achsen und Elemente
			_this.svg.selectAll('.axis').remove();
			_this.svg.selectAll('.bar').remove();

			// Erzeugt eine SVG-Grafik (x-Achse)
			var xAxis = d3.svg.axis()
				_this.g
				.append('g')
				.attr("class", "x axis")
				.attr("transform", "translate(0," + gHeight + ")") // Definiert das Koordinatensystem von 0 bis maximale Höhe
				.call(d3.svg.axis().scale(x).orient("bottom"));	// Zeichnet anhand der Breite der Variable x eine horizontale nach unten ausgerichtete Linie

			// Erzeugt eine SVG-Grafik (y-Achse)
			var yAxis = d3.svg.axis()
				_this.g
				.append('g')
				.attr("class", "y axis")
				.call(d3.svg.axis().scale(y).orient("left")); // Zeichnet anhand der Höhe der Variable y eine vertikale nach links ausgerichtete Linie

			// Erzeugt eine SVG-Grafik mit Datenpunktelementen
			var shapes = _this.g
				.append('g')
				.selectAll('.bar') // Da hier nur ".bar", kann es für beliebige Punkte Elemente einfügen (anders wie bei "rect.bar" -> Platz wird reserviert)
				.data(dat); // Nimmt die Objekte/Elemente, welche existieren auf

			shapes.enter() // Kombiniert die leeren Felder aus ".selectAll" mit ".data" und erstellt ein Set aus Elementen, auf diese man einzeln zugreifen kann
				.append('circle') // Definiert den Visualisierungstyp
				.attr("r", 5) // Definiert den Radius
				.attr('class', 'bar') // Klasse "bar"
				.attr('fill', 'green') // Koloriert die Elemente mit einem vorgegebenen Farbcode
				.attr('stroke', 'black') // Setzt Rahmen für jedes Element des Visualisierungtyps
				.attr('cx', function (d) {return x(parseInt(d.totalValue));}) // Trennt die Elemente voneinander auf horizonteler Ebene
				.attr('cy', function (d) {return y(d.counter);}); // Trennt die Elemente voneinander auf vertikaler Ebene

			shapes
				.exit()
				.remove();
		}

		public destroy(): void {
			
			//TODO: Perform any cleanup tasks here
			
		}

		// Konvertiert Daten wie folgt: ["Japan",100],["America",300], ... --> [{"Country" : "Japan",   "Cost" : 100},{"Country" : "America", "Cost" : 300}, ... ]
		public static converter(rows: DataViewTableRow): items[] {
			
			var resultData: items[] = [];

			for (var i = 0; i < rows.length; i++) {
				var row = rows[i];
				resultData.push({
					totalValue: row[0],
					counter: row[1],
					selectionId: host.createSelectionIdBuilder()
						.withCategory(row[0], i)
						.createSelectionId()
				});
			}
			
			return resultData;
			
		}
		
	}
   
}

I would be very thankful for any help.

Re: How to use host services? | SelectionManager - Visual Interactions

v-chuncz-msft — Tue, 27 Mar 2018 10:27:21 GMT

@az2451,

If convenient, share a complete project for a quick test. You may take a good look at Sample Bar Chart Repo.

Re: How to use host services? | SelectionManager - Visual Interactions

v-viig — Tue, 27 Mar 2018 14:28:14 GMT

The static converter method must accept a host object as an argument:

public static converter(rows: DataViewTableRow, host): items[] {

var dat = Visual.converter(options.dataViews["0"].table.rows, this.host);

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

topic Re: How to use host services? | SelectionManager - Visual Interactions in Developer

How to use host services? | SelectionManager - Visual Interactions

Re: How to use host services? | SelectionManager - Visual Interactions

Re: How to use host services? | SelectionManager - Visual Interactions