[Sprint 4b]: Export Single Graph to PDF 📂 - Will & Justin

[danglorioso]

💻 Summary

For this sprint, you’ll export bar and line graphs on the Chart page to a downloadable PDF. This sprint will require you to first obtain an SVG of the current state of the graph (with all of its filters applied) and then export to a PDF that downloads to the user’s local machine.

Goals of this sprint:

• Learn how to fetch an SVG from the D3.js bar and line charts
• Convert a singular SVG into a PDF
• Download a file to the user’s computer

⚙️ Setup

Before starting:

1. Pull the latest changes from main.
2. Create a new branch for this sprint.
3. Install dependencies.
4. Run the dev server and verify the site builds.
5. Confirm everything runs.
   If you experience problems, check your .env is up to date!

🧭 Implementation

Step 1: Extract SVG from D3.js Charts

• Locate the files where the D3.js bar and line charts are rendered. Look for svgRefin BarGraph.tsx and LineGraph.tsx.
• Create a function that fetches that SVG and makes a clone of it to avoid modifying the original SVG.
• Test that you are correctly retrieving the SVG with the same styling and state as the graph displayed in the browser.

Step 2: Convert SVG to PDF

• Create a function that converts a given SVG to a PDF using the following techniques:
  • Install and use html2canvas to convert the SVG to a canvas image, which is essentially a screenshot of a web component (the SVG, in this case.)
  • Install and use jspdf to convert the canvas into a new PDF. Make sure to check the dimensions of the image so that the full graph is visible and not cut off.
  • If you have time, add some text to the PDF as well. Future sprints will work on styling this document with text and other graphics.

Step 3: Download the PDF

• Connect the existing “Export” button on the Charts page to your utility functions created above. When the user clicks the Export button, you should get the SVG, convert to a canvas, export to PDF, and use jspdf’s .save() method to trigger a browser download.
• Be sure to name the PDF file appropriately, such as with date and time export metadata.
• Add loading animations to the export button so the user knows the program is running.
• Reset the loading states of the buttons once download is complete.
• Add error handling and display error messages to the user if export fails

Step 4: Testing

• Try exporting on both types of charts (line and bar) with different filters applied and ensure the downloaded result matches the browser rendering.
• Test on different browsers! Safari, Chrome, Firefox, etc.! Different browsers have different methods for granting permissions to download files from sites. Make sure that your feature is compatible with all of them.

🙌 Acceptance Criteria

• The export button downloads the graph in current view to a PDF
• PDF does not cut-off any part of the graph (i.e. looks identical to browser)
• Filters are captured in the exported PDF
• Exporting works across all major browsers
• Export button is responsive while loading and resets once finished
• UI matches Figma
• Code runs locally without errors and builds successfully
• Merge via PR

⁉️ Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

📝 Resources

• Figma:
• Tailwind CSS
• shadcn/ui
• npm package manager
• html2canvas
• jspdf