Charts: Investigate and replace the current chartist library

[softsimon]

To fix various bugs and limitations like #70, but also add new features like hover, we need to replace the current deprecated Chartist chart library that is used throughout the site to display mempool and fee data. The graph and colors should not differ too much from the current design.

Consider the following libs:

http://dygraphs.com/
https://d3js.org/

The charting libs should also be wrapped in angular components for seamlessness and tree shaking ability.

[thehapax]

I'd like to work on this issue, please.

[thehapax]

Here's my analysis for:

Best Open Source Angular Chart Libraries with Directives

Some of the criteria I looked at were the following:

• [A] Well maintained chart library
• [B] Well maintained Angular directive
• [C] Similarity of charts style to mempool.space
• [D] Ease of use and how much work to implement and maintain
• [E] Difficulty to transform data to chart format

Based on above criteria I ranked each one from 1 to 5, where 1 is least to 5 as most favorable
Note that [C] is based only on what I see on the examples and docs, and for some it may be possible to adjust to use the same fonts, line style, etc. but would require additional work.

I looked at the chart libaries from doing a wide search and also from these guides here:

Best Angular Chart Libraries
5 open source versions
https://www.ngdevelop.tech/best-angular-chart-libraries/

10 Best Angular Chart libraries
https://www.dunebook.com/angular-chart-library/

These are the best open-source angular chart libraries available with angular wrapper.

• ngx-charts (Swimlane - by commercial maintainer)
• ngx-echarts (Echarts)
• ng2-charts (Chart.js)
• angular-plotly.js (Plotly.js - Commercial)
• PrimeNG Charts (Chart.js)

Which leaves us really with 2 good choices for Angular directives: Chart.js and Echarts.

===

Chart.js
[A]: 5, [B]: 5, [C]: 5, [D]: 5, [E]: 4

Notes:

• This would be my Add instructions and screenshots to README #1 pick. Well maintained and large community
• Very Simple, straightforward Charting library. Easy and quick to pick up
• Built in style is most similar to current mempool.space charts
• Has the built-in feature to turn on and off different datasets in the legend.
• Requires data to transformed to fit its requirements.
• provides only the 6 basic type of charts with some variations, including pie, line and chart.
• Many AngularJS directives:
  • http://jtblin.github.io/angular-chart.js/
  • https://github.com/valor-software/ng2-charts
  • https://www.digitalocean.com/community/tutorials/angular-chartjs-ng2-charts

ECharts -
[A]: 5, [B]: 5, [C]: 3, [D]: 5, [E]: 4

Notes:

• well maintained, open source - from Apache but also Weibo from China
• Has some powerful features and more options than Chart.js
• Line Styling is not as close to mempool.space
• Examples : https://echarts.apache.org/examples/en/index.html
• Angular Directive:

D3.js
[A]: 5, [B]: 5, [C]: 3, [D]: 1, [E]: 4

Notes:

• By itself - “D3.js is not a chart library. It is a chart parts library. The library feels like a mashup of SVG and data manipulation with some sugar sprinkled on top. While immensely flexible, the flexibility comes at the cost of complexity. “ (https://www.mattlayman.com/blog/2015/d3js-area-chart/)
• Allows for more complex charting, than the basic types such as pie, line and bar
• Is a lot more code and more work to get started with than others, heavy amount of configuration. A few developers have suggested not to use unless absolutely needed.
• D3Js example of a stacked area chart - motion can be a bit jerky https://www.d3-graph-gallery.com/graph/stackedarea_template.html
• AngularJS directives:
  • best recommended D3 directive is maintained by Swimlane, but it is a company, it is a subset of D3.js and provides access to most commonly used charts. - https://swimlane.github.io/ngx-charts/#/ngx-charts/tree-map-demo
  • This directive appears to make it much easier to use D3.js but is highly restricted by what Swimlane offers
• The are other very well designed and maintained D3.js alternatives, however all are in React, but really quite beautiful.
  • Nivo: https://nivo.rocks/storybook/?path=/story/line--area-gradients
  • Recharts: http://recharts.org/en-US/examples/StackedAreaChart

One more - There is Angular-nvD3 but it hasn't been updated in 4 years although build is passing. I'm not sure how we'd want to quality this - some very good examples here: http://krispo.github.io/angular-nvd3/

Dygraphs
[A]: 2, [B]: 1, [C]: 2, [D]: 5, [E]: ?

Notes:

• Angular Directives:
• does not seem to be actively maintained, some more than 3 years old
• https://github.com/search?q=angular+dygraphs

C3.js - D3-based reusable chart library
[A]: 3, [B]: 1, [C]: 2, [D]: 5, [E]: 4

Notes:

• Simplified version of D3.js, easy to use
• Angular Directive more than 3 years old, unclear if actively maintained

Highcharts

• commercial

Plotly

• commercial

[thehapax]

Note:

Echarts chart resizing scales well on mobile simulator
Chart.js chart axes doesn't auto scale as well on mobile simulator

[thehapax]

@softsimon Yesterday, I went to built the starter app for ngx-echarts, it turned out to have a number of issues. The angular directive project appears to be still a work in progress. Several modifications needed to get it running.

Here are my detailed notes:

• https://github.com/thehapax/ngx-echarts-starter#readme

Production build on netlify:

• https://ngx-echarts-starter-a0adf4.netlify.app/

[thehapax]

If you are ok with the above caveats, I'll continue work on the color/style mockups

[thehapax]

Hi - Just checked Angular directive ng2-charts, sample works fine with Angular 10.0.6, see full list of dependencies and 1 warning here, netlify deploy here

Todo:

• Test ngx-charts (backup Angular directive option) on Angular 10
• Create identical mockup of mempool chart using both ngx and ng2 directives.
• Test swimlane angular directive as other option.

Regarding @wiz 's comment - I took a look at bisq.market. It looks like everything so far is just line charts - If we need to do something more complex than line, bar, radar, doughnut/pie, polar area, bubble, scatter, area then the current chart.js selection wouldn't cover it.

I assume we'll need Financial Candlestick charts for Bisq at some point, which chart.js can cover. But if we need something like a cloropleth geo map or treemap or a chord diagram, we'd need to use a different library such as echarts. How we want to represent items such as Cycles in charts could be done with a simple bar, line or pie chart but its not specified in the google doc if there are any preferences.

My other concern about graphing libraries is that Angular directives are not going to be well supported in the future. Most of them are dying or on the way out. The chart libraries are all well supported and will continue to be well supported and maintained but Angular Directives libraries are trending down in terms of support and are independent of the charting libraries. Which means in a few years there might not be any decent support for angular directives for any chart libraries. Its something to consider if we have to rely on any angular directive and if angular is the choice for development.

While chart libraries often have many developers or foundations maintaining and keeping them current, the available angular directives are often sole developers who, may choose to just abandon the project at any time. It is a risk to consider. If we select an angular directive that is maintained now, it might not keep up with the latest Angular core release in 1 year.

[thehapax]

Note:

Echarts chart resizing scales well on mobile simulator
Chart.js chart axes doesn't auto scale as well on mobile simulator

Correction - Chart.js can look good on mobile; checked another sample source.

[thehapax]

Currently don't have time to work on an echarts mockup so am unassign-ing self.

[wiz]

@TechMiX can you look into a new chart library that would allow us to have a mouseover legend thing

[TechMiX]

Sure.
Even the current library has it I guess. We should first probably check that.

[wiz]

@RandyMcMillan do you want to look into replacing our chart library? would be nice to hear your ideas on this

[RandyMcMillan]

@wiz
per our conversation - i would rather implement the statsd network statistics service - i already have a head start on this

[wiz]

What is statsd? Maybe make a separate issue for that, I'm not familiar with it