Replace react-vis library for drawing charts

[yurishkuro]

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:

• [Feature]: combine all graph views into one - LFX Mentorship #1466

[Yushmanth-reddy]

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]

thought chart.js would be a better alternative

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

[Yushmanth-reddy]

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.

2. 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]

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]

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:

• [Feature]: combine all graph views into one - LFX Mentorship #1466

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]

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]

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]

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

[yurishkuro]

Yes, it is on the allowed list https://github.com/cncf/foundation/blob/main/allowed-third-party-license-policy.md#approved-licenses-for-allowlist

[anikdhabal]

Yes, it is on the allowed list https://github.com/cncf/foundation/blob/main/allowed-third-party-license-policy.md#approved-licenses-for-allowlist

That's great.

[prathamesh-mutkure]

@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]

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

[yurishkuro]

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

[anikdhabal]

@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:-

What do you think?

[yurishkuro]

recharts seems reasonable.

[coderboy-yash]

Hey @yurishkuro,

I have read the entire discussion between you and anikdhabal and noticed that he proposed using Recharts.js. After reviewing it, I found that Recharts is still actively supported, with its last update just 2 days ago and 2,619,125 weekly downloads.

If you approve, I can start replacing react-vis with Recharts.

[navaneeth-dev]

I have already started, you can check the PR discussion.

[coderboy-yash]

hey @yurishkuro i have cloned the project and then made some changes locally ,I have replaced react-vis library to recharts from this file ./packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
I am attaching some screenshots of the changes tell me if you like it or not , I am not making a pr now because I have to make some more changes to it, in the mean time if you see my work it would be helpful in my further work.

previous

after changing the library to recharts

[coderboy-yash]

@yurishkuro please reply early so I can go ahead early with my work.

[yurishkuro]

@coderboy-yash there is already PR in progress for this issue

[coderboy-yash]

@navaneeth-dev are you still working on this issue or I can take this issue ?

[coderboy-yash]

@coderboy-yash there is already PR in progress for this issue

are you talking about the pr by @navaneeth-dev or is some other pr also working on this issue.
I am leaving this issue for now but if no one closes this issue completely, please allow me to work on this issue.

[navaneeth-dev]

Yes, I am working on it, was busy with some work. Will start again soon.