allow saving chart images

[alxnddr]

Closes #4701

Description

A last-minute change to allow users to save png images of charts

How to verify

1. Create a line/area/bar/pie/gauge/... chart and ensure you can save it
2. Add the charts on a dashboard and ensure you can save images from dashcards

Saving images does not work on visualizations that have canSavePng=false such as tables, etc.

Demo

QB:

Dashcards:

Checklist

• Tests have been added/updated to cover changes in this PR

[kdoh]

Behavior works as expected when I was testing it locally. 👍

[codecov]

Codecov Report

Base: 67.37% // Head: 67.38% // Increases project coverage by +0.01% 🎉

Coverage data is based on head (9cb5e8b) compared to base (42d973b).
Patch coverage: 20.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #28546      +/-   ##
==========================================
+ Coverage   67.37%   67.38%   +0.01%     
==========================================
  Files        3328     3329       +1     
  Lines       97018    97098      +80     
  Branches    12299    12308       +9     
==========================================
+ Hits        65363    65433      +70     
- Misses      26547    26556       +9     
- Partials     5108     5109       +1     

Flag	Coverage Δ
back-end	85.54% <ø> (+0.03%)	⬆️
front-end	50.41% <20.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...etabase/actions/components/ActionViz/ActionViz.tsx	25.00% <ø> (ø)
...oard/components/DashCard/DashCardVisualization.tsx	4.00% <ø> (ø)
frontend/src/metabase/icon_paths.ts	96.29% <ø> (ø)
.../src/metabase/public/containers/PublicQuestion.jsx	0.00% <ø> (ø)
...e/query_builder/components/QueryDownloadWidget.jsx	20.00% <0.00%> (-0.32%)	⬇️
...se/query_builder/components/QueryVisualization.jsx	0.00% <ø> (ø)
...omponents/components/GlobalStyles/GlobalStyles.tsx	0.00% <ø> (ø)
...zations/components/Visualization/Visualization.jsx	39.37% <0.00%> (ø)
frontend/src/metabase/visualizations/index.js	67.79% <0.00%> (-2.38%)	⬇️
...izations/visualizations/LinkViz/LinkVizSettings.ts	33.33% <ø> (ø)
... and 17 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[deploysentinel]

No failed tests 🎉

[iethree]

@kdoh were you working on an icon for this?

[kdoh]

Yes but it's not blocking to get this out.

[iethree]

saving from dashboards works great, but I'm getting 0 byte downloads for downloads directly from questions. the console output leads me to believe it thinks the height is 0px?

[npfitz]

I did notice in the network tab that html2canvas does generate a small 1px gif, maybe that's what Ryan is referring to. I don't think it's an issue though.

From a UX standpoint, I do find it slightly odd that it gives you exactly whats on the screen. When downloading the PNG from the dashboard, if your chart is on a really tiny square, then you download a really tiny image. ex:

That's probably what we expect, but I was a little surprised when playing with it. On the plus side though, it captures all your series settings!

[npfitz]

Looking closer at Ryans screenshot, the 1px gif is not what he is referring to haha. Whoops.

[iethree]

saving from dashboards works great, but I'm getting 0 byte downloads for downloads directly from questions. the console output leads me to believe it thinks the height is 0px?

just to document, somehow my loom extension was manipulating the DOM in my browser such that it thought that the chart had zero height. It looks like sasha adjusted the css to force it to full height to fix this.