nukeop
[Listening history] Add charts with recent history
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.
If there's no one working on this, I would love to take this one up! :)
Hi @nukeop, I would love to work on this issue. Can it be assigned to me ?
Hi! Was wondering if this was ever resolved and if not, I would love to work on it!
It wasn't, you can go ahead, just let me know what you're planning to do before you start.
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.
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.
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.
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.
https://github.com/nukeop/nuclear/pull/1599 Here's a link to my pull request!
