fix(markets): add map legend + unify bubble color scales

- Add legend below map: bubble size = venue count, color = Market Score
- Unify opportunity score color to use same green/orange/red scale
  (was using blue for low scores, inconsistent with market score)
- Add mkt_legend_size / mkt_legend_color i18n keys (EN + DE)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-03-08 20:24:21 +01:00
parent 67fbfde53d
commit 814e8290a2
3 changed files with 21 additions and 2 deletions

View File

@@ -16,7 +16,22 @@
<p class="text-slate">{{ t.mkt_subheading }}</p> <p class="text-slate">{{ t.mkt_subheading }}</p>
</header> </header>
<div id="markets-map" style="height:420px; border-radius:12px;" class="mb-6"></div> <div id="markets-map" style="height:420px; border-radius:12px;" class="mb-4"></div>
<!-- Map legend -->
<div class="mb-6" style="display:flex; gap:1.5rem; align-items:center; font-size:0.82rem; color:#64748B;">
<span style="display:flex; align-items:center; gap:0.35rem;">
<span style="display:inline-block; width:12px; height:12px; border-radius:50%; background:#16A34A; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
<span style="display:inline-block; width:18px; height:18px; border-radius:50%; background:#16A34A; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
{{ t.mkt_legend_size }}
</span>
<span style="display:flex; align-items:center; gap:0.35rem;">
<span style="display:inline-block; width:14px; height:14px; border-radius:50%; background:#16A34A; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
<span style="display:inline-block; width:14px; height:14px; border-radius:50%; background:#D97706; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
<span style="display:inline-block; width:14px; height:14px; border-radius:50%; background:#DC2626; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
{{ t.mkt_legend_color }}
</span>
</div>
<!-- Filters --> <!-- Filters -->
<div class="card mb-8"> <div class="card mb-8">
@@ -100,7 +115,7 @@
if (!c.lat || !c.lon) return; if (!c.lat || !c.lon) return;
var size = 12 + 44 * Math.sqrt(c.total_venues / maxV); var size = 12 + 44 * Math.sqrt(c.total_venues / maxV);
var color = scoreColor(c.avg_market_score); var color = scoreColor(c.avg_market_score);
var oppColor = c.avg_opportunity_score >= 60 ? '#16A34A' : (c.avg_opportunity_score >= 30 ? '#D97706' : '#3B82F6'); var oppColor = scoreColor(c.avg_opportunity_score || 0);
var tip = '<strong>' + c.country_name_en + '</strong><br>' var tip = '<strong>' + c.country_name_en + '</strong><br>'
+ c.total_venues + ' venues · ' + c.city_count + ' cities<br>' + c.total_venues + ' venues · ' + c.city_count + ' cities<br>'
+ '<span style="color:' + color + ';font-weight:600;">Padelnomics Market Score: ' + c.avg_market_score + '/100</span><br>' + '<span style="color:' + color + ';font-weight:600;">Padelnomics Market Score: ' + c.avg_market_score + '/100</span><br>'

View File

@@ -606,6 +606,8 @@
"mkt_all_countries": "Alle Länder", "mkt_all_countries": "Alle Länder",
"mkt_all_regions": "Alle Regionen", "mkt_all_regions": "Alle Regionen",
"mkt_no_results": "Keine Märkte gefunden. Passe Deine Filter an.", "mkt_no_results": "Keine Märkte gefunden. Passe Deine Filter an.",
"mkt_legend_size": "Kreisgröße = Anzahl Anlagen",
"mkt_legend_color": "Farbe = Market Score",
"waitlist_markets_title": "Marktdaten — Demnächst verfügbar", "waitlist_markets_title": "Marktdaten — Demnächst verfügbar",
"waitlist_markets_sub": "Detaillierte Marktberichte für Padel-Investoren: Baukosten, Umsatz-Benchmarks, Auslastungsdaten und ROI-Analysen nach Stadt und Region.", "waitlist_markets_sub": "Detaillierte Marktberichte für Padel-Investoren: Baukosten, Umsatz-Benchmarks, Auslastungsdaten und ROI-Analysen nach Stadt und Region.",
"waitlist_markets_feature1": "Echte Kostendaten aus laufenden Anlagen in über 30 Ländern", "waitlist_markets_feature1": "Echte Kostendaten aus laufenden Anlagen in über 30 Ländern",

View File

@@ -606,6 +606,8 @@
"mkt_all_countries": "All Countries", "mkt_all_countries": "All Countries",
"mkt_all_regions": "All Regions", "mkt_all_regions": "All Regions",
"mkt_no_results": "No markets found. Try adjusting your filters.", "mkt_no_results": "No markets found. Try adjusting your filters.",
"mkt_legend_size": "Bubble size = venue count",
"mkt_legend_color": "Color = Market Score",
"waitlist_markets_title": "Markets Intelligence — Coming Soon", "waitlist_markets_title": "Markets Intelligence — Coming Soon",
"waitlist_markets_sub": "Deep-dive market reports for padel investors: construction costs, revenue benchmarks, occupancy data, and ROI analysis by city and region.", "waitlist_markets_sub": "Deep-dive market reports for padel investors: construction costs, revenue benchmarks, occupancy data, and ROI analysis by city and region.",
"waitlist_markets_feature1": "Real cost data from operating venues across 30+ countries", "waitlist_markets_feature1": "Real cost data from operating venues across 30+ countries",