Bump version

* First working version of world map chart

* Cleanup code, fix aspect ratio, add GeoIP Map header

* Remove limited-height on session list with already limited content

* Update package lock

* Integrate map into service page

* Adjust map colors

* Adjust colors further

Co-authored-by: R. Miles McCain <github@sendmiles.email>

.github/workflows/build-docker-edge.yml

@@ -0,0 +1,43 @@
+name: Build edge Docker images
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish_to_docker_hub:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      
+      - name: Prepare tags
+        id: prep
+        run: |
+          DOCKER_IMAGE=milesmcc/shynet
+          TAGS="${DOCKER_IMAGE}:edge"
+          echo ::set-output name=tags::${TAGS}
+          
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+        
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+        
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      - name: Build and push advanced image
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+          tags: ${{ steps.prep.outputs.tags }}

.github/workflows/build-docker-release.yml

@@ -0,0 +1,44 @@
+name: Build release Docker images
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  publish_to_docker_hub:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      
+      - name: Prepare tags
+        id: prep
+        run: |
+          DOCKER_IMAGE=milesmcc/shynet
+          VERSION=${GITHUB_REF#refs/tags/}
+          TAGS="${DOCKER_IMAGE}:${VERSION},${DOCKER_IMAGE}:latest"
+          echo ::set-output name=tags::${TAGS}
+          
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+        
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+        
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      - name: Build and push advanced image
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+          tags: ${{ steps.prep.outputs.tags }}

Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3-alpine
+FROM python:alpine3.12
 
 # Getting things ready
 WORKDIR /usr/src/shynet

Pipfile

@@ -13,7 +13,6 @@ django-ipware = "~=2.1.0"
 pyyaml = "~=5.4"
 ua-parser = "~=0.10.0"
 user-agents = "~=2.1"
-emoji-country-flag = "~=1.2.1"
 rules = "~=2.2"
 gunicorn = "~=20.0.4"
 psycopg2-binary = "~=2.8.5"

Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "f8c76565a776f1bd36364077a86d6c16fccc522d9d2024bb9b51be5cb9f8b4b5"
+            "sha256": "c51ea0205c9ffe753b9ef5249cd49c2338bb50768ae104113bfb7b97b5f9d70c"
         },
         "pipfile-spec": 6,
         "requires": {},
@@ -24,18 +24,18 @@
         },
         "asgiref": {
             "hashes": [
-                "sha256:5ee950735509d04eb673bd7f7120f8fa1c9e2df495394992c73234d526907e17",
+                "sha256:92906c611ce6c967347bbfea733f13d6313901d54dcca88195eaeb52b2a8e8ee",
-                "sha256:7162a3cb30ab0609f1a4c95938fd73e8604f63bdba516a7f7d64b83ff09478f0"
+                "sha256:d1216dfbdfb63826470995d31caed36225dcaf34f182e0fa257a4dd9e86f1b78"
             ],
-            "markers": "python_version >= '3.5'",
+            "markers": "python_version >= '3.6'",
-            "version": "==3.3.1"
+            "version": "==3.3.4"
         },
         "billiard": {
             "hashes": [
-                "sha256:bff575450859a6e0fbc2f9877d9b715b0bbc07c3565bb7ed2280526a0cdf5ede",
+                "sha256:299de5a8da28a783d51b197d496bef4f1595dd023a93a4f59dde1886ae905547",
-                "sha256:d91725ce6425f33a97dfa72fb6bfef0e47d4652acd98a032bd1a7fbf06d5fa6a"
+                "sha256:87103ea78fa6ab4d5c751c4909bcff74617d985de7fa8b672cf8618afd5a875b"
             ],
-            "version": "==3.6.3.0"
+            "version": "==3.6.4.0"
         },
         "celery": {
             "hashes": [
@@ -47,10 +47,10 @@
         },
         "certifi": {
             "hashes": [
-                "sha256:1a4995114262bffbc2413b159f2a1a480c969de6e6eb13ee966d470af86af59c",
+                "sha256:2bbf76fd432960138b3ef6dda3dde0544f27cbf8546c458e60baf371917ba9ee",
-                "sha256:719a74fb9e33b9bd44cc7f3a8d94bc35e4049deebe19ba7d8e108280cfd59830"
+                "sha256:50b1e4f8446b06f41be7dd6338db18e0990601dce795c2b1686458aa7e8fa7d8"
             ],
-            "version": "==2020.12.5"
+            "version": "==2021.5.30"
         },
         "chardet": {
             "hashes": [
@@ -70,11 +70,11 @@
         },
         "django": {
             "hashes": [
-                "sha256:32ce792ee9b6a0cbbec340123e229ac9f765dff8c2a4ae9247a14b2ba3a365a7",
+                "sha256:a523d62b7ab2908f551dabc32b99017a86aa7784e32b761708e52be3dce6d35d",
-                "sha256:baf099db36ad31f970775d0be5587cc58a6256a6771a44eb795b554d45f211b8"
+                "sha256:dc41bf07357f1f4810c1c555b685cb51f780b41e37892d6cc92b89789f2847e1"
             ],
             "index": "pypi",
-            "version": "==3.1.7"
+            "version": "==3.1.12"
         },
         "django-allauth": {
             "hashes": [
@@ -85,11 +85,11 @@
         },
         "django-debug-toolbar": {
             "hashes": [
-                "sha256:84e2607d900dbd571df0a2acf380b47c088efb787dce9805aefeb407341961d2",
+                "sha256:a5ff2a54f24bf88286f9872836081078f4baa843dc3735ee88524e89f8821e33",
-                "sha256:9e5a25d0c965f7e686f6a8ba23613ca9ca30184daa26487706d4829f5cfb697a"
+                "sha256:e759e63e3fe2d3110e0e519639c166816368701eab4a47fed75d7de7018467b9"
             ],
             "index": "pypi",
-            "version": "==3.2"
+            "version": "==3.2.1"
         },
         "django-health-check": {
             "hashes": [
@@ -120,14 +120,6 @@
             "index": "pypi",
             "version": "==3.0.0"
         },
-        "emoji-country-flag": {
-            "hashes": [
-                "sha256:338f5e374119dcde093cfeaa8ca3af372d4b8d984d89a7fb2fb0db0011662560",
-                "sha256:a3a068191294294143d8ef294fdfe9792c5c243753eac130798bf2fa5de38185"
-            ],
-            "index": "pypi",
-            "version": "==1.2.4"
-        },
         "geoip2": {
             "hashes": [
                 "sha256:5869e987bc54c0d707264fec4710661332cc38d2dca5a7f9bb5362d0308e2ce0",
@@ -177,11 +169,11 @@
         },
         "oauthlib": {
             "hashes": [
-                "sha256:bee41cc35fcca6e988463cacc3bcb8a96224f470ca547e697b604cc697b2f889",
+                "sha256:42bf6354c2ed8c6acb54d971fce6f88193d97297e18602a3a886603f9d7730cc",
-                "sha256:df884cd6cbe20e32633f1db1072e9356f53638e4361bef4e8b03c9127c9328ea"
+                "sha256:8f0215fcc533dd8dd1bee6f4c412d4f0cd7297307d43ac61666389e3bc3198a3"
             ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
+            "markers": "python_version >= '3.6'",
-            "version": "==3.1.0"
+            "version": "==3.1.1"
         },
         "psycopg2-binary": {
             "hashes": [
@@ -329,11 +321,11 @@
         },
         "urllib3": {
             "hashes": [
-                "sha256:2f4da4594db7e1e110a944bb1b551fdf4e6c136ad42e4234131391e21eb5b0df",
+                "sha256:753a0374df26658f99d826cfe40394a686d05985786d946fbe4165b5148f5a7c",
-                "sha256:e7b021f7241115872f92f43c6508082facffbd1c048e3c6e2bb9c2a157e28937"
+                "sha256:a7acd0977125325f516bda9735fa7142b909a8d01e8b2e4c8108d0984e6e0098"
             ],
             "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4' and python_version < '4'",
-            "version": "==1.26.4"
+            "version": "==1.26.5"
         },
         "user-agents": {
             "hashes": [

TEMPLATE.env

@@ -33,6 +33,8 @@ ACCOUNT_SIGNUPS_ENABLED=False
 ACCOUNT_EMAIL_VERIFICATION=none
 
 # The timezone of the admin panel. Affects how dates are displayed.
+# This must match a value from the IANA's tz database.
+# Wikipedia has a list of valid strings: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 TIME_ZONE=America/New_York
 
 # Set to "False" if you will not be serving content over HTTPS
@@ -83,3 +85,19 @@ BLOCK_ALL_IPS=False
 # keys) aren't supplied. It will also prevent sessions from spanning
 # one day to another.
 AGGRESSIVE_HASH_SALTING=True
+
+# Custom location url to link to in frontend.
+# $LATITUDE will get replaced by the latitude, $LONGITUDE will get
+# replaced by the longitude.
+# Examples:
+#  - https://www.openstreetmap.org/?mlat=$LATITUDE&mlon=$LONGITUDE (default)
+#  - https://www.google.com/maps/search/?api=1&query=$LATITUDE,$LONGITUDE
+#  - https://www.mapquest.com/near-$LATITUDE,$LONGITUDE
+LOCATION_URL=https://www.openstreetmap.org/?mlat=$LATITUDE&mlon=$LONGITUDE
+
+# How many services should be displayed on dashboard page?
+# Set to big number if you don't want pagination at all.
+DASHBOARD_PAGE_SIZE=5
+
+# Should background bars be scaled to full width?
+USE_RELATIVE_MAX_IN_BAR_VISUALIZATION=True

app.json

@@ -122,6 +122,21 @@
       "description": "Set to 'False' if you do not want the version to be displayed on the frontend.",
       "value": "True",
       "required": false
+    },
+    "LOCATION_URL": {
+      "description": "Custom location url to link to in frontend.",
+      "value": "https://www.openstreetmap.org/?mlat=$LATITUDE&mlon=$LONGITUDE",
+      "required": false
+    },
+    "DASHBOARD_PAGE_SIZE": {
+      "description": "How many services should be displayed on dashboard page?",
+      "value": "5",
+      "required": false
+    },
+    "USE_RELATIVE_MAX_IN_BAR_VISUALIZATION": {
+      "description": "Should background bars be scaled to full width?",
+      "value": "True",
+      "required": false
     }
   }
 }

kubernetes/deployments.yml

@@ -17,7 +17,7 @@ spec:
     spec:
       containers:
       - name: "shynet-webserver"
-        image: "milesmcc/shynet:dev"
+        image: "milesmcc/shynet:latest"
         imagePullPolicy: Always
         envFrom:
         - secretRef:
@@ -42,7 +42,7 @@ spec:
     spec:
       containers:
       - name: "shynet-celeryworker"
-        image: "milesmcc/shynet:dev"
+        image: "milesmcc/shynet:latest"
         command: ["./celeryworker.sh"]
         imagePullPolicy: Always
         envFrom:

package.json

@@ -20,7 +20,9 @@
     "@fortawesome/fontawesome-free": "^5.15.1",
     "a17t": "^0.5.1",
     "apexcharts": "^3.24.0",
+    "datamaps": "^0.5.9",
+    "flag-icon-css": "^3.5.0",
     "inter-ui": "^3.15.0",
-    "litepicker": "^1.5.7"
+    "litepicker": "^2.0.11"
   }
 }

shynet/analytics/migrations/0008_session_is_bounce.py

@@ -1,15 +1,6 @@
 # Generated by Django 3.1.7 on 2021-03-28 21:38
 
-from django.db.models.expressions import F
-from ..models import Session, Hit
 from django.db import migrations, models
-from django.db.models import Subquery, OuterRef
-
-
-def update_bounce_stats(_a, _b):
-    Session.objects.all().annotate(hit_count=models.Count("hit")).filter(
-        hit_count__gt=1
-    ).update(is_bounce=False)
 
 
 class Migration(migrations.Migration):
@@ -23,6 +14,5 @@ class Migration(migrations.Migration):
             model_name="session",
             name="is_bounce",
             field=models.BooleanField(db_index=True, default=True),
-        ),
+        )
-        migrations.RunPython(update_bounce_stats, lambda: ()),
     ]

shynet/analytics/migrations/0009_auto_20210329_1100.py

@@ -0,0 +1,21 @@
+# Generated by Django 3.1.7 on 2021-03-29 15:00
+
+from django.db import migrations, models
+from ..models import Session
+
+
+def update_bounce_stats(_a, _b):
+    Session.objects.all().annotate(hit_count=models.Count("hit")).filter(
+        hit_count__gt=1
+    ).update(is_bounce=False)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("analytics", "0008_session_is_bounce"),
+    ]
+
+    operations = [
+        migrations.RunPython(update_bounce_stats, lambda: ()),
+    ]

