Skip to content

Export as PNG function #82

@markov00

Description

@markov00

Is your feature request related to a problem? Please describe.
I want to be able to save the chart as PNG image. This can be used to simplify client side export in Kibana.

Describe the solution you'd like
Add the possibility to export the chart as a PNG via a function call to the chart.
Konva has the possibility to get the DataURL from the Stage object (see https://konvajs.org/docs/data_and_serialization/Stage_Data_URL.html)

 const dataURL = stage.toDataURL();

This, btw, will only save the chart into a PNG, not the whole chart with the legend.
A possibility for that is illustrated on https://github.com/tsayen/dom-to-image#how-it-works
but is basically the following:

  • clone the DOM element of the legend
  • inline all the styles
  • create an SVG with a foreignObject with the cloned DOM element
  • save the SVG as image from js
  • copy and paste the image of the legend and the chart into a new image.

Describe alternatives you've considered
The legend can be rendered in canvas, but it's quite difficult and we need to move the whole action logic to a canvas element.
Another option is to render subsequentially a static legend on the chart canvas with only colors and texts of the existing legend.

Additional context
n/a

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

Checklist

  • this request is checked against already exist requests
  • every related Kibana issue is listed under Kibana Cross Issues list
  • kibana cross issue tag is associated to the issue if any kibana cross issue is present

Metadata

Metadata

Assignees

No one assigned

    Labels

    :exportExporting related issueenhancementNew feature or requestreleasedIssue released publicly

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions