Skip to content

Resolve "Chart Visualization to PDF"

James Jenkinson requested to merge 992-chart-visualization-to-pdf into main

Implementation notes

Converting the SVG to PNG

This wasn't as complex as I thought it might be, and we don't need to install any libraries to do it, it can be done via the browser itself using the HTML canvas element.

  1. Render the SVG
  2. Serialize the SVG into XML
  3. Load it into an image element
  4. Draw the SVG onto a canvas element
  5. Convert the canvas to a data url with the mime type "image/png"

Drawing the PNG onto the PDF

I added a function onto the PDF service to add png images. If the image is too big for the current space on the page, it will add a new page, and add the image onto the next page

Refactoring

We couldn't use the same components for the charts that are rendered on the reports page, as they're wrapped straight into angular components.

However as the code to create the charts themselves is pretty much the same, I extracted the code to create the charts into separate functions. These are then both used by the PDF service, and by the reports view.

Closes #992 (closed)

Merge request reports