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:

• https://github.com/jaegertracing/jaeger-ui/issues/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.