From 58126928c7a8835f9b725ac431d418d73da585ee Mon Sep 17 00:00:00 2001
From: Colin Powell <colin@unbl.ink>
Date: Tue, 30 Jun 2026 15:01:57 -0400
Subject: [PATCH] [charts] Fix maloja charts acting weird

---
 PROJECT.org                                   |   6 +-
 vrobbler/apps/charts/views.py                 | 348 ++++++------------
 vrobbler/templates/charts/chart_index.html    |  56 ++-
 vrobbler/templates/scrobbles/_top_charts.html |  24 +-
 4 files changed, 184 insertions(+), 250 deletions(-)

diff --git a/PROJECT.org b/PROJECT.org
index 5ba49dc..9fdcfec 100644
--- a/PROJECT.org
+++ b/PROJECT.org
@@ -88,7 +88,7 @@ fetching and simple saving.
 *** Metadata sources
 **** Scraper
 
-* Backlog [0/23] :vrobbler:project:personal:
+* Backlog [1/24] :vrobbler:project:personal:
 ** TODO [#C] After transition to linux add curl_cffi as webpage scrapper again :webpages:metadata:
 ** TODO [#C] Create small utility to clean up tracks scrobbled with wonky playback times :bug:music:scrobbles:
 :PROPERTIES:
@@ -605,6 +605,10 @@ independent of the email flow it was originally creatdd for
 
 ** TODO [#B] Is there way to create unique slugs for media instances :media_types:
 
+** DONE [#A] The maloja style charts are messed up :templates:charts:
+:PROPERTIES:
+:ID:       987397a2-7e74-4eb1-87cc-4c8bbe1c7b23
+:END:
 * Version 58.4 [2/2]
 ** DONE [#B] Allow people all trends or individual trends :trends:profiles:
 :PROPERTIES:
diff --git a/vrobbler/apps/charts/views.py b/vrobbler/apps/charts/views.py
index 803f1e7..65fd547 100644
--- a/vrobbler/apps/charts/views.py
+++ b/vrobbler/apps/charts/views.py
@@ -114,6 +114,51 @@ class ChartRecordView(TemplateView):
         context["current_week"] = current_week
         context["current_day"] = current_day
 
+        # Resolve date parameters
+        if date_param:
+            parts = date_param.split("-")
+            year = int(parts[0])
+            week = None
+            month = None
+            day = None
+            if len(parts) >= 2 and parts[1].startswith("W"):
+                week = int(parts[1].lstrip("W"))
+            elif len(parts) >= 2 and parts[1]:
+                try:
+                    month = int(parts[1])
+                except ValueError:
+                    pass
+            if len(parts) >= 3:
+                if parts[2].startswith("W"):
+                    week = int(parts[2].lstrip("W"))
+                elif not parts[2].startswith("W"):
+                    day = int(parts[2])
+            context["period"] = "historical"
+            context["year"] = year
+            context["month"] = month
+            context["month_name"] = calendar.month_name[month] if month else None
+            context["week"] = week
+            context["day"] = day
+            period_str = str(year)
+            if month:
+                period_str = f"{calendar.month_name[month]} {period_str}"
+            if week:
+                period_str = f"Week {week}, {period_str}"
+            if day:
+                period_str = f"{calendar.month_name[month]} {day}, {year}"
+            context["period_str"] = period_str
+        else:
+            year = current_year
+            month = current_month
+            week = current_week
+            day = current_day
+            context["period"] = "current"
+            context["year"] = current_year
+            context["month"] = current_month
+            context["month_name"] = calendar.month_name[current_month]
+            context["week"] = current_week
+            context["day"] = current_day
+
         context["chart_keys"] = {
             "today": "Today",
             "week": "This Week",
@@ -126,295 +171,120 @@ class ChartRecordView(TemplateView):
             "artist": {
                 "today": list(
                     self.get_charts_for_period(
-                        user,
-                        "artist",
-                        year=current_year,
-                        month=current_month,
-                        day=current_day,
+                        user, "artist", year=year, month=month, day=day,
                     )
                 ),
                 "week": list(
                     self.get_charts_for_period(
-                        user,
-                        "artist",
-                        year=current_year,
-                        week=current_week,
+                        user, "artist", year=year, week=week,
                     )
                 ),
                 "month": list(
                     self.get_charts_for_period(
-                        user,
-                        "artist",
-                        year=current_year,
-                        month=current_month,
+                        user, "artist", year=year, month=month,
                     )
                 ),
                 "year": list(
-                    self.get_charts_for_period(user, "artist", year=current_year)
+                    self.get_charts_for_period(user, "artist", year=year)
                 ),
                 "all": list(self.get_charts_for_period(user, "artist")),
             },
             "album": {
                 "today": list(
                     self.get_charts_for_period(
-                        user,
-                        "album",
-                        year=current_year,
-                        month=current_month,
-                        day=current_day,
+                        user, "album", year=year, month=month, day=day,
                     )
                 ),
                 "week": list(
                     self.get_charts_for_period(
-                        user, "album", year=current_year, week=current_week
+                        user, "album", year=year, week=week,
                     )
                 ),
                 "month": list(
                     self.get_charts_for_period(
-                        user,
-                        "album",
-                        year=current_year,
-                        month=current_month,
+                        user, "album", year=year, month=month,
                     )
                 ),
                 "year": list(
-                    self.get_charts_for_period(user, "album", year=current_year)
+                    self.get_charts_for_period(user, "album", year=year)
                 ),
                 "all": list(self.get_charts_for_period(user, "album")),
             },
             "tv_series": {
                 "today": list(
                     self.get_charts_for_period(
-                        user,
-                        "tv_series",
-                        year=current_year,
-                        month=current_month,
-                        day=current_day,
+                        user, "tv_series", year=year, month=month, day=day,
                     )
                 ),
                 "week": list(
                     self.get_charts_for_period(
-                        user,
-                        "tv_series",
-                        year=current_year,
-                        week=current_week,
+                        user, "tv_series", year=year, week=week,
                     )
                 ),
                 "month": list(
                     self.get_charts_for_period(
-                        user,
-                        "tv_series",
-                        year=current_year,
-                        month=current_month,
+                        user, "tv_series", year=year, month=month,
                     )
                 ),
                 "year": list(
-                    self.get_charts_for_period(user, "tv_series", year=current_year)
+                    self.get_charts_for_period(user, "tv_series", year=year)
                 ),
                 "all": list(self.get_charts_for_period(user, "tv_series")),
             },
         }
 
-        if not date_param:
-            context["period"] = "current"
-            context["year"] = current_year
-            context["month"] = current_month
-            context["month_name"] = calendar.month_name[current_month]
-            context["week"] = current_week
-            context["day"] = current_day
-
-            context["charts"] = {
-                "artist": list(
-                    self.get_charts_for_period(
-                        user, "artist", year=current_year, limit=20
-                    )
-                ),
-                "album": list(
-                    self.get_charts_for_period(
-                        user, "album", year=current_year, limit=20
-                    )
-                ),
-                "track": list(
-                    self.get_charts_for_period(
-                        user, "track", year=current_year, limit=20
-                    )
-                ),
-                "tv_series": list(
-                    self.get_charts_for_period(
-                        user, "tv_series", year=current_year, limit=20
-                    )
-                ),
-                "video": list(
-                    self.get_charts_for_period(
-                        user, "video", year=current_year, limit=20
-                    )
-                ),
-                "board_game": list(
-                    self.get_charts_for_period(
-                        user, "board_game", year=current_year, limit=20
-                    )
-                ),
-                "book": list(
-                    self.get_charts_for_period(
-                        user, "book", year=current_year, limit=20
-                    )
-                ),
-                "food": list(
-                    self.get_charts_for_period(
-                        user, "food", year=current_year, limit=20
-                    )
-                ),
-                "podcast": list(
-                    self.get_charts_for_period(
-                        user, "podcast", year=current_year, limit=20
-                    )
-                ),
-                "trail": list(
-                    self.get_charts_for_period(
-                        user, "trail", year=current_year, limit=20
-                    )
-                ),
-            }
-        else:
-            parts = date_param.split("-")
-            year = int(parts[0])
-
-            week = None
-            month = None
-            day = None
-
-            if len(parts) >= 2 and parts[1].startswith("W"):
-                week = int(parts[1].lstrip("W"))
-            elif len(parts) >= 2 and parts[1]:
-                try:
-                    month = int(parts[1])
-                except ValueError:
-                    pass
-
-            if len(parts) >= 3:
-                if parts[2].startswith("W"):
-                    week = int(parts[2].lstrip("W"))
-                elif not parts[2].startswith("W"):
-                    day = int(parts[2])
-
-            context["period"] = "historical"
-            context["year"] = year
-            context["month"] = month
-            context["month_name"] = calendar.month_name[month] if month else None
-            context["week"] = week
-            context["day"] = day
-
-            period_str = str(year)
-            if month:
-                period_str = f"{calendar.month_name[month]} {period_str}"
-            if week:
-                period_str = f"Week {week}, {period_str}"
-            if day:
-                period_str = f"{calendar.month_name[month]} {day}, {year}"
-            context["period_str"] = period_str
-
-            context["charts"] = {
-                "artist": list(
-                    self.get_charts_for_period(
-                        user,
-                        "artist",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "album": list(
-                    self.get_charts_for_period(
-                        user,
-                        "album",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "track": list(
-                    self.get_charts_for_period(
-                        user,
-                        "track",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "tv_series": list(
-                    self.get_charts_for_period(
-                        user,
-                        "tv_series",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "video": list(
-                    self.get_charts_for_period(
-                        user,
-                        "video",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "board_game": list(
-                    self.get_charts_for_period(
-                        user,
-                        "board_game",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "book": list(
-                    self.get_charts_for_period(
-                        user,
-                        "book",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "food": list(
-                    self.get_charts_for_period(
-                        user,
-                        "food",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "podcast": list(
-                    self.get_charts_for_period(
-                        user,
-                        "podcast",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "trail": list(
-                    self.get_charts_for_period(
-                        user,
-                        "trail",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-            }
+        context["charts"] = {
+            "artist": list(
+                self.get_charts_for_period(
+                    user, "artist", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "album": list(
+                self.get_charts_for_period(
+                    user, "album", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "track": list(
+                self.get_charts_for_period(
+                    user, "track", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "tv_series": list(
+                self.get_charts_for_period(
+                    user, "tv_series", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "video": list(
+                self.get_charts_for_period(
+                    user, "video", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "board_game": list(
+                self.get_charts_for_period(
+                    user, "board_game", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "book": list(
+                self.get_charts_for_period(
+                    user, "book", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "food": list(
+                self.get_charts_for_period(
+                    user, "food", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "podcast": list(
+                self.get_charts_for_period(
+                    user, "podcast", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+            "trail": list(
+                self.get_charts_for_period(
+                    user, "trail", year=year, month=month, week=week, day=day, limit=20
+                )
+            ),
+        }
 
         bird_data = self.get_bird_chart_data(
             user,
diff --git a/vrobbler/templates/charts/chart_index.html b/vrobbler/templates/charts/chart_index.html
index 1ae0ab2..ddffe3e 100644
--- a/vrobbler/templates/charts/chart_index.html
+++ b/vrobbler/templates/charts/chart_index.html
@@ -122,7 +122,61 @@
 
 {% include "scrobbles/_top_charts.html" %}
 
-<div class="row">
+<div class="row mt-4">
+    {% if charts.artist %}
+    <div class="col-md-6 col-lg-4 chart-section">
+        <h3>🎤 Top Artists</h3>
+        <ul class="list-group">
+            {% for chart in charts.artist|slice:":20" %}
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span class="me-2"><strong>#{{chart.rank}}</strong></span>
+                <a href="{{chart.artist.get_absolute_url}}">{{chart.artist.name}}</a>
+                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
+            </li>
+            {% endfor %}
+            <li class="list-group-item">
+                <a href="{% url 'charts:chart-detail' 'artist' %}">View all &raquo;</a>
+            </li>
+        </ul>
+    </div>
+    {% endif %}
+
+    {% if charts.album %}
+    <div class="col-md-6 col-lg-4 chart-section">
+        <h3>💿 Top Albums</h3>
+        <ul class="list-group">
+            {% for chart in charts.album|slice:":20" %}
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span class="me-2"><strong>#{{chart.rank}}</strong></span>
+                <a href="{{chart.album.get_absolute_url}}">{{chart.album.name}}</a>
+                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
+            </li>
+            {% endfor %}
+            <li class="list-group-item">
+                <a href="{% url 'charts:chart-detail' 'album' %}">View all &raquo;</a>
+            </li>
+        </ul>
+    </div>
+    {% endif %}
+
+    {% if charts.tv_series %}
+    <div class="col-md-6 col-lg-4 chart-section">
+        <h3>📺 Top TV Series</h3>
+        <ul class="list-group">
+            {% for chart in charts.tv_series|slice:":20" %}
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span class="me-2"><strong>#{{chart.rank}}</strong></span>
+                <a href="{{chart.tv_series.get_absolute_url}}">{{chart.tv_series.name}}</a>
+                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
+            </li>
+            {% endfor %}
+            <li class="list-group-item">
+                <a href="{% url 'charts:chart-detail' 'tv_series' %}">View all &raquo;</a>
+            </li>
+        </ul>
+    </div>
+    {% endif %}
+
     {% if charts.track %}
     <div class="col-md-6 col-lg-4 chart-section">
         <h3>🎵 Top Tracks</h3>
diff --git a/vrobbler/templates/scrobbles/_top_charts.html b/vrobbler/templates/scrobbles/_top_charts.html
index 0549413..f3ca877 100644
--- a/vrobbler/templates/scrobbles/_top_charts.html
+++ b/vrobbler/templates/scrobbles/_top_charts.html
@@ -49,11 +49,12 @@
                 </div>
                 <div style="float:left; width:300px;">
                     <div style="display:flex; flex-wrap: wrap;">
-                        {% for i in "67891011121314" %}
-                        {% with artists|get_item:forloop.counter|add:5 as artist %}
+                        {% for i in "123456789" %}
+                        {% with forloop.counter|add:4 as idx %}
+                        {% with artists|get_item:idx as artist %}
                         {% if artist %}
                         <div class="image-wrapper" style="width:33%">
-                            <div class="caption-small">#{{forloop.counter|add:6}} {{artist.artist.name}}</div>
+                            <div class="caption-small">#{{forloop.counter|add:5}} {{artist.artist.name}}</div>
                             {% if artist.artist.thumbnail %}
                             <a href="{{artist.artist.get_absolute_url}}"><img src="{{artist.artist.thumbnail_medium.url}}" width="100px"></a>
                             {% else %}
@@ -62,6 +63,7 @@
                         </div>
                         {% endif %}
                         {% endwith %}
+                        {% endwith %}
                         {% endfor %}
                     </div>
                 </div>
@@ -123,11 +125,12 @@
                 </div>
                 <div style="float:left; width:300px;">
                     <div style="display:flex; flex-wrap: wrap;">
-                        {% for i in "67891011121314" %}
-                        {% with albums|get_item:forloop.counter|add:5 as album %}
+                        {% for i in "123456789" %}
+                        {% with forloop.counter|add:4 as idx %}
+                        {% with albums|get_item:idx as album %}
                         {% if album %}
                         <div class="image-wrapper" style="width:33%">
-                            <div class="caption-small">#{{forloop.counter|add:6}} {{album.album.title}}</div>
+                            <div class="caption-small">#{{forloop.counter|add:5}} {{album.album.title}}</div>
                             {% if album.album.cover_image %}
                             <a href="{{album.album.get_absolute_url}}"><img src="{{album.album.cover_image_medium.url}}" width="100px"></a>
                             {% else %}
@@ -136,6 +139,7 @@
                         </div>
                         {% endif %}
                         {% endwith %}
+                        {% endwith %}
                         {% endfor %}
                     </div>
                 </div>
@@ -197,11 +201,12 @@
                 </div>
                 <div style="float:left; width:300px;">
                     <div style="display:flex; flex-wrap: wrap;">
-                        {% for i in "67891011121314" %}
-                        {% with shows|get_item:forloop.counter|add:5 as show %}
+                        {% for i in "123456789" %}
+                        {% with forloop.counter|add:4 as idx %}
+                        {% with shows|get_item:idx as show %}
                         {% if show %}
                         <div class="image-wrapper" style="width:33%">
-                            <div class="caption-small">#{{forloop.counter|add:6}} {{show.tv_series.name}}</div>
+                            <div class="caption-small">#{{forloop.counter|add:5}} {{show.tv_series.name}}</div>
                             {% if show.tv_series.cover_image %}
                             <a href="{{show.tv_series.get_absolute_url}}"><img src="{{show.tv_series.cover_small.url}}" width="100px" height="100px" style="object-fit: cover"></a>
                             {% else %}
@@ -210,6 +215,7 @@
                         </div>
                         {% endif %}
                         {% endwith %}
+                        {% endwith %}
                         {% endfor %}
                     </div>
                 </div>