ISSUE #1610: Radar chart indicating athlete profile

Author: robiningelbrecht

config/reference.php

@@ -1098,17 +1098,6 @@
  *     doctrine?: DoctrineConfig,
  *     doctrine_migrations?: DoctrineMigrationsConfig,
  *     twig?: TwigConfig,
- *     "when@dev"?: array{
- *         imports?: ImportsConfig,
- *         parameters?: ParametersConfig,
- *         services?: ServicesConfig,
- *         framework?: FrameworkConfig,
- *         flysystem?: FlysystemConfig,
- *         monolog?: MonologConfig,
- *         doctrine?: DoctrineConfig,
- *         doctrine_migrations?: DoctrineMigrationsConfig,
- *         twig?: TwigConfig,
- *     },
  *     "when@prod"?: array{
  *         imports?: ImportsConfig,
  *         parameters?: ParametersConfig,
@@ -1211,7 +1200,6 @@ public static function config(array $config): array
  *     deprecated?: array{package:string, version:string, message?:string},
  * }
  * @psalm-type RoutesConfig = array{
- *     "when@dev"?: array<string, RouteConfig|ImportConfig|AliasConfig>,
  *     "when@prod"?: array<string, RouteConfig|ImportConfig|AliasConfig>,
  *     "when@test"?: array<string, RouteConfig|ImportConfig|AliasConfig>,
  *     ...<string, RouteConfig|ImportConfig|AliasConfig>

public/css/tailwind.output.css

@@ -1096,6 +1096,9 @@
   .me-3 {
     margin-inline-end: calc(var(--spacing) * 3);
   }
+  .-mt-0\.5 {
+    margin-top: calc(var(--spacing) * -0.5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -2239,6 +2242,9 @@
       border-color: var(--color-gray-200);
     }
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -3228,6 +3234,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3399,6 +3409,16 @@
       color: var(--color-strava-orange);
     }
   }
+  .group-\[\.fullscreen-is-enabled\]\:h-full {
+    &:is(:where(.group):is(.fullscreen-is-enabled) *) {
+      height: 100%;
+    }
+  }
+  .group-\[\.fullscreen-is-enabled\]\:grow {
+    &:is(:where(.group):is(.fullscreen-is-enabled) *) {
+      flex-grow: 1;
+    }
+  }
   .group-\[\.sidebar-is-collapsed\]\:block {
     &:is(:where(.group):is(.sidebar-is-collapsed) *) {
       display: block;
@@ -4378,6 +4398,11 @@
       background-color: var(--color-gray-100);
     }
   }
