How to use the visualization plugin in a react component?

Elastic Stack Kibana
1

Hello! I recently joined a project which is developing a plugin for Kibana, in this project, we use the Visualizations plugin to generate some presentations using data stored in ES indices.

I'm trying to understand better how it works and how to improve on it, for that I have a few questions about the start methods defined in the visualization plugin kibana/plugin.ts at 7.13 · elastic/kibana · GitHub

The createVis method takes two arguments, a visType and a visState. I think I understand the visType, but where can I learn more about the visState objects? Like what they contain, what are they used for, etc. Im also not sure how the return of the createVis function can be used, how would show the visualization in my page with a react component?

And what are the methods convertToSerializedVis and convertFromSerializedVis ? What is a serializedVis and how can I use them?

2

Hello Manuel,

The Kibana team has been working to switch over to Typescript over the last couple of years, and at this point we have pretty good coverage! This means you can look at a variable like visState and see its type attributes to understand what it is and how it should be used. For example, I see visState is of interface type SerializedVis<T = VisParams>, and has the attributes listed here.

Rather than dive into the specifics of createVis, convertToSerializedVis and convertFromSerializedVis, I'll tell you how I might approach seeing how they're used in the code:

  • Get a good editor or IDE like VS Code, Intellij, etc.
  • Most good editors/IDEs will have some options for intellisense or something similar so you can right-click on a variable and see usage elsewhere in the codebase. Minimally you can do a "find all" in the project and probably still get some good results
  • Look at tests where these variables are mocked and see how they're used

Hope that gets the ball rolling for you!

Regards,
Aaron

3

Ok, there is more to read on how to render them by seeing how they are used, that's a help.
But on the visState there is still a property I don't understand.
params takes a type VisParams but VisParams is defined like this

export interface VisParams {
  [key: string]: any;
}

I know this is because each visualization has their own kind of params, but is there anywhere I can read about those params for the types defined in kibana by default?

Also, I was asked if presenting custom data that is not present in a ES index is possible, just inputting the raw data to the visualization plugin, is it?

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.