Add demo of maloja style

vrobbler/apps/scrobbles/views.py

@@ -67,31 +67,64 @@ class RecentScrobbleList(ListView):
 
     def get_context_data(self, **kwargs):
         data = super().get_context_data(**kwargs)
+        view = self.request.GET.get('view', 'vrobbler')
         user = self.request.user
         if user.is_authenticated:
+            if view == 'vrobbler':
+                completed_for_user = Scrobble.objects.filter(
+                    played_to_completion=True, user=user
+                )
+                data['video_scrobble_list'] = completed_for_user.filter(
+                    video__isnull=False
+                ).order_by('-timestamp')[:15]
+
+                data['podcast_scrobble_list'] = completed_for_user.filter(
+                    podcast_episode__isnull=False
+                ).order_by('-timestamp')[:15]
+
+                data['sport_scrobble_list'] = completed_for_user.filter(
+                    sport_event__isnull=False
+                ).order_by('-timestamp')[:15]
+
+                data[
+                    'active_imports'
+                ] = AudioScrobblerTSVImport.objects.filter(
+                    processing_started__isnull=False,
+                    processed_finished__isnull=True,
+                    user=self.request.user,
+                )
 
-            completed_for_user = Scrobble.objects.filter(
-                played_to_completion=True, user=user
-            )
-            data['video_scrobble_list'] = completed_for_user.filter(
-                video__isnull=False
-            ).order_by('-timestamp')[:15]
-
-            data['podcast_scrobble_list'] = completed_for_user.filter(
-                podcast_episode__isnull=False
-            ).order_by('-timestamp')[:15]
-
-            data['sport_scrobble_list'] = completed_for_user.filter(
-                sport_event__isnull=False
-            ).order_by('-timestamp')[:15]
-            data['active_imports'] = AudioScrobblerTSVImport.objects.filter(
-                processing_started__isnull=False,
-                processed_finished__isnull=True,
-                user=self.request.user,
-            )
-
+            if view == "maloja":
+                artist_params = {'user': user, 'media_type': 'Artist'}
+                data['current_artist_charts'] = {
+                    "today": live_charts(
+                        **artist_params, chart_period="today", limit=14
+                    ),
+                    "week": live_charts(
+                        **artist_params, chart_period="week", limit=14
+                    ),
+                    "month": live_charts(
+                        **artist_params, chart_period="month", limit=14
+                    ),
+                    "all": live_charts(**artist_params, limit=14),
+                }
+
+                track_params = {'user': user, 'media_type': 'Track'}
+                data['current_track_charts'] = {
+                    "today": live_charts(
+                        **track_params, chart_period="today", limit=14
+                    ),
+                    "week": live_charts(
+                        **track_params, chart_period="week", limit=14
+                    ),
+                    "month": live_charts(
+                        **track_params, chart_period="month", limit=14
+                    ),
+                    "all": live_charts(**track_params, limit=14),
+                }
+
+        data["view"] = view
         data["weekly_data"] = week_of_scrobbles(user=user)
-
         data['counts'] = scrobble_counts(user)
         data['imdb_form'] = ScrobbleForm
         data['export_form'] = ExportScrobbleForm

vrobbler/templates/base.html

@@ -302,54 +302,6 @@
             </div>
         </div>
 
-        <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
-        <script><!-- comment ------------------------------------------------->
-            /* globals Chart:false, feather:false */
-            (function () {
-            'use strict'
-
-            feather.replace({ 'aria-hidden': 'true' })
-
-            // Graphs
-            var ctx = document.getElementById('myChart')
-            // eslint-disable-next-line no-unused-vars
-            var myChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                  labels: [
-                      {% for day in weekly_data.keys %}
-                      "{{day}}"{% if not forloop.last %},{% endif %}
-                      {% endfor %}
-                  ],
-                  datasets: [{
-                      data: [
-                      {% for count in weekly_data.values %}
-                      {{count}}{% if not forloop.last %},{% endif %}
-                      {% endfor %}
-                      ],
-                      lineTension: 0,
-                      backgroundColor: 'transparent',
-                      borderColor: '#007bf0',
-                      borderWidth: 4,
-                      pointBackgroundColor: '#007bff'
-                  }]
-                },
-                options: {
-                  scales: {
-                      yAxes: [{
-                      ticks: {
-                          beginAtZero: false
-                      }
-                      }]
-                  },
-                  legend: {
-                      display: false
-                  }
-                }
-            })
-            })()
-
-        </script>
         {% block extra_js %}
         {% endblock %}
     </body>

