In the process of using Metabase, it has provided the function of downloading data, but there is no way to download the prepared form. This is very inconvenient for me. What do I need to do to add this function?
Hi @zsk
The simple way is just to use a screenshot tool - I think most OS comes with a pretty good one, where you can snapshot sections of the screen.
Otherwise you have to explain more in detail.
Maybe I need to add a save button more. When I click the save button, I will download the chart.
As you said before, the generation of diagrams is not based on third-party plug-ins. But I’ve investigated many third-party icon plug-ins that encapsulate the way to download charts, so I wonder if I can do this by modifying the source code of Metabase.
@zsk
You would need something that could save a specific element as an image. Something like this perhaps:
https://stackoverflow.com/questions/6887183/how-to-take-screenshot-of-a-div-with-javascript
Hello, according to your prompt, I have implemented it in my own example, but when I try to finish it in Metabase, I can’t introduce a third-party html2canvas. JS file, which always makes errors in the compilation process.
@zsk
If you don’t provide errors, then it’s hard to know what’s going on.
Metabase is not a small, simple program, so adding new code might create conflicts or break something. If you need help with something specific to React or yarn (or similar), then you should look at stackoverflow.
/opt/metabase/frontend/src/metabase/components/html2canvas.min.js
6:66 warning Expected “export” or “export default” import/no-commonjs
6:112 error ‘define’ is not defined no-undef
6:123 error ‘define’ is not defined no-undef
6:161 warning Expected “export” or “export default” import/no-commonjs
6:239 warning Unexpected var, use let or const instead no-var
6:262 warning Expected { after ‘if’ condition curly
6:290 warning Unexpected var, use let or const instead no-var
6:513 warning Unexpected var, use let or const instead no-var
6:711 error ‘use strict’ is unnecessary inside of modules strict
6:773 warning Unexpected var, use let or const instead no-var
6:811 warning Expected { after ‘if’ condition curly
6:840 warning Expected { after ‘if’ condition curly
6:893 warning Unexpected var, use let or const instead no-var
6:925 warning Expected { after ‘for’ condition curly
6:929 warning Unexpected var, use let or const instead no-var
6:1087 warning Expected { after ‘if’ condition curly
6:1092 error Unsafe usage of ThrowStatement no-unsafe-finally
6:1229 warning Unexpected var, use let or const instead no-var
6:1253 warning Unexpected var, use let or const instead no-var
6:1441 warning Unexpected var, use let or const instead no-var
6:1481 warning Unexpected var, use let or const instead no-var
6:1640 warning Unexpected var, use let or const instead no-var
6:1850 warning Unexpected var, use let or const instead no-var
6:2019 warning Unexpected var, use let or const instead no-var
6:2231 warning Unexpected var, use let or const instead no-var
6:2312 warning Expected { after ‘if’ condition curly
6:2399 warning Unexpected var, use let or const instead no-var
6:2792 warning Unexpected var, use let or const instead no-var
6:7004 error ‘use strict’ is unnecessary inside of modules strict
6:7066 warning Unexpected var, use let or const instead no-var
6:7103 warning Unexpected var, use let or const instead no-var
6:7127 warning Unexpected var, use let or const instead no-var
6:7315 warning Unexpected var, use let or const instead no-var
6:7397 warning Expected { after ‘if’ condition curly
6:7539 warning Unexpected var, use let or const instead no-var
6:7953 warning Unexpected var, use let or const instead no-var
6:8041 warning Unexpected var, use let or const instead no-var
6:8155 error ‘use strict’ is unnecessary inside of modules strict
6:8402 warning Unexpected var, use let or const instead no-var
6:8439 warning Unexpected var, use let or const instead no-var
6:8463 warning Unexpected var, use let or const instead no-var
6:8723 warning Unexpected var, use let or const instead no-var
6:8784 warning Expected { after ‘if’ condition curly
6:9353 warning Unexpected var, use let or const instead no-var
6:9604 warning Unexpected var, use let or const instead no-var
6:9637 warning Expected { after ‘if’ condition curly
6:9667 warning Unexpected var, use let or const instead no-var
6:10365 warning Unexpected var, use let or const instead no-var
6:10912 warning Unexpected var, use let or const instead no-var
6:11391 warning Unexpected var, use let or const instead no-var
6:11467 warning Unexpected var, use let or const instead no-var
6:12894 warning Unexpected var, use let or const instead no-var
6:13462 error ‘use strict’ is unnecessary inside of modules strict
6:13652 warning Unexpected var, use let or const instead no-var
6:13679 warning Unexpected var, use let or const instead no-var
6:13877 error ‘use strict’ is unnecessary inside of modules strict
6:14256 warning Unexpected var, use let or const instead no-var
6:14367 warning Unexpected var, use let or const instead no-var
6:14618 warning Expected { after ‘if’ condition curly
6:14901 warning Unexpected var, use let or const instead no-var
6:14969 warning Unexpected var, use let or const instead no-var
6:15428 warning Unexpected var, use let or const instead no-var
6:15854 warning Unexpected var, use let or const instead no-var
6:15947 warning Unexpected var, use let or const instead no-var
6:18051 warning Unexpected var, use let or const instead no-var
6:18115 warning Unexpected var, use let or const instead no-var
6:18294 warning Unexpected var, use let or const instead no-var
6:19013 warning Unexpected var, use let or const instead no-var
6:19074 warning Unexpected var, use let or const instead no-var
6:19157 warning Unexpected var, use let or const instead no-var
6:19447 warning Expected { after ‘if’ condition curly
6:19458 warning Expected { after ‘if’ condition curly
6:19502 warning Expected { after ‘if’ condition curly
6:19523 warning Expected { after ‘if’ condition curly
6:19570 warning Expected { after ‘if’ condition curly
6:19581 warning Expected { after ‘if’ condition curly
6:19606 warning Expected { after ‘if’ condition curly
6:19720 error ‘use strict’ is unnecessary inside of modules strict
6:19841 error ‘use strict’ is unnecessary inside of modules strict
6:19903 warning Unexpected var, use let or const instead no-var
6:19940 warning Unexpected var, use let or const instead no-var
6:19964 warning Unexpected var, use let or const instead no-var
6:20406 warning Unexpected var, use let or const instead no-var
6:20475 warning Unexpected var, use let or const instead no-var
6:20501 warning Expected { after ‘if’ condition curly
6:20726 warning Unexpected var, use let or const instead no-var
6:22151 warning Unexpected var, use let or const instead no-var
6:22188 warning Unexpected var, use let or const instead no-var
6:22818 warning Unexpected var, use let or const instead no-var
6:24388 warning Unexpected var, use let or const instead no-var
6:24495 warning Unexpected var, use let or const instead no-var
6:24632 warning Unexpected var, use let or const instead no-var
6:24693 warning Unexpected var, use let or const instead no-var
6:24737 warning Unexpected var, use let or const instead no-var
6:24798 warning Expected { after ‘if’ condition curly
6:24842 error ‘use strict’ is unnecessary inside of modules strict
6:24904 warning Unexpected var, use let or const instead no-var
6:24956 warning Expected { after ‘if’ condition curly
6:25103 error ‘use strict’ is unnecessary inside of modules strict
6:25250 warning Unexpected var, use let or const instead no-var
6:28354 warning Unexpected var, use let or const instead no-var
6:28698 error ‘use strict’ is unnecessary inside of modules strict
6:28760 warning Unexpected var, use let or const instead no-var
6:28797 warning Unexpected var, use let or const instead no-var
6:28821 warning Unexpected var, use let or const instead no-var
6:29025 warning Unexpected var, use let or const instead no-var
6:29075 warning Expected { after ‘if’ condition curly
6:29259 warning Unexpected var, use let or const instead no-var
6:29365 warning Unexpected var, use let or const instead no-var
6:29682 error ‘use strict’ is unnecessary inside of modules strict
6:29744 warning Unexpected var, use let or const instead no-var
6:29851 warning Unexpected var, use let or const instead no-var
6:29887 warning Unexpected var, use let or const instead no-var
6:29937 warning Unexpected var, use let or const instead no-var
6:30057 warning Unexpected var, use let or const instead no-var
6:30112 warning Expected { after ‘if’ condition curly
6:30269 warning Unexpected var, use let or const instead no-var
6:30287 warning Unexpected var, use let or const instead no-var
6:30616 warning Unexpected var, use let or const instead no-var
6:30636 warning Unexpected var, use let or const instead no-var
6:30740 warning Unexpected var, use let or const instead no-var
6:31066 warning Unexpected var, use let or const instead no-var
6:31147 warning Unexpected var, use let or const instead no-var
6:31204 warning Unexpected var, use let or const instead no-var
6:31241 warning Color literals forbidden. Import colors from ‘metabase/lib/colors’ no-color-literals
6:31282 warning Unexpected var, use let or const instead no-var
6:31322 warning Unexpected var, use let or const instead no-var
6:31484 warning Unexpected var, use let or const instead no-var
6:31565 warning Unexpected var, use let or const instead no-var
6:32000 warning Unexpected var, use let or const instead no-var
6:32134 warning Unexpected var, use let or const instead no-var
6:32282 warning Unexpected var, use let or const instead no-var
6:32421 error ‘use strict’ is unnecessary inside of modules strict
6:32577 warning Unexpected var, use let or const instead no-var
6:32639 warning Unexpected var, use let or const instead no-var
6:33001 warning Unexpected var, use let or const instead no-var
6:33463 error ‘use strict’ is unnecessary inside of modules strict
6:33576 warning Unexpected var, use let or const instead no-var
6:33638 warning Unexpected var, use let or const instead no-var
6:33834 warning Unexpected var, use let or const instead no-var
6:34139 error ‘use strict’ is unnecessary inside of modules strict
6:34232 warning Unexpected var, use let or const instead no-var
6:34262 warning Unexpected var, use let or const instead no-var
6:34314 warning Unexpected var, use let or const instead no-var
6:34409 warning Expected { after ‘else’ curly
6:34461 warning Expected { after ‘if’ condition curly
6:34537 warning Unexpected var, use let or const instead no-var
6:34560 warning Expected { after ‘if’ condition curly
6:34579 warning Unexpected var, use let or const instead no-var
6:34606 warning Unexpected var, use let or const instead no-var
6:34806 warning Expected { after ‘for’ condition curly
6:34810 warning Unexpected var, use let or const instead no-var
6:35000 warning Unexpected var, use let or const instead no-var
6:35131 warning Unexpected var, use let or const instead no-var
6:35309 warning Expected { after ‘for’ condition curly
6:35516 warning Expected { after ‘for’ condition curly
6:35520 warning Unexpected var, use let or const instead no-var
6:35616 warning Expected { after ‘for’ condition curly
6:35620 warning Unexpected var, use let or const instead no-var
6:35725 error ‘use strict’ is unnecessary inside of modules strict
6:35853 warning Unexpected var, use let or const instead no-var
6:35950 warning Unexpected var, use let or const instead no-var
6:36005 warning Unexpected var, use let or const instead no-var
6:36020 warning Expected { after ‘if’ condition curly
6:36041 warning Expected { after ‘if’ condition curly
6:36156 warning Unexpected var, use let or const instead no-var
6:36186 warning Unexpected var, use let or const instead no-var
6:36832 warning Unexpected var, use let or const instead no-var
6:36917 warning Expected { after ‘if’ condition curly
6:36943 warning Unexpected var, use let or const instead no-var
6:37099 warning Unexpected var, use let or const instead no-var
6:37280 warning Expected { after ‘else’ curly
6:37433 warning Unexpected var, use let or const instead no-var
6:38683 warning Expected { after ‘for’ condition curly
6:38751 warning Unexpected var, use let or const instead no-var
6:38830 warning Unexpected var, use let or const instead no-var
6:38959 warning Unexpected var, use let or const instead no-var
6:39129 warning Expected { after ‘if’ condition curly
6:39201 warning Unexpected var, use let or const instead no-var
6:39223 warning Expected { after ‘if’ condition curly
6:39250 warning Unexpected var, use let or const instead no-var
6:39273 warning Unexpected var, use let or const instead no-var
6:39583 warning Unexpected var, use let or const instead no-var
6:39794 warning Unexpected var, use let or const instead no-var
6:43026 error ‘use strict’ is unnecessary inside of modules strict
6:43088 warning Unexpected var, use let or const instead no-var
6:43125 warning Unexpected var, use let or const instead no-var
6:43149 warning Unexpected var, use let or const instead no-var
6:43352 warning Unexpected var, use let or const instead no-var
6:43372 warning Unexpected var, use let or const instead no-var
6:43584 warning Expected { after ‘if’ condition curly
6:44256 warning Unexpected var, use let or const instead no-var
6:44837 warning Unexpected var, use let or const instead no-var
6:44910 warning Unexpected var, use let or const instead no-var
6:45371 warning Unexpected var, use let or const instead no-var
6:45621 warning Unexpected var, use let or const instead no-var
6:45725 warning Expected { after ‘if’ condition curly
6:45786 warning Unexpected var, use let or const instead no-var
6:46274 warning Unexpected var, use let or const instead no-var
6:46790 warning Unexpected var, use let or const instead no-var
6:46910 warning Unexpected var, use let or const instead no-var
6:47195 warning Unexpected var, use let or const instead no-var
6:47363 warning Expected { after ‘if’ condition curly
6:47414 warning Unexpected var, use let or const instead no-var
6:47868 error ‘use strict’ is unnecessary inside of modules strict
6:47930 warning Unexpected var, use let or const instead no-var
6:47967 warning Unexpected var, use let or const instead no-var
6:47991 warning Unexpected var, use let or const instead no-var
6:48179 warning Unexpected var, use let or const instead no-var
6:48229 warning Expected { after ‘if’ condition curly
6:48560 warning Expected { after ‘for’ condition curly
6:48564 warning Unexpected var, use let or const instead no-var
6:48910 warning Expected { after ‘for’ condition curly
6:48914 warning Unexpected var, use let or const instead no-var
6:49213 error ‘use strict’ is unnecessary inside of modules strict
6:49313 warning Unexpected var, use let or const instead no-var
6:49423 warning Unexpected var, use let or const instead no-var
6:49588 error ‘use strict’ is unnecessary inside of modules strict
6:49650 warning Unexpected var, use let or const instead no-var
6:49831 error ‘use strict’ is unnecessary inside of modules strict
6:49893 warning Unexpected var, use let or const instead no-var
6:50154 error ‘use strict’ is unnecessary inside of modules strict
6:50216 warning Unexpected var, use let or const instead no-var
6:50467 error ‘use strict’ is unnecessary inside of modules strict
6:50697 warning Unexpected var, use let or const instead no-var
6:50878 warning Unexpected var, use let or const instead no-var
6:51432 warning Unexpected var, use let or const instead no-var
6:51978 warning Expected { after ‘else’ curly
6:52092 warning Unexpected var, use let or const instead no-var
6:52345 warning Unexpected var, use let or const instead no-var
6:52390 warning Unexpected var, use let or const instead no-var
6:52647 warning Unexpected var, use let or const instead no-var
6:52802 warning Unexpected var, use let or const instead no-var
6:52932 error ‘use strict’ is unnecessary inside of modules strict
6:53032 warning Unexpected var, use let or const instead no-var
6:53118 warning Unexpected var, use let or const instead no-var
6:53168 warning Expected { after ‘if’ condition curly
6:53323 warning Unexpected var, use let or const instead no-var
6:53578 warning Unexpected var, use let or const instead no-var
6:53589 warning Expected { after ‘if’ condition curly
6:53735 warning Unexpected var, use let or const instead no-var
6:53793 warning Expected { after ‘else’ curly
6:53894 warning Unexpected var, use let or const instead no-var
6:53983 warning Unexpected var, use let or const instead no-var
6:54028 warning Unexpected var, use let or const instead no-var
6:54166 warning Unexpected var, use let or const instead no-var
6:54314 error ‘use strict’ is unnecessary inside of modules strict
6:54376 warning Unexpected var, use let or const instead no-var
6:54413 warning Unexpected var, use let or const instead no-var
6:54437 warning Unexpected var, use let or const instead no-var
6:54625 warning Unexpected var, use let or const instead no-var
6:54671 warning Expected { after ‘if’ condition curly
6:54817 warning Unexpected var, use let or const instead no-var
6:55213 warning Unexpected var, use let or const instead no-var
6:55585 warning Unexpected var, use let or const instead no-var
6:55636 warning Unexpected var, use let or const instead no-var
6:56124 warning Unexpected var, use let or const instead no-var
6:56308 error ‘use strict’ is unnecessary inside of modules strict
6:56421 warning Unexpected var, use let or const instead no-var
6:56623 warning Unexpected var, use let or const instead no-var
6:56662 warning Expected { after ‘for’ condition curly
6:56666 warning Unexpected var, use let or const instead no-var
6:56899 error ‘use strict’ is unnecessary inside of modules strict
6:56982 warning Unexpected var, use let or const instead no-var
6:57019 warning Unexpected var, use let or const instead no-var
6:57043 warning Unexpected var, use let or const instead no-var
6:57292 warning Expected { after ‘if’ condition curly
6:57461 warning Unexpected var, use let or const instead no-var
6:57602 warning Expected { after ‘if’ condition curly
6:58078 warning Unexpected var, use let or const instead no-var
6:58245 warning Unexpected var, use let or const instead no-var
6:58361 warning Unexpected var, use let or const instead no-var
6:58504 error ‘use strict’ is unnecessary inside of modules strict
6:58581 warning Unexpected var, use let or const instead no-var
6:58666 warning Expected { after ‘if’ condition curly
6:58706 warning Unexpected var, use let or const instead no-var
6:58753 warning Unexpected var, use let or const instead no-var
6:164867 warning Unexpected var, use let or const instead no-var
6:165019 warning Expected { after ‘for’ condition curly
6:165023 warning Unexpected var, use let or const instead no-var
700 problems (67 errors, 633 warnings)
@ ./components/Icon.jsx 42:22-53
@ ./auth/containers/ForgotPasswordApp.jsx
@ ./routes.jsx
@ ./app-main.js
Child html-webpack-plugin for “…/…/index.html”:
As you can see, most of it is due to the incorrect JS writing, but this is JS downloaded from the internet. I don’t know how to integrate into the file Icon. JSX very well.
@zsk
Okay, I can understand that you are a novice at React? Then you would need to learn that first before trying to mess around in a fairly big system like Metabase.
If you’re just trying to drop-in a JS file instead of using yarn, then it should be added to /resources/frontend_client/app/
I would highly recommend that you reconsider and simply just use the builtin screenshot utility in your operating system.
Thank you very much for your reply. I really don’t know about React. I can say that I haven’t used React. I can only use my guess to achieve the function I want, but through your reminder, I manage the html2cancas. JS file through yarn. And I have preliminarily completed the functions I want to achieve. Next I need to fine-tune. Thank you very much.
Will Metabase be closed source?