Export to PDF Export to PowerPoint Full Screen /* Hide the Full Screen button for desktop and larger screen devices */ @media (min-width: 768px) { .mobile-only { display: none; } } import { TableauViz, TableauEventType, TableauDialogType } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"; let viz; // Global variable for TableauViz instance document.addEventListener('DOMContentLoaded', initializeViz); function initializeViz() { viz = document.getElementById("tableauViz"); // Get the viz element // Set configuration options viz.style.width = "100%"; viz.style.height = "100%"; viz.hideTabs = true; viz.hideToolbar = true; // Event listener for when the viz becomes interactive viz.addEventListener(TableauEventType.FirstInteractive, () => { console.log('Viz is interactive and ready.'); }); } // Export to PDF document.getElementById('export-pdf').onclick = async () => { try { await viz.displayDialogAsync(TableauDialogType.ExportPDF); } catch (error) { console.error('Error displaying Export PDF dialog:', error); } }; // Export to PowerPoint document.getElementById('export-powerpoint').onclick = async () => { try { await viz.displayDialogAsync(TableauDialogType.ExportPowerPoint); } catch (error) { console.error('Error displaying Export PowerPoint dialog:', error); } }; // Full Screen Functionality with Dark Mode (for mobile only) document.getElementById('zoom-chart').onclick = () => { const tableauContainer = document.getElementById('tableauVizContainer'); const body = document.body; if (!document.fullscreenElement) { tableauContainer.style.display = 'block'; tableauContainer.style.justifyContent = 'center'; tableauContainer.style.alignItems = 'center'; tableauContainer.style.width = '100vw'; tableauContainer.style.height = '100vh'; tableauContainer.style.position = 'absolute'; tableauContainer.style.top = '50%'; tableauContainer.style.left = '50%'; tableauContainer.style.transform = 'translate(-50%, -50%)'; tableauContainer.style.zIndex = '1000'; tableauContainer.style.backgroundColor = '#333'; // Slightly darker background for contrast // Apply dark mode to body background and elements outside the viz body.style.backgroundColor = '#000'; body.style.color = '#fff'; tableauContainer.requestFullscreen().catch((error) => { console.error('Error attempting to enter full screen mode:', error); }); } else { // Exit full-screen and reset to original styles document.exitFullscreen().catch((error) => { console.error('Error attempting to exit full screen mode:', error); }); } }; // Listen for fullscreen change events to reset styles when exiting full-screen document.addEventListener('fullscreenchange', () => { const tableauContainer = document.getElementById('tableauVizContainer'); const body = document.body; if (!document.fullscreenElement) { tableauContainer.style.display = ''; tableauContainer.style.justifyContent = ''; tableauContainer.style.alignItems = ''; tableauContainer.style.width = ''; tableauContainer.style.height = ''; tableauContainer.style.position = ''; tableauContainer.style.top = ''; tableauContainer.style.left = ''; tableauContainer.style.transform = ''; tableauContainer.style.zIndex = ''; tableauContainer.style.backgroundColor = ''; // Reset body background color and text color to original state body.style.backgroundColor = ''; body.style.color = ''; } });
