feat: add PNG export

[rshen91]

Summary

Thank you Marco for the help on this! This PR will close #82 and allows PNG export of charts:

A PNG export story was added under the heading Interactions.
Additionally, in the playground.tsx from this PR the following implements the PNG export functionality:

...
export class Playground extends React.Component {
  chartRef: React.RefObject<Chart> = React.createRef();
  onSnapshot = () => {
    if (!this.chartRef.current) {
      return;
    }
    const snapshot = this.chartRef.current.getPNGSnapshot({
// can specify a background color or default is transparent
      backgroundColor: 'white',
      pixelRatio: 2,
    });
    if (!snapshot) {
      return;
    }
    const fileName = 'chart.png';
    switch (snapshot.browser) {
      case 'IE11':
        return navigator.msSaveBlob(snapshot.blobOrDataUrl, fileName);
      default:
        const link = document.createElement('a');
        link.download = fileName;
        link.href = snapshot.blobOrDataUrl;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
  };
...

---

Next steps:

• add the legend from the chart to the PNG (html2canvas library)

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility, including a check against IE11
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention

[codecov-io]

Codecov Report

Merging #451 into master will increase coverage by 0.18%.
The diff coverage is 27.27%.

@@            Coverage Diff            @@
##           master    #451      +/-   ##
=========================================
+ Coverage   77.91%   78.1%   +0.18%     
=========================================
  Files          81      91      +10     
  Lines        4189    4320     +131     
  Branches      891     908      +17     
=========================================
+ Hits         3264    3374     +110     
- Misses        913     933      +20     
- Partials       12      13       +1

Impacted Files	Coverage Δ
src/components/react_canvas/reactive_chart.tsx	11.62% <ø> (ø)	⬆️
src/components/react_canvas/chart_container.tsx	40% <ø> (ø)	⬆️
src/components/chart.tsx	46.47% <27.27%> (+7.26%)	⬆️
src/mocks/series/series.ts	81.96% <0%> (ø)
src/mocks/specs/specs.ts	96% <0%> (ø)
src/mocks/scale/index.ts	100% <0%> (ø)
src/mocks/index.ts	100% <0%> (ø)
src/mocks/series/index.ts	100% <0%> (ø)
src/mocks/series/data.ts	100% <0%> (ø)
src/mocks/scale/scale.ts	87.5% <0%> (ø)
... and 4 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7738aa9...fd354c6. Read the comment docs.

[markov00]

LGTM, I've left just few comments

[markov00]

Can you add a description on how to get the snapshot and is a default implementation?
Check storybook API/docs to find a way to add info to the story.
I think we should start add some text on every story we add

[rshen91]

Good call - I've added an info section to the story in fd354c6. I'll open up an issue to track adding a Docs tab such as in https://www.learnstorybook.com/design-systems-for-developers/react/en/document/ where we can configure and clarify each story 👍

[rshen91]

Opened issue #457

[markov00]

🎉 This PR is included in version 14.2.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