[Sprint 5b]: Export Multiple Visualizations 🗂️- Will & Justin

[danglorioso]

💻 Summary

For this sprint, you will be building on the export feature built in the previous round of sprints. As it stands, users can only export a single graph to a PDF, and then download that PDF in the browser. You will build on this by allowing users to add multiple visualizations to the PDF before exporting. This will be achieved by implementing a ‘shopping cart’ of visualizations that users can add to or remove from before exporting to PDF.

Goals of this sprint:

• Allow users to choose multiple visualizations to export.
• Allow users to remove visualizations from their shopping cart
• Use session storage to allow the contents of the shopping cart to persist between renders and page refreshes, but not when the browser is closed.
• Ensure that the visualizations that are added to the PDF are formatted properly (i.e. no overlap, clean spacing, clean proportions, etc.).

⚙️ Setup

Before starting:

1. PLEASE: **Pull the latest changes from main: git pull
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: Ensure you understand the current implementation of the export-to-PDF feature

• Study the existing code from Will and Justin’s PR to see the changes that they made.
• Ensure that you understand what libraries are being used to allow users to export to PDF. We are using html2canvas-pro and jsPDF to implement this functionality.

Step 2: Allow users to select multiple visualizations.

• Next, you will allow users to select multiple visualizations, and store them in the browser to later be added to the PDF.
• This will likely involve invoking the code to convert a visualization to its corresponding HTML Canvas Element, and then adding this canvas element to a growing (and shrinking) list of canvas elements that the user can manipulate.
• At this step, you will also want to implement the frontend features that show the visualizations in the ‘cart’ and allow users to add and remove visualizations to/from the cart.

Step 3: Implement storage in session storage

• Session storage is super useful for web apps. It allows us to store key-value pairs in the browser that persist between re-renders and refreshing the page. This means that if you refresh the page when you are adding to your ‘cart’, you won’t have to re-add the visualizations. Here are the web docs on session storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
• In the scope of our project, when a user adds a visualization to the cart, it should be added to session storage. Users should also be able to remove visualizations from the cart with the click of a button. Once the export button is clicked, the visualizations should be fetched from local storage and output to the PDF, but more on this in step 4.
• One fine detail is that the key-value pairs can only be strings. Thus, you must convert the HTML Canvas Element into a base64-encoded string using the toDataURL() function to store it in session storage, and then when fetching from session storage, you can convert back to the canvas element.
• Ensure that you monitor the total amount of storage you are using in session storage as the max is usually 5-10 MB.

Step 4: Implement multiple export feature

• Now that you have stored visualizations to export in session storage, you must now rework the code run when clicking the export button to add each visualization to the growing PDF.
• Think of edge cases in this scenario: What if the user clicks export and there are no visualizations in the cart? You should use toast (already in project) to display an error message.
• The resulting PDF must be formatted nicely. There are no constraints on what this exactly means, but use your discretion on scale, spacing, orientation, proportions, etc. Please just make it look appealing.

🙌 Acceptance Criteria

• Users can download several visualizations into a single PDF from the browser
• Visualizations (or rather their equivalent base64 strings) are stored in session storage to allow cart persistence between refreshes
• UI matches Figma exactly
• 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
• Session Storage Docs