Investigate charting libraries for ecoacoustic summary reports

[hudson-newey]

The ecoacoustic summary reports now include graphs & timelines

As we do not currently have a library in the client to handle graphs, we should investigate and evaluate our options.

Evaluation metrics should be on:

• Dependencies
• Features
• Is the library actively supported
• Are they Angular native
• What bugs are on the issue tracker
• etc...

Some potential options out of the gate (that need to be evaluated) are swimlanes ngx-charts
D3
Plotly.js
Chart.js

[hudson-newey]

@atruskie I have looked into our options for graphing libraries and have decided that Plotly.js is my preferred library for graphs Angular GitHub repo

This is because:

• It supports all the graph types and functionalities needed for the summary reports + extra (line graph, stacked area graph & error bars)
• It's actively maintained
• Semi-active community (1 new issue on StackOverflow a day)
• Uses D3 under the hood
• Can be styled to fit our theme
• Satisfies our existing tech stack (Native Angular, and RxJS support)
• Issues are resolved by contributors & there are no outstanding breaking issues
• Released under a Copyleft license (MIT)

My full justification and notes for and against each library can be found here

[hudson-newey]

After a discussion, we have decided to trial Vega Lite and Plotly.js by creating a line graph with error bars in both libraries

[hudson-newey]

From a short time experimenting with both libraries I have found that from a technical stand point: Vega Lite is by far the best option except that we have to use @ViewChild and it might not automatically update on change detection cycles (). It's downsides is that graphs will require some custom styling to match the theme.

However, plotly does have more benefits to users as it fits our theme more closely, and has UX features (e.g. users can scroll and zoom into plots) that Vega does not. However, I believe it is not worth the trade off as we can still style Vega Lite to match our theme, while we cannot remove the branding that comes with plotly, or style it in any meaningful way.

I've attached images of both libraries below

Vega-lite:

Plotly

Full pros and cons list

Vega: Pros: * easy to plot data * Supports JavaScript dateTime objects, and unix time by default * The sytax makes sense. I found I could add elements to a graph without even knowing the syntax. You can also look at the code directly more easily due to the stronger typing * For what it’s worth, it’s fun to use * Easy to style Cons: * We have to use ViewChild which is a bit hacky and will probably require a new component to generalise * Stringified date formats are in the format DD-MM-YYY * Can’t be styled to our theme Plotly: Pros: * Very easy to setup a plot * Users can interact with the graph without the need for additional features (e.g. they can zoom into the graph by drawing a bounding-box) * Stringified date formats are in the format YYYY-MM-DD * Users can scroll through the plot * Follows our design scheme Cons: * We have to use an older version of angular-plotly because we are still on version 14 * There’s small plotly branding in the corner of the plots * Data has an x array and a y array, each datapoint is not an object but a collection of items grouped by index * Harder to style manually * Loser typed objects than vega * Some configuration objects use snake case instead of camel casing _A performance profile of both implementations will be coming soon_