Datas-Elements are DOM elements that contain stats and other statistics. Those stats elements can go to a simple number to entire sets of graphs. We'll see how to edit or create new data-elements in order to customize/add all sorts of statistics on statsTabs.

Before displaying numbers, we have to dig into some HTML. There are 2 types of stats-elements: large and small, the large one is for line/long graphs, and the small one is for pie charts and simple numbers with no graphs.

One of our priorities is to have a decent-looking page and UI, so the stats-elements grid should look something like that:

Stats-Elements are simple divs, just add the small, large or global class then do whatever you want to do inside. I will add more info in this category once the CMS will be done.

Displaying stats is really easy, in order to do this, you have to use simple datas- attributes:

You can add an attribute to any element, for example, if you want to display the total number of messages sent in the selected time range, you can do:

You sent
<span
   data-stats-type="messages"
   data-stats-method="total"
   data-stats-id="dashboardStats"
> {indicator} </span>
! (
<span
   data-stats-type="messages"
   data-stats-method="average-simpleIndicator-text"
   data-stats-id="dashboardStats"
>
than usual)

<script> overwriteStats("dashboardStats"); </script>

Will display

You sent 478 messages! (-87 less than usual)

So here is the data-stats attributes list:

(im not done writing this yet)