geo-activity-playground 1.0.0__py3-none-any.whl → 1.1.0__py3-none-any.whl

geo_activity_playground/webui/static/{browserconfig.xml → favicons/browserconfig.xml}

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/static/mstile-150x150.png"/>
+            <square150x150logo src="/static/favicons/mstile-150x150.png"/>
             <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>

geo_activity_playground/webui/static/{site.webmanifest → favicons/site.webmanifest}

@@ -3,13 +3,13 @@
   "short_name": "MySite",
   "icons": [
     {
-      "src": "/static/web-app-manifest-192x192.png",
+      "src": "/static/favicons/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/static/web-app-manifest-512x512.png",
+      "src": "/static/favicons/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"

geo_activity_playground/webui/static/server-side-explorer.js

@@ -17,7 +17,7 @@ let map = L.map('explorer-map', {
     zoom: 12
 });
 
-changeColor('cluster')
+changeColor('default')
 
 if (bbox) {
     map.fitBounds(L.geoJSON(bbox).getBounds())
@@ -52,4 +52,9 @@ map.on('click', e => {
                 .openOn(map);
         }
         );
-});
+});
+
+function downloadAs(suffix) {
+    bounds = map.getBounds();
+    window.location.href = `/explorer/${zoom}/${bounds.getNorth()}/${bounds.getEast()}/${bounds.getSouth()}/${bounds.getWest()}/${suffix}`
+}

geo_activity_playground/webui/templates/activity/name.html.j2

@@ -30,19 +30,19 @@
 
 <div class="row mb-3">
     <div class="col-md-4">
-        {{ vega_direct("tick_plot", tick_plot) }}
+        {{ vega_direct(tick_plot) }}
     </div>
     <div class="col-md-4">
-        {{ vega_direct("equipment_plot", equipment_plot) }}
+        {{ vega_direct(equipment_plot) }}
     </div>
 </div>
 
 <div class="row mb-3">
     <div class="col-md-4">
-        {{ vega_direct("distance_plot", distance_plot) }}
+        {{ vega_direct(distance_plot) }}
     </div>
     <div class="col-md-4">
-        {{ vega_direct("minutes_plot", minutes_plot) }}
+        {{ vega_direct(minutes_plot) }}
     </div>
 </div>
 

geo_activity_playground/webui/templates/activity/show.html.j2

@@ -182,13 +182,13 @@
 
 <div class="row mb-3">
     <div class="col-md-4">
-        {{ vega_direct("distance_time_plot", distance_time_plot) }}
+        {{ vega_direct(distance_time_plot) }}
     </div>
     <div class="col-md-4">
-        {{ vega_direct("speed_time_plot", speed_time_plot) }}
+        {{ vega_direct(speed_time_plot) }}
     </div>
     <div class="col-md-4">
-        {{ vega_direct("speed_distribution_plot", speed_distribution_plot) }}
+        {{ vega_direct(speed_distribution_plot) }}
     </div>
 </div>
 
@@ -201,11 +201,11 @@
 
 <div class="row mb-3">
     <div class="col-md-4">
-        {{ vega_direct("elevation_time_plot", elevation_time_plot) }}
+        {{ vega_direct(elevation_time_plot) }}
     </div>
     {% if elevation_gain_cum_plot is defined %}
     <div class="col-md-4">
-        {{ vega_direct("elevation_gain_cum_plot", elevation_gain_cum_plot) }}
+        {{ vega_direct(elevation_gain_cum_plot) }}
     </div>
     {% endif %}
 </div>
@@ -216,11 +216,11 @@
 
 <div class="row mb-3">
     <div class="col-md-4">
-        {{ vega_direct("heartrate_time_plot", heartrate_time_plot) }}
+        {{ vega_direct(heartrate_time_plot) }}
     </div>
     <div class="col-md-4">
         {% if heart_zones_plot is defined %}
-        {{ vega_direct("heart_zones_plot", heart_zones_plot) }}
+        {{ vega_direct(heart_zones_plot) }}
         {% else %}
         <p>Your activity has heart data, but this program doesn't know your maximum heart rate (or birth year) and
             therefore cannot compute the heart rate zones. Go to the <a
@@ -235,7 +235,7 @@
 
 <div class="row mb-3">
     <div class="col-md-4">
-        {{ vega_direct("cadence_time_plot", cadence_time_plot) }}
+        {{ vega_direct(cadence_time_plot) }}
     </div>
 </div>
 {% endif %}

geo_activity_playground/webui/templates/eddington/distance.html.j2