vrobbler/templates/scrobbles/scrobble_list.html

@@ -1,12 +1,52 @@
 {% extends "base.html" %}
 {% load humanize %}
+{% load dictkey %}
 
+{% block head_extra  %}
+<style>
+ h2 { padding-top:20px; }
+ .image-wrapper {
+    contain: content;
+ }
+ .image-wrapper :hover {
+     background:rgba(0,0,0,0.3);
+ }
+ .caption {
+     position: fixed;
+     top: 5px;
+     left: 5px;
+     padding: 3px;
+     font-size: 90%;
+     background:rgba(0,0,0,0.3);
+ }
 
+ .caption-medium {
+     position: fixed;
+     top: 5px;
+     left: 5px;
+     padding: 3px;
+     font-size: 75%;
+     background:rgba(0,0,0,0.3);
+
+ }
+ .caption-small {
+     position: fixed;
+     top: 5px;
+     left: 5px;
+     padding: 3px;
+     font-size: 60%;
+     background:rgba(0,0,0,0.3);
+
+ }
+
+ .maloja-chart img { border: 1px solid #ccc; }
+</style>
+{% endblock %}
 {% block content %}
 <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
     <div
         class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-        <h1 class="h2">Dashboard</h1>
+        <h1 class="h2">Dashboard</h1><span><a href="/?view=maloja">like maloja</a></span>
         <div class="btn-toolbar mb-2 mb-md-0">
             {% if user.is_authenticated %}
             <div class="btn-group me-2">
@@ -25,7 +65,7 @@
             <div class="dropdown">
                 <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" id="graphDateButton"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span data-feather="calendar"></span>
+                    <div data-feather="calendar"></div>
                     This week
                 </button>
                 <div class="dropdown-menu" data-bs-toggle="#graphDataChange" aria-labelledby="graphDateButton">
@@ -36,14 +76,253 @@
         </div>
     </div>
 
+    {% if view == "vrobbler" %}
     <canvas class="my-4 w-100" id="myChart" width="900" height="220"></canvas>
+    {% endif %}
 
     <div class="container">
 
         {% if user.is_authenticated %}
+        {% if view == "maloja" %}
+        <div class="row">
+            <h2>Top Artist</h2>
+            <ul class="nav nav-tabs" id="artistTab" role="tablist">
+                {% for chart_name in current_artist_charts.keys %}
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link {% if forloop.first %}active{% endif %}"
+                            id="artist-{{chart_name}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{chart_name}}"
+                            type="button" role="tab" aria-controls="home" aria-selected="true">
+                        {{chart_name}}
+                    </button>
+                </li>
+                {% endfor %}
+            </ul>
+
+            <div class="tab-content" id="artistTabContent" class="maloja-chart">
+                {% for chart_name, artists in current_artist_charts.items %}
+                <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="artist-{{chart_name}}" role="tabpanel" aria-labelledby="artist-{{chart_name}}-tab">
+                    <div style="display:block">
+                        <div style="float:left;">
+                            <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
+                                <div class="caption">{{artists.0.name}}</div>
+                                {% if artists.0.thumbnail %}
+                                <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{{artists.0.thumbnail}}" width="300px"></a>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{artists.1.name}}</div>
+                                    {% if artists.1.thumbnail %}
+                                    <a href="{{artists.1.get_absolute_url}}"><img lt="{{artists.1.name}}" src="{{artists.1.thumbnail.url}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{artists.2.name}}</div>
+                                    {% if artists.2.thumbnail %}
+                                    <a href="{{artists.2.get_absolute_url}}"><img lt="{{artists.2.name}}" src="{{artists.2.thumbnail.url}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{artists.3.name}}</div>
+                                    {% if artists.3.thumbnail %}
+                                    <a href="{{artists.3.get_absolute_url}}"><img lt="{{artists.3.name}}" src="{{artists.3.thumbnail.url}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{artists.4.name}}</div>
+                                    {% if artists.4.thumbnail %}
+                                    <a href="{{artists.4.get_absolute_url}}"><img lt="{{artists.4.name}}" src="{{artists.4.thumbnail.url}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.5.name}}</div>
+                                    {% if artists.5.thumbnail %}
+                                    <a href="{{artists.5.get_absolute_url}}"><img lt="{{artists.5.name}}" src="{{artists.5.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.6.name}}</div>
+                                    {% if artists.6.thumbnail %}
+                                    <a href="{{artists.6.get_absolute_url}}"><img lt="{{artists.6.name}}" src="{{artists.6.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.7.name}}</div>
+                                    {% if artists.7.thumbnail %}
+                                    <a href="{{artists.7.get_absolute_url}}"><img lt="{{artists.7.name}}" src="{{artists.7.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.8.name}}</div>
+                                    {% if artists.8.thumbnail %}
+                                    <a href="{{artists.8.get_absolute_url}}"><img lt="{{artists.8.name}}" src="{{artists.8.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.9.name}}</div>
+                                    {% if artists.9.thumbnail %}
+                                    <a href="{{artists.9.get_absolute_url}}"><img lt="{{artists.9.name}}" src="{{artists.9.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.10.name}}</div>
+                                    {% if artists.10.thumbnail %}
+                                    <a href="{{artists.10.get_absolute_url}}"><img lt="{{artists.10.name}}" src="{{artists.10.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.11.name}}</div>
+                                    {% if artists.11.thumbnail %}
+                                    <a href="{{artists.11.get_absolute_url}}"><img lt="{{artists.11.name}}" src="{{artists.11.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.12.name}}</div>
+                                    {% if artists.12thumbnail %}
+                                    <a href="{{artists.12.get_absolute_url}}"><img lt="{{artists.13.name}}" src="{{artists.12.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{artists.13.name}}</div>
+                                    {% if artists.13.thumbnail %}
+                                    <a href="{{artists.13.get_absolute_url}}"><img lt="{{artists.13.name}}" src="{{artists.13.thumbnail}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+
         <div class="row">
-            <p>Today <b>{{counts.today}}</b> | This Week <b>{{counts.week}}</b> | This Month <b>{{counts.month}}</b> |
-                This Year <b>{{counts.year}}</b> | All Time <b>{{counts.alltime}}</b></p>
+            <h2>Top Tracks</h2>
+            <ul class="nav nav-tabs" id="trackTab" role="tablist">
+                {% for chart_name in current_track_charts.keys %}
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link {% if forloop.first %}active{% endif %}" id="track-{{chart_name}}-tab" data-bs-toggle="tab"
+                            data-bs-target="#track-{{chart_name}}" type="button" role="tab" aria-controls="home" aria-selected="true">
+                        {{chart_name}}
+                    </button>
+                </li>
+                {% endfor %}
+            </ul>
+
+            <div class="tab-content" id="trackTabContent" class="maloja-chart">
+                {% for chart_name, tracks in current_track_charts.items %}
+                <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="track-{{chart_name}}" role="tabpanel" aria-labelledby="track-{{chart_name}}-tab">
+                    <div style="display:block">
+                        <div style="float:left;">
+                            <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
+                                <div class="caption">{{tracks.0.title}}</div>
+                                {% if tracks.0.album.cover_image %}
+                                <a href="{{tracks.0.get_absolute_url}}"><img lt="{{tracks.0.title}}" src="{{tracks.0.album.cover_image.url}}" width="300px"></a>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{tracks.1.title}}</div>
+                                    {% if tracks.1.album.cover_image %}
+                                    <a href="{{tracks.1.get_absolute_url}}"><img lt="{{tracks.1.title}}" src="{{tracks.1.album.cover_image.url}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{tracks.2.title}}</div>
+                                    {% if tracks.2.album.cover_image %}
+                                    <a href="{{tracks.2.get_absolute_url}}"><img lt="{{tracks.2.title}}" src="{{tracks.2.album.cover_image.url}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{tracks.3.title}}</div>
+                                    {% if tracks.3.album.cover_image %}
+                                    <a href="{{tracks.3.get_absolute_url}}"><img lt="{{tracks.3.title}}" src="{{tracks.3.album.cover_image.url}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">{{tracks.4.title}}</div>
+                                    {% if tracks.4.album.cover_image %}
+                                    <a href="{{tracks.4.get_absolute_url}}"><img lt="{{tracks.4.title}}" src="{{tracks.4.album.cover_image.urL}}" width="150px"></a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.5.title}}</div>
+                                    {% if tracks.5.album.cover_image %}
+                                    <a href="{{tracks.5.get_absolute_url}}"><img lt="{{tracks.5.title}}" src="{{tracks.5.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.6.title}}</div>
+                                    {% if tracks.6.album.cover_image %}
+                                    <a href="{{tracks.6.get_absolute_url}}"><img lt="{{tracks.6.title}}" src="{{tracks.6.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.7.title}}</div>
+                                    {% if tracks.7.album.cover_image %}
+                                    <a href="{{track.7.get_absolute_url}}"><img lt="{{tracks.7.title}}" src="{{tracks.7.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.8.title}}</div>
+                                    {% if tracks.8.album.cover_image %}
+                                    <a href="{{track.8.get_absolute_url}}"><img lt="{{tracks.8.title}}" src="{{tracks.8.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.9.title}}</div>
+                                    {% if tracks.9.album.cover_image %}
+                                    <a href="{{track.9.get_absolute_url}}"><img lt="{{tracks.9.title}}" src="{{tracks.9.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.10.title}}</div>
+                                    {% if tracks.10.album.cover_image %}
+                                    <a href="{{tracks.10.get_absolute_url}}"><img lt="{{tracks.10.title}}" src="{{tracks.10.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.11.title}}</div>
+                                    {% if tracks.11.album.cover_image %}
+                                    <a href="{{track.11.get_absolute_url}}"><img lt="{{tracks.11.title}}" src="{{tracks.11.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.12.title}}</div>
+                                    {% if tracks.12.album.cover_image %}
+                                    <a href="{{track.12.get_absolute_url}}"><img lt="{{tracks.12.title}}" src="{{tracks.12.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">{{tracks.13.title}}</div>
+                                    {% if tracks.13.album.cover_image %}
+                                    <a href="{{track.13.get_absolute_url}}"><img lt="{{tracks.13.title}}" src="{{tracks.13.cover_image.url}}" width="100px"></a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+        <div class="row">
+        <h2>Last Scrobbles</h2>
+        <p>Today <b>{{counts.today}}</b> | This Week <b>{{counts.week}}</b> | This Month <b>{{counts.month}}</b> |
+            This Year <b>{{counts.year}}</b> | All Time <b>{{counts.alltime}}</b></p>
         </div>
         <div class="row">
             <ul class="nav nav-tabs" id="myTab" role="tablist">
