Add "render print version"

[JobLeonard]

The rendered version of the plot should not feature any features of the website, just the plot itself, and result in a PNG or SVG ready to be printed or used in another context (say, a powerpoint slide or a poster)

• [ ] render functionality (requires #56 rewrite)
• [x] settings
  • [x] Portrait/Landscape
  • [x] Print: A4 & US letter sizes, custom size
  • [x] A4
    • [x] 72 DPI: 595 x 842
    • [x] 144 DPI: 1190 x 1684
    • [x] 300 DPI: 2480 x 3508
  • [x] US letter
    • [x] 72 DPI: 612 x 792
    • [x] 144 DPI: 1224 x 1584
    • [x] 300 DPI: 2550 x 3300
  • [x] Screen:
  • [x] 640 x 480,
  • [x] 800 x 600,
  • [x] 1024 x 768,
  • [x] 1280 x 720,
  • [x] 1920 x 1080
  • [x] 3840 x 2160 (4K)
  • [x] 7680 × 4320 (8K)
  • [x] Print button

[JobLeonard]

canvas2svg is a simple library that lets us generate an SVG with the canvas draw API, via a "mock" context:

https://github.com/gliffy/canvas2svg

In short, we don't have to change anything about our plotters to save them as SVGs, we just pass them a fake context object generated by this library.

To save a canvas (either real raster canvas as PNG, or a generated SVG), we need to use FileSaver.js:

https://github.com/eligrey/FileSaver.js

Other notes:

• letter sizes in pixels
• 300 DPI is roughly 12 dots per mm (rounded up)
• 144 DPI is roughly 6 dots per mm (rounded up)
• 72 DPI is roughly 3 dots per mm (rounded up)
• let's render sparklines as 1 cm high, so 120/60/30 dots.
• Make sure sparklines don't get cut off half of the page! (add 1cm margins?)
• Remind user that returned PNG will not have proper DPI setting, but need to be scaled down to fit by the printer

[JobLeonard]

Both Patrick and Martin asked for this, guess it will become more relevant.

Also, there's a mysterious bug where printing the webpage reduces the resolution of the canvas in Chrome:

Chrome print-to-pdf Zeisel Chrome print-to-pdf Oligos All Firefox print-to-pdf Zeisel Firefox print-to-pdf Oligos

[JobLeonard]

Detecting print buttons in JS so I can rerender in higher resolution https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

edit: better explanation:

https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

(function() {
    var beforePrint = function() {
        console.log('Functionality to run before printing.');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());