[contributor wanted🙏]Tree diagram Echarts integration

[junlincc]

Motivation Superset offers a wide range of visualizations to serve different data structures and tell story users to convey through data. Looking at the 46+ chart types currently available in Superset viz selection, most of them(time series, composition, and distribution charts) focus on data analytics. The robust ability to turn the immense amount of enterprise data into actionable business insights has been an advantage of Superset in the BI market. One area that we would like to improve is to provide more viz types as a tool for story telling, project management and visualizing relationships. We currently offer Sankey Diagram, Force-directed Graph, Chord Diagram that are partially serving these purposes. Still, they are far away from enough to make Superset stand out in the BI landscape.

Proposed Solution Therefore, as part of Echarts viz enhancement project, we would like to introduce more relational diagrams and flow charts to Superset. To name a few that are on our radar, Event tree diagram, Funnel charts, Process flow diagram, Social network, etc. As Echarts offers most of the above as out-of-the-box solutions, we anticipate the experiment will be relatively smooth, but the entire process may take a couple of quarters without helps and contributions from the bigger community.

To kick off this open-project, we are going to start with integrating Echarts Tree diagram. A tree diagram is particularly useful in 1)recording and analyzing possible actions in events and 2)management planning that depicts the hierarchy of tasks and subtasks needed to complete an objective.

Calling for help from the community to signup for project(tree diagram) ownership and contribute 🙏 Superset data viz team will be offering all necessary support in engineering, product and design, and more.

Related: https://github.com/apache/superset/issues/7286 Roadmap item:https://github.com/apache-superset/superset-roadmap/issues/150

Echarts Tree diagram

[anushkrishnav]

I would like it work on the project with some guidance , sounds very interesting.

[srinify]

I will also raise my hand to help! @villebro @junlincc

[junlincc]

@anushkrishnav @srinify thank you so much both for your interest! @villebro needs to lay some groundwork first to make this process easier for you guys. We will reach out and kick off the project by the end of next week.

@austinpray are you in Superset slack?

@mistercrunch so glad to see that we have more and more contributors from the community. 😀

[anushkrishnav]

Is there a IRC or slack channel where I can seek guidance or talk to mentors, I am interested to work with Apache at GSOC 21 I wanted to understand the codebase and how I can be helpful.

[kamalkeshavani-aiinside]

I would like to contribute but not sure what skills are required for it. I am comfortable with Python, so let me know if I can be of any help.

[villebro]

Thanks for volunteering @anushkrishnav and @kamalkeshavani-aiinside, this is awesome! ❤️ We're currently cleaning up some typing issues that changed when upgrading from ECharts 4.x to 5.x (FYI @maloun96 who is looking into this right now). Once we have those cleaned up it should be easier to start work on these new plugins. @mayurnewase is currently working on the graph viz, (see https://github.com/apache-superset/superset-ui/pull/918) so we'll probably prioritize getting that one finished first + address any issues that we surface during that migration work to make sure subsequent ECharts ports are as easy to implement as possible. We'll keep you posted!

[anushkrishnav]

Sounds great @villebro , if you can share some prior examples and things we need to prior to starting this that would be useful, we can get ready so that once it kicks off we can jump right in and start working on it. I am currently learning about Event tree diagrams, Funnel charts, Process flow diagrams.

[villebro]

@anushkrishnav while we work on this, please check out the examples on the ECharts homepage, there's loads of good examples there to draw inspiration from. Also feel free to check out what the current ECharts implementations look like: https://github.com/apache-superset/superset-ui/tree/master/plugins/plugin-chart-echarts

[anushkrishnav]

Looking great, I guess having a bit of Typescript knowledge will be useful @villebro Is there a slack channel I can join to talk more about it or seek guidance

[mayurnewase]

Is there any progress on this? If not I would like to work on it.

[junlincc]

@mayurnewase hey Mayur thanks for volunteering AGAIN! cc @villebro ^ since @anushkrishnav is also interested in contributing, why don't you two work along side? we need help in both tree diagram and funnel chart. Please join #echarts-volunteer in slack to coordinate. many thanks to you both!

[anushkrishnav]

I am in, Will join shortly

[junlincc]

We ran a performance comparison with same dataset in NVD3 and Echarts line chart on the dashboard. Applying time grain filter to compare going from time-grain = year (9 rows) -> quarter (33 rows) -> week (2.5k rows) -> no time grain (10k rows) At 2.5k rows, NVD3 takes much longer to render At 10k rows, stuck entirely...

By proofing Echarts migration's benefits from ALL angles(functionality, performance, UX and extensibility), we hope to attract more people from the community to contribute and expedite this project.

Thanks for all the hard work of the superset-echarts team for the improvement @villebro @mayurnewase 🙏