@@ -54,7 +54,7 @@
         <p>In a graphical representation, the Eddington number is the distance where the red line intersects with the
             blue area.</p>
 
-        {{ vega_direct("logarithmic_plot", logarithmic_plot) }}
+        {{ vega_direct(logarithmic_plot) }}
     </div>
 </div>
 
@@ -63,7 +63,7 @@
 
     <p>How did the Eddington number evolve over time?</p>
 
-    {{ vega_direct("eddington_number_history_plot", eddington_number_history_plot) }}
+    {{ vega_direct(eddington_number_history_plot) }}
 </div>
 
 <div class="mb-3">
@@ -94,7 +94,7 @@
 
 <div class="row mb-3">
     <div class="col-md-8">
-        {{ vega_direct("eddington_per_week_plot", eddington_per_week_plot) }}
+        {{ vega_direct(eddington_per_week_plot) }}
     </div>
 
     <div class="col-md-4">

geo_activity_playground/webui/templates/eddington/elevation_gain.html.j2

@@ -76,7 +76,7 @@
         <p>In a graphical representation, the Eddington number is the elevation gain where the red line intersects with the
             blue area.</p>
 
-        {{ vega_direct("logarithmic_plot", logarithmic_plot) }}
+        {{ vega_direct(logarithmic_plot) }}
     </div>
 </div>
 
@@ -85,7 +85,7 @@
 
     <p>How did the Eddington number evolve over time?</p>
 
-    {{ vega_direct("eddington_number_history_plot", eddington_number_history_plot) }}
+    {{ vega_direct(eddington_number_history_plot) }}
 </div>
 
 <div class="mb-3">
@@ -116,7 +116,7 @@
 
 <div class="row mb-3">
     <div class="col-md-8">
-        {{ vega_direct("eddington_per_week_plot", eddington_per_week_plot) }}
+        {{ vega_direct(eddington_per_week_plot) }}
     </div>
 
     <div class="col-md-4">

geo_activity_playground/webui/templates/elevation_eddington/index.html.j2

@@ -80,7 +80,7 @@
             the
             blue area.</p>
 
-        {{ vega_direct("logarithmic_plot", logarithmic_plot) }}
+        {{ vega_direct(logarithmic_plot) }}
     </div>
 </div>
 
@@ -89,7 +89,7 @@
 
     <p>How did the Eddington number evolve over time?</p>
 
-    {{ vega_direct("eddington_number_history_plot", eddington_number_history_plot) }}
+    {{ vega_direct(eddington_number_history_plot) }}
 </div>
 
 <div class="mb-3">
@@ -120,7 +120,7 @@
 
 <div class="row mb-3">
     <div class="col-md-8">
-        {{ vega_direct("eddington_per_week_plot", eddington_per_week_plot) }}
+        {{ vega_direct(eddington_per_week_plot) }}
     </div>
 
     <div class="col-md-4">

geo_activity_playground/webui/templates/equipment/index.html.j2

@@ -35,7 +35,7 @@
 <div class="row mb-3">
     <div class="col">
         <h2>Monthly Equipment Usage</h2>
-        {{ vega_direct("stacked_area_chart", stacked_area_chart) }}
+        {{ vega_direct(stacked_area_chart) }}
     </div>
 </div>
 

geo_activity_playground/webui/templates/explorer/server-side.html.j2

@@ -25,7 +25,8 @@
 </div>
 
 <div class="btn-group mb-3" role="group">
-    <button type="button" class="btn btn-primary" onclick="changeColor('cluster')">Cluster</button>
+    <button type="button" class="btn btn-primary" onclick="changeColor('colorful_cluster')">Colorful Cluster</button>
+    <button type="button" class="btn btn-primary" onclick="changeColor('max_cluster')">Max Cluster</button>
     <button type="button" class="btn btn-primary" onclick="changeColor('first')">First Visit</button>
     <button type="button" class="btn btn-primary" onclick="changeColor('last')">Last Visit</button>
     <button type="button" class="btn btn-primary" onclick="changeColor('visits')">Number of Visits</button>
@@ -58,17 +59,17 @@
 <div class="row mb-3">
     <div class="col-md-4">
         {% if plot_tile_evolution|length > 0 %}
-        {{ vega_direct("plot_tile_evolution", plot_tile_evolution) }}
+        {{ vega_direct(plot_tile_evolution) }}
         {% endif %}
     </div>
     <div class="col-md-4">
         {% if plot_cluster_evolution|length > 0 %}
-        {{ vega_direct("plot_cluster_evolution", plot_cluster_evolution) }}
+        {{ vega_direct(plot_cluster_evolution) }}
         {% endif %}
     </div>
     <div class="col-md-4">
         {% if plot_square_evolution|length > 0 %}
