¿Alguien sabe cómo traducir Javascript a TypeScript?

Un usuario Pregunto ✅

surfersamu

Sería genial si alguien pudiera traducir esto:

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

Entonces podríamos usarlo como un objeto visual personalizado.

MawashiKid

Re: ¿Alguien sabe cómo traducir Javascript a TypeScript?

AFAIK no hay herramienta mágica [nor formula…] permitiéndole realmente «revertir el proceso del motor».
Es decir, convertir JavaScript resultado del código transpilado de nuevo a su original Mecanografiado estado.

Primero debes considerar el hecho de que Mecanografiado es un superconjunto de JavaScript, lo que significa que el código original
escribirías en Mecanografiado está destinado a ser transpilado en JavaScript y NO al revés.

Por supuesto, puede intentar modificar el .js extensión a .ts -como se señala en el enlace – y luego refactorice el código manualmente pieza por pieza. Personalmente, preferiría sugerir invertir algo de tiempo en aprender Mecanografiado ya que será una opción mucho más gratificante al final.

RE: d3js-orgchart
Esa es una muestra interesante que vale la pena echarle un vistazo. El código usa php getPositions.php función para generar json pero está bien como resultado … Usé un json simulado y obtuve un resultado similar.

Para ser honesto, realmente no he encontrado muchos componentes personalizados existentes que realmente se acerquen a lo que está buscando, desafortunadamente.

Puedes echarle un vistazo a este TreeViz

Uno que encontré realmente agradable e interesante fue el Árbol de desglose muestra construida durante un concurso.

Sin embargo, parece que el autor pensó que el enfoque de codificación estaba un poco desaprobado y ya no cumplía con los nuevos criterios de PBI Visuals. Por eso ha decidido eliminar contenido de Github. Smiley triste
Lo mismo para otro que se muestra a continuación Árbol de descomposición video. El enlace está roto Smiley triste
Los autores podrían haber dado acceso para que pudiéramos tener un pico bajo el capó. Quién sabe que podemos haber venido con algo donde lo dejaron … De todos modos …

Entonces, en conclusión, cuando se trata de crear una visualización de árbol personalizada, esto nos deja 3 opciones:

La primera opción sería crear un nuevo componente personalizado «todo desde cero» desde cero para recrear una lógica de código similar en Mecanografiado.
Es posible que esa no sea una opción rentable a menos que, por supuesto, se sienta cómodo y sea lo suficientemente competente para combinar Mecanografiado y d3.js.

Segunda opción: tomaría un código d3.js sin procesar existente y realizar modificaciones para adaptarlo a un contexto de Power BI Visuals.
Jon Gallant dio un buen liquidFillGauge ejemplo sobre cómo crear un objeto visual personalizado de Power BI basado en una serie de piezas de d3 Visual 3 existente. Ese es un enfoque básico de datos únicos. Tomar un código d3.js sin procesar de Tree Viz existente le evitaría escribir todo desde cero, aunque el dataViewMapping jerárquico y el cableado de conversión aún pueden requerir un poco más de trabajo …

Tercera opción – es usar Visio herramienta de organigrama prediseñada. Puede que no sea la mejor opción, ya que todavía está en vista previa y solicitará
alojar el archivo de Visio en OneDrive Business o en Servidor de Sharepoint pero aun así es mejor que nada.

surfersamu

En respuesta a MawashiKid

Muchas gracias por señalarme la dirección correcta. Sí, vi esos árboles rotos de la competencia. He estado enviando mensajes pero no recibo respuesta jajaja.

Encontré esto durante el fin de semana:

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

Se ve bastante bien, pero sí, estoy en el proceso de aprender Typecript en este momento.

Voy con la opción 2. Gracias, es un buen recurso para empezar a jugar. ¡Creo que después de ese tutorial probablemente podría modificar ese elemento visual de TreeViz que me diste!

Realmente no puedo usar Vizio porque los datos provienen de una API, por lo que no sería práctico tener que crear diagramas de Vizio y actualizar manualmente el árbol.

Muchas gracias por tu ayuda, te lo agradezco mucho.

Los mantendré informados sobre este árbol de desglose y crearé un repositorio para que otras personas puedan usarlo en el futuro.

v-viig

En respuesta a surfersamu

¿Qué versión de API usas? ¿Ha intentado construir su visual usando API 1.7 (1.8)?

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

surfersamu

En respuesta a v-viig

¿Cómo puedo hacer eso? Cuando clono el repositorio, viene con el derecho de paso V1.5.0. ¿Cómo actualizo la API?

Cuando creo un nuevo proyecto, se crea automáticamente con la versión V1.7.0.

MawashiKid

En respuesta a surfersamu

RE: ¿Cómo hago eso? Cuando clono el repositorio, viene con el derecho de paso V1.5.0. ¿Cómo actualizo la API?
Cuando creo un nuevo proyecto, se crea automáticamente con la versión V1.7.0.

Hola surfersamu,

Esta es una pregunta que me han hecho varias veces y espero que las siguientes instrucciones te ayuden a descifrar algunas cosas.

De forma predeterminada, si ejecuta un

pbiviz nuevo
comando – [I use Visual Studio Code – Integrated Terminal for conviniency]-

