dlawler489/COS30045
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

export to pdf, and darkmode fixes

Browse source
This commit is contained in:
dlawler489 2025-06-03 10:52:36 +10:00
parent a17f9c106e
commit 897d1a8f1e
2 changed files with 73 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -15,6 +15,18 @@
<!-- Save SVG as PNG library --> <!-- Save SVG as PNG library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js"></script>
<!-- jsPDF for PDF generation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
window.jspdf = window.jspdf;
</script>
<!-- svg2pdf.js for SVG to PDF conversion -->
<script src="https://unpkg.com/svg2pdf.js@2.0.0/dist/svg2pdf.umd.min.js"></script>
<script>
window.svg2pdf = window.svg2pdf?.svg2pdf;
</script>
</head> </head>
<body> <body>

61
script/script.js
View file

@ -225,6 +225,67 @@ Promise.all([
backgroundColor: darkMode ? "#121212" : "#ffffff" backgroundColor: darkMode ? "#121212" : "#ffffff"
}); });
}); });
// Add Export to PDF button (reuse downloadButton's class and styles)
const exportPdfButton = document.createElement('button');
exportPdfButton.textContent = 'Export to PDF';
// Copy class from downloadButton if available
const downloadBtn = document.getElementById("downloadButton");
if (downloadBtn && downloadBtn.className) {
exportPdfButton.className = downloadBtn.className;
}
// Insert immediately after downloadButton
if (downloadBtn) {
downloadBtn.insertAdjacentElement("afterend", exportPdfButton);
} else {
// fallback
document.querySelector('.controls').appendChild(exportPdfButton);
}
// PDF export logic
exportPdfButton.addEventListener('click', async () => {
// Ensure jsPDF and svg2pdf.js are loaded
if (!(window.jspdf && window.svg2pdf)) {
alert('PDF export libraries not loaded.');
return;
}
const { jsPDF } = window.jspdf;
const doc = new jsPDF({
orientation: 'landscape',
unit: 'pt',
format: [960, 600]
});
const svgElement = document.querySelector("svg");
const svgClone = svgElement.cloneNode(true);
svgClone.removeAttribute("style");
svgClone.setAttribute("width", "960");
svgClone.setAttribute("height", "600");
// Ensure correct namespace for svg2pdf
svgClone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
await window.svg2pdf(svgClone, doc, {
xOffset: 0,
yOffset: 0,
scale: 1
});
const c = d3.select("#continentSelect").property("value");
const s = d3.select("#sexSelect").property("value");
const e = d3.select("#incomeSelect").property("value");
const chartType = d3.select("#chartTypeSelect").property("value");
const parts = [
"education_health",
chartType,
c !== "All" ? c : null,
s !== "All" ? s : null,
e !== "All" ? e.replace(/[^a-zA-Z0-9]+/g, "_").toLowerCase() : null
].filter(Boolean);
const filename = parts.join("_") + ".pdf";
doc.save(filename);
});
}); });
// Update legend depending on chart type // Update legend depending on chart type
function updateLegend(chartType) { function updateLegend(chartType) {