Stat Banner

[Discourse]

	Summary	Stat Banner displays a list of site stats on your homepage
	Preview	Preview on Discourse Theme Creator
	Repository	https://github.com/discourse/discourse-stat-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

You can create any number of stats to display, the stats are populated by the /about page, and you can choose from:

• topics
• posts
• active users
• users
• likes
• chat messages
• chat channels
• chat users

and these can be individually set from one of 3 time periods:

• 1 day
• 7 days
• 30 days

Aside from the source and period, you can also configure:

• title
• link (optional)
• manual_value (optional, overrides the automatic value)

Settings

Name	Description
display stats
banner title
show on
background color	Discourse color variable or hex value
text color	Discourse color variable or hex value
min column width
hide on mobile
plugin outlet	Plugin outlet that this component appears in. Try above-main-container or below-site-header , you can find more outlets with the plugin outlet location theme component
disable cache	The banner stats will refresh every time the banner is visible. Note that this may create a little additional server load.

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-15T14:38:41Z

Check document

Perform check on document:

[Jagster (Jakke Lehtonen)]

iPhone SE doesn’t obey hide on mobile.

Edit: looks like any mobile don’t follow that setting and the banner is always visible.

[Jagster (Jakke Lehtonen)]

And one small UX/UI request — links should look like a link.

[awesomerobot (Kris)]

Thanks for the quick feedback @Jagster! I just updated it to fix these issues

[Aaron_Walsh]

Hi, @awesomerobot,

Thank you very much for this Theme Component; I definitely snapped this up.

I have a question for you if you don’t mind, as I’m slightly confused. I understand the ‘Active Users’ as it’s self-explanatory, however, what do ‘Users’ cover?

[awesomerobot (Kris)]

Good question!

Active users is users seen within that 1/7/30 day time period (they visited the site logged in)

Users is the number of new accounts created within the 1/7/30 day time period

[Aaron_Walsh]

Good morning, @awesomerobot,

I’ve spent some time reflecting on this theme component and, based on your answer regarding ‘Users’ and ‘Active Users’, it doesn’t seem as though the information has been refreshed recently. I also seem to have two different values for these metrics.

Here are my stats on desktop:

And on mobile:

Even though the difference isn’t substantial, I can’t seem to figure out where these stats are being pulled from.

I’ve tried implementing a Refresh HTML Code for the Statistics like so:

<script>
  setInterval(function() {
    location.reload();
  }, 60000); // Refresh every 1 minute (60000 milliseconds)
</script>

Note: The code will reload the page every 1 minute (60000 milliseconds). You can adjust the interval as per your requirements.

However, I’m unsure if this can be added into the settings editor.

Any help would be greatly appreciated.

[Aaron_Walsh]

Update:

I’ve come to the conclusion it should look like this?

[
	{
		"setting": "display_stats",
		"value": "[{\"source\":\"posts\",\"period\":\"30_days\",\"title\":\"Posts\",\"link\":\"\",\"manual_value\":\"\"},{\"source\":\"likes\",\"period\":\"30_days\",\"title\":\"Likes\",\"link\":\"\",\"manual_value\":\"\"},{\"source\":\"active_users\",\"period\":\"30_days\",\"title\":\"Active Users\",\"link\":\"\",\"manual_value\":\"\"},{\"source\":\"users\",\"period\":\"30_days\",\"title\":\"Sign-Ups\",\"link\":\"\",\"manual_value\":\"\"}]"
	},
	{
		"setting": "banner_title",
		"value": "Statistics for the past 30 days"
	},
	{
		"setting": "show_on",
		"value": "homepage"
	},
	{
		"setting": "background_color",
		"value": "var(--tertiary-low)"
	},
	{
		"setting": "text_color",
		"value": "var(--primary)"
	},
	{
		"setting": "min_column_width",
		"value": "10em"
	},
	{
		"setting": "hide_on_mobile",
		"value": false
	},
	{
		"setting": "plugin_outlet",
		"value": "above-main-container"
	},
	{
		"setting": "javascript",
		"value": "setInterval(function() { Discourse.__container__.lookup('controller:widget').send('refresh'); }, 3600000);"
	}
]

However, I get an error message:

javascript: These settings were added. Please remove them and try again.

[awesomerobot (Kris)]

The stats are pulled from the about page, they use the same data from the table at the bottom of that page:

The data in the banner is refreshed based on the lowest stat period, from the time that the user first saw the banner.

So for example, if you have the banner configured with stats from the last day, after you initially see the banner it will refresh its data in 24 hours. If the banner is configured to show only stats from the last month, the data will refresh a month after you first viewed it (or if you clear your browser localStorage).

It was implemented this way to reduce the number of requests made, so rather than show updated stats every time the banner is viewed, they’re cached in the browser’s localStorage.

@Aaron_Walsh

javascript: These settings were added. Please remove them and try again.

This editor is only for editing existing settings, you can not add new ones (or javascript) here at all.

If you’re looking for this banner to update more often, I could add a new setting that will disable caching.

[Aaron_Walsh]

Hi, @awesomerobot

Thank you for the detailed response and for providing the source of the stats. However, I’m still facing the same issue with the stats displayed on my mobile phone, which has been the case since I initially installed it.

According to my understanding, my stats should have been updated to the following by now:

I have also tried clearing my browser cache, but it hasn’t made any difference.

@awesomerobot

If you’re looking for this banner to update more often, I could add a new setting that will disable caching.

I would greatly appreciate it if this option is possible, as it would provide a more comprehensive insight into the forum for consumers.

[awesomerobot (Kris)]

those look like the stats from /admin, which are probably a little different from those on /about, but regardless… if you update the component I’ve added a setting to disable caching:

[Aaron_Walsh]

Wonderful, it functions flawlessly! Once I activated the setting, it immediately refreshed. This approach is far simpler than clearing the cache since I always keep the forum open, along with many others!

Thank you for your dedication!

[ShaneVeldhuizen]

Is there a way to set the period so that it is showing ‘all time’ stats?

Additionally it would awesome if I could display total ‘votes’ as calculated by this component: Topic Voting | Discourse - Civilized Discussion

[nolo (Manuel)]

The component is looking up stats from /about.json. So I guess “all time” could be added rather easily as it’s an available value as well.

However, if you’d want to display other stats I guess you’d need to fork and adjust the component so it looks up those values from where they are available.

[ShaneVeldhuizen]

So I can update this manually in the settings JSON since it’s not in the dropdown?

[nolo (Manuel)]

No, if you add an entry to manual_value, it will just replace the looked up value with a static one. Maybe naming this field static_value would convey this better?

You can get the all-time count by adding the all-time period selector to the dropdown:

It’s just a simple change in the settings file of the component. I pushed a branch with this here: GitHub - nolosb/discourse-stat-banner at count. However, for a PR it would probably still need some logic to rename that variable on the dropdown?

[ShaneVeldhuizen]

Incredible, thank you for adding this!

[jrgong]

Is there any way to limit it to a specific category? I tried to above-category-heading outlet and wanted to at least use CSS to limit it to a specific category, but then it’s not displayed anywhere

[awesomerobot (Kris)]

if you change the theme setting show_on to everywhere you should be able to use this CSS to display it in a single category (replace examplecategory with your relevant category slug)

.stat-banner__wrapper {
  display: none;
}

body.category-examplecategory {
  .stat-banner__wrapper {
    display: block;
  }
}