topic Re: pbiviz package Error in Developer

pbiviz package Error

yf569 — Tue, 27 Aug 2019 11:29:45 GMT

I am trying to add tooltip to my R visual. I tried following some tutorials such as

https://radacad.com/interactive-map-using-r-and-power-bi-create-custom-visual-part-1

https://towardsdatascience.com/custom-html-visuals-in-power-bi-using-r-2b0494894ff

But when I tried 'pbiviz package' in node, I got the following error message. It took me many days but I am still able to find a solution.

Re: pbiviz package Error

yf569 — Tue, 27 Aug 2019 15:45:40 GMT

And it happens even when I do not change anything in the script r file. I've also attached my visual.ts code.

/*
* Power BI Visual CLI
*
* Copyright (c) Microsoft Corporation
* All rights reserved.
* MIT License
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the ""Software""), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
"use strict";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import IViewport = powerbi.IViewport;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import { VisualSettings } from "./settings";
import { ParseElement, ResetInjector, RunHTMLWidgetRenderer } from "./htmlInjectionUtility";

enum VisualUpdateType {
Data = 2,
Resize = 4,
ViewMode = 8,
Style = 16,
ResizeEnd = 32,
All = 62,
}

// below is a snippet of a definition for an object which will contain the property values
// selected by the users
/*interface VisualSettings {
lineColor: string;
}*/

// to allow this scenario you should first the following JSON definition to the capabilities.json file
// under the "objects" property:
// "settings": {
// "displayName": "Visual Settings",
// "description": "Visual Settings Tooltip",
// "properties": {
// "lineColor": {
// "displayName": "Line Color",
// "type": { "fill": { "solid": { "color": true }}}
// }
// }
// }

// in order to improve the performance, one can update the <head> only in the initial rendering.
// set to 'true' if you are using different packages to create the widgets
const updateHTMLHead: boolean = false;
const renderVisualUpdateType: number[] = [
VisualUpdateType.Resize,
VisualUpdateType.ResizeEnd,
VisualUpdateType.Resize + VisualUpdateType.ResizeEnd
];

export class Visual implements IVisual {
private rootElement: HTMLElement;
private headNodes: Node[];
private bodyNodes: Node[];
private settings: VisualSettings;

public constructor(options: VisualConstructorOptions) {
if (options && options.element) {
this.rootElement = options.element;
}
this.headNodes = [];
this.bodyNodes = [];
}

public update(options: VisualUpdateOptions): void {

if (!options ||
!options.type ||
!options.viewport ||
!options.dataViews ||
options.dataViews.length === 0 ||
!options.dataViews[0]) {
return;
}
const dataView: DataView = options.dataViews[0];
this.settings = Visual.parseSettings(dataView);

let payloadBase64: string = null;
if (dataView.scriptResult && dataView.scriptResult.payloadBase64) {
payloadBase64 = dataView.scriptResult.payloadBase64;
}

if (renderVisualUpdateType.indexOf(options.type) === -1) {
if (payloadBase64) {
this.injectCodeFromPayload(payloadBase64);
}
} else {
this.onResizing(options.viewport);
}
}

public onResizing(finalViewport: IViewport): void {
/* add code to handle resizing of the view port */
}

private injectCodeFromPayload(payloadBase64: string): void {
// inject HTML from payload, created in R
// the code is injected to the 'head' and 'body' sections.
// if the visual was already rendered, the previous DOM elements are cleared

ResetInjector();

if (!payloadBase64) {
return;
}

// create 'virtual' HTML, so parsing is easier
let el: HTMLHtmlElement = document.createElement("html");
try {
el.innerHTML = window.atob(payloadBase64);
} catch (err) {
return;
}

// if 'updateHTMLHead == false', then the code updates the header data only on the 1st rendering
// this option allows loading and parsing of large and recurring scripts only once.
if (updateHTMLHead || this.headNodes.length === 0) {
while (this.headNodes.length > 0) {
let tempNode: Node = this.headNodes.pop();
document.head.removeChild(tempNode);
}
let headList: NodeListOf<HTMLHeadElement> = el.getElementsByTagName("head");
if (headList && headList.length > 0) {
let head: HTMLHeadElement = headList[0];
this.headNodes = ParseElement(head, document.head);
}
}

// update 'body' nodes, under the rootElement
while (this.bodyNodes.length > 0) {
let tempNode: Node = this.bodyNodes.pop();
this.rootElement.removeChild(tempNode);
}
let bodyList: NodeListOf<HTMLBodyElement> = el.getElementsByTagName("body");
if (bodyList && bodyList.length > 0) {
let body: HTMLBodyElement = bodyList[0];
this.bodyNodes = ParseElement(body, this.rootElement);
}

RunHTMLWidgetRenderer();
}

private static parseSettings(dataView: DataView): VisualSettings {
return VisualSettings.parse(dataView) as VisualSettings;
}

/**
* This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
* objects and properties you want to expose to the users in the property pane.
*
*/
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions):
VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
}

Re: pbiviz package Error

yf569 — Mon, 02 Sep 2019 09:32:07 GMT

So I got an answer from Microsoft support team. We need to replace NodeListOf with HTMLCollectionOf in visual.ts.

Re: pbiviz package Error

Anonymous — Mon, 23 Sep 2019 20:11:23 GMT

@yf569

Hello, I got the same error as yours but I didn't see any change from your code of changing NodeListOf to HTMLCollectionOf, could you please teach me how to do it?

Thanks.

Re: pbiviz package Error

Anonymous — Mon, 23 Sep 2019 20:13:45 GMT

@yf569 For me I just Ctrl+F to find the NodeListOf and replace with HTMLCollectionOf, is this correct?

