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:
@@ -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>'
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user