esta acción generará un pbiviz plantilla de componente en el más reciente Herramienta CLI Power BI Visauls
versión que instalaste en la zona en su máquina. Una forma rápida de averiguar la versión instalada
es simplemente escribiendo

pbiviz -V

y esto debería mostrar su versión actual. Entonces, si se muestra la última versión v1.7.0 entonces, lógicamente, el proceso de comando debería generar un v1.7.0 plantilla.
Aún así, como mencionó en su caso de muestra, puede haber ocasiones en las que los tutoriales o el contenido de Github NO se han portado a la última versión, pero no se preocupe, aún puede manejarlo fácilmente. Así que básicamente tienes dos opciones aquí.

1- la opción sería intentar portar la anterior v.1.5.0 codificar contenido de muestra a la última v.1.7.0 versión. Ahora no creo que haya grandes cambios en comparación con, digamos, anteriores CORE obsoleto versión o incluso temprano v1.1.0 Versión CLI que utilizó número [1,2] formato como amable parámetros en lugar de cuerda [«Grouping», «Measure»] en dataRoles. Entonces, dependiendo de la cantidad de cambios y sutilezas …, depende de usted decidir si se siente lo suficientemente cómodo para seguir adelante.

Por supuesto, la opción 2 sería clonar la muestra de aplicación existente. En tu caso, si quieres empezar todo desde cero y replicar lo mismo, ocupándote de anteriores v.1.5.0 contenido de muestra de código «tal cual»… entonces eso también se puede hacer en unos pocos pasos menores.

1 – simplemente copie el anterior .api / v1.5.0 contenido de muestra de carpeta en su proyecto.
APIVersion.png

2- asegúrese de modificar los siguientes parámetros en .vscode / setting.json archivo como sigue

Settings01.png
Settings02.png

3- modificar el apiVersion parámetro como se sigue en pbiviz.json archivo de proyecto como sigue.

pbiviz.png

4- finalmente asegúrese de reemplazar los existentes v1.7.0 parámetro de versión con v1.5.0 versión en tsconfig.json archivo como sigue
tsconfig.png

Entonces, a partir de ahí, en cualquier momento paquete pbiviz comando en su proyecto, esto generará un v1.5.0 versión en lugar de v1.7.0. Esto puede permitirle evitar cualquier conflicto de «sutilezas» de versiones en su caso y ser un buen punto de partida para probar y obtener una mano sobre el código de muestra existente, hasta que se sienta lo suficientemente cómodo para seguir adelante.

Espero que esto ayude.

surfersamu

En respuesta a MawashiKid

Gracias por la explicación detallada. Fui con la opción 2 y todavía tengo el mismo error. Intentaré hacerlo de nuevo, tal vez hice algo mal. Tengo que meterme un poco más con esto.

Mientras tanto, he creado un repositorio de github si alguien quiere ayudar:

https://github.com/fsrodriguezm/liquidFillGauge

Seguí el tutorial que me envió y pude hacer que liquidFillGauge funcionara en Microsoft Power BI. Ahora intentaré jugar con el código y al menos intentaré que aparezca un diagrama de árbol simple en Power BI. Si tengo éxito con eso, intentaré alterar el archivo de capacidades e intentar que funcione con los datos que vienen de las tablas.


@surfersamu escribió:

Sería genial si alguien pudiera traducir esto:

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

Entonces podríamos usarlo como un objeto visual personalizado.


@surfersamu

No es un experto en TypeScript, parece que puede hacer eso en Visual Studio, sin embargo, aún se requiere un esfuerzo manual al realizar la conversión, consulte Conversión de código JavaScript existente a TypeScript en Visual Studio. Para obtener un consejo más constructivo, le sugiero que pida ayuda en el foro dedicado de TypeScript.

surfersamu

En respuesta a Eric_Zhang

Sí, estoy escribiendo para encontrar tutoriales sobre cómo hacer gráficos en Power BI, pero solo encontré uno en YouTube con información limitada. 😞

v-viig

En respuesta a surfersamu

Eche un vistazo a esta documentación que cubre la creación de elementos visuales personalizados para Power BI.

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

surfersamu

En respuesta a v-viig

Lo intenté pero cuando pego el código aparece este error:

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

Cuando clono el repositorio de github para SampleBarChart, aparece este error:

 error  UNKNOWN { Error: ENOENT: no such file or directory, open 'C:UsersfrodriguezPower BiPowerBI-visuals-sampleBarChart.apiv1.5.0schema.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' }

Puedo descargar otros gráficos y ejecutarlos, pero son demasiado complejos para que pueda jugar con ellos y tratar de entender el código.

También sigo recibiendo ese error en otros gráficos.

v-viig

En respuesta a surfersamu

@surfersamu ¿Cuál es el nombre de la clase que implementa la interfaz IVisual?

Se debe especificar el mismo nombre de clase en propiedad visualClassName de pbiviz.json.

Ignat Vilesov,

Ingeniero de software

Elementos visuales personalizados de Microsoft Power BI

pbicvsupport@microsoft.com

surfersamu

En respuesta a v-viig

Esto es del archivo pvibiz.json:

"visualClassName": "BarChart"

Esto es del archivo BarChart.ts:

export class BarChart implements IVisual

Parece que todo está correcto. No estoy seguro de por qué sigo recibiendo ese error.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *