Download chart as PNG image option

[mmcfarland]

Overview

All of the Nivo chart types implemented in the app render to Canvas. As a result, we can generate a dataUrl for each canvas element and offer it as a direct image download. A new button is available on every individual chart (or chart group in the case of Waffle) which gives a menu to download the image as PNG.

A few workarounds are needed to accomplish this:

• A ref to a particular container element is required in order to generically search for a child canvas element
• Waffle charts are really a sequence of three separate charts that should be treated as one
• Nivo charts have a transparent background, and a solid color needs to be applied before writing

As a result of these extra requirements, there is some manual manipulation of the canvas element to represent enough chart context to be meaningful. Some content, like a title or geography, is not included on the canvas based on the chart type. In these cases, I've made the filename the place where all data shows up. As an enhancement, we may need to include additional text directly on the chart canvas while generating the image.

Connects #48

Notes

While all relevant information is included in the file name, it would be nice to ensure it is included in the image content directly. This is related to #27 and may not be possible in the current scope.

The CSV menu item was added, but it is not implemented.

More charts could be combined (like Stacked), but it's not entirely clear if it's desirable. I'm interested in client feedback about the utility of downloading select charts instead of big chunks of them. They may be embedded in other media better by remaining per-geography or group.

Testing Instructions

• For multiple geographies, select multiple questions of each chart type
• Check each chart or chart group has a new hover-only button for a download menu
• Clicking the download PNG option saves a PNG to the local machine which includes a representative rendering of the selected chart.
• The generated file name includes enough context to be able to associate the chart with a question.

[mmcfarland]

Good catch. I updated the padding on stacked charts to better separate the menu