Does anybody know how to translate Javascript to Typescript?

[surfersamu]

It would be awesome if someone could translate this:

https://github.com/BernhardZuba/d3js-orgchart

So we could use it as a custom visual.

[MawashiKid]

Re: Does anybody know how to translate Javascript to Typescript?

AFAIK there's no magical tool [nor formula...] allowing you to really sort of "reverse back the engine process".
That is, converting JavaScript transpilled code result back to it's original TypeScript state.

First you have to consider the fact that TypeScript is a superset of JavaScript, which means that the original code
you would write in TypeScript is meant to be transpiled in JavaScript and NOT the other way around.

You could of course try modifying the .js extension to .ts  -as pointed in the link - and then refactor code manually piece-by-piece. Personally I would rather suggest investing some time learning TypeScript as it will be much more rewarding option in the end.

RE: d3js-orgchart
That's an interesting sample which may worth taking a look at. The code uses php getPositions.php function to generate json but that's okay as result... I used a mock json and came with similar result.

To be honnest, I haven't really found much existing custom components that actually come near to what you're looking for unfortunately.  

You can take a look at this one TreeViz

One which I found real nice and interesting was the Breakdown Tree sample built during a contest.

However it seems the author thought the coding approach was a bit deprecated and no longer met new PBI Visuals criterias. So he has decided to remove content from Github.
Same thing for another one shown in following  Decomposition Tree video.  Link is broken 
Authors could have given access so we could have a peak under the hood. Who jnows we may have come with something where they left off... Anyway...

So in conclusion, when dealing with creating custom Tree viz this leaves us 3 options:

1st option -would be to create a new custom component "all from scratch" from the ground up in order to recreate a similar code logic in TypeScript.
That may not be a profitable options unless of course you're confortable and proficient enough in combining TypeScript and d3.js.

2nd option - would be taking an existing raw d3.js code and bring modification in order to adapt it to a Power BI Visuals context.
Jon Gallant gave a good liquidFillGauge example  on How to Create a Power BI Custom Visual Based on an Existing d3 Visual 3 part series. That's a basic single data approach. Taking an existing Tree Viz raw d3.js code would avoid you writing everything from the ground up though hierarchic dataViewMapping and conversion wiring may still require a bit more work... 

3rd options - is to use Visio pre-built orgchart tool. That may not be the best option as it's still in preview and will request
hosting the Visio file either on OneDrive Business or on Sharepoint Server but still it's better than nothing. 

[surfersamu]

Thank you so much for pointing me to the right direction. Yeah I saw those breakdown trees from the competition. I've been sending messages but I don't get a reply lol.

I found this over the weekend:

https://codepen.io/thebard/pen/WjPQJL

Looks pretty good but yeah I'm in the process of learning Typescript right now.

I'm going with option 2. Thanks thats a good resource for me to start playing around. I think after that tutorial I could probably modify that TreeViz visual you gave me!

I can't really use Vizio because the data is comming from an API so it wouldn't be practical to have to be creating Vizio diagrams and manually updating the tree.

Thank you so much for your help I really appreciate it.

I will keep you guys updated on this breakdown tree and I will create a repo so other people can use it in the future.

[v-viig]

What API version do you use? Have you tried to build your visual using API 1.7 (1.8)?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[surfersamu]

How do I do that? When I clone the repository it comes with V1.5.0 right of way. How do I update the API? 

When I create a new project it's automatically created with version V1.7.0. 

[MawashiKid]

RE: How do I do that? When I clone the repository it comes with V1.5.0 right of way. How do I update the API? 
      When I create a new project it's automatically created with version V1.7.0. 

Hi surfersamu,

This a question I've been asked a few times and hopefully the folllowing instructions will help you unscramble a few things.

By default, if you run a similar

   pbiviz new <pbivisualname>

command - [I use Visual Studio Code - Integrated Terminal for conviniency]-

this action will generate a pbiviz component template in the latest Power BI Visauls CLI tool
version you installed locally on your machine. One quick way to find out the version installed
is simply by typing

   pbiviz -V

