# Discourse-informatie en basisberekeningen gebruiken in aangepaste CSS?

**URL:** https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057
**Category:** Development
**Created:** [15 december 2022 om 16:42 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057 "2022-12-15T16:42:46Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Matt0x01](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matt0x01/32/264811_2.png) [@Matt0x01](https://meta.discourse.org/u/Matt0x01)
#### Post date: [15 december 2022 om 16:42 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/1 "2022-12-15T16:42:46Z")

</div>

Hi all,

I’m trying to find a way to show # of topics in categories on the front page and if theres a way to further sort them based on their tags?

And any idea how to do simple math using the #'s above with javascript?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [15 december 2022 om 17:39 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/2 "2022-12-15T17:39:33Z")

</div>

You can start from here:

```js
<script type="text/discourse-plugin" version="1.4.0">
    api.modifyClass("component:topic-list", {
      pluginId: "returnTopicList",
      didInsertElement: function() {
        this._super();
        console.log(this.topics);
      }
    });
</script> 

```

This will output the list of the topics as well as their attributes (including tags).  
Then I suppose you just need to juggle a bit with the array to achieve what you want.

---

<div class="post-metadata">

### Author: ![Matt0x01](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matt0x01/32/264811_2.png) [@Matt0x01](https://meta.discourse.org/u/Matt0x01)
#### Post date: [15 december 2022 om 18:25 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/3 "2022-12-15T18:25:54Z")

</div>

Hey @Canapin,

Thanks for the help! I’m quite clueless with how the javascript on Discourse works can you explain what this does/how it works and how to work with it?

I’ve looked for somewhere I can get a feel for how it works, any suggestions as well?

---

<div class="post-metadata">

### Author: ![Matt0x01](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matt0x01/32/264811_2.png) [@Matt0x01](https://meta.discourse.org/u/Matt0x01)
#### Post date: [15 december 2022 om 20:05 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/4 "2022-12-15T20:05:40Z")

</div>

For more context, I’m trying to have the number of topics in each category to be pulled from Discourse and used in the table for Discuss1-4. If possible I’d like to also have the sub category of the topic sorted into A-F as well. All in all I just want it to update as and when a topic is moved so I don’t have to do it manually.  
Hopefully I described this well and please feel free to ask for clarifications 🙂

(Apologies for the sloppyness of the table)

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/b/5/1b525457427766abe33ed5b9fc471fe49585a34c.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [15 december 2022 om 21:04 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/5 "2022-12-15T21:04:17Z")

</div>

I don’t understand quite well what you want to achieve. Where do you want this table to be displayed? On a new page or an existing page?  
What do A B C D E F mean? What does Discuss 1 to 4 mean? Are they categories?  
Do you need the total number of posts from each category?

---

<div class="post-metadata">

### Author: ![Matt0x01](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matt0x01/32/264811_2.png) [@Matt0x01](https://meta.discourse.org/u/Matt0x01)
#### Post date: [15 december 2022 om 21:45 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/6 "2022-12-15T21:45:17Z")

</div>

Ok, let me try to reword them since I made a little error in calling tags sub categories.

So let’s have Discuss 1-4 = Category 1-4  
and A-F will be for [tags](https://meta.discourse.org/t/admin-guide-to-tags-in-discourse/121041)

So let’s pretend the table is blank. I create a new topic under Category 1 and add an ‘A’ tag. Now the table should show a single topic next to Category 1 and under ‘A’ :

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/f/5/ef55d8eb12830dfe43fb67beb9a524f4062500d2.png)

In the event that I remove tag ‘A’ and assign tag ‘C’ it will update the table accordingly.

Is there a way to do this?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [15 december 2022 om 21:47 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/7 "2022-12-15T21:47:30Z")

</div>

Do you want the information, or to display it on egret page for every user? If it’s the former, you might want the [data explorer](https://meta.discourse.org/t/32566?silent=true) plugin.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [16 december 2022 om 10:39 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/8 "2022-12-16T10:39:17Z")

</div>

CSS is too superficial for this purpose. It is a styling language to help with layout and look and feel.

What you want is an end to end solution using Rails to calculate, summarise and serialise your data, Ember JavaScript to receive the data and present it nicely on a route and CSS to style it as required. You could even use the D3 library to make a particularly nice visualisation.

Take a look at my [Word Cloud](https://meta.discourse.org/t/word-cloud-plugin/210169) or [Network Vis](https://meta.discourse.org/t/community-network-visualisation/184189) Plugins that do exactly all this. Modify them to suit your requirement.

---

<div class="post-metadata">

### Author: ![Matt0x01](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matt0x01/32/264811_2.png) [@Matt0x01](https://meta.discourse.org/u/Matt0x01)
#### Post date: [16 december 2022 om 14:45 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/9 "2022-12-16T14:45:36Z")

</div>

I’d like it to display for every user

---

<div class="post-metadata">

### Author: ![Matt0x01](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matt0x01/32/264811_2.png) [@Matt0x01](https://meta.discourse.org/u/Matt0x01)
#### Post date: [16 december 2022 om 14:45 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/10 "2022-12-16T14:45:49Z")

</div>

Awesome! I’ll check this out

---

<div class="post-metadata">

### Author: ![Matt0x01](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matt0x01/32/264811_2.png) [@Matt0x01](https://meta.discourse.org/u/Matt0x01)
#### Post date: [19 december 2022 om 15:39 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/11 "2022-12-19T15:39:55Z")

</div>

Hey @merefield,

After checking these out and looking at how it works from the generator link, are you sure I’d be able to just get the number of topics under a category with these? Just confirming before I implement this into my discourse

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [19 december 2022 om 15:42 UTC](https://meta.discourse.org/t/use-discourse-information-and-basic-calculations-in-custom-css/249057/12 "2022-12-19T15:42:58Z")

</div>

Obviously you will need to create your own custom calculation, but what I shared was an appropriate skeleton that overrides all the correct parts of the architecture.

What you do with it is up to you …