shynet/analytics/models.py

@@ -1,12 +1,10 @@
-import json
 import uuid
 
-from django.conf import settings
 from django.db import models
 from django.shortcuts import reverse
 from django.utils import timezone
 
-from core.models import Service
+from core.models import Service, ACTIVE_USER_TIMEDELTA
 
 
 def _default_uuid():
@@ -61,9 +59,7 @@ class Session(models.Model):
 
     @property
     def is_currently_active(self):
-        return timezone.now() - self.last_seen < timezone.timedelta(
+        return timezone.now() - self.last_seen < ACTIVE_USER_TIMEDELTA
-            milliseconds=settings.SCRIPT_HEARTBEAT_FREQUENCY * 2
-        )
 
     @property
     def duration(self):

shynet/analytics/tasks.py

@@ -39,6 +39,9 @@ def _geoip2_lookup(ip):
         }
     except geoip2.errors.AddressNotFoundError:
         return {}
+    except FileNotFoundError as e:
+        log.exception("Unable to perform GeoIP lookup: %s", e)
+        return {}
 
 
 @shared_task
@@ -58,6 +61,7 @@ def ingress_request(
         log.debug(f"Linked to service {service}")
 
         if dnt and service.respect_dnt:
+            log.debug("Ignoring because of DNT")
             return
 
         try:
@@ -67,6 +71,7 @@ def ingress_request(
                     ignored_network.version == remote_ip.version
                     and ignored_network.supernet_of(remote_ip)
                 ):
+                    log.debug("Ignoring because of ignored IP")
                     return
         except ValueError as e:
             log.exception(e)
@@ -197,4 +202,5 @@ def ingress_request(
                 )
     except Exception as e:
         log.exception(e)
+        print(e)
         raise e

shynet/analytics/templates/analytics/scripts/page.js

@@ -8,11 +8,14 @@
 var Shynet = {
   idempotency: null,
   heartbeatTaskId: null,
+  skipHeartbeat: false,
   sendHeartbeat: function () {
     try {
-      if (document.hidden) {
+      if (document.hidden || Shynet.skipHeartbeat) {
         return;
       }
+
+      Shynet.skipHeartbeat = true;
       var xhr = new XMLHttpRequest();
       xhr.open(
         "POST",
@@ -20,6 +23,12 @@ var Shynet = {
         true
       );
       xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.onload = function () { 
+        Shynet.skipHeartbeat = false;
+      };
+      xhr.onerror = function () { 
+        Shynet.skipHeartbeat = false;
+      };
       xhr.send(
         JSON.stringify({
           idempotency: Shynet.idempotency,
@@ -37,6 +46,7 @@ var Shynet = {
       clearInterval(Shynet.heartbeatTaskId);
     }
     Shynet.idempotency = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    Shynet.skipHeartbeat = false;
     Shynet.heartbeatTaskId = setInterval(Shynet.sendHeartbeat, parseInt("{{heartbeat_frequency}}"));
     Shynet.sendHeartbeat();
   }

shynet/analytics/views/ingress.py

@@ -54,7 +54,7 @@ class ValidateServiceOriginsMixin:
                 origins = service.origins
                 cache.set(f"service_origins_{service_uuid}", origins, timeout=3600)
 
-            resp = super().dispatch(request, *args, **kwargs)
+            allow_origin = "*"
 
             if origins != "*":
                 remote_origin = request.META.get("HTTP_ORIGIN")
@@ -66,12 +66,12 @@ class ValidateServiceOriginsMixin:
                     remote_origin = f"{parsed.scheme}://{parsed.netloc}".lower()
                 origins = [origin.strip().lower() for origin in origins.split(",")]
                 if remote_origin in origins:
-                    resp["Access-Control-Allow-Origin"] = remote_origin
+                    allow_origin = remote_origin
                 else:
                     return HttpResponseForbidden()
-            else:
-                resp["Access-Control-Allow-Origin"] = "*"
 
+            resp = super().dispatch(request, *args, **kwargs)
+            resp["Access-Control-Allow-Origin"] = allow_origin
             resp["Access-Control-Allow-Methods"] = "GET,HEAD,OPTIONS,POST"
             resp[
                 "Access-Control-Allow-Headers"

shynet/core/models.py

@@ -4,14 +4,20 @@ import re
 import uuid
 
 from django.apps import apps
+from django.conf import settings
 from django.contrib.auth.models import AbstractUser
 from django.core.exceptions import ValidationError
 from django.db import models
-from django.db.models.functions import TruncDate
+from django.db.models.functions import TruncDate, TruncHour
 from django.db.utils import NotSupportedError
 from django.shortcuts import reverse
 from django.utils import timezone
 
+# How long a session a needs to go without an update to no longer be considered 'active' (i.e., currently online)
+ACTIVE_USER_TIMEDELTA = timezone.timedelta(
+    milliseconds=settings.SCRIPT_HEARTBEAT_FREQUENCY * 2
+)
+
 
 def _default_uuid():
     return str(uuid.uuid4())
@@ -119,8 +125,10 @@ class Service(models.Model):
         Session = apps.get_model("analytics", "Session")
         Hit = apps.get_model("analytics", "Hit")
 
+        tz_now = timezone.now()
+
         currently_online = Session.objects.filter(
-            service=self, last_seen__gt=timezone.now() - timezone.timedelta(seconds=10)
+            service=self, last_seen__gt=tz_now - ACTIVE_USER_TIMEDELTA
         ).count()
 
         sessions = Session.objects.filter(
@@ -133,6 +141,8 @@ class Service(models.Model):
         )
         hit_count = hits.count()
 
+        has_hits = Hit.objects.filter(service=self).exists()
+
         bounces = sessions.filter(is_bounce=True)
         bounce_count = bounces.count()
 
@@ -188,6 +198,36 @@ class Service(models.Model):
 
         avg_hits_per_session = hit_count / session_count if session_count > 0 else None
 
+        avg_session_duration = self._get_avg_session_duration(sessions, session_count)
+
+        chart_data, chart_tooltip_format, chart_granularity = self._get_chart_data(
+            sessions, hits, start_time, end_time, tz_now
+        )
+        return {
+            "currently_online": currently_online,
+            "session_count": session_count,
+            "hit_count": hit_count,
+            "has_hits": has_hits,
+            "bounce_rate_pct": bounce_count * 100 / session_count
+            if session_count > 0
+            else None,
+            "avg_session_duration": avg_session_duration,
+            "avg_load_time": avg_load_time,
+            "avg_hits_per_session": avg_hits_per_session,
+            "locations": locations,
+            "referrers": referrers,
+            "countries": countries,
+            "operating_systems": operating_systems,
+            "browsers": browsers,
+            "devices": devices,
+            "device_types": device_types,
+            "chart_data": chart_data,
+            "chart_tooltip_format": chart_tooltip_format,
+            "chart_granularity": chart_granularity,
+            "online": True,
+        }
+
+    def _get_avg_session_duration(self, sessions, session_count):
         try:
             avg_session_duration = sessions.annotate(
                 duration=models.F("last_seen") - models.F("start_time")
@@ -202,47 +242,72 @@ class Service(models.Model):
         if session_count == 0:
             avg_session_duration = None
 
-        session_chart_data = {
+        return avg_session_duration
-            k["date"]: k["count"]
+
-            for k in sessions.annotate(date=TruncDate("start_time"))
+    def _get_chart_data(self, sessions, hits, start_time, end_time, tz_now):
+        # Show hourly chart for date ranges of 3 days or less, otherwise daily chart
+        if (end_time - start_time).days < 3:
+            chart_tooltip_format = "MM/dd HH:mm"
+            chart_granularity = "hourly"
+            sessions_per_hour = (
+                sessions.annotate(hour=TruncHour("start_time"))
+                .values("hour")
+                .annotate(count=models.Count("uuid"))
+                .order_by("hour")
+            )
+            chart_data = {
+                k["hour"]: {"sessions": k["count"]} for k in sessions_per_hour
+            }
+            hits_per_hour = (
+                hits.annotate(hour=TruncHour("start_time"))
+                .values("hour")
+                .annotate(count=models.Count("id"))
+                .order_by("hour")
+            )
+            for k in hits_per_hour:
+                if k["hour"] not in chart_data:
+                    chart_data[k["hour"]] = {"hits": k["count"], "sessions": 0}
+                else:
+                    chart_data[k["hour"]]["hits"] = k["count"]
+
+            hours_range = range(int((end_time - start_time).total_seconds() / 3600) + 1)
+            for hour_offset in hours_range:
+                hour = start_time + timezone.timedelta(hours=hour_offset)
+                if hour not in chart_data and hour <= tz_now:
+                    chart_data[hour] = {"sessions": 0, "hits": 0}
+        else:
+            chart_tooltip_format = "MMM d"
+            chart_granularity = "daily"
+            sessions_per_day = (
+                sessions.annotate(date=TruncDate("start_time"))
                 .values("date")
                 .annotate(count=models.Count("uuid"))
                 .order_by("date")
-        }
+            )
+            chart_data = {k["date"]: {"sessions": k["count"]} for k in sessions_per_day}
+            hits_per_day = (
+                hits.annotate(date=TruncDate("start_time"))
+                .values("date")
+                .annotate(count=models.Count("id"))
+                .order_by("date")
+            )
+            for k in hits_per_day:
+                chart_data[k["date"]]["hits"] = k["count"]
+
             for day_offset in range((end_time - start_time).days + 1):
                 day = (start_time + timezone.timedelta(days=day_offset)).date()
-            if day not in session_chart_data:
+                if day not in chart_data and day <= tz_now.date():
-                session_chart_data[day] = 0
+                    chart_data[day] = {"sessions": 0, "hits": 0}
 
-        return {
+        chart_data = sorted(chart_data.items(), key=lambda k: k[0])
-            "currently_online": currently_online,
+        chart_data = {
-            "session_count": session_count,
+            'sessions': [v['sessions'] for k, v in chart_data],
-            "hit_count": hit_count,
+            'hits': [v['hits'] for k, v in chart_data],
-            "avg_hits_per_session": hit_count / (max(session_count, 1)),
+            'labels': [str(k) for k, v in chart_data],
-            "bounce_rate_pct": bounce_count * 100 / session_count
-            if session_count > 0
-            else None,
-            "avg_session_duration": avg_session_duration,
-            "avg_load_time": avg_load_time,
-            "avg_hits_per_session": avg_hits_per_session,
-            "locations": locations,
-            "referrers": referrers,
-            "countries": countries,
-            "operating_systems": operating_systems,
-            "browsers": browsers,
-            "devices": devices,
-            "device_types": device_types,
-            "session_chart_data": json.dumps(
-                [
-                    {"x": str(key), "y": value}
-                    for key, value in sorted(
-                        session_chart_data.items(), key=lambda k: k[0]
-                    )
-                ]
-            ),
-            "online": True,
         }
 
+        return chart_data, chart_tooltip_format, chart_granularity
+
     def get_absolute_url(self):
         return reverse(
             "dashboard:service",

shynet/dashboard/mixins.py

@@ -1,12 +1,11 @@
 from datetime import datetime, time
-from urllib.parse import urlparse
 
 from django.utils import timezone
 
 
 class DateRangeMixin:
     def get_start_date(self):
-        if self.request.GET.get("startDate") != None:
+        if self.request.GET.get("startDate") is not None:
             found_time = timezone.datetime.strptime(
                 self.request.GET.get("startDate"), "%Y-%m-%d"
             )
@@ -15,7 +14,7 @@ class DateRangeMixin:
             return timezone.now() - timezone.timedelta(days=30)
 
     def get_end_date(self):
-        if self.request.GET.get("endDate") != None:
+        if self.request.GET.get("endDate") is not None:
             found_time = timezone.datetime.strptime(
                 self.request.GET.get("endDate"), "%Y-%m-%d"
             )
@@ -23,8 +22,45 @@ class DateRangeMixin:
         else:
             return timezone.now()
 
+    def get_date_ranges(self):
+        now = timezone.now()
+        return [
+            {
+                'name': 'Last 3 days',
+                'start': now - timezone.timedelta(days=2),
+                'end': now,
+            },
+            {
+                'name': 'Last 30 days',
+                'start': now - timezone.timedelta(days=29),
+                'end': now,
+            },
+            {
+                'name': 'Last 90 days',
+                'start': now - timezone.timedelta(days=89),
+                'end': now,
+            },
+            {
+                'name': 'This month',
+                'start': now.replace(day=1),
+                'end': now,
+            },
+            {
+                'name': 'Last month',
+                'start': now.replace(day=1, month=now.month - 1),
+                'end': now.replace(day=1, month=now.month) - timezone.timedelta(days=1),
+            },
+            {
+                'name': 'This year',
+                'start': now.replace(day=1, month=1),
+                'end': now,
+            },
+        ]
+
     def get_context_data(self, **kwargs):
         data = super().get_context_data(**kwargs)
         data["start_date"] = self.get_start_date()
         data["end_date"] = self.get_end_date()
+        data["date_ranges"] = self.get_date_ranges()
+
         return data

shynet/dashboard/static/dashboard/css/global.css

@@ -11,10 +11,23 @@
     max-height: 400px;
 }
 
+.force-limited-height {
+    max-height: 400px;
+    overflow: hidden;
+}
+
 .rf {
     text-align: right !important;
 }
 
+.chart-card .apexcharts-svg {
+    border-radius: 0 0 var(--border-radius-lg, 0.5rem) var(--border-radius-lg, 0.5rem);
+}
+
+.max-w-0 {
+    max-width: 0;
+}
+
 :root {
     --color-neutral-000: white;
     --color-neutral-50: #F8FAFC;

shynet/dashboard/templates/account/base.html

@@ -1,8 +1,8 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div>
+<div class="flex-1 truncate">
-    <h4 class="heading">{% block page_title %}{% endblock %}</h4>
+    <h4 class="heading truncate">{% block page_title %}{% endblock %}</h4>
 </div>
 <hr class="sep">
 {% block main %}

shynet/dashboard/templates/base.html

@@ -10,30 +10,36 @@
   {% include 'a17t/includes/head.html' %}
   <link rel="icon" type="image/png" href="{% static 'dashboard/images/icon.png' %}">
   <script src="{% static 'apexcharts/dist/apexcharts.min.js'%}"></script>
-  <script src="{% static 'litepicker/dist/js/main.js' %}"></script>
+  <script src="{% static 'litepicker/dist/nocss/litepicker.js' %}"></script>
+  <script src="{% static 'litepicker/dist/plugins/ranges.js' %}"></script>
+  <script src="{% static 'd3/d3.min.js' %}"></script>
+  <script src="{% static 'topojson/build/topojson.min.js' %}"></script>
+  <script src="{% static 'datamaps/dist/datamaps.world.min.js' %}"></script>
   <script src="{% static 'dashboard/js/base.js' %}"></script>
   <link rel="stylesheet" href="{% static 'dashboard/css/global.css' %}">
+  <link rel="stylesheet" href="{% static 'flag-icon-css/css/flag-icon.min.css' %}">
+  <link rel="stylesheet" href="{% static 'litepicker/dist/css/litepicker.css' %}">
   {% block extra_head %}
   {% endblock %}
 </head>
 
-<body class="bg-neutral-100 min-h-full">
+<body class="bg-neutral-100 min-h-full overflow-x-hidden">
   {% block body %}
 
   <section class="max-w-screen-xl mx-auto px-4 py-4 md:py-12 md:flex">
     <aside
-      class="mb-8 md:w-2/12 md:pr-6 relative flex flex-wrap md:block justify-between items-center overflow-x-hidden">
+      class="mb-2 md:w-2/12 md:pr-6 relative flex flex-wrap md:block justify-between items-center overflow-x-hidden">
       <a class="icon ~urge ml-2 md:ml-6 md:mb-8 md:mt-3" href="{% url 'dashboard:dashboard' %}">
         <i class="fas fa-binoculars fa-3x text-urge-600 hidden md:block"></i>
         <i class="fas fa-binoculars fa-2x text-urge-600 md:hidden"></i>
       </a>
 
-      <button class="button ~neutral !low md:hidden"
+      <a tabindex="0" role="button" class="button ~neutral !low md:hidden"
         onclick="document.getElementById('navMenuExpanded').classList.toggle('hidden')">
         <span class="icon">
           <i class="fas fa-bars"></i>
         </span>
-      </button>
+      </a>
       <hr class="sep h-4 md:h-8 w-full">
       <div id="navMenuExpanded"
         class="bg-neutral-000 shadow-lg md:shadow-none p-4 hidden rounded-lg md:block md:bg-transparent md:border-none md:p-0 w-full">
@@ -41,8 +47,8 @@
         <p class="ml-2 mb-1 supra font-medium text-gray-500 pointer-events-none">Services</p>
 
         {% for service in user.owning_services.all %}
-        {% url 'dashboard:service' service.uuid as url %}
+        {% contextual_url 'dashboard:service' service.uuid as url %}
-        {% include 'dashboard/includes/sidebar_portal.html' with label=service.name|truncatechars:16 url=url icon=service.link|iconify %}
+        {% include 'dashboard/includes/sidebar_portal.html' with label=service.name url=url icon=service.link|iconify %}
         {% endfor %}
 
         {% endif %}
@@ -60,8 +66,8 @@
         <p class="ml-2 mb-1 supra font-medium text-gray-500 pointer-events-none">Collaborations</p>
 
         {% for service in user.collaborating_services.all %}
-        {% url 'dashboard:service' service.uuid as url %}
+        {% contextual_url 'dashboard:service' service.uuid as url %}
-        {% include 'dashboard/includes/sidebar_portal.html' with label=service.name|truncatechars:20 url=url %}
+        {% include 'dashboard/includes/sidebar_portal.html' with label=service.name url=url %}
         {% endfor %}
 
         <hr class="sep h-8">

shynet/dashboard/templates/dashboard/includes/bar.html

@@ -0,0 +1,6 @@
+{% load helpers %}
+<div
+    class="absolute h-6 rounded-md"
+    style="width: {% bar_width count max total %}; top: 6px; left: 0px; height: calc(100% - 12px); background-color: var(--color-urge-100-fallback)"
+>
+</div>

shynet/dashboard/templates/dashboard/includes/date_range.html

@@ -2,32 +2,48 @@
     <input type="hidden" name="startDate" value="{{start_date.isoformat}}" id="startDate">
     <input type="hidden" name="endDate" value="{{end_date.isoformat}}" id="endDate">
 </form>
-<input type="input" id="rangePicker" placeholder="Date range" class="input ~neutral bg-neutral-000 cursor-pointer" readonly>
+<input type="input" id="rangePicker" placeholder="Date range" class="input ~neutral bg-neutral-000 cursor-pointer" style="max-width: 200px;" readonly>
 <style>
     :root {
-        --litepickerMonthButtonHover: var(--color-urge);
+        --litepicker-button-prev-month-color-hover: var(--color-urge);
-        --litepickerDayColorHover: var(--color-urge);
+        --litepicker-button-next-month-color-hover: var(--color-urge);
-        --litepickerDayIsTodayColor: var(--color-urge);
+        --litepicker-day-color-hover: var(--color-urge);
-        --litepickerDayIsInRange: var(--color-urge-normal-fill);
+        --litepicker-is-today-color: var(--color-urge);
-        --litepickerDayIsStartBg: var(--color-urge);
+        --litepicker-is-in-range-color: var(--color-urge-normal-fill);
-        --litepickerDayIsEndBg: var(--color-urge);
+        --litepicker-is-start-color-bg: var(--color-urge);
-        --litepickerButtonApplyBg: var(--color-urge);
+        --litepicker-is-end-color-bg: var(--color-urge);
+        --litepicker-button-apply-color-bg: var(--color-urge);
+    }
+
+    .litepicker .container__predefined-ranges, .litepicker .container__months {
+        box-shadow: var(--fallback-box-shadow-normal) !important;
     }
 </style>
 <script>
     var picker = new Litepicker({
         element: document.getElementById('rangePicker'),
+        plugins: ['ranges'],
         singleMode: false,
-        format: 'MMM D, YYYY',
+        format: "MMM DD 'YY",
         maxDate: new Date(),
         startDate: Date.parse(document.getElementById("startDate").getAttribute("value")),
         endDate: Date.parse(document.getElementById("endDate").getAttribute("value")),
-        onSelect: function (startDate, endDate) {
+        ranges: {
+            customRanges: {
+                {% for date_range in date_ranges %}
+                    '{{ date_range.name }}': [
+                        new Date('{{ date_range.start.isoformat }}'),
+                        new Date('{{ date_range.end.isoformat }}')
+                    ],
+                {% endfor %}
+            }
+        }
+    });
+    picker.on('selected', (startDate, endDate) => {
         document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
             "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
         document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
             (endDate.getMonth() + 1) + "-" + endDate.getDate());
         document.getElementById("datePicker").submit();
-        }
     });
 </script>

shynet/dashboard/templates/dashboard/includes/map_chart.html

@@ -0,0 +1,59 @@
+{% load helpers %}
+
+<div id="map-chart" class="relative"></div>
+<script>
+    // Colors
+    const lightBlue = "#C4B5FD";
+    const highlightBlue = "#8B5CF6";
+    const white = "#ffffff";
+    
+    // Data maps
+    const countryMapData = {};
+    const countryMapColors = {};
+    const countryMap = {
+        {% for country in countries %}"{{country.country|safe|datamap_id}}": {{country.count}},
+        {% endfor %}
+    };
+
+    // Max session count will be full opacity
+    const maxSessionCount = Math.max(...Object.values(countryMap));
+
+    // Color scale starts from opacity 0.1 - 1.0, 0 sessions gets opacity 0
+    const minPercentage = 0.1
+
+    // Loop over country map and transform data for Datamaps use
+    const keys = Object.keys(countryMap);
+    const length = keys.length;
+    for (let i = 0; i < length; i++) {
+        countryMapData[keys[i]] = {
+            sessionCount: countryMap[keys[i]],
+            color: `rgba(124, 58, 237, ${countryMap[keys[i]] === 0 ? 0 : minPercentage + (countryMap[keys[i]] / maxSessionCount * (1 - minPercentage))})`
+        };
+        countryMapColors[keys[i]] = countryMapData[keys[i]].color;
+    }
+
+    // Create datamap
+    const map = new Datamap({
+        element: document.getElementById('map-chart'),
+        projection: 'mercator',
+        responsive: true,
+        geographyConfig: {
+            borderColor: lightBlue,
+            highlightBorderColor: highlightBlue,
+            highlightBorderWidth: 1.5,
+            highlightFillColor: (geography) => geography.color || white,
+            highlightFillOpacity: 0.9,
+            popupTemplate: (geography, data) => '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong>: ' +  data.sessionCount + ' sessions</div>'
+    
+        },
+        fills: {
+            defaultFill: white
+        },
+        data: countryMapData,
+        aspectRatio: 0.68
+    });
+    map.updateChoropleth(countryMapColors);
+    
+    // Handle resize. TODO: debounce?
+    window.onresize = () => map.resize();
+</script>

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

@@ -1,16 +1,16 @@
 {% load humanize helpers %}
 
-<a class="card ~neutral !low service mb-6 p-0" href="{% url 'dashboard:service' object.uuid %}">
+<a class="card chart-card overflow-visible ~neutral !low service mb-6 p-0" href="{% contextual_url 'dashboard:service' object.uuid %}">
     {% with stats=object.stats %}
-    <div class="p-4 md:flex justify-between">
+    <div class="p-4 md:flex justify-between overflow-none">
-        <div class="flex items-center mb-4 md:mb-0">
+        <div class="flex items-center mb-4 md:mb-0 md:flex-1 md:min-w-0 truncate pr-0 md:pr-2">
-            <h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center">
+            <h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center truncate" title="{{object.name}}">
                 {{object.link|iconify}}
-                <span>{{object.name}}</span>
+                <span class="truncate">{{object.name}}</span>
             </h3>
             {% include 'dashboard/includes/stats_status_chip.html' %}
         </div>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-3 lg:gap-6 md:flex-none">
             <div>
                 <p>Sessions</p>
                 <p class="label">
@@ -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 %}
+        {% include 'dashboard/includes/time_chart.html' with data=stats.chart_data sparkline=True height=100 name=object.uuid tooltip_format=stats.chart_tooltip_format granularity=stats.chart_granularity %}
     </div>
     {% endwith %}
 </a>

shynet/dashboard/templates/dashboard/includes/service_snippet.html

@@ -0,0 +1,5 @@
+<div class="card ~neutral !high font-mono text-sm whitespace-pre-wrap break-all">{% filter force_escape %}<noscript>
+    <img src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_pixel' object.uuid %}">
+</noscript>
+<script defer src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_script' object.uuid %}"></script>{% endfilter %}
+</div>

shynet/dashboard/templates/dashboard/includes/session_list.html

@@ -12,7 +12,7 @@
         {% for session in object_list %}
         <tr>
             <td>
-                <a href="{% url 'dashboard:service_session' object.pk session.pk %}"
+                <a href="{% contextual_url 'dashboard:service_session' object.pk session.pk %}"
                     class="font-medium text-urge-700">
                     {{session.start_time|date:"M j Y, g:i a"|capfirst}}
                     {% if session.is_currently_active %}
@@ -27,7 +27,7 @@
                 <span class="text-gray-600">&mdash;</span>
                 {% endif %}
             </td>
-            <td>{{session.country|flag_emoji}} {{session.asn|default:"Unknown"}}</td>
+            <td><span class="{{session.country|flag_class}}"></span>{{session.asn|default:"Unknown"}}</td>
             <td class="rf">{{session.duration|naturaldelta}}</td>
             <td class="rf">{{session.hit_set.count|intcomma}}</td>
         </tr>

shynet/dashboard/templates/dashboard/includes/sidebar_portal.html

@@ -1,6 +1,6 @@
 {% load helpers %}
 
 <div>
-    <a class="portal !low {% if request.get_full_path|startswith:url %}~urge active bg-neutral-100{% endif %} flex items-center"
+    <a class="portal !low {% if request.get_full_path|startswith:url %}~urge active bg-neutral-100{% endif %} flex items-center" title="{{label}}"
-        {% if disable_turbolinks %}data-turbolinks="false"{% endif %} href="{{url}}">{{icon}} {{label}}</a>
+        {% if disable_turbolinks %}data-turbolinks="false"{% endif %} href="{{url}}">{{icon}} <span class="truncate">{{label}}</span></a>
 </div>

shynet/dashboard/templates/dashboard/includes/stats_status_chip.html

@@ -2,7 +2,7 @@
 
 {% with stats=object.get_daily_stats %}
 {% if stats.currently_online > 0 %}
-<span class="chip ~positive !high">
+<span class="chip ~positive !high whitespace-nowrap">
     {{stats.currently_online|intcomma}} online
 </span>
 {% endif %}

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

@@ -5,9 +5,14 @@
             enabled: false
         },
         tooltip: {
-            shared: false,
+            shared: true,
+            x: {
+                format: '{{tooltip_format|default:"MMM d"}}',
+            },
+        },
+        legend: {
+            show: false,
         },
-        colors: ["#805AD5"],
         chart: {
             zoom: {
                 enabled: false,
@@ -15,7 +20,7 @@
             toolbar: {
                 show: false,
             },
-            type: 'area',
+            type: 'line',
             height: {{height|default:"200"}},
             offsetY: -1,
             animations: {
@@ -24,16 +29,14 @@
             sparkline: {
                 enabled: {% if sparkline %}true{% else %}false{% endif %},
             },
-            fill: {
+            {% if granularity == "daily" and click_zoom %}
-                type: 'gradient',
+            events: {
-                gradient: {
+                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex, w: {config}}) {
-                    shadeIntensity: 1,
+                    const day = config.labels[dataPointIndex]
-                    inverseColors: false,
+                    window.location.href = `?startDate=${day}&endDate=${day}`
-                    opacityFrom: 0.8,
-                    opacityTo: 0,
-                    stops: [0, 75, 100]
                 },
             },
+            {% endif %}
         },
         grid: {
             padding: {
@@ -63,14 +66,26 @@
         },
         xaxis: {
             type: "datetime",
+            labels: {
+                datetimeUTC: false
+            },
         },
         stroke: {
-            width: 1.5,
+            width: 2,
+            curve: 'smooth',
         },
         series: [{
-            name: "{{unit|default:'Sessions'}}",
+            name: "Hits",
-            data: {{data|safe}}
+            type: 'area',
-        }]
+            color: "#ddd6fe",
+            data: {{data.hits|safe}}
+        }, {
+            name: "Sessions",
+            type: 'line',
+            color: "#805AD5",
+            data: {{data.sessions|safe}}
+        }],
+        labels: {{data.labels|safe}}
     };
     var triggerMatchesChart = new ApexCharts(document.querySelector("#chart{{name|default:'Main'}}"), triggerMatchesChartOptions);
     triggerMatchesChart.render();

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

@@ -4,8 +4,8 @@
 
 {% block content %}
 <div class="md:flex justify-between items-center">
-    <div>
+    <div class="flex-1 truncate display-none md:display-block mr-4 md:mb-0 mb-4" title="{{request.site.name|default:"Dashboard"}}">
-        <h4 class="heading">{{request.site.name|default:"Dashboard"}}</h4>
+        <h4 class="heading truncate">{{request.site.name|default:"Dashboard"}}</h4>
     </div>
     <div class="flex items-center">
         <div class="mr-1">
@@ -17,13 +17,15 @@
         {% endif %}
     </div>
 </div>
-<hr class="sep">
+<hr class="sep h-8 md:h-12">
 {% for object in object_list|dictsortreversed:"stats.session_count" %}
 {% include 'dashboard/includes/service_overview.html' %}
 {% empty %}
-<p>You don't have any services on {{request.site.name|default:"Shynet"}} yet.</p>
+<p class="aside ~urge !high">You don't have any services yet. {% if can_create %}Get started by <a href="{% url 'dashboard:service_create' %}" class="underline">creating one</a>.{% endif %}</p>
 {% endfor %}
 
+{% if object_list %}
 {% pagination page_obj request %}
+{% endif %}
 
 {% endblock %}

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

@@ -6,11 +6,19 @@
 <div class="mr-2">{% include 'dashboard/includes/date_range.html' %}</div>
 {% has_perm 'core.change_service' user object as can_update %}
 {% if can_update %}
-<a href="{% url 'dashboard:service_update' service.uuid %}" class="button field bg-neutral-000 w-auto">Manage &rarr;</a>
+<a href="{% contextual_url 'dashboard:service_update' service.uuid %}" class="button field bg-neutral-000 w-auto">Manage &rarr;</a>
 {% endif %}
 {% endblock %}
 
 {% block service_content %}
+{% if not stats.has_hits %}
+<div class="content mb-6">
+    <p>
+        This service hasn't collected any data yet. To get started, place the following code snippet at the end of the <code>&lt;body&gt;</code> tag on any page you'd like to track.
+    </p>
+    {% include 'dashboard/includes/service_snippet.html' %}
+</div>
+{% else %}
 <div class="grid grid-cols-2 gap-6 md:flex justify-between mb-6 card ~neutral !high px-6" id="stats">
     {% with classes="text-sm font-semibold" good_classes="text-positive-400" bad_classes="text-critical-400" neutral_classes="text-gray-400" %}
     <article class="">
@@ -85,9 +93,10 @@
     </article>
     {% endwith %}
 </div>
-<div class="card ~neutral !low py-0 mb-6">
+<div class="card overflow-visible ~neutral !low py-0 mb-6">
-    {% include 'dashboard/includes/time_chart.html' with data=stats.session_chart_data %}
+    {% include 'dashboard/includes/time_chart.html' with data=stats.chart_data tooltip_format=stats.chart_tooltip_format granularity=stats.chart_granularity click_zoom=True %}
 </div>
+{% endif %}
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
     <div class="card ~neutral !low limited-height py-2">
         <table class="table">
@@ -100,8 +109,20 @@
             <tbody>
                 {% for location in stats.locations %}
                 <tr>
-                    <td>{{location.location|default:"Unknown"|urldisplay}}</td>
+                    <td class="truncate w-full max-w-0 relative">
-                    <td class="rf">{{location.count|intcomma}}</td>
+                        {% include 'dashboard/includes/bar.html' with count=location.count max=stats.locations.0.count total=stats.hit_count %}
+                        <div class="relative flex items-center">
+                            {{location.location|default:"Unknown"|urldisplay}}
+                        </div>
+                    </td>
+                    <td>
+                        <div class="flex justify-end items-center">
+                            {{location.count|intcomma}}
+                            <span class="text-xs rf" style="min-width: 48px">
+                                ({{location.count|percent:stats.hit_count}})
+                            </span>
+                        </div>
+                    </td>
                 </tr>
                 {% empty %}
                 <tr>
@@ -111,6 +132,10 @@
             </tbody>
         </table>
     </div>
+    <div class="card ~neutral !low force-limited-height py-2 overflow-y-hidden">
+        <p class="text-sm font-semibold mx-2 p-2 border-b mb-2">Sessions by Geography</p>
+        {% include 'dashboard/includes/map_chart.html' with countries=stats.countries %}
+    </div>
     <div class="card ~neutral !low limited-height py-2">
         <table class="table">
             <thead class="text-sm">
@@ -122,30 +147,20 @@
             <tbody>
                 {% for referrer in stats.referrers %}
                 <tr>
-                    <td>{{referrer.referrer|default:"Direct"|urldisplay}}</td>
+                    <td class="truncate w-full max-w-0 relative">
-                    <td class="rf">{{referrer.count|intcomma}}</td>
+                        {% include 'dashboard/includes/bar.html' with count=referrer.count max=stats.referrers.0.count total=stats.session_count %}
-                </tr>
+                        <div class="relative flex items-center">
-                {% empty %}
+                            {{referrer.referrer|default:"Direct"|urldisplay}}
-                <tr>
-                    <td><span class="text-gray-600">No data yet...</span></td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
                         </div>
-    <div class="card ~neutral !low limited-height py-2">
+                    </td>
-        <table class="table">
+                    <td>
-            <thead class="text-sm">
+                        <div class="flex justify-end items-center">
-                <tr>
+                            {{referrer.count|intcomma}}
-                    <th>Country</th>
+                            <span class="text-xs rf" style="min-width: 48px">
-                    <th class="rf">Sessions</th>
+                                ({{referrer.count|percent:stats.session_count}})
-                </tr>
+                            </span>
-            </thead>
+                        </div>
-            <tbody>
+                    </td>
-                {% for country in stats.countries %}
-                <tr>
-                    <td>{{country.country|flag_emoji}} {{country.country|country_name}}</td>
-                    <td class="rf">{{country.count|intcomma}}</td>
                 </tr>
                 {% empty %}
                 <tr>
@@ -166,8 +181,20 @@
             <tbody>
                 {% for os in stats.operating_systems %}
                 <tr>
-                    <td class="flex items-center">{{os.os|iconify}}<span>{{os.os|default:"Unknown"}}</span></td>
+                    <td class="flex items-center truncate w-full max-w-0 relative" title="{{os.os|default:'Unknown'}}">
-                    <td class="rf">{{os.count|intcomma}}</td>
+                        {% include 'dashboard/includes/bar.html' with count=os.count max=stats.operating_systems.0.count total=stats.session_count %}
+                        <div class="relative flex items-center">
+                            {{os.os|iconify}}<span>{{os.os|default:"Unknown"}}</span>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="flex justify-end items-center">
+                            {{os.count|intcomma}}
+                            <span class="text-xs rf" style="min-width: 48px">
+                                ({{os.count|percent:stats.session_count}})
+                            </span>
+                        </div>
+                    </td>
                 </tr>
                 {% empty %}
                 <tr>
@@ -188,9 +215,21 @@
             <tbody>
                 {% for browser in stats.browsers %}
                 <tr>
-                    <td class="flex items-center">
+                    <td class="flex items-center truncate w-full max-w-0 relative" title="{{browser.browser|default:'Unknown'}}">
-                        {{browser.browser|iconify}}<span>{{browser.browser|default:"Unknown"}}</span></td>
+                        {% include 'dashboard/includes/bar.html' with count=browser.count max=stats.browsers.0.count total=stats.session_count %}
-                    <td class="rf">{{browser.count|intcomma}}</td>
+                        </div>
+                        <div class="relative flex items-center">
+                            {{browser.browser|iconify}}<span>{{browser.browser|default:"Unknown"}}</span>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="flex justify-end items-center">
+                            {{browser.count|intcomma}}
+                            <span class="text-xs rf" style="min-width: 48px">
+                                ({{browser.count|percent:stats.session_count}})
+                            </span>
+                        </div>
+                    </td>
                 </tr>
                 {% empty %}
                 <tr>
@@ -211,8 +250,20 @@
             <tbody>
                 {% for device_type in stats.device_types %}
                 <tr>
-                    <td>{{device_type.device_type|default:"Unknown"|title}}</td>
+                    <td class="truncate w-full max-w-0 relative">
-                    <td class="rf">{{device_type.count|intcomma}}</td>
+                        {% include 'dashboard/includes/bar.html' with count=device_type.count max=stats.device_types.0.count total=stats.session_count %}
+                        <div class="relative flex items-center">
+                            {{device_type.device_type|default:"Unknown"|title}}
+                        </div>
+                    </td>
+                    <td>
+                        <div class="flex justify-end items-center">
+                            {{device_type.count|intcomma}}
+                            <span class="text-xs rf" style="min-width: 48px">
+                                ({{device_type.count|percent:stats.session_count}})
+                            </span>
+                        </div>
+                    </td>
                 </tr>
                 {% empty %}
                 <tr>
@@ -223,10 +274,10 @@
         </table>
     </div>
 </div>
-<div class="card ~neutral !low limited-height py-2">
+<div class="card ~neutral !low py-2">
     {% include 'dashboard/includes/session_list.html' %}
-    <hr class="sep h-8">
+    <hr class="sep h-8 md:h-12">
-    <a href="{% url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto mb-2">View more
+    <a href="{% contextual_url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto mb-2">View more
         sessions
         &rarr;</a>
 </div>

shynet/dashboard/templates/dashboard/pages/service_session.html

@@ -5,7 +5,7 @@
 {% block head_title %}{{object.name}} Session{% endblock %}
 
 {% block service_actions %}
-<a href="{% url 'dashboard:service' object.uuid %}" class="button field bg-neutral-000 w-auto">Analytics &rarr;</a>
+<a href="{% contextual_url 'dashboard:service' object.uuid %}" class="button field bg-neutral-000 w-auto">Analytics &rarr;</a>
 {% endblock %}
 
 {% block service_content %}
@@ -21,7 +21,7 @@
                 {{session.last_seen|date:"g:i a"}}{% if session.is_currently_active %} <span class="chip ~positive !high text-base">Online</span>{% endif %}</p>
         </div>
     </div>
-    <hr class="sep h-8">
+    <hr class="sep h-8 md:h-12">
     <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-gray-400 font-medium">
         <div>
             <p>Browser</p>
@@ -45,13 +45,13 @@
         </div>
         <div>
             <p>Country</p>
-            <p class="label">{{session.country|flag_emoji}} {{session.country|country_name}}</p>
+            <p class="label"><span class="{{session.country|flag_class}}"></span>{{session.country|country_name}}</p>
         </div>
         <div>
             <p>Location</p>
             <p class="label">
                 {% if session.latitude %}
-                <a href="https://www.google.com/maps/search/?api=1&query={{session.latitude}},{{session.longitude}}">Open
+                <a href="{{session|location_url}}" target="_blank">Open
                     in Maps &nearr;</a>
                 {% else %}
                 Unknown
@@ -72,7 +72,7 @@
         </div>
         <div class="md:flex card ~neutral !low flex-grow justify-between">
             <div class="mb-4 md:mb-0 md:w-1/2">
-                <p class="label font-medium text-lg">{{hit.location|default:"Unknown"|urlize}}</p>
+                <p class="label font-medium text-lg truncate">{{hit.location|default:"Unknown"|urlize}}</p>
                 {% if hit.referrer %}
                 <p>via {{hit.referrer|urlize}}<p>
                 {% endif %}

shynet/dashboard/templates/dashboard/pages/service_session_list.html

@@ -6,11 +6,11 @@
 
 {% block service_actions %}
 <div class="mr-2">{% include 'dashboard/includes/date_range.html' %}</div>
-<a href="{% url 'dashboard:service' object.uuid %}" class="button field ~neutral bg-neutral-000 w-auto">Analytics &rarr;</a>
+<a href="{% contextual_url 'dashboard:service' object.uuid %}" class="button field ~neutral bg-neutral-000 w-auto">Analytics &rarr;</a>
 {% endblock %}
 
 {% block service_content %}
-<div class="card ~neutral !low mb-8 pt-2 max-w-full overflow-x-scroll">
+<div class="card ~neutral !low mb-8 pt-2 max-w-full overflow-x-auto">
     {% include 'dashboard/includes/session_list.html' %}
 </div>
 {% pagination page_obj request %}

shynet/dashboard/templates/dashboard/pages/service_update.html

@@ -12,12 +12,7 @@
 <div class="max-w-xl content">
     <h5>Installation</h5>
     <p>Place the following snippet at the end of the <code>&lt;body&gt;</code> tag on any page you'd like to track.</p>
-    <div class="card ~neutral !high font-mono text-sm">
+    {% include 'dashboard/includes/service_snippet.html' %}
-        {% filter force_escape %}<noscript><img
-                src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_pixel' object.uuid %}"></noscript>
-        <script defer src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_script' object.uuid %}"></script>
-        {% endfilter %}
-    </div>
     <hr class="sep h-4">
     <h5>Settings</h5>
     <form class="card ~neutral !low p-0" method="POST">

shynet/dashboard/templates/dashboard/service_base.html

@@ -6,21 +6,21 @@
 
 {% block content %}
 <div class="md:flex justify-between items-center" id="heading">
-    <a class="flex items-center mb-4 md:mb-0" href="{% url 'dashboard:service' object.uuid %}">
+    <a class="flex items-center mb-4 md:mb-0 truncate" href="{% contextual_url 'dashboard:service' object.uuid %}">
-        <h3 class="heading leading-none mr-4">
+        <h3 class="heading items-center mr-4 md:mr-2 flex truncate">
             {{object.link|iconify}}
-            {{object.name}}
+            <span class="flex-1 truncate ml-2" title="{{object.name}}">{{object.name}}</span>
         </h3>
-        <div class='text-3xl'>
+        <div class="text-3xl md:mr-2">
             {% include 'dashboard/includes/stats_status_chip.html' %}
         </div>
     </a>
-    <div class="flex items-center">
+    <div class="flex items-center flex-none">
         {% block service_actions %}
         {% endblock %}
     </div>
 </div>
-<hr class="sep h-8">
+<hr class="sep h-8 md:h-12">
 {% block service_content %}
 {% endblock %}
 {% endblock %}

shynet/dashboard/templatetags/helpers.py

@@ -1,13 +1,14 @@
 from datetime import timedelta
 from urllib.parse import urlparse
+import urllib
 
-import flag
 import pycountry
 from django import template
 from django.conf import settings
 from django.utils import timezone
 from django.utils.html import escape
 from django.utils.safestring import SafeString
+from django.template.defaulttags import url as url_tag
 
 register = template.Library()
 
@@ -27,11 +28,11 @@ def naturaldelta(timedelta):
 
 
 @register.filter
-def flag_emoji(isocode):
+def flag_class(isocode):
-    try:
+    if isocode:
-        return flag.flag(isocode)
+        return "mr-1 flag-icon flag-icon-" + isocode.lower()
-    except:
+    else:
-        return ""
+        return "hidden"
 
 
 @register.filter
@@ -42,6 +43,14 @@ def country_name(isocode):
         return "Unknown"
 
 
+@register.filter
+def datamap_id(isocode):
+    try:
+        return pycountry.countries.get(alpha_2=isocode).alpha_3
+    except:
+        return "UNKNOWN"
+
+
 @register.simple_tag
 def relative_stat_tone(
     start,
@@ -171,7 +180,7 @@ def iconify(text):
         domain = text + ".com"
 
     return SafeString(
-        f'<span class="icon mr-1"><img src="https://icons.duckduckgo.com/ip3/{domain}.ico"></span>'
+        f'<span class="icon mr-1 flex-none"><img src="https://icons.duckduckgo.com/ip3/{domain}.ico"></span>'
     )
 
 
@@ -180,7 +189,87 @@ def urldisplay(url):
     if url.startswith("http"):
         display_url = url.replace("http://", "").replace("https://", "")
         return SafeString(
-            f"<a href='{url}' title='{url}' rel='nofollow' class='flex items-center'>{iconify(url)} {escape(display_url if len(display_url) < 40 else display_url[:40] + '...')}</a>"
+            f"<a href='{url}' title='{url}' rel='nofollow' class='flex items-center mr-1'>{iconify(url)}<span class='truncate'>{escape(display_url)}</span></a>"
         )
     else:
         return url
+
+
+class ContextualURLNode(template.Node):
+    """Extension of the Django URLNode to support including contextual parameters in URL outputs. In other words, URLs generated will keep the start and end date parameters."""
+
+    CONTEXT_PARAMS = ["startDate", "endDate"]
+
+    def __init__(self, urlnode):
+        self.urlnode = urlnode
+
+    def __repr__(self):
+        return self.urlnode.__repr__()
+
+    def render(self, context):
+        url = self.urlnode.render(context)
+        if self.urlnode.asvar:
+            url = context[self.urlnode.asvar]
+
+        url_parts = list(urlparse(url))
+        query = dict(urllib.parse.parse_qsl(url_parts[4]))
+
+        query.update(
+            {
+                param: context.request.GET.get(param)
+                for param in self.CONTEXT_PARAMS
+                if param in context.request.GET and param not in query
+            }
+        )
+
+        url_parts[4] = urllib.parse.urlencode(query)
+
+        url_final = urllib.parse.urlunparse(url_parts)
+
+        if self.urlnode.asvar:
+            context[self.urlnode.asvar] = url_final
+            return ''
+        else:
+            return url_final
+
+
+@register.tag
+def contextual_url(*args, **kwargs):
+    urlnode = url_tag(*args, **kwargs)
+    return ContextualURLNode(urlnode)
+
+
+@register.filter
+def location_url(session):
+    return settings.LOCATION_URL.replace("$LATITUDE", str(session.latitude)).replace(
+        "$LONGITUDE", str(session.longitude)
+    )
+
+
+@register.filter
+def percent(value, total):
+    if total == 0:
+        return "N/A"
+
+    percent = value / total
+
+    if percent < 0.001:
+        return "<0.1%"
+
+    return f'{percent:.1%}'
+
+
+@register.simple_tag
+def bar_width(count, max, total):
+    if total == 0 or max == 0:
+        return "0"
+
+    if settings.USE_RELATIVE_MAX_IN_BAR_VISUALIZATION:
+        percent = count / max
+    else:
+        percent = count / total
+
+    if percent < 0.001:
+        return "0"
+
+    return f'{percent:.1%}'

shynet/dashboard/views.py

@@ -25,7 +25,7 @@ from .mixins import DateRangeMixin
 class DashboardView(LoginRequiredMixin, DateRangeMixin, ListView):
     model = Service
     template_name = "dashboard/pages/dashboard.html"
-    paginate_by = 5
+    paginate_by = settings.DASHBOARD_PAGE_SIZE
 
     def get_queryset(self):
         return Service.objects.filter(
@@ -66,6 +66,7 @@ class ServiceView(
 
     def get_context_data(self, **kwargs):
         data = super().get_context_data(**kwargs)
+        data["script_protocol"] = "https://" if settings.SCRIPT_USE_HTTPS else "http://"
         data["stats"] = self.object.get_core_stats(data["start_date"], data["end_date"])
         data["object_list"] = Session.objects.filter(
             service=self.get_object(),

shynet/shynet/settings.py

@@ -18,7 +18,7 @@ import urllib.parse as urlparse
 from django.contrib.messages import constants as messages
 
 # Increment on new releases
-VERSION = "v0.8.1"
+VERSION = "v0.10.0"
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
@@ -301,11 +301,22 @@ NPM_ROOT_PATH = "../"
 NPM_FILE_PATTERNS = {
     "a17t": [os.path.join("dist", "a17t.css"), os.path.join("dist", "tailwind.css")],
     "apexcharts": [os.path.join("dist", "apexcharts.min.js")],
-    "litepicker": [os.path.join("dist", "js", "main.js")],
+    "litepicker": [
+        os.path.join("dist", "nocss", "litepicker.js"),
+        os.path.join("dist", "css", "litepicker.css"),
+        os.path.join("dist", "plugins", "ranges.js"),
+    ],
     "turbolinks": [os.path.join("dist", "turbolinks.js")],
     "stimulus": [os.path.join("dist", "stimulus.umd.js")],
     "inter-ui": [os.path.join("Inter (web)", "*")],
     "@fortawesome": [os.path.join("fontawesome-free", "js", "all.min.js")],
+    "datamaps": [os.path.join("dist", "datamaps.world.min.js")],
+    "d3": ["d3.min.js"],
+    "topojson": [os.path.join("build", "topojson.min.js")],
+    "flag-icon-css": [
+        os.path.join("css", "flag-icon.min.css"),
+        os.path.join("flags", "*"),
+    ],
 }
 
 # Shynet
@@ -339,3 +350,16 @@ BLOCK_ALL_IPS = os.getenv("BLOCK_ALL_IPS", "False") == "True"
 
 # Include date and service ID in salt?
 AGGRESSIVE_HASH_SALTING = os.getenv("AGGRESSIVE_HASH_SALTING", "False") == "True"
+
+# What location url should be linked to in the frontend?
+LOCATION_URL = os.getenv(
+    "LOCATION_URL", "https://www.openstreetmap.org/?mlat=$LATITUDE&mlon=$LONGITUDE"
+)
+
+# How many services should be displayed on dashboard page?
+DASHBOARD_PAGE_SIZE = int(os.getenv("DASHBOARD_PAGE_SIZE", "5"))
+
+# Should background bars be scaled to full width?
+USE_RELATIVE_MAX_IN_BAR_VISUALIZATION = (
+    os.getenv("USE_RELATIVE_MAX_IN_BAR_VISUALIZATION", "True") == "True"
+)

tests/js.html

@@ -3,11 +3,14 @@
 <html>
 
 <head>
-    <title>Pixel test</title>
+    <title>JS test</title>
 </head>
 
 <body>
-    <script src="http://localhost:8000/ingress/9b2c4e2f-8d29-4418-82d4-b68e06795025/script.js"></script>
+    <noscript>
+        <img src="http://localhost:8000/ingress/0ca733e8-c41f-462b-a11a-4ba0cea29948/pixel.gif">
+    </noscript>
+    <script defer src="http://localhost:8000/ingress/0ca733e8-c41f-462b-a11a-4ba0cea29948/script.js"></script>
 </body>
 
 </html>