and this should display your current version. So if the latest version shows v1.7.0 then logically the command process should generate a v1.7.0 template. 
Still as you mentioned in your sample case,  there maybe occasions where tutorials or Github content may NOT have been ported to the latest version, but don't panic you can still easily manage to cope with that. So basically you have two choices here.

1- option would be trying to port the earlier v.1.5.0 code sample content to the latest v.1.7.0 version. Now I don't believe there are big changes compared to let's say previous CORE deprecated version or even early v1.1.0 CLI version which used number [1,2] format as kind parameters instead of string ["Grouping", "Measure"]  in dataRoles.  So depending on the amount of changes and subtilities..., it's up to you to decide if you feel confortable enough to go forward.

2- option would of course be cloning the exisitng application sample. In your case, if you want to start all from scratch and replicate the same thing, dealing with previous v.1.5.0 code sample content "as-it-is"... then that can also be done in a few minor steps.

1 - simply copy the previous .api/v1.5.0 folder sample content in your project.

2- make sure to modify the following parameters in .vscode/setting.json file as followed

3- modify the apiVersion parameter as followed in pbiviz.json project file as followed.

4- finally make sure to replace existing  v1.7.0 version parameter with v1.5.0 version in tsconfig.json file as followed


So from there, any time you'll run a pbiviz package command in your project, this will generate a v1.5.0  version instead of v1.7.0. This may allow you to avoid any versions "subtilities" conflict in your case and be a good starting point for testing and getting a hand on the existing code sample, till you feel confortable enough to move ahead.

Hope this helps. 

[surfersamu]

Thank you for the detailed explanation. I went with option 2 and still got the same error. I will try to do it again maybe I did something wrong. I have to mess with this a little more.

In the meantime, I have created a github repo if anyone wants to help:

https://github.com/fsrodriguezm/liquidFillGauge

I followed the tutorial you sent me and I was able to get that liquidFillGauge to work on Microsoft Power BI. I will now try to play around with the code and at least try to have a simple tree diagram appear on Power BI. If I'm succesfully with that then I will try to mess with the capabilities file and try to make it work with data comming in from tables.

[Eric_Zhang]

---

@surfersamu wrote:

It would be awesome if someone could translate this:

https://github.com/BernhardZuba/d3js-orgchart

So we could use it as a custom visual.

---

@surfersamu

Not an expert on Typescript, it seems your can do that in Visual studio, however manual effort is still required when converting, see Converting existing JavaScript code to TypeScript in Visual Studio. For more constructive advice, I'd suggest your ask help from the dedicated Typescript forum.

[surfersamu]

Yea I'm tyring to find tutorials on how to do graphics on Power BI but I've only found one on youtube with limited information 😞

[v-viig]

Please take a look at this documentation that covers creating custom visuals for Power BI.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[surfersamu]

I tried it but when I paste the code I get this error:

TYPESCRIPT  /visualPlugin.ts : (8,147) Property 'Visual' does not exist on type 'typeof demo49B92E39CFB047F59CF0F0DEF084AE31'.

When I clone the github repo for the SampleBarChart I get this error:

 error  UNKNOWN { Error: ENOENT: no such file or directory, open 'C:\Users\frodriguez\Power Bi\PowerBI-visuals-sampleBarChart\.api\v1.5.0\schema.stringResources.json'
    at Error (native)
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\user1\\Power Bi\\PowerBI-visuals-sampleBarChart\\.api\\v1.5.0\\schema.stringResources.json' }

I can download other graphics and run them but they are way too complex for me to mess with them and try to understand the code.

I keep getting that error on other graphics as well.

[v-viig]

@surfersamu What is name of class that implements IVisual interface?

The same class name should be specified in visualClassName property of pbiviz.json.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[surfersamu]

This is from the pvibiz.json file:

"visualClassName": "BarChart"

This is from the BarChart.ts file:

export class BarChart implements IVisual

Looks like everything is correct. Not sure why I keep getting that error.