-        {{ vega_direct("plot_square_evolution", plot_square_evolution) }}
+        {{ vega_direct(plot_square_evolution) }}
         {% endif %}
     </div>
 </div>

geo_activity_playground/webui/templates/hall_of_fame/index.html.j2

@@ -0,0 +1,58 @@
+{% extends "page.html.j2" %}
+
+{% block container %}
+
+<h1>Hall of Fame</h1>
+
+<div class="mb-3">
+    {% include "search_form.html.j2" %}
+</div>
+
+<script>
+    function add_map(id, geojson) {
+        let map = L.map(`map-${id}`, {
+            fullscreenControl: true
+        })
+        L.tileLayer('/tile/color/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '{{ map_tile_attribution|safe }}'
+        }).addTo(map)
+
+        let geojson_layer = L.geoJSON(geojson).addTo(map)
+        map.fitBounds(geojson_layer.getBounds())
+        return map
+    }
+</script>
+
+{% for activity_batch in nominations|batch(3) %}
+<div class="row row-cols-1 row-cols-md-3 g-4 mb-3">
+    {% for activity, reasons, line_geojson in activity_batch %}
+    <div class="col">
+        <div class="card">
+            <div class="card-img-top" id="map-{{ activity.id }}" style="height: 200px; width: 100%;"></div>
+            <script>
+                let map{{ activity.id }} = add_map("{{ activity.id }}", {{ line_geojson | safe }})
+            </script>
+            <div class="card-body">
+                <a href="{{ url_for('activity.show', id=activity.id) }}">
+                    <h5 class="card-title">{{ activity["name"] }}</h5>
+                </a>
+                <p class="card-text">
+                <ul style='list-style-type: "🏆 "'>
+                    {% for reason in reasons %}
+                    <li>{{ reason }}</li>
+                    {% endfor %}
+                </ul>
+                </p>
+                <p class="card-text"><small class="text-body-secondary"></small>{{ activity.kind }} with {{
+                    (activity.distance_km)|round(1) }} km / {{activity.elevation_gain|round|int}} m in {{
+                    activity.elapsed_time|td }} on {{ activity.start|dt }}</small></p>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% endfor %}
+
+
+{% endblock %}

geo_activity_playground/webui/templates/home.html.j2

@@ -8,10 +8,7 @@
 <div class="row mb-3">
     <div class="col">
         <h2>Last 30 days</h2>
-        {{ vega_direct("distance-last-30-days", distance_last_30_days_plot) }}
-        {% if elevation_gain_last_30_days_plot %}
-        {{ vega_direct("elevation-gain-last-30-days", elevation_gain_last_30_days_plot) }}
-        {% endif %}
+        {{ tabbed_vega(last_30_days_plot) }}
     </div>
 </div>
 

geo_activity_playground/webui/templates/page.html.j2

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 
+{% from "plot-macros.html.j2" import vega, vega_direct, activity_tag, tabbed_vega %}
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,37 +10,37 @@
     <title>Geo Activity Playground</title>
 
     <!-- Bootstrap CSS. -->
-    <link href="/static/bootstrap.min.css" rel="stylesheet">
+    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
 
     <!-- Leaflet for interactive maps. -->
-    <link rel="stylesheet" href="/static/leaflet.css" />
-    <script src="/static/leaflet.js"></script>
+    <link rel="stylesheet" href="/static/leaflet/leaflet.css" />
+    <script src="/static/leaflet/leaflet.js"></script>
 
     <!-- Fullscreen button for Leaflet. -->
-    <link href='/static/leaflet.fullscreen.css' rel='stylesheet' />
-    <script src='/static/Leaflet.fullscreen.min.js'></script>
+    <link href='/static/leaflet/leaflet.fullscreen.css' rel='stylesheet' />
+    <script src='/static/leaflet/Leaflet.fullscreen.min.js'></script>
 
-    <link rel="stylesheet" href="/static/MarkerCluster.css" />
-    <link rel="stylesheet" href="/static/MarkerCluster.Default.css" />
-    <script src="/static/leaflet.markercluster.js"></script>
+    <link rel="stylesheet" href="/static/leaflet/MarkerCluster.css" />
+    <link rel="stylesheet" href="/static/leaflet/MarkerCluster.Default.css" />
+    <script src="/static/leaflet/leaflet.markercluster.js"></script>
 
     <!-- Vega for plots.-->
-    <script src="/static/vega@5"></script>
-    <script src="/static/vega-lite@4"></script>
-    <script src="/static/vega-embed@6"></script>
+    <script src="/static/vega/vega@5.js"></script>
+    <script src="/static/vega/vega-lite@4.js"></script>
+    <script src="/static/vega/vega-embed@6.js"></script>
 
-    <script src="/static/bootstrap-dark-mode.js"></script>
+    <script src="/static/bootstrap/bootstrap-dark-mode.js"></script>
 
     <script src="/static/table-sort.min.js"></script>
 
     <!-- Favicon. -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
-    <link rel="manifest" href="/static/site.webmanifest">
-    <link rel="shortcut icon" href="/static/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/static/favicons/site.webmanifest">
+    <link rel="shortcut icon" href="/static/favicons/favicon.ico">
     <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="msapplication-config" content="/static/browserconfig.xml">
+    <meta name="msapplication-config" content="/static/favicons/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
 </head>
 
@@ -78,6 +80,8 @@
                                 <li><a class="dropdown-item" href="{{ url_for('summary.index') }}">Summary
                                         Statistics</a>
                                 </li>
+                                <li><a class="dropdown-item" href="{{ url_for('hall_of_fame.index') }}">Hall of Fame</a>
+                                </li>
                                 <li><a class="dropdown-item" href="{{ url_for('eddington.distance') }}">Eddington
                                         Number</a>
                                 </li>
@@ -183,24 +187,6 @@
             </div>
         </nav>
 
-        {% macro vega(id, path) %}
-        <div id="{{ id }}"></div>
-        <script type="text/javascript">
-            vegaEmbed('#{{ id }}', "{{ path }}").then(function (result) { }).catch(console.error);
-        </script>
-        {% endmacro %}
-
-        {% macro vega_direct(id, spec) %}
-        <div id="{{ id }}"></div>
-        <script type="text/javascript">
-            vegaEmbed('#{{ id }}', {{ spec| safe }}).then(function (result) { }).catch(console.error);
-        </script>
-        {% endmacro %}
-
-        {% macro activity_tag(tag) %}
-        <span class="badge" style="background-color: {{ tag.color or '#0d6efd' }}">{{ tag.tag }}</span>
-        {% endmacro %}
-
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
         {% for category, message in messages %}
@@ -235,7 +221,7 @@
         </div>
     </div>
 
-    <script src="/static/bootstrap.bundle.min.js"></script>
+    <script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
 </body>
 
 </html>

geo_activity_playground/webui/templates/plot-macros.html.j2

@@ -0,0 +1,72 @@
+{% macro vega(path) %}
+{% set id = unique_id() %}
+<div id="{{ id }}"></div>
+<script type="text/javascript">
+    vegaEmbed('#{{ id }}', "{{ path }}").then(function (result) { }).catch(console.error);
+</script>
+{% endmacro %}
+
+{% macro vega_direct(spec) %}
+{% set id = unique_id() %}
+<div id="{{ id }}"></div>
+<script type="text/javascript">
+    vegaEmbed('#{{ id }}', {{ spec| safe }}).then(function (result) { }).catch(console.error);
+</script>
+{% endmacro %}
+
+{% macro activity_tag(tag) %}
+<span class="badge" style="background-color: {{ tag.color or '#0d6efd' }}">{{ tag.tag }}</span>
+{% endmacro %}
+
+{% macro tabbed_vega(tab_dict, last=False) %}
+{% set id = unique_id() %}
+<ul class="nav nav-pills mb-3" role="tablist">
+    {% for key in tab_dict.keys() %}
+    {% set plot_id = id ~ "-" ~ loop.index %}
+    <li class="nav-item" role="presentation">
+        <button class="nav-link {% if (last and loop.last) or (not last and loop.first) %} active {% endif %}"
+            id="{{ plot_id }}-tab" data-bs-toggle="tab" data-bs-target="#{{ plot_id }}-pane" type="button" role="tab"
+            aria-controls="{{ plot_id }}-pane" aria-selected="{{ loop.last }}">{{ key }}</button>
+    </li>
+    {% endfor %}
+</ul>
+<div class="tab-content mb-3">
+    {% for plot in tab_dict.values() %}
+    {% set plot_id = id ~ "-" ~ loop.index %}
+    <div class="tab-pane fade {% if (last and loop.last) or (not last and loop.first) %} show active {% endif %}"
+        id="{{ plot_id }}-pane" role="tabpanel" aria-labelledby="{{ plot_id }}-tab" tabindex="0">
+        {{ vega_direct(plot) }}
+    </div>
+    {% endfor %}
+</div>
+{% endmacro %}
+
+{% macro parametric_plot(spec, plot_groups, outer_loop_index) %}
+{% if spec.group_by %}
+<ul class="nav nav-pills mb-3" id="myTab_{{ outer_loop_index }}" role="tablist">
+    {% for key, plot in plot_groups.items() %}
+    {% set plot_id = "custom_plot_" ~ outer_loop_index ~ "_" ~ loop.index %}
+    <li class="nav-item" role="presentation">
+        <button class="nav-link {% if loop.last %} active {% endif %}" id="{{ plot_id }}-tab" data-bs-toggle="tab"
+            data-bs-target="#{{ plot_id }}-pane" type="button" role="tab" aria-controls="{{ plot_id }}-pane"
+            aria-selected="{{ loop.last }}">{{ key }}</button>
+    </li>
+    {% endfor %}
+</ul>
+<div class="tab-content mb-3" id="myTabContent_{{ outer_loop_index }}">
+    {% for key, plot in plot_groups.items() %}
+    {% set plot_id = "custom_plot_" ~ outer_loop_index ~ "_" ~ loop.index %}
+    <div class="tab-pane fade {% if loop.last %} show active {% endif %}" id="{{ plot_id }}-pane" role="tabpanel"
+        aria-labelledby="{{ plot_id }}-tab" tabindex="0">
+        {{ vega_direct(plot) }}
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="row mb-3">
+    <div class="col">
+        {{ vega_direct(plot_groups[""]) }}
+    </div>
+</div>
+{% endif %}
+{% endmacro %}