Re: pbiviz package Error

dm-p — Mon, 23 Sep 2019 23:36:22 GMT

Hi @Anonymous - this post has the locations in src/visual.ts where the changes need to be applied.

Re: pbiviz package Error

Anonymous — Tue, 24 Sep 2019 00:01:21 GMT

Hi @dm-p ,

I had the same error while running pbiviz package. I followed your instruction and changed NodeListOf by HTMLCollectionOf in visual.ts file. Now I got the following error. I am very new to Power BI and working on fixing this error for the last 2 days. I am glad that I have a new error at this point:). I really appreciate any suggestion of how to fix the error with 'Author_name', "Author_email" and "Visual_Description".pbiviz_error

Thanks in advance.

Re: pbiviz package Error

dm-p — Tue, 24 Sep 2019 00:11:08 GMT

Hi @Anonymous,

You will need to edit pbiviz.json in the root folder of your visual and fill in the following fields:

author.name
author.email
visual.description
visual.supportUrl

These just have to have something in them otherwise the visual will not package correctly. Leila Etaati has an section on this in her blog post, under What is New in 2019 towards the bottom of the article if you need a visual guide.

If you're having trouble after this, add the contents of your pbiviz.json file here (or PM me) and I'll provide you with some examples.

Regards,

Daniel

Re: pbiviz package Error

Anonymous — Tue, 24 Sep 2019 00:21:24 GMT

Hi Daniel @dm-p ,

Thank you so much for your reply. I updated the pbiviz.json file with all the required information. Now I can successfully run pbiviz package command and its created a visual. I was following Leila's youtube video for installing the package. I am glad that now I have her blogpost article. Thanks again. Hopefully, I can work with the visual from now on. I will definitely PM you if anything comes up later.

Thank you so much again and I really appreciate your help.

Best Regards,

Nahar

Re: pbiviz package Error

Anonymous — Tue, 24 Sep 2019 14:51:50 GMT

@dm-p

Hi, thanks for your reply. I just got a new question, I edited the pbiviz.json about author name and email, and I followed the Leilla's blog, it works, but what is the supportUrl and githubUrl part? How can I edit these two parts and create my own plot?

I will be appreciated.

Re: pbiviz package Error

dm-p — Tue, 24 Sep 2019 19:57:37 GMT

Hi @Anonymous

supportUrl and githubUrl are optional, but should be filled out if you submit your visual to the marketplace. You aren't contingent on them for any local development work, particularly if just starting out.

supportUrl is the URL that gets linked in the listing, e.g.:
githubUrl is a place for you to provide a link to your source code, if you want share with people who are interested in exploring your visual's source further, or the custom visuals team to review code if you want to submit for certification.

Both of these can be the same value also, for example, if you host your visual's support documentation in the code repository your source code is contained in. My currently published visuals do this.

Hopefully this clears those questions up.

Regards,

Daniel

Re: pbiviz package Error

Anonymous — Wed, 25 Sep 2019 15:43:53 GMT

@dm-p Hi Daniel,

Thanks so much for your help, my problem was solved successfully.

Appreciated!!

Re: pbiviz package Error

Anonymous — Tue, 24 Mar 2020 15:49:14 GMT

@dm-p @yf569 @Anonymous Hello, I would like to ask you to please help me with this error, as I understand it has to do with the visualPlugin.ts, can you help me fix it. Thank you very much.

Re: pbiviz package Error

dm-p — Tue, 24 Mar 2020 16:40:26 GMT

Hi @Anonymous - this appears to be an issue recently introduced into babel which is one of the dependencies the SDK relies on. None of my visuals will currently build either 😞

I'll try to put together a bug report for the custom visuals team. Will come back if I can find a workaround.

Re: pbiviz package Error

Anonymous — Tue, 24 Mar 2020 16:49:05 GMT

Thank you, I recommend it because I have been looking for an answer for two days and not a survey. Thank you so much

Re: pbiviz package Error

dm-p — Tue, 24 Mar 2020 19:45:07 GMT

Hi @Anonymous - I've raised an issue in their repo. I've also emailed their support with details, so hopefully the visuals team can have a look at it pretty quickly. I've spent the last couple of hours trying to find a solution and can't come up with anything, unfortunately 😞

Re: pbiviz package Error

Anonymous — Wed, 25 Mar 2020 13:33:00 GMT

@dm-p Thank you very much, what you do is very useful, I am pending any solution. Thank you very much you are very kind.

Re: pbiviz package Error

dm-p — Wed, 25 Mar 2020 19:00:05 GMT

No probs! Thanks for flagging initially. There's a new version available now and you should be good if you're just trying to package. However, I can't get the dev server certificate to generate normally, which is a bit of a problem if you use the developer visual for debugging. Here's the issue for that one, and I have a somewhat clunky workaround for that on there.

Re: pbiviz package Error

Anonymous — Wed, 25 Mar 2020 20:40:32 GMT

@dm-p Thank you very much, seriously you are very kind. You know how to make the custom graphic created work with the filters that I have in power bi?

Re: pbiviz package Error

dm-p — Wed, 25 Mar 2020 20:56:39 GMT

Hi @Anonymous - I don't really work with the R-side of things in custom visuals, so I'm not sure I fully understand what you're asking, without additional context. Additionally, this is now becoming a separate discussion, and not fully relevant to this particular resolved topic.

I'm happy to see if I can help, but I would suggest creating a topic specifically for your issue, with as much detail as possible. Please read the following post for more details on how to best do this.

This will also help improve the visibility of your challenge for other users who may be more knowledgeable in the R domain than I am (not many people will typically revisit resolved threads).

Regards,

Daniel