Forum Discussion
Does anybody know how to translate Javascript to Typescript?
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. :smileysad:
Same thing for another one shown in following Decomposition Tree video. Link is broken :smileysad:
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.
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.
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
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.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 -Vand 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 followed3- 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.
