add chart export png #6973
add chart export png #6973
Conversation
Update CHANGELOG.md
up master
kristw
added
the
enhancement:request
| @@ -78,6 +80,12 @@ class SliceHeaderControls extends React.PureComponent { | |||
| this.props.exportCSV(this.props.slice.slice_id); | |||
| } | |||
|
|
|||
| exportPNG() { | |||
| const title = this.props.slice.slice_name; | |||
| const index = $('input[value="' + title + '"]').parents('.chart-header').next('.dashboard-chart').index('.dashboard-chart'); | |||
There was a problem hiding this comment.
sorry, I am a react white
| @@ -0,0 +1,7261 @@ | |||
| /*! | |||
There was a problem hiding this comment.
Add as dependency in package.json instead of copying code into this repo.
|
|
||
| const propTypes = { | ||
| actions: PropTypes.object.isRequired, | ||
| canDownload: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired, | ||
| chartStatus: PropTypes.string, | ||
| latestQueryFormData: PropTypes.object, | ||
| queryResponse: PropTypes.object, | ||
| slice: propTypes.slice |
There was a problem hiding this comment.
This is referring to itself.
Please check prop-types reference on how to define a proper prop type.
|
Could you add an example of the exported png? Does it look exactly like taking a screenshot? |
That's true，it taking a screenshot. |
|
Also, if I remember correctly, this approach will not work if the chart uses |
| const w = parseInt(window.getComputedStyle(_canvas).width); | ||
| const h = parseInt(window.getComputedStyle(_canvas).height); | ||
|
|
||
| const canvas = document.createElement('canvas'); |
There was a problem hiding this comment.
the values which arepresent inside scroll are not screenshot
There was a problem hiding this comment.
Sorry, there is an error in my submission
There was a problem hiding this comment.
i am trying to take scrollheight for it but nothing is useful
There was a problem hiding this comment.
There are one mistakes above and it will be ok after modification
|
Hi @wushenchao , do you plan to reopen it? This is a great feature. |
Here, I don't know how to do use react, if you have a good idea, please let me know, thank you |
…9819) * feat(frontend): add ability to export dashboard and chart as image (#6973) * refactor: migrate download image as to typescript * feature(frontend): download as image updates add toast message if error occurs. make generate file stem an internal method. * refactor(frontend): move default background color to a const * feat(frontend): wrap download image toast in translate function
…pache#9819) * feat(frontend): add ability to export dashboard and chart as image (apache#6973) * refactor: migrate download image as to typescript * feature(frontend): download as image updates add toast message if error occurs. make generate file stem an internal method. * refactor(frontend): move default background color to a const * feat(frontend): wrap download image toast in translate function
add chart export png
#6737