Add click handler for going from daily to hourly chart view by clicking chart at specific date

shynet/core/models.py

@@ -207,6 +207,7 @@ class Service(models.Model):
         # Show hourly chart for date ranges of 3 days or less, otherwise daily chart
         if (end_time - start_time).days < 3:
             session_chart_tooltip_format = "MM/dd HH:mm"
+            session_chart_granularity = "hourly"
             session_chart_data = {
                 k["hour"]: k["count"]
                 for k in sessions.annotate(hour=TruncHour("start_time"))
@@ -220,6 +221,7 @@ class Service(models.Model):
                     session_chart_data[hour] = 0 if hour <= tz_now else None
         else:
             session_chart_tooltip_format = "MMM d"
+            session_chart_granularity = "daily"
             session_chart_data = {
                 k["date"]: k["count"]
                 for k in sessions.annotate(date=TruncDate("start_time"))
@@ -259,6 +261,7 @@ class Service(models.Model):
                 ]
             ),
             "session_chart_tooltip_format": session_chart_tooltip_format,
+            "session_chart_granularity": session_chart_granularity,
             "online": True,
         }
 

shynet/dashboard/templates/dashboard/includes/service_overview.html

@@ -51,7 +51,7 @@
     </div>
     <hr class="sep h-4">
     <div style="bottom: -1px;">
-        {% include 'dashboard/includes/time_chart.html' with data=stats.session_chart_data sparkline=True height=100 name=object.uuid tooltip_format=stats.session_chart_tooltip_format %}
+        {% include 'dashboard/includes/time_chart.html' with data=stats.session_chart_data sparkline=True height=100 name=object.uuid tooltip_format=stats.session_chart_tooltip_format granularity=stats.session_chart_granularity %}
     </div>
     {% endwith %}
 </a>

shynet/dashboard/templates/dashboard/includes/time_chart.html

@@ -37,6 +37,14 @@
                     stops: [0, 75, 100]
                 },
             },
+            {% if granularity == "daily" and click_zoom %}
+            events: {
+                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex, w: {config}}) {
+                    const day = config.series[seriesIndex].data[dataPointIndex].x
+                    window.location.href = `?startDate=${day}&endDate=${day}`
+                },
+            },
+            {% endif %}
         },
         grid: {
             padding: {

shynet/dashboard/templates/dashboard/pages/service.html

@@ -86,7 +86,7 @@
     {% endwith %}
 </div>
 <div class="card ~neutral !low py-0 mb-6">
-    {% include 'dashboard/includes/time_chart.html' with data=stats.session_chart_data tooltip_format=stats.session_chart_tooltip_format %}
+    {% include 'dashboard/includes/time_chart.html' with data=stats.session_chart_data tooltip_format=stats.session_chart_tooltip_format granularity=stats.session_chart_granularity click_zoom=True %}
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
     <div class="card ~neutral !low limited-height py-2">