Merge pull request #245 from buildingSMART/IVS-658_Minor_Django_Admin_Charts_Metrics_Improvements

IVS-658 - Minor Django Admin charts & metrics improvements

Author: Ghesselink

backend/apps/ifc_validation/chart_urls.py

@@ -14,6 +14,7 @@
     path("avg-size/<int:year>/", charts.get_avg_size_chart),
     path("user-registrations/<int:year>/", charts.get_user_registrations_chart),
     path("usage-by-vendor/<int:year>/", charts.get_usage_by_vendor_chart),
+    path("usage-by-channel/<int:year>/", charts.get_usage_by_channel_chart),
     path("models-by-vendor/<int:year>/", charts.get_models_by_vendor_chart),
     path("top-tools/<int:year>/", charts.get_top_tools_chart),
     path("tools-count/<int:year>/", charts.get_tools_count_chart),

backend/apps/ifc_validation/chart_views.py

@@ -17,13 +17,13 @@
     AuthoringTool,
 )
 
-months = list(calendar.month_name)[1:] 
+MONTHS = list(calendar.month_name)[1:] 
 
 PERIODS = {
     "month": {
         "annotate": lambda qs: qs.annotate(period=ExtractMonth("created")),
-        "label":   lambda row: months[row["period"] - 1],         
-        "full_set": months,
+        "label":   lambda row: MONTHS[row["period"] - 1],         
+        "full_set": MONTHS,
     },
     "week": {
         "annotate": lambda qs: qs.annotate(period=ExtractWeek("created")),
@@ -52,7 +52,6 @@
     },
 }
 
-
 COLORS = {
     "primary": "#79aec8",
     "success": "#55efc4",
@@ -73,7 +72,6 @@
     "HEADER_SYNTAX": "SYNTAX",
 }
 
-
 TASK_TYPES = {
     "SYNTAX": ("Syntax", COLORS["success"]),
     "SCHEMA": ("Schema", COLORS["schema"]),
@@ -120,7 +118,8 @@ def chart_response(title, labels, datasets):
             "datasets": datasets,
         },
     })
-    
+
+
 def group_by_period(qs, period, agg_key, agg_expression, window=None):
     cfg = PERIODS[period]
     qs = cfg["annotate"](qs)
@@ -131,7 +130,7 @@ def group_by_period(qs, period, agg_key, agg_expression, window=None):
         qs = qs.filter(
             Q(period__in=[
                 int(lbl[1:]) if period in ["week", "quarter"]
-                else months.index(lbl) + 1 if period == "month"
+                else MONTHS.index(lbl) + 1 if period == "month"
                 else lbl
                 for lbl in valid_labels
             ])
@@ -142,6 +141,7 @@ def group_by_period(qs, period, agg_key, agg_expression, window=None):
           .order_by("period")
     )
 
+
 def fill_period_dict(grouped_qs, period, year, *, key, transform=lambda x: x, window=None):
     data = dict_for_period(period, year=year, window=window)   
     cfg  = PERIODS[period]
@@ -153,9 +153,11 @@ def fill_period_dict(grouped_qs, period, year, *, key, transform=lambda x: x, wi
             data[label] = round(value, 2)
     return data
 
+
 def get_period(request):
     return request.GET.get("period", "month").lower()
 
+
 def get_window(request) -> int | None:
     try:
         w = int(request.GET.get("window", ""))
@@ -201,7 +203,7 @@ def _rolling_labels(period: str, window: int, today: datetime.date | None = None
     month_cursor = today.replace(day=1) 
     labels = []
     for _ in range(window):
-        labels.insert(0, months[month_cursor.month - 1])
+        labels.insert(0, MONTHS[month_cursor.month - 1])
         month_cursor = (month_cursor - datetime.timedelta(days=1)).replace(day=1)
     return labels
 
@@ -390,7 +392,7 @@ def get_duration_per_task_chart(request, year):
         valid_labels = set(_rolling_labels(period, window))
         label_values = [
             int(lbl[1:]) if period in ["week", "quarter"]
-            else months.index(lbl) + 1 if period == "month"
+            else MONTHS.index(lbl) + 1 if period == "month"
             else lbl
             for lbl in valid_labels
         ]
@@ -437,7 +439,6 @@ def get_duration_per_task_chart(request, year):
     )
 
 
-
 @staff_member_required
 def get_processing_status_chart(request, year):
     period = get_period(request)
@@ -629,6 +630,78 @@ def get_usage_by_vendor_chart(request, year):
     )
 
 
