No digital content configured. Go to "Content Configuration" to add some.

'; return; } digitalContent.forEach(c => { const card = document.createElement('div'); card.classList.add('content-card'); let statusClass = ''; switch (c.contentStatus) { case 'Active': statusClass = 'status-active'; break; case 'Expired': statusClass = 'status-expired'; break; case 'Revoked': statusClass = 'status-revoked'; break; case 'Pending': statusClass = 'status-pending'; break; default: statusClass = 'status-active'; } card.innerHTML = `

${c.contentName}

Type: ${c.contentType}

License: ${c.licenseType}

Dates: ${c.startDate} - ${c.endDate || 'N/A'}

Usage: ${c.currentUsage} / ${c.usageLimit || 'Unlimited'}

Notes: ${c.notes || 'N/A'}

${c.contentStatus} ${c.licenseType} `; contentCardsContainer.appendChild(card); }); } /** * Renders a bar chart of content by status using D3.js. */ function renderContentByStatusChart() { if (!contentStatusChartContainer) { console.error('Error: contentStatusChartContainer not found.'); return; } // Clear previous chart, but keep the title div const chartSvg = contentStatusChartContainer.querySelector('svg'); if (chartSvg) { chartSvg.remove(); } if (digitalContent.length === 0) { contentStatusChartContainer.innerHTML = '

No content data available.

'; return; } // Aggregate data by status const statusCounts = d3.rollup(digitalContent, v => v.length, d => d.contentStatus); const chartData = Array.from(statusCounts, ([status, count]) => ({ status, count })); // Define a consistent order and color for statuses const statusOrder = ['Revoked', 'Expired', 'Pending', 'Active']; const statusColors = { 'Active': '#28a745', 'Expired': '#dc3545', 'Revoked': '#6c757d', 'Pending': '#ffc107' }; chartData.sort((a, b) => statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status)); const margin = { top: 20, right: 20, bottom: 40, left: 40 }; const width = contentStatusChartContainer.clientWidth - margin.left - margin.right; const height = contentStatusChartContainer.clientHeight - margin.top - margin.bottom - 30; // Account for title height const svg = d3.select(contentStatusChartContainer) .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.status)) .range([0, width]) .padding(0.1); // Y scale const y = d3.scaleLinear() .domain([0, d3.max(chartData, d => d.count) * 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("d"))); // Integer ticks // 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.status)) .attr("y", d => y(d.count)) .attr("width", x.bandwidth()) .attr("height", d => height - y(d.count)) .attr("fill", d => statusColors[d.status] || 'steelblue') // Use defined colors .on("mouseover", function(event, d) { d3.select(this).attr("fill", d3.rgb(this.getAttribute('fill')).darker(0.5)); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`Status: ${d.status}
Count: ${d.count}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("fill", statusColors[d.status] || 'steelblue'); // Restore original color tooltip.transition() .duration(500) .style("opacity", 0); }); } /** * Renders a pie chart of content by license type using D3.js. */ function renderContentByLicenseTypeChart() { if (!licenseTypeChartContainer) { console.error('Error: licenseTypeChartContainer not found.'); return; } // Clear previous chart, but keep the title div const chartSvg = licenseTypeChartContainer.querySelector('svg'); if (chartSvg) { chartSvg.remove(); } if (digitalContent.length === 0) { licenseTypeChartContainer.innerHTML = '

No content data available.