@@ -68,7 +347,6 @@
             <div class="tab-content" id="myTabContent2">
                 <div class="tab-pane fade show active" id="latest-listened" role="tabpanel"
                     aria-labelledby="latest-listened-tab">
-                    <h2>Latest listened</h2>
                     <div class="table-responsive">
                         <table class="table table-striped table-sm">
                             <thead>
@@ -183,7 +461,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="importModalLabel">Import scrobbles</h5>
                 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                    <div aria-hidden="true">&times;</div>
                 </button>
             </div>
             <form action="{% url 'scrobbles:audioscrobbler-file-upload' %}" method="post" enctype="multipart/form-data">
@@ -221,7 +499,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="exportModalLabel">Export scrobbles</h5>
                 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                    <div aria-hidden="true">&times;</div>
                 </button>
             </div>
             <form action="{% url 'scrobbles:export' %}" method="get">
@@ -246,4 +524,53 @@
     $('#importModal').on('shown.bs.modal', function () { $('#importInput').trigger('focus') });
     $('#exportModal').on('shown.bs.modal', function () { $('#exportInput').trigger('focus') });
 </script>
+
+<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
+<script><!-- comment ------------------------------------------------->
+    /* globals Chart:false, feather:false */
+    (function () {
+    'use strict'
+
+    feather.replace({ 'aria-hidden': 'true' })
+
+    // Graphs
+    var ctx = document.getElementById('myChart')
+    // eslint-disable-next-line no-unused-vars
+    var myChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: [
+                {% for day in weekly_data.keys %}
+                "{{day}}"{% if not forloop.last %},{% endif %}
+                {% endfor %}
+            ],
+            datasets: [{
+                data: [
+                {% for count in weekly_data.values %}
+                {{count}}{% if not forloop.last %},{% endif %}
+                {% endfor %}
+                ],
+                lineTension: 0,
+                backgroundColor: 'transparent',
+                borderColor: '#007bf0',
+                borderWidth: 4,
+                pointBackgroundColor: '#007bff'
+            }]
+        },
+        options: {
+            scales: {
+                yAxes: [{
+                ticks: {
+                    beginAtZero: false
+                }
+                }]
+            },
+            legend: {
+                display: false
+            }
+        }
+    })
+    })()
+
+</script>
 {% endblock %}