diff options
Diffstat (limited to 'templates/stats.html')
| -rw-r--r-- | templates/stats.html | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/templates/stats.html b/templates/stats.html index e0a6a91..9b71679 100644 --- a/templates/stats.html +++ b/templates/stats.html @@ -78,6 +78,26 @@ </div> <ol id="watched-with" class="stats-list"></ol> </section> + + <section class="stats-panel"> + <div class="stats-panel-header"> + <div> + <p class="eyebrow">Genres</p> + <h2>Most watched</h2> + </div> + </div> + <ol id="top-genres" class="stats-list"></ol> + </section> + + <section class="stats-panel"> + <div class="stats-panel-header"> + <div> + <p class="eyebrow">Decades</p> + <h2>By era</h2> + </div> + </div> + <ol id="film-decades" class="stats-list"></ol> + </section> </section> {% endblock %} @@ -118,6 +138,16 @@ <li><span>${item.watched_with}</span><strong>${item.count}</strong></li> `).join(""); + const topGenres = document.getElementById("top-genres"); + topGenres.innerHTML = data.films_per_genre.slice(0, 8).map((item) => ` + <li><span>${item.genre}</span><strong>${item.count}</strong></li> + `).join(""); + + const filmDecades = document.getElementById("film-decades"); + filmDecades.innerHTML = data.films_per_decade.map((item) => ` + <li><span>${item.decade}</span><strong>${item.count}</strong></li> + `).join(""); + const starDistribution = document.getElementById("star-distribution"); const maxStars = Math.max(1, ...data.star_distribution.map((item) => item.count)); starDistribution.innerHTML = data.star_distribution.map((item) => ` |