No sales data available.

'; return; } // Aggregate data by month const monthlyData = d3.rollup(salesData, v => d3.sum(v, d => d.salesAmount), d => d3.timeFormat("%Y-%m")(new Date(d.saleDate)) // Group by YYYY-MM ); const chartData = Array.from(monthlyData, ([month, revenue]) => ({ month: d3.timeParse("%Y-%m")(month), revenue })).sort((a, b) => a.month - b.month); const margin = { top: 20, right: 30, bottom: 50, left: 60 }; const width = monthlyRevenueChartContainer.clientWidth - margin.left - margin.right; const height = monthlyRevenueChartContainer.clientHeight - margin.top - margin.bottom - 30; // Account for title height const svg = d3.select(monthlyRevenueChartContainer) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // X scale (Time scale for months) const x = d3.scaleTime() .domain(d3.extent(chartData, d => d.month)) .range([0, width]); // Y scale (Linear scale for revenue) const y = d3.scaleLinear() .domain([0, d3.max(chartData, d => d.revenue) * 1.1]) // 10% buffer .range([height, 0]); // Line generator const line = d3.line() .x(d => x(d.month)) .y(d => y(d.revenue)); // Add X axis svg.append("g") .attr("class", "axis x-axis") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); // Add Y axis svg.append("g") .attr("class", "axis y-axis") .call(d3.axisLeft(y).tickFormat(d3.format("$,.0s"))); // Format as currency, compact // Add the line path svg.append("path") .datum(chartData) .attr("class", "line") .attr("d", line); // Tooltip const tooltip = d3.select("body").append("div") .attr("class", "chart-tooltip") .style("opacity", 0); // Add dots for each data point svg.selectAll(".dot") .data(chartData) .enter().append("circle") .attr("class", "dot") .attr("cx", d => x(d.month)) .attr("cy", d => y(d.revenue)) .attr("r", 5) .on("mouseover", function(event, d) { d3.select(this).attr("r", 7).style("fill", "orange"); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`Month: ${d3.timeFormat("%Y-%m")(d.month)}
Revenue: $${d.revenue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("r", 5).style("fill", "steelblue"); tooltip.transition() .duration(500) .style("opacity", 0); }); } /** * Renders a bar chart of revenue by product category using D3.js. */ function renderRevenueByCategoryChart() { if (!revenueByCategoryChartContainer) { console.error('Error: revenueByCategoryChartContainer not found.'); return; } // Clear previous chart, but keep the title div const chartSvg = revenueByCategoryChartContainer.querySelector('svg'); if (chartSvg) { chartSvg.remove(); } if (salesData.length === 0) { revenueByCategoryChartContainer.innerHTML = '

No sales data available.

'; return; } // Aggregate data by product category const categoryData = d3.rollup(salesData, v => d3.sum(v, d => d.salesAmount), d => d.productCategory); const chartData = Array.from(categoryData, ([category, revenue]) => ({ category, revenue })).sort((a, b) => b.revenue - a.revenue); const margin = { top: 20, right: 20, bottom: 40, left: 60 }; const width = revenueByCategoryChartContainer.clientWidth - margin.left - margin.right; const height = revenueByCategoryChartContainer.clientHeight - margin.top - margin.bottom - 30; // Account for title height const svg = d3.select(revenueByCategoryChartContainer) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // X scale const x = d3.scaleBand() .domain(chartData.map(d => d.category)) .range([0, width]) .padding(0.1); // Y scale const y = d3.scaleLinear() .domain([0, d3.max(chartData, d => d.revenue) * 1.2]) // 20% buffer .range([height, 0]); // Add X axis svg.append("g") .attr("class", "axis x-axis") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); // Add Y axis svg.append("g") .attr("class", "axis y-axis") .call(d3.axisLeft(y).tickFormat(d3.format("$,.0s"))); // Format as currency, compact // Tooltip const tooltip = d3.select("body").append("div") .attr("class", "chart-tooltip") .style("opacity", 0); // Add bars svg.selectAll(".bar") .data(chartData) .enter().append("rect") .attr("class", "bar") .attr("x", d => x(d.category)) .attr("y", d => y(d.revenue)) .attr("width", x.bandwidth()) .attr("height", d => height - y(d.revenue)) .attr("fill", "steelblue") .on("mouseover", function(event, d) { d3.select(this).attr("fill", d3.rgb("steelblue").darker(0.5)); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`Category: ${d.category}
Revenue: $${d.revenue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("fill", "steelblue"); tooltip.transition() .duration(500) .style("opacity", 0); }); } // --- PDF Download Function --- /** * Generates and downloads a PDF of the current dashboard content. */ window.downloadPdf = async function() { if (!dashboardTab) { console.error('Error: Dashboard tab content not found for PDF generation.'); return; } // Temporarily hide elements not needed in PDF const elementsToHide = document.querySelectorAll('.tab-nav, .nav-buttons, #downloadPdfButton, .chart-tooltip'); elementsToHide.forEach(el => el.style.display = 'none'); // Ensure the dashboard tab is active for capture dashboardTab.classList.add('active'); // Capture summary metrics const summaryCanvas = await html2canvas(document.querySelector('.summary-metrics'), { scale: 2, useCORS: true, logging: false }); const summaryImgData = summaryCanvas.toDataURL('image/png'); // Capture monthly revenue chart const monthlyRevenueChartCanvas = await html2canvas(monthlyRevenueChartContainer, { scale: 2, useCORS: true, logging: false }); const monthlyRevenueChartImgData = monthlyRevenueChartCanvas.toDataURL('image/png'); // Capture revenue by category chart const revenueByCategoryChartCanvas = await html2canvas(revenueByCategoryChartContainer, { scale: 2, useCORS: true, logging: false }); const revenueByCategoryChartImgData = revenueByCategoryChartCanvas.toDataURL('image/png'); // Re-show hidden elements immediately after capture elementsToHide.forEach(el => el.style.display = ''); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); let yOffset = 40; // Add title to PDF pdf.setFontSize(22); pdf.text("Dundas Dashboard Report", pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 20; // Add current date/time to PDF pdf.setFontSize(10); pdf.text(`Generated on: ${new Date().toLocaleString()}`, pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 40; // Add Summary Metrics Image pdf.setFontSize(18); pdf.text("Summary Metrics", pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 10; const summaryImgHeight = (summaryCanvas.height * (pdfWidth - 40)) / summaryCanvas.width; pdf.addImage(summaryImgData, 'PNG', 20, yOffset, pdfWidth - 40, summaryImgHeight); yOffset += summaryImgHeight + 30; // Add Monthly Revenue Chart Image pdf.setFontSize(18); pdf.text("Monthly Revenue Chart", pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 10; const monthlyRevenueChartImgHeight = (monthlyRevenueChartCanvas.height * (pdfWidth - 40)) / monthlyRevenueChartCanvas.width; // Check if image fits on current page, add new page if not if (yOffset + monthlyRevenueChartImgHeight > pdf.internal.pageSize.getHeight() - 20) { pdf.addPage(); yOffset = 40; // Reset yOffset for new page } pdf.addImage(monthlyRevenueChartImgData, 'PNG', 20, yOffset, pdfWidth - 40, monthlyRevenueChartImgHeight); yOffset += monthlyRevenueChartImgHeight + 30; // Add Revenue by Category Chart Image pdf.setFontSize(18); pdf.text("Revenue by Product Category Chart", pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 10; const revenueByCategoryChartImgHeight = (revenueByCategoryChartCanvas.height * (pdfWidth - 40)) / revenueByCategoryChartCanvas.width; // Check if image fits on current page, add new page if not if (yOffset + revenueByCategoryChartImgHeight > pdf.internal.pageSize.getHeight() - 20) { pdf.addPage(); yOffset = 40; // Reset yOffset for new page } pdf.addImage(revenueByCategoryChartImgData, 'PNG', 20, yOffset, pdfWidth - 40, revenueByCategoryChartImgHeight); yOffset += revenueByCategoryChartImgHeight + 30; // Add a section for detailed sales data (tabular format) pdf.addPage(); pdf.setFontSize(18); pdf.text("Detailed Sales Information", pdf.internal.pageSize.getWidth() / 2, 40, { align: 'center' }); const tableData = salesData.map(s => [ s.id, s.saleDate, s.productCategory, `$${s.salesAmount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, s.quantitySold.toLocaleString('en-US'), s.customerName || 'N/A', s.notes || 'N/A' ]); pdf.autoTable({ head: [['ID', 'Date', 'Category', 'Amount ($)', 'Quantity', 'Customer', 'Notes']], body: tableData, startY: 60, theme: 'grid', styles: { fontSize: 7, cellPadding: 3 }, // Smaller font for more columns headStyles: { fillColor: [242, 242, 242], textColor: [51, 51, 51], fontStyle: 'bold' }, alternateRowStyles: { fillColor: [251, 251, 251] }, margin: { top: 70, left: 5, right: 5 } // Adjust margins for more columns }); pdf.save('dundas_dashboard_report.pdf'); }; // --- Event Listeners and Initial Render --- downloadPdfButton.addEventListener('click', downloadPdf); // Initial setup // Sort sales data by date initially salesData.sort((a, b) => new Date(a.saleDate) - new Date(b.saleDate)); updateConfigTable(); renderDashboardMetrics(); renderMonthlyRevenueChart(); renderRevenueByCategoryChart(); updateNavigationButtons(); // Set initial button states });