Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace react-vis library for drawing charts #1597

Open
yurishkuro opened this issue Jul 21, 2023 · 15 comments · May be fixed by #1722 or #2242
Open

Replace react-vis library for drawing charts #1597

yurishkuro opened this issue Jul 21, 2023 · 15 comments · May be fixed by #1722 or #2242

Comments

@yurishkuro
Copy link
Member

yurishkuro commented Jul 21, 2023

This library (https://github.com/uber/react-vis) is on the verge of being unsupported (it was recently archived, but then resurrected, apparently with a single maintainer). We do not use a lot of features from it, mostly for the charts:

$ grep -rl react-vis ./packages/jaeger-ui/src | grep -v DependencyGraph
./packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
./packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
./packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
./packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js

I think it should not be too difficult to replace it with something more modern an actively supported / used. I don't have a specific candidate in mind, doing a bit of research and pros/cons is part of this ticket (e.g. https://wpdatatables.com/highcharts-alternative/).

NB: I intentionally excluded DependencyGraph from this, since that could be part of another issue:

@yurishkuro yurishkuro changed the title Replace react-vis library Replace react-vis library for drawing charts Jul 21, 2023
@Yushmanth-reddy
Copy link
Contributor

Hey, @yurishkuro happened to come across this issue and thought chart.js would be a better alternative for react-vis. May I work on this?

@yurishkuro
Copy link
Member Author

thought chart.js would be a better alternative

that is not a "research of pros/cons". Can you defend it?

@Yushmanth-reddy
Copy link
Contributor

I have gone through the website and realized the chart is simple and clean. So thought chartjs would be a better alternative. However, I am listing down the pros and cons of chartjs.

  1. Pros:
  • Chartjs is a good balance between feature-rich visualizations and efficient rendering because of its small size.
  • Which results in low loading time and page impact for the website.
  • chartjs is compatible across all modern browsers.
  • Finally provides a wide range of charts which are entirely responsive.
  1. Cons:
  • Customizations might be limited compared to D3.js
  • It is unsuitable for highly customized data visualizations (In this case, D3js would be a better option).

Please let me know whether it suits the project or should look into another library.

@yurishkuro
Copy link
Member Author

Functionality is not the only criteria, we also need to compare how active the project is, how sustainable it is (how many maintainers, contributors). Also, aren't we already using D3 in plexus?

@anikdhabal
Copy link
Contributor

This library (https://github.com/uber/react-vis) is on the verge of being unsupported (it was recently archived, but then resurrected, apparently with a single maintainer). We do not use a lot of features from it, mostly for the charts:

$ grep -rl react-vis ./packages/jaeger-ui/src | grep -v DependencyGraph
./packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
./packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
./packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
./packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js

I think it should not be too difficult to replace it with something more modern an actively supported / used. I don't have a specific candidate in mind, doing a bit of research and pros/cons is part of this ticket (e.g. https://wpdatatables.com/highcharts-alternative/).

NB: I intentionally excluded DependencyGraph from this, since that could be part of another issue:

After conducting some research, I came across a library called 'recharts.' With over 1.5 million downloads and an active community, it seems promising. The latest update (version 2.7.3) was released today. After carefully reviewing it, I believe that switching from 'react-vis' to 'recharts' shouldn't be too difficult. https://github.com/recharts/recharts
If you agree, then I will make a PR soon.

@yurishkuro
Copy link
Member Author

Epoch is another d3-based module. But the D3js.org website itself recommends https://observablehq.com/plot/ for charting, built by the same team as D3.

@anikdhabal
Copy link
Contributor

anikdhabal commented Aug 9, 2023

Epoch is another d3-based module. But the D3js.org website itself recommends https://observablehq.com/plot/ for charting, built by the same team as D3.

I think choosing Plot seems to be a good decision, as it was developed by the same team and also has an active community. Recharts also.

@yurishkuro
Copy link
Member Author

Need to verify with CNCF that the ICS license is acceptable (https://github.com/observablehq/plot/blob/main/LICENSE)

@yurishkuro
Copy link
Member Author

@anikdhabal
Copy link
Contributor

anikdhabal commented Aug 9, 2023

@prathamesh-mutkure
Copy link
Contributor

@yurishkuro tremor (https://github.com/tremorlabs/tremor) is also a good option

  • it's open-source
  • Good community support, over 30k weekly downloads on npm, and 11k+ stars on GitHub
  • Theme can be customized
  • Fast

It's used by many startups too

@anikdhabal
Copy link
Contributor

anikdhabal commented Aug 15, 2023

@yurishkuro I've completed most of the part of this. Can I make a PR or leave it for mentorship?

@yurishkuro
Copy link
Member Author

Candidates who demonstrate their skills via PRs have better chances of being selected.

@anikdhabal
Copy link
Contributor

@yurishkuro When working with Observable Plot, I noticed a lack of functionality compared to React Vis. For instance, there aren't straightforward or default techniques for adding events and event handlers in the plot, and there's no direct way to include tooltips that display user-set content. There are several other drawbacks as well.

I've mentioned before that there is a library called Recharts which we can use. It has over 20k stars on GitHub and is widely used by many organizations. Additionally, it has an active community. The last update was made just 2 weeks ago. The best part is that it offers similar functionality to React Vis and a similar syntax. https://recharts.org/en-US

I've completed most of it. eg:-
Screenshot 2023-08-21 024432
What do you think?

@yurishkuro
Copy link
Member Author

recharts seems reasonable.

@anikdhabal anikdhabal linked a pull request Aug 22, 2023 that will close this issue
4 tasks
@MarkPollmann MarkPollmann linked a pull request Apr 5, 2024 that will close this issue
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants