Corporate Strategy Dashboard Corporate Strategy Dashboard Visualizing strategic goals, market position, and financial health. Strategic Overview Initiative Tracker SWOT Analysis Data Configuration YTD Revenue Growth 0% Net Profit Margin 0% Market Share 0% Customer Acquisition Cost $0 Quarterly Revenue ($M) Market Share by Product Download Overview as PDF Strategic Initiatives Progress SWOT Analysis Strengths Weaknesses Opportunities Threats Configure Dashboard Data Edit the JSON data below and click "Save & Update Dashboard" to apply changes. Ensure the JSON format is valid. Financial & Market Data Strategic Initiatives Data SWOT Analysis Data Save & Update Dashboard Previous Next Owner: ${i.owner} ${i.progress}% `).join(''); }; const renderSwot = () => { const { strengths, weaknesses, opportunities, threats } = toolState.data.swot; elements.swotStrengths.innerHTML = strengths.map(s => `${s}`).join(''); elements.swotWeaknesses.innerHTML = weaknesses.map(w => `${w}`).join(''); elements.swotOpportunities.innerHTML = opportunities.map(o => `${o}`).join(''); elements.swotThreats.innerHTML = threats.map(t => `${t}`).join(''); }; const populateConfigData = () => { elements.configFinancials.value = JSON.stringify(toolState.data.financials, null, 2); elements.configInitiatives.value = JSON.stringify(toolState.data.initiatives, null, 2); elements.configSwot.value = JSON.stringify(toolState.data.swot, null, 2); }; // --- DATA CONFIGURATION LOGIC --- const saveConfiguration = () => { try { const newFinancials = JSON.parse(elements.configFinancials.value); const newInitiatives = JSON.parse(elements.configInitiatives.value); const newSwot = JSON.parse(elements.configSwot.value); toolState.data.financials = newFinancials; toolState.data.initiatives = newInitiatives; toolState.data.swot = newSwot; renderAll(); elements.configMessage.textContent = 'Successfully saved and updated!'; elements.configMessage.className = 'mt-4 text-center text-green-600'; } catch (error) { elements.configMessage.textContent = `Error: Invalid JSON format. Please check your data. (${error.message})`; elements.configMessage.className = 'mt-4 text-center text-red-600'; } setTimeout(() => { elements.configMessage.textContent = ''; }, 5000); }; // --- PDF EXPORT LOGIC --- const downloadPDF = async () => { const { jsPDF } = window.jspdf; const content = elements.dashboardContentArea; if (!content) return; document.body.classList.add('pdf-export'); await new Promise(resolve => setTimeout(resolve, 100)); const canvas = await html2canvas(content, { scale: 2, useCORS: true, logging: false, backgroundColor: '#f9fafb' }); document.body.classList.remove('pdf-export'); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [canvas.width, canvas.height] }); pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height); pdf.save('Corporate-Strategy-Overview.pdf'); }; // --- INITIALIZATION --- const renderAll = () => { renderOverviewKPIs(); renderOverviewCharts(); renderInitiatives(); renderSwot(); }; const init = () => { elements.prevBtn.addEventListener('click', () => navigateTabs(-1)); elements.nextBtn.addEventListener('click', () => navigateTabs(1)); elements.saveConfigBtn.addEventListener('click', saveConfiguration); elements.downloadPdfBtn.addEventListener('click', downloadPDF); renderAll(); populateConfigData(); updateNavButtons(); }; init(); });