Stats of categories as a progress bars on GitHub

[brazzerstop]

Hi there

Have you ever noticed this work of art at GitHub?
https://github.com/anuraghazra/github-readme-stats#demo-1

It seems to me that this will be a great decoration for the your forum.

If you like it, Copy & Paste this code in your widget /extend/widgets - categories.tpl

<div id="stats-pro">

<div class="progress mt-4 stats-bar" style="height: 8px;">
{{{ each categories }}}
<div class="progress-bar" role="progressbar" style="width: {./totalTopicCount}%;background-color: {./bgColor};" aria-valuemin="0" aria-valuemax="100"></div>
{{{ end }}}
</div>

<div class="stats-info text-sm mt-1 mb-3">
{{{ each categories }}}
<span class="mb-3 me-2 fw-semibold text-nowrap"><i class="fa fa-fw fa-solid fa-2xs fa-circle" style="color: {./bgColor};"></i> {./name} <span class="text-xs text-muted">({./totalTopicCount})</span></span>
{{{ end }}}
</div>

</div>

[eeeee]

I would like to try this, but Im on mobile and the creating a widget doesnt work on mobile device (even in desktop mode).
@phenomlab kindly started a widget off for me when I asked few days ago, but then I changed themes and lost it again! as it moves down to Drafts and cant be dragged up into the Header.
If this could be fixed would be really good

On a plus, I do like how the widgets work, theres a lot of potential to do things in them.
For example-
can run code snippets if you have a coding forum,
3js works in it, to have revolving models etc

[DownPW]

I find it nice unfortunately I have a css code to change the color of the progress bar on smartphone in the topcis and this conflicts with your code.

/* Progress bar in topics */
.progress-bar {
  background-color: var(--bs-progress-bg-bar) !important;
}

A way to fix this?
Or maybe can I just change the name of the class ?

<div class="progress-barXXXXXXX" role="progressbar" style="width: {./totalTopicCount}%;background-color: {./bgColor};" aria-valuemin="0" aria-valuemax="100"></div>
{{{ end }}}
</div>

[DownPW]

EDIT: Change the name of the class seems to work

It would also be interesting to graphically improve the "Forum Stats" widget which is quite basic

[crazycells]

@brazzerstop said in Stats of categories as a progress bars on GitHub:

Hi there

Have you ever noticed this work of art at GitHub?
https://github.com/anuraghazra/github-readme-stats#demo-1

It seems to me that this will be a great decoration for the your forum.

If you like it, Copy & Paste this code in your widget /extend/widgets - categories.tpl

<div id="stats-pro">

<div class="progress mt-4 stats-bar" style="height: 8px;">
{{{ each categories }}}
<div class="progress-bar" role="progressbar" style="width: {./totalTopicCount}%;background-color: {./bgColor};" aria-valuemin="0" aria-valuemax="100"></div>
{{{ end }}}
</div>

<div class="stats-info text-sm mt-1 mb-3">
{{{ each categories }}}
<span class="mb-3 me-2 fw-semibold text-nowrap"><i class="fa fa-fw fa-solid fa-2xs fa-circle" style="color: {./bgColor};"></i> {./name} <span class="text-xs text-muted">({./totalTopicCount})</span></span>
{{{ end }}}
</div>

</div>

thanks for sharing, @phenomlab uses this on his forum, and it looks very cool...

[crazycells]

@baris I think even for tags, this "distribution bar" above makes more sense than the "progress bar" since tags are not competing with each other to reach #264... so, their "progress" is not that important...