Add pie chart style to language card

[rickstaa]

Is your feature request related to a problem? Please describe.

As discussed in #945 it would be nice to give users the ability to display their most used languages as a pie chart.

Describe the solution you'd like

[anuraghazra]

We can probably explore that, the reason we choose our current design for the card is because we wanted to make it match the design of github's native language cards.

[rickstaa]

@anuraghazra Makes sense. I opened this as a response to #945 (comment) when I was cleaning up the discussions page. Let's use this issue to check if there is enough support for this feature from the community.

[sasankaweera123]

If you are able to create a pie chart card it will be great for GitHub organizations

[rickstaa]

@sasankaweera123 I currently do not have the time to implement this myself. However, since it is one of the top requested features, feel free to create a pull request and I will look at it.

[rickstaa]

If someone wants to tackle this, https://github.com/d3/d3-shape#pies is a good package that can be used for creating pie charts. An example can be found here.

[arndom]

Hey, I would like to work on this, please assign it to me

[rickstaa]

Great! I assigned you to the issue! 🚀

[sasankaweera123]

This Solution is great: Summary Cards

[rickstaa]

@sasankaweera123 Good one! Summary Cards is a good code example of how this feature can be added to GRS.

[arndom]

@rickstaa is the goal to have it appear exactly as the image in the issue description?

[rickstaa]

@arndom O no, that was a simple example draft @HPaulson made in #945. I just copied it here to explain the idea. I think the pie chart should be an option on the current language card (i.e. pie_chart=true). It should therefore be as close as possible to the current card. So something like the language card in https://github.com/vn7n24fzkq/github-profile-summary-cards with the legend to the left and the pie chart to the right. What do you think is a good design?

I found https://www.chartjs.org/docs/latest/charts/doughnut.html, which can also be used to create pie charts if the method used in https://github.com/vn7n24fzkq/github-profile-summary-cards is not sufficient.

[arndom]

oh ok, almost done, remains the position of langs...ended up using the same pkg as summary cards

[rickstaa]

Great. It could also be implemented like the hide_rank option in the stats card where the card is the same, but the pie chart is added.

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)](https://github.com/anuraghazra/github-readme-stats)

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide_rank=true)](https://github.com/anuraghazra/github-readme-stats)