+  .\[\&\.full-screen-enabled\]\:hidden {
+    &.full-screen-enabled {
+      display: none;
+    }
+  }
   .\[\&\.sidebar-is-collapsed\]\:w-32 {
     &.sidebar-is-collapsed {
       width: calc(var(--spacing) * 32);

public/js/app.js

@@ -60,6 +60,37 @@ document.addEventListener('pageWasLoaded', (e) => {
         // Open modal.
         modalManager.open(e.detail.modalId);
     }
+
+    document.querySelectorAll('[data-fullscreen-trigger]').forEach((el) => {
+        el.addEventListener('click', (e) => {
+            e.preventDefault();
+
+            if (document.fullscreenElement) {
+                return;
+            }
+
+            const fullScreenContent = el.closest('[data-fullscreen-content]');
+            fullScreenContent.requestFullscreen().then(() => {
+                chartManager.resizeAll();
+            });
+
+            fullScreenContent.addEventListener('fullscreenchange', () => {
+                el.classList.toggle(
+                    'hidden',
+                    Boolean(document.fullscreenElement)
+                );
+                fullScreenContent.classList.toggle(
+                    'fullscreen-is-enabled',
+                    Boolean(document.fullscreenElement)
+                );
+                fullScreenContent.classList.toggle(
+                    'group',
+                    Boolean(document.fullscreenElement)
+                );
+            });
+
+        });
+    });
 });
 document.addEventListener('pageWasLoaded.heatmap', () => {
     const $heatmapWrapper = document.querySelector('.heatmap-wrapper');

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "id": "http://localhost:8080/",
-  "name": "Statistics for Strava | Malte-Christian Rösch",
+  "id": "[APP_HOST]",
+  "name": "[APP_NAME]",
   "short_name": "Statistics for Strava",
   "description": "Statistics for Strava is a self-hosted web app designed to provide you with better stats.",
   "categories": [
@@ -9,7 +9,7 @@
     "utilities"
   ],
   "start_url": "/",
-  "scope": "http://localhost:8080/",
+  "scope": "[APP_HOST]",
   "display": "standalone",
   "display_override": [
     "fullscreen",
@@ -20,49 +20,49 @@
   "background_color": "#f9fafb",
   "icons": [
     {
-      "src": "/assets/images/manifest/icon-192.png",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/icon-192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/assets/images/manifest/icon-192.maskable.png",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/icon-192.maskable.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/assets/images/manifest/icon-512.png",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/icon-512.png",
       "sizes": "512x512",
       "type": "image/png"
     },
     {
-      "src": "/assets/images/manifest/icon-512.maskable.png",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/icon-512.maskable.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/assets/images/manifest/icon-512.png",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/icon-512.png",
       "sizes": "any",
       "type": "image/png"
     },
     {
-      "src": "/assets/images/manifest/icon-512.maskable.png",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/icon-512.maskable.png",
       "sizes": "any",
       "type": "image/png",
       "purpose": "maskable"
     }
   ],
   "screenshots": [
     {
-      "src": "/assets/images/manifest/screenshots/dashboard.jpeg",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/screenshots/dashboard.jpeg",
       "sizes": "750x1600",
       "type": "image/jpeg",
       "form_factor": "narrow",
       "label": "Dashboard"
     },
     {
-      "src": "/assets/images/manifest/screenshots/heatmap.jpeg",
+      "src": "[APP_BASE_PATH]/assets/images/manifest/screenshots/heatmap.jpeg",
       "sizes": "750x1600",
       "type": "image/jpeg",
       "form_factor": "narrow",

src/Domain/Dashboard/Widget/AthleteProfile/AthleteProfileWidget.php

@@ -28,6 +28,35 @@ public function guardValidConfiguration(WidgetConfiguration $configuration): voi
 
     public function render(SerializableDateTime $now, WidgetConfiguration $configuration): string
     {
+        // 1. VOLUME - “How much do you train?”
+        // weekly_hours = total_training_hours_in_period / (total_days_in_period / 7)
+        // score = min(100, weekly_hours / 10 * 100)
+        // 10 h/week = very active amateur (works across sports)
+
+        // 2. CONSISTENCY - “How often do you train?”
+        // consistency = active_days_in_period / total_days_in_period
+        // score = min(100, consistency / 0.7 * 100)
+        // 5 days/week ≈ excellent consistency
+
+        // 3. INTENSITY - “How hard do you train?”
+        // intensity = activities_with_high_effort / total_activities
+        // score = min(100, intensity / 0.25 * 100)
+        // 0.25 = realistic upper bound for sustainable hard training
+
+        // 4. DURATION - “How long are your sessions?”
+        // score = min(100, median_duration_minutes / 90 * 100)
+        // Median > 90 min = endurance-leaning athlete
+
+        // 5. DENSITY - “How packed is your training?”
+        // density = training_hours / active_days
+        // score = min(100, hours_per_active_day / 2 * 100)
+        // 2h per training day = high density
+
+        // 6. VARIETY - “How diverse is your training?”
+        // dominant_sport_fraction = max(activities_per_sport_type) / total_activities
+        // variety = 1 - dominant_sport_fraction
+        // score = min(100, variety / 0.5 * 100)
+        // 0.5 is the anchor that defines “max meaningful variety”
         return $this->twig->load('html/dashboard/widget/widget--athlete-profile.html.twig')->render([
             'athleteProfileChart' => Json::encode(
                 AthleteProfileChart::create($this->translator)->build()

src/Infrastructure/Twig/SvgsTwigExtension.php

@@ -19,6 +19,7 @@ public function svg(string $name, ?string $classes = null): string
             'delta' => '<svg class="w-5 h-5" fill="#F26722" viewBox="0 0 24 24" id="delta" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><path id="primary" d="M19,21,11.5,4.13M20,21,12,3,4,21Z" style="fill: none; stroke: #F26722; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></g></svg>',
             'distance' => '<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 21C7.9 21 6.95833 20.6083 6.175 19.825C5.39167 19.0417 5 18.1 5 17V8.825C4.41667 8.60833 3.9375 8.24583 3.5625 7.7375C3.1875 7.22917 3 6.65 3 6C3 5.16667 3.29167 4.45833 3.875 3.875C4.45833 3.29167 5.16667 3 6 3C6.83333 3 7.54167 3.29167 8.125 3.875C8.70833 4.45833 9 5.16667 9 6C9 6.65 8.8125 7.22917 8.4375 7.7375C8.0625 8.24583 7.58333 8.60833 7 8.825V17C7 17.55 7.19583 18.0208 7.5875 18.4125C7.97917 18.8042 8.45 19 9 19C9.55 19 10.0208 18.8042 10.4125 18.4125C10.8042 18.0208 11 17.55 11 17V7C11 5.9 11.3917 4.95833 12.175 4.175C12.9583 3.39167 13.9 3 15 3C16.1 3 17.0417 3.39167 17.825 4.175C18.6083 4.95833 19 5.9 19 7V15.175C19.5833 15.3917 20.0625 15.7542 20.4375 16.2625C20.8125 16.7708 21 17.35 21 18C21 18.8333 20.7083 19.5417 20.125 20.125C19.5417 20.7083 18.8333 21 18 21C17.1667 21 16.4583 20.7083 15.875 20.125C15.2917 19.5417 15 18.8333 15 18C15 17.35 15.1875 16.7667 15.5625 16.25C15.9375 15.7333 16.4167 15.375 17 15.175V7C17 6.45 16.8042 5.97917 16.4125 5.5875C16.0208 5.19583 15.55 5 15 5C14.45 5 13.9792 5.19583 13.5875 5.5875C13.1958 5.97917 13 6.45 13 7V17C13 18.1 12.6083 19.0417 11.825 19.825C11.0417 20.6083 10.1 21 9 21ZM6 7C6.28333 7 6.52083 6.90417 6.7125 6.7125C6.90417 6.52083 7 6.28333 7 6C7 5.71667 6.90417 5.47917 6.7125 5.2875C6.52083 5.09583 6.28333 5 6 5C5.71667 5 5.47917 5.09583 5.2875 5.2875C5.09583 5.47917 5 5.71667 5 6C5 6.28333 5.09583 6.52083 5.2875 6.7125C5.47917 6.90417 5.71667 7 6 7ZM18 19C18.2833 19 18.5208 18.9042 18.7125 18.7125C18.9042 18.5208 19 18.2833 19 18C19 17.7167 18.9042 17.4792 18.7125 17.2875C18.5208 17.0958 18.2833 17 18 17C17.7167 17 17.4792 17.0958 17.2875 17.2875C17.0958 17.4792 17 17.7167 17 18C17 18.2833 17.0958 18.5208 17.2875 18.7125C17.4792 18.9042 17.7167 19 18 19Z" fill="#F26722"/></svg>',
             'elevation' => '<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#F26722" d="M21.85,17.47l-5-8a1,1,0,0,0-1.7,0l-1,1.63L10.86,5.5a1,1,0,0,0-1.72,0l-7,12A1,1,0,0,0,3,19H21a1,1,0,0,0,.85-1.53ZM10.45,17H4.74L10,8l2.93,5Zm2.35,0L15,13.57h0L16,11.89,19.2,17Z"></path></svg>',
+            'expand' => '<svg class="size-4 text-gray-400 hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4H4m0 0v4m0-4 5 5m7-5h4m0 0v4m0-4-5 5M8 20H4m0 0v-4m0 4 5-5m7 5h4m0 0v-4m0 4-5-5"/></svg>',
             'hashtag' => '<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <path d="M10 4L7 20M17 4L14 20M5 8H20M4 16H19" stroke="#F26722" stroke-width="2" stroke-linecap="round"></path> </g></svg>',
             'heart-rate' => '<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><g><path d="M19.2373 6.23731C20.7839 7.78395 20.8432 10.2727 19.3718 11.8911L11.9995 20.0001L4.62812 11.8911C3.15679 10.2727 3.21605 7.7839 4.76269 6.23726C6.48961 4.51034 9.33372 4.66814 10.8594 6.5752L12 8.00045L13.1396 6.57504C14.6653 4.66798 17.5104 4.51039 19.2373 6.23731Z" stroke="#F26722" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>',
             'rocket' => ' <svg class="w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#F26722" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10.051 8.102-3.778.322-1.994 1.994a.94.94 0 0 0 .533 1.6l2.698.316m8.39 1.617-.322 3.78-1.994 1.994a.94.94 0 0 1-1.595-.533l-.4-2.652m8.166-11.174a1.366 1.366 0 0 0-1.12-1.12c-1.616-.279-4.906-.623-6.38.853-1.671 1.672-5.211 8.015-6.31 10.023a.932.932 0 0 0 .162 1.111l.828.835.833.832a.932.932 0 0 0 1.111.163c2.008-1.102 8.35-4.642 10.021-6.312 1.475-1.478 1.133-4.77.855-6.385Zm-2.961 3.722a1.88 1.88 0 1 1-3.76 0 1.88 1.88 0 0 1 3.76 0Z"/></svg>',

templates/html/dashboard/dashboard.html.twig

@@ -8,7 +8,7 @@
 {% autoescape false %}
     <div class="grid grid-cols-1 xl:grid-cols-6 gap-4 mb-4">
         {% for renderedWidget in widgets %}
-            <div class="{{ colSpanMap[renderedWidget.getWidth()] }} flex flex-col p-4 bg-white border border-gray-200 rounded-lg shadow-xs">
+            <div data-fullscreen-content class="{{ colSpanMap[renderedWidget.getWidth()] }} flex flex-col p-4 bg-white border border-gray-200 rounded-lg shadow-xs">
                 {{ renderedWidget.getRenderedHtml() }}
             </div>
         {% endfor %}

templates/html/dashboard/widget/widget--activity-grid.html.twig

@@ -2,7 +2,7 @@
 {% autoescape false %}
     <div class="flex items-center mb-4">
         <h3 class="font-semibold text-lg">{{ "Activity heatmap"|trans }}</h3>
-        <button class="hidden lg:block" data-popover-target="popover-description" data-popover-placement="right"
+        <button class="hidden lg:block" data-popover-target="popover-description-activity-grid" data-popover-placement="right"
                 type="button">
             <svg class="w-4 h-4 ml-1 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor"
                  viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -12,8 +12,8 @@
             </svg>
             <span class="sr-only">{{ "Show information"|trans }}</span>
         </button>
-        <div data-popover id="popover-description" role="tooltip"
-             class="hidden lg:block lg:w-[450px] xl:w-[650px] absolute z-100 invisible text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0">
+        <div data-popover id="popover-description-activity-grid" role="tooltip"
+             class="hidden lg:block lg:w-[450px] xl:w-[650px] absolute z-100 invisible text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-md opacity-0">
             <div class="p-3 space-y-2">
                 <p>
                     {% trans %}This map shows the daily training intensity for the last year. The training intensity for an activity is calculated based on several metrics.{% endtrans %}

templates/html/dashboard/widget/widget--athlete-profile.html.twig

@@ -1,6 +1,72 @@
 {% autoescape false %}
-    <h3 class="mb-4 text-lg font-semibold">
-        {{ "Athlete profile"|trans }}
-    </h3>
+    <div class="flex items-center mb-4">
+        <h3 class="text-lg font-semibold">
+            {{ "Athlete profile"|trans }}
+        </h3>
+        <button class="hidden lg:block" data-popover-target="popover-description-athlete-profile" data-popover-placement="right"
+                type="button">
+            <svg class="w-4 h-4 ml-1 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor"
+                 viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                      clip-rule="evenodd"></path>
+            </svg>
+            <span class="sr-only">{{ "Show information"|trans }}</span>
+        </button>
+        <div data-popover id="popover-description-athlete-profile" role="tooltip"
+             class="hidden lg:block lg:w-[450px] xl:w-[650px] absolute z-100 invisible text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-md opacity-0">
+            <div class="p-3 space-y-2">
+                <p>
+                    {% trans %}This chart summarizes how you train. Each axis reflects a different normalized training habit, so higher values mean stronger emphasis.{% endtrans %}
+                </p>
+                <div class="flex gap-x-2">
+                    <h3 class="font-semibold text-gray-900">{{ "Volume"|trans }}</h3>
+                    <span>-</span>
+                    <p>
+                        {% trans %}How much do you train{% endtrans %}
+                    </p>
+                </div>
+                <div class="flex gap-x-2">
+                    <h3 class="font-semibold text-gray-900">{{ "Consistency"|trans }}</h3>
+                    <span>-</span>
+                    <p>
+                        {% trans %}How often do you train{% endtrans %}
+                    </p>
+                </div>
+                <div class="flex gap-x-2">
+                    <h3 class="font-semibold text-gray-900">{{ "Intensity"|trans }}</h3>
+                    <span>-</span>
+                    <p>
+                        {% trans %}How hard do you train{% endtrans %}
+                    </p>
+                </div>
+                <div class="flex gap-x-2">
+                    <h3 class="font-semibold text-gray-900">{{ "Duration"|trans }}</h3>
+                    <span>-</span>
+                    <p>
+                        {% trans %}How long are your sessions{% endtrans %}
+                    </p>
+                </div>
+                <div class="flex gap-x-2">
+                    <h3 class="font-semibold text-gray-900">{{ "Density"|trans }}</h3>
+                    <span>-</span>
+                    <p>
+                        {% trans %}How packed is your training{% endtrans %}
+                    </p>
+                </div>
+                <div class="flex gap-x-2">
+                    <h3 class="font-semibold text-gray-900">{{ "Variety"|trans }}</h3>
+                    <span>-</span>
+                    <p>
+                        {% trans %}How diverse is your training{% endtrans %}
+                    </p>
+                </div>
+            </div>
+        </div>
+        <button type="button" data-fullscreen-trigger class="[&.full-screen-enabled]:hidden ml-auto self-start cursor-pointer">
+            {{ svg('expand') }}
+            <span class="sr-only">{{ "Enter fullscreen mode"|trans }}</span>
+        </button>
+    </div>
     <div class="h-full min-h-[16rem]" data-echarts-options='{{ athleteProfileChart }}'></div>
 {% endautoescape %}