'; return; } // Aggregate data by license type const licenseTypeCounts = d3.rollup(digitalContent, v => v.length, d => d.licenseType); const chartData = Array.from(licenseTypeCounts, ([type, count]) => ({ type, count })); const width = licenseTypeChartContainer.clientWidth; const height = licenseTypeChartContainer.clientHeight - 30; // Account for title height const radius = Math.min(width, height) / 2 - 20; // Adjusted radius const svg = d3.select(licenseTypeChartContainer) .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${width / 2},${height / 2})`); const pie = d3.pie() .sort(null) .value(d => d.count); const arc = d3.arc() .innerRadius(0) .outerRadius(radius); const color = d3.scaleOrdinal(d3.schemeCategory10); // D3's default color scheme // Tooltip const tooltip = d3.select("body").append("div") .attr("class", "chart-tooltip") .style("opacity", 0); const arcs = svg.selectAll(".arc") .data(pie(chartData)) .enter().append("g") .attr("class", "arc"); arcs.append("path") .attr("d", arc) .attr("fill", d => color(d.data.type)) .on("mouseover", function(event, d) { d3.select(this).attr("fill", d3.rgb(color(d.data.type)).darker(0.5)); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`License Type: ${d.data.type}
Count: ${d.data.count}
Percentage: ${(d.data.count / d3.sum(chartData, d => d.count) * 100).toFixed(1)}%`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("fill", color(d.data.type)); // Restore original color tooltip.transition() .duration(500) .style("opacity", 0); }); // Add text labels arcs.append("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .attr("dy", "0.35em") .text(d => `${d.data.type} (${(d.data.count / d3.sum(chartData, d => d.count) * 100).toFixed(0)}%)`) .style("text-anchor", "middle") .style("font-size", "10px") .style("fill", "white") .style("pointer-events", "none"); // Prevent text from blocking mouse events on arcs } // --- 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 content cards const cardsCanvas = await html2canvas(contentCardsContainer, { scale: 2, useCORS: true, logging: false }); const cardsImgData = cardsCanvas.toDataURL('image/png'); // Capture content status chart const statusChartCanvas = await html2canvas(contentStatusChartContainer, { scale: 2, useCORS: true, logging: false }); const statusChartImgData = statusChartCanvas.toDataURL('image/png'); // Capture license type chart const licenseTypeChartCanvas = await html2canvas(licenseTypeChartContainer, { scale: 2, useCORS: true, logging: false }); const licenseTypeChartImgData = licenseTypeChartCanvas.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("Digital Rights Management 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 Content Cards Image pdf.setFontSize(18); pdf.text("Your Digital Content Overview", pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 10; const cardsImgHeight = (cardsCanvas.height * (pdfWidth - 40)) / cardsCanvas.width; // Check if image fits on current page, add new page if not if (yOffset + cardsImgHeight > pdf.internal.pageSize.getHeight() - 20) { pdf.addPage(); yOffset = 40; // Reset yOffset for new page } pdf.addImage(cardsImgData, 'PNG', 20, yOffset, pdfWidth - 40, cardsImgHeight); yOffset += cardsImgHeight + 30; // Add Content by Status Chart Image pdf.setFontSize(18); pdf.text("Content by Status Chart", pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 10; const statusChartImgHeight = (statusChartCanvas.height * (pdfWidth - 40)) / statusChartCanvas.width; // Check if image fits on current page, add new page if not if (yOffset + statusChartImgHeight > pdf.internal.pageSize.getHeight() - 20) { pdf.addPage(); yOffset = 40; // Reset yOffset for new page } pdf.addImage(statusChartImgData, 'PNG', 20, yOffset, pdfWidth - 40, statusChartImgHeight); yOffset += statusChartImgHeight + 30; // Add Content by License Type Chart Image pdf.setFontSize(18); pdf.text("Content by License Type Chart", pdfWidth / 2, yOffset, { align: 'center' }); yOffset += 10; const licenseTypeChartImgHeight = (licenseTypeChartCanvas.height * (pdfWidth - 40)) / licenseTypeChartCanvas.width; // Check if image fits on current page, add new page if not if (yOffset + licenseTypeChartImgHeight > pdf.internal.pageSize.getHeight() - 20) { pdf.addPage(); yOffset = 40; // Reset yOffset for new page } pdf.addImage(licenseTypeChartImgData, 'PNG', 20, yOffset, pdfWidth - 40, licenseTypeChartImgHeight); yOffset += licenseTypeChartImgHeight + 30; // Add a section for detailed content data (tabular format) pdf.addPage(); pdf.setFontSize(18); pdf.text("Detailed Content Information", pdf.internal.pageSize.getWidth() / 2, 40, { align: 'center' }); const tableData = digitalContent.map(c => [ c.id, c.contentName, c.contentType, c.licenseType, c.startDate, c.endDate || 'N/A', c.usageLimit || 'Unlimited', c.currentUsage.toLocaleString('en-US'), c.contentStatus, c.notes || 'N/A' ]); pdf.autoTable({ head: [['ID', 'Name', 'Type', 'License', 'Start Date', 'End Date', 'Usage Limit', 'Current Usage', 'Status', 'Notes']], body: tableData, startY: 60, theme: 'grid', styles: { fontSize: 6, cellPadding: 2 }, // Smaller font for many 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('digital_rights_management_report.pdf'); }; // --- Event Listeners and Initial Render --- downloadPdfButton.addEventListener('click', downloadPdf); // Initial setup // Sort content by start date initially digitalContent.sort((a, b) => new Date(a.startDate) - new Date(b.startDate)); updateConfigTable(); renderDashboardMetrics(); renderContentCards(); renderContentByStatusChart(); renderContentByLicenseTypeChart(); updateNavigationButtons(); // Set initial button states });