+@staff_member_required
+def get_usage_by_channel_chart(request, year):
+    """
+    Distinct channels per period, split into WebUI vs API.
+    """
+    period = get_period(request)
+    window = get_window(request)
+
+    if period == "total":
+        qs = ValidationRequest.objects.all()
+        total_uploaders = qs.values("channel").distinct().count()
+        api_uploaders = qs.filter(
+            channel=ValidationRequest.Channel.API
+        ).values("id").distinct().count()
+        webui_uploaders = total_uploaders - api_uploaders
+
+        return chart_response(
+            title="Channels (WebUI vs API, Total)",
+            labels=["WebUI", "API"],
+            datasets=[{
+                "label": "Channels",
+                "backgroundColor": [COLORS["primary"], COLORS["success"]],
+                "borderColor": [COLORS["primary"], COLORS["success"]],
+                "data": [webui_uploaders, api_uploaders],
+            }]
+        )
+
+    qs = ValidationRequest.objects.filter(created__year=year)
+
+    total_qs = group_by_period(
+        qs,
+        period,
+        "total",
+        Count("id", distinct=True),
+        window=window
+    )
+
+    api_qs = group_by_period(
+        qs.filter(channel=ValidationRequest.Channel.API),
+        period,
+        ValidationRequest.Channel.API,
+        Count("id", distinct=True),
+        window=window
+    )
+
+    total_dict = fill_period_dict(total_qs, period, year, key="total", transform=int, window=window)
+    api_dict = fill_period_dict(api_qs, period, year, key="API", transform=int, window=window)
+    webui_dict = {lbl: total_dict[lbl] - api_dict.get(lbl, 0) for lbl in total_dict}
+    labels = list(total_dict.keys())
+
+    return chart_response(
+        title=f"Channels (WebUI vs API) in {year}",
+        labels=labels,
+        datasets=[
+            {
+                "label": "WebUI",
+                "backgroundColor": COLORS["primary"],
+                "borderColor": COLORS["primary"],
+                "data": [webui_dict[lbl] for lbl in labels],
+                "stack": "stack1",
+            },
+            {
+                "label": "API",
+                "backgroundColor": COLORS["success"],
+                "borderColor": COLORS["success"],
+                "data": [api_dict[lbl] for lbl in labels],
+                "stack": "stack1",
+            },
+        ],
+    )
+
+
 @staff_member_required
 def get_models_by_vendor_chart(request, year):
     """
@@ -676,7 +749,7 @@ def get_models_by_vendor_chart(request, year):
         valid_labels = set(_rolling_labels(period, window))
         label_values = [
             int(lbl[1:]) if period in ["week", "quarter"]
-            else months.index(lbl) + 1 if period == "month"
+            else MONTHS.index(lbl) + 1 if period == "month"
             else lbl
             for lbl in valid_labels
         ]
@@ -812,7 +885,6 @@ def get_tools_count_chart(request, year):
     )
 
 
-
 @staff_member_required
 def get_totals(request):
     # Overall, non time-split totals
@@ -851,7 +923,7 @@ def get_uploads_per_2h_chart(request, year):
         valid_labels = set(_rolling_labels(period, window))
         label_values = [
             int(lbl[1:]) if period in ["week", "quarter"]
-            else months.index(lbl) + 1 if period == "month"
+            else MONTHS.index(lbl) + 1 if period == "month"
             else lbl
             for lbl in valid_labels
         ]
@@ -883,6 +955,7 @@ def get_uploads_per_2h_chart(request, year):
         }],
     )
 
+
 @staff_member_required
 def get_queue_p95_chart(request, year):
     period = get_period(request)
@@ -899,7 +972,7 @@ def get_queue_p95_chart(request, year):
         valid_labels = set(_rolling_labels(period, window))
         label_values = [
             int(lbl[1:]) if period in ["week", "quarter"]
-            else months.index(lbl) + 1 if period == "month"
+            else MONTHS.index(lbl) + 1 if period == "month"
             else lbl
             for lbl in valid_labels
         ]
@@ -965,7 +1038,7 @@ def get_stuck_per_day_chart(request, year):
         valid_labels = set(_rolling_labels(period, window))
         label_values = [
             int(lbl[1:]) if period in ["week", "quarter"]
-            else months.index(lbl) + 1 if period == "month"
+            else MONTHS.index(lbl) + 1 if period == "month"
             else lbl
             for lbl in valid_labels
         ]
@@ -997,6 +1070,7 @@ def get_stuck_per_day_chart(request, year):
         }],
     )
 
+
 @staff_member_required
 def get_uploads_per_weekday_chart(request, year):
     period = get_period(request)
@@ -1013,7 +1087,7 @@ def get_uploads_per_weekday_chart(request, year):
         valid_labels = set(_rolling_labels(period, window))
         label_values = [
             int(lbl[1:]) if period in ["week", "quarter"]
-            else months.index(lbl) + 1 if period == "month"
+            else MONTHS.index(lbl) + 1 if period == "month"
             else lbl
             for lbl in valid_labels
         ]

backend/apps/ifc_validation/templates/admin/ifc_validation_models/app_index.html

@@ -14,14 +14,18 @@
   {% endblock %}
 {% endif %}
 {% block content %}
+
 <div style="float: left">
   <div id="content-main">
     {% include "admin/app_list.html" with app_list=app_list show_changelinks=True %}
   </div>
 
   <div id="content-statistics">
-    <h1>Statistics</h1>
+    <h1>Metrics &amp; Statistics</h1>
     <style>
+      .dashboard #content { width: 80%; }
+      .charts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; min-width: 1400px; margin-top: 35px; }
+      .chart-cell { width: 100%; min-height: 350px; } */
       .kpi-tile {
         padding: 1rem;
         background: #333;
@@ -43,6 +47,7 @@ <h1>Statistics</h1>
       integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
       crossorigin="anonymous">
     </script>
+
     <form id="filterForm">
       <span id="year-wrapper">
         <label for="year">Choose a year:</label>
@@ -86,17 +91,18 @@ <h1>Statistics</h1>
           { id: "requestsChart",          type: "bar",  endpoint: "requests",               stacked: true },
           { id: "durationPerRequestChart",type: "line", endpoint: "duration-per-request",   tooltip: ctx => `${ctx.parsed.y} m` },
           { id: "durationPerTaskChart",   type: "bar",  endpoint: "duration-per-task",      stacked: true },
-          { id: "processingStatusChart",  type: "pie",  endpoint: "processing-status" },
+          // { id: "processingStatusChart",  type: "pie",  endpoint: "processing-status" },
           { id: "avgSizeChart",           type: "line", endpoint: "avg-size" },
-          { id: "uploadsBy2hChart",       type: "bar", endpoint:  "uploads-per-2h",          tooltip: ctx => `${ctx.parsed.y} uploads` },
+          { id: "uploadsBy2hChart",       type: "bar",  endpoint: "uploads-per-2h",         tooltip: ctx => `${ctx.parsed.y} uploads` },
           { id: "userRegistrationsChart", type: "bar",  endpoint: "user-registrations",     tooltip: ctx => `${ctx.parsed.y} user${ctx.parsed.y === 1 ? "" : "s"}` },
+          { id: "usageByChannelChart",    type: "bar",  endpoint: "usage-by-channel",       stacked: true,  tooltip: ctx => `${ctx.parsed.y} ${ctx.dataset.label.toLowerCase()}` },
           { id: "usageByVendorChart",     type: "bar",  endpoint: "usage-by-vendor",        stacked: true,  tooltip: ctx => `${ctx.parsed.y} ${ctx.dataset.label.toLowerCase()}` },
           { id: "modelsByVendorChart",    type: "bar",  endpoint: "models-by-vendor",       stacked: true,  tooltip: ctx => `${ctx.parsed.y} ${ctx.dataset.label.toLowerCase()}` },
           { id: "topToolsChart",          type: "bar",  endpoint: "top-tools",              horizontal: true, tooltip: ctx => `${ctx.parsed.x} model${ctx.parsed.x === 1 ? "" : "s"}` },
           { id: "toolsCountChart",        type: "bar",  endpoint: "tools-count",            tooltip: ctx => `${ctx.parsed.y} tool${ctx.parsed.y === 1 ? "" : "s"}` },
-          { id: "queueP95Chart", type: "line", endpoint: "queue-p95", tooltip: ctx => `${ctx.parsed.y} s`},
-          { id: "stuckPerDayChart", type: "bar", endpoint: "stuck-per-day", tooltip: ctx => `${ctx.parsed.y} stuck`},
-          { id: "uploadsPerWeekdayChart", type: "bar", endpoint: "uploads-per-weekday", tooltip: ctx => `${ctx.parsed.y} uploads`},
+          { id: "queueP95Chart",          type: "line", endpoint: "queue-p95",              tooltip: ctx => `${ctx.parsed.y} s`},
+          { id: "stuckPerDayChart",       type: "bar",  endpoint: "stuck-per-day",          tooltip: ctx => `${ctx.parsed.y} stuck`},
+          { id: "uploadsPerWeekdayChart", type: "bar",  endpoint: "uploads-per-weekday",    tooltip: ctx => `${ctx.parsed.y} uploads`},
         ];
 
         const charts = {}; // Chart instances keyed by id
@@ -106,9 +112,13 @@ <h1>Statistics</h1>
         // ------------------------------------------------------------------
         function createCanvases() {
           const $container = $("#charts");
-          $container.empty(); 
+          const $grid = $('<div>', { class: 'charts-grid' });
+          $container.empty();
+          $container.append($grid);
           chartDefs.forEach(def => {
-            $("<canvas>", { id: def.id, class: "my-4" }).appendTo($container);
+            const $cell = $('<div>', { class: 'chart-cell' });
+            $("<canvas>", { id: def.id, class: "my-4", style: "height: 100%; width: 100%" }).appendTo($cell);
+            $cell.appendTo($grid);
           });
         }
 
@@ -198,7 +208,6 @@ <h3>${title}</h3>
                 return;
               }
 
-
               if (def.id === "usageByVendorChart" && isTotal) {
                 const $canvas = $("#" + def.id);
                 const [endUsers, vendors] = data.datasets[0].data;
@@ -285,5 +294,7 @@ <h3>${title}</h3>
       })(jQuery);
     </script>
   </div>
+
 </div>
+  
 {% endblock %}

e2e/tests/django_admin.test.js

@@ -135,8 +135,8 @@ test.describe('UI - Django Admin', () => {
 
     // check some charts
     await expect(page.locator('#requestsChart')).toBeVisible();
-    await expect(page.locator('#processingStatusChart')).toBeVisible();
     await expect(page.locator('#usageByVendorChart')).toBeVisible();
+    await expect(page.locator('#usageByChannelChart')).toBeVisible();
     await expect(page.locator('#topToolsChart')).toBeVisible();
     await expect(page.locator('#queueP95Chart')).toBeVisible();