¿Alguien ha intentado crear una aplicación Angular2 con visualizaciones de Tableau integradas usando la API de JavaScript de Tableau ?
De acuerdo con la documentación, se supone que debe incluir el siguiente script en su archivo que creará una variable global de tableau :
<script src="https://YOUR-SERVER/javascripts/api/tableau-2.js"></script>
No estoy seguro de cómo acceder a esta variable global dentro de una clase Angular2.
Estoy usando la plantilla ng2-admin y pude integrar correctamente Tableau y Angular2.
Copie este script <script src="https://YOUR-SERVER/javascripts/api/tableau-2.js"></script> en index.html y péguelo dentro de su <body> . Luego copie el código incrustado en cualquiera de los componentes del archivo html dentro de un div.
declare var tableau: any; viz: any;//Inside your component class initViz() { const containerDiv = document.getElementById("vizContainer"); const vizUrl="https://public.tableau.com/views/WorldIndicators/GDPpercapita"; const options = { width: containerDiv.offsetWidth, height: 600, // hideTabs: true, // hideToolbar: true, onFirstInteractive: function (ev) { console.log(ev); } }; if(viz != null) { // viz is undefined on both the first and second page loads - even though second page load throws a 'viz already present' error viz.dispose(); } var viz = new tableau.Viz(containerDiv, vizUrl,options); } ngOnInit() { this.initViz(); }Al declarar la variable global, puede acceder a ella dentro del componente.
Para cualquiera que quiera integrar visualizaciones de Tableau en aplicaciones de Angular, ngx-tableau proporciona una interfaz simple para la API de JavaScript de Tableau.
Tiene múltiples opciones para configurar la conexión a Tableau Server, manejar tickets de autenticación, agregar filtros a los informes y administrar diferentes sitios.
Descargo de responsabilidad: soy el principal colaborador de la biblioteca.