[Listening history] Add charts with recent history

[nukeop]

This issue can be taken by anyone.

Now that listening history is being stored, we can start adding charts. There's a million libraries that allow drawing charts in JS and React so it's up to the implementer which one to use.

Helpful charts could include: recent artists, recent genres, or most listened to tracks. The charts can be pie charts, bar charts, or something else.

If you want to take this issue, make a comment here and say what chart you'd like to add, and roughly how you're planning to do it. You should also write some sensible tests for this.

[rutviklhase]

If there's no one working on this, I would love to take this one up! :)

[ChiamakaUI]

Hi @nukeop, I would love to work on this issue. Can it be assigned to me ?

[nukeop]

Okay, go ahead, let me know how it goes

[alicemmartinez]

Hi! Was wondering if this was ever resolved and if not, I would love to work on it!

[nukeop]

It wasn't, you can go ahead, just let me know what you're planning to do before you start.

[alicemmartinez]

Hi! Sorry for the late response. I was planning on adding some graphs to the listening history section. More specifically, I was thinking of doing a pie graph that shows how often one listens to a specifc artist. Additionally, I was going to add perhaps a bar graph to represent recent genres. Lastly, some sort of listed chart that shows the top 3 most listened-to songs. I started this process by creating a new subcomponent of ListeningHistoryView known as ListeningHistoryGraphs.

[nukeop]

Alright, so let's say 3 charts for now (though even 1 would be a nice start, more can always be added later):

• A pie chart that shows the top X (perhaps 10) most listened to artists in a time unit
• A bar graph for the recent genres. Some kind of a bubble graph might be nice to visualize this, if you're up to the challenge.
• A list + chart (like last.fm) that shows the top X songs in a time unit. Maybe more than 3.

Also both charts should have dropdowns that let you select the X, and another one for the time range. Example from last.fm:

Did you select the library you want to use for drawing the charts? Last.fm uses Highcharts, but it comes with a prohibitive cost (for a free software projects). Some suggestions from me:

• https://github.com/recharts/recharts - easy to use
• https://d3js.org/ - fast and very rich, might be harder to use
• https://github.com/plouc/nivo - I haven't used this but looks promising
• https://apexcharts.com/ - looks simple enough, might be a little simplistic

Of course if you already have a favorite library for this kind of thing you can use something else.

[alicemmartinez]

I am starting to work on a pie chart hat shows the top 10 most listened to artists in a time unit, with the dropdown. I do see I was a bit ambitious with 3 graphs all at once, but would love to keep working on them at a later time.

Additionally, I have familiarized myself with recharts, but would be open to switching if there is a library that you prefer.

[nukeop]

I'm cool with that, I'm familiar with that library already. It's fine to keep the scope for your PR limited. We can always add more stuff later.

[alicemmartinez]

https://github.com/nukeop/nuclear/pull/1599 Here's a link to my pull request!

[ParagGhatage]

@nukeop I would like to work on this issue. Would you assign me this?

[nukeop]

We don't assign contributors to issues. You can open a MR at any time.