geo_activity_playground/webui/templates/plot_builder/edit.html.j2

@@ -1,11 +1,17 @@
 {% extends "page.html.j2" %}
 
-{% block container %}
+{% from "plot-macros.html.j2" import parametric_plot %}
 
-<h1 class="row mb-3">Plot Builder</h1>
+{% block container %}
 
-<div class="mb-3"><a class="btn btn-primary" href="{{ url_for('.index') }}">Back to overview</a></div>
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="{{ url_for('.index') }}">Plot Builder</a></li>
+        <li class="breadcrumb-item active" aria-current="page">Edit</li>
+    </ol>
+</nav>
 
+<h1 class="row mb-3">Plot Builder</h1>
 
 <div class="row mb-3">
     <div class="col-md-4">
@@ -22,12 +28,13 @@
         </div>
         {% endmacro %}
 
-        <form>
+        <form method="post">
             <div class="mb-3">
                 <label for="name">Name</label>
                 <input type="text" name="name" id="name" class="form-control" value="{{ spec.name }}">
             </div>
 
+            {{ select_field("Group by", "group_by", group_by, spec.group_by)}}
             {{ select_field("Mark", "mark", marks, spec.mark)}}
 
             {{ select_field("X", "x", continuous, spec.x)}}
@@ -45,7 +52,7 @@
     </div>
     <div class="col-md-8">
         {% if plot %}
-        {{ vega_direct("plot", plot) }}
+        {{ parametric_plot(spec, plot, 0) }}
         {% endif %}
     </div>
 </div>
@@ -58,6 +65,4 @@
 
 <code><pre>{{ spec.to_json() }}</pre></code>
 
-
-
 {% endblock %}

geo_activity_playground/webui/templates/plot_builder/import-spec.html.j2

@@ -0,0 +1,24 @@
+{% extends "page.html.j2" %}
+
+{% block container %}
+
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="{{ url_for('.index') }}">Plot Builder</a></li>
+        <li class="breadcrumb-item active" aria-current="page">Import</li>
+    </ol>
+</nav>
+
+<h1 class="mb-3">Import Custom Plot</h1>
+
+<form method="post">
+    <div class="mb-3">
+        <label for="spec_json" class="form-label">Plot specification JSON</label>
+        <textarea class="form-control" id="spec_json" rows="3" name="spec_json"></textarea>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Import & Preview</button>
+</form>
+
+
+{% endblock %}

geo_activity_playground/webui/templates/plot_builder/index.html.j2

@@ -2,8 +2,11 @@
 
 {% block container %}
 
+
 <h1 class="row mb-3">Plot Builder</h1>
 
+<p>Build custom plots here. For inspiration, check out <a href="https://martin-ueding.github.io/geo-activity-playground/build-custom-plots/" target="_blank">the documentation</a>.</p>
+
 {% if specs %}
 <table class="table mb-3">
     <thead>
@@ -29,4 +32,6 @@
 
 <a class="btn btn-primary" href="{{ url_for('.new') }}">New</a>
 
+<a class="btn btn-primary" href="{{ url_for('.import_spec') }}">Import</a>
+
 {% endblock %}