381 lines
9.4 KiB
Svelte
381 lines
9.4 KiB
Svelte
<script>
|
|
import { CONTINENTS, getContinent, continentTotals } from './continents.js';
|
|
import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
|
|
import worldData from 'world-atlas/countries-50m.json';
|
|
|
|
let collapsed = $state(false);
|
|
|
|
const continentColors = {
|
|
'Europe': '#3b82f6',
|
|
'Asia': '#ef4444',
|
|
'Africa': '#f97316',
|
|
'N. America': '#22c55e',
|
|
'S. America': '#eab308',
|
|
'Oceania': '#a855f7'
|
|
};
|
|
|
|
const countryNameById = $derived.by(() => {
|
|
const map = { XK: 'Kosovo' };
|
|
for (const g of worldData.objects.countries.geometries) {
|
|
map[g.id] = g.properties?.name || g.id;
|
|
}
|
|
return map;
|
|
});
|
|
|
|
let visitedCountries = $derived(
|
|
[...getSelected()].map(id => countryNameById[id]).filter(Boolean).sort()
|
|
);
|
|
|
|
let visitedByContinent = $derived.by(() => {
|
|
const map = {};
|
|
for (const id of getSelected()) {
|
|
const cont = getContinent(id);
|
|
if (cont) {
|
|
if (!map[cont]) map[cont] = [];
|
|
map[cont].push(countryNameById[id] || id);
|
|
}
|
|
}
|
|
for (const cont of Object.keys(map)) {
|
|
map[cont].sort();
|
|
}
|
|
return map;
|
|
});
|
|
|
|
let counts = $derived.by(() => {
|
|
const c = {};
|
|
for (const cont of CONTINENTS) c[cont] = 0;
|
|
for (const id of getSelected()) {
|
|
const cont = getContinent(id);
|
|
if (cont) c[cont]++;
|
|
}
|
|
return c;
|
|
});
|
|
|
|
let total = $derived(getSelected().size);
|
|
let grandTotal = $derived(Object.values(continentTotals).reduce((a, b) => a + b, 0));
|
|
let pct = $derived(grandTotal > 0 ? Math.round(total / grandTotal * 100) : 0);
|
|
|
|
let segments = $derived.by(() => {
|
|
if (total === 0) return [];
|
|
const segs = [];
|
|
let deg = 0;
|
|
for (const cont of CONTINENTS) {
|
|
const angle = Math.min(counts[cont] / total * 360, 359.99);
|
|
if (angle > 0) {
|
|
const startDeg = deg;
|
|
const endDeg = deg + angle;
|
|
const midDeg = (startDeg + endDeg) / 2;
|
|
const rad = (midDeg - 90) * Math.PI / 180;
|
|
const sr = (startDeg - 90) * Math.PI / 180;
|
|
const er = (endDeg - 90) * Math.PI / 180;
|
|
const cx = 90, cy = 90, outerR = 65, innerR = 30;
|
|
const x1 = cx + outerR * Math.cos(sr);
|
|
const y1 = cy + outerR * Math.sin(sr);
|
|
const x2 = cx + outerR * Math.cos(er);
|
|
const y2 = cy + outerR * Math.sin(er);
|
|
const x3 = cx + innerR * Math.cos(er);
|
|
const y3 = cy + innerR * Math.sin(er);
|
|
const x4 = cx + innerR * Math.cos(sr);
|
|
const y4 = cy + innerR * Math.sin(sr);
|
|
const largeArc = angle > 180 ? 1 : 0;
|
|
const path = `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4} Z`;
|
|
const lx = cx + 82 * Math.cos(rad);
|
|
const ly = cy + 82 * Math.sin(rad);
|
|
segs.push({ cont, color: continentColors[cont], path, lx, ly, angle });
|
|
deg += angle;
|
|
}
|
|
}
|
|
return segs;
|
|
});
|
|
</script>
|
|
|
|
<div class="panel" class:collapsed>
|
|
<button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
|
|
{collapsed ? '◀' : '▶'}
|
|
</button>
|
|
|
|
{#if !collapsed}
|
|
<div class="panel-content">
|
|
<h2 class="headline">your statistics</h2>
|
|
|
|
<span class="bar-label">visited countries</span>
|
|
<div class="total-bar-wrap">
|
|
<div class="total-bar-bg">
|
|
<div class="total-bar-fill" style="width: {pct}%"></div>
|
|
</div>
|
|
<span class="total-bar-text">{total} / {grandTotal}</span>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<span class="bar-label">by continent</span>
|
|
{#each CONTINENTS as continent}
|
|
{@const contTotal = continentTotals[continent]}
|
|
<div class="row tooltip-wrap">
|
|
<span class="dot" style="background: {continentColors[continent]}"></span>
|
|
<span class="label">{continent}</span>
|
|
<span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
|
|
{#if visitedByContinent[continent]?.length > 0}
|
|
<div class="tooltip-list">
|
|
{#each visitedByContinent[continent].slice(0, 10) as country}
|
|
<span class="tooltip-item">{country}</span>
|
|
{/each}
|
|
{#if visitedByContinent[continent].length > 10}
|
|
<span class="tooltip-item tooltip-more">...</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
|
|
<div class="donut-wrap">
|
|
{#if segments.length > 0}
|
|
<svg viewBox="0 0 180 180" class="donut-svg">
|
|
{#each segments as seg}
|
|
<g class="seg-group">
|
|
<path d={seg.path} fill={seg.color} />
|
|
<text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
|
|
</g>
|
|
{/each}
|
|
<circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
|
|
</svg>
|
|
{:else}
|
|
<svg viewBox="0 0 180 180" class="donut-svg">
|
|
<circle cx="90" cy="90" r="65" fill="var(--border)" />
|
|
<circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
|
|
</svg>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.panel {
|
|
flex: 0 0 min(360px, 25vw);
|
|
background: var(--bg-raised);
|
|
border-left: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-family: var(--sans);
|
|
transition: flex-basis 0.25s ease;
|
|
}
|
|
|
|
.panel.collapsed {
|
|
flex: 0 0 28px;
|
|
border-left: none;
|
|
}
|
|
|
|
.panel-content {
|
|
flex: 1;
|
|
padding: 24px 28px;
|
|
overflow-y: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.collapse-btn {
|
|
flex: 0 0 auto;
|
|
align-self: flex-start;
|
|
background: var(--accent-bg);
|
|
border: none;
|
|
border-radius: 0 8px 8px 0;
|
|
padding: 14px 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
color: var(--accent);
|
|
transition: background 0.15s ease, padding 0.15s ease;
|
|
margin-top: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.collapse-btn:hover {
|
|
background: var(--lavender-bg);
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.collapse-btn::after {
|
|
content: attr(data-tip);
|
|
position: absolute;
|
|
right: calc(100% + 8px);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: var(--text-h);
|
|
color: var(--bg-raised);
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.collapse-btn:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.headline {
|
|
font-family: var(--heading);
|
|
font-size: var(--text-sm);
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--accent);
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.bar-label {
|
|
font-family: var(--sans);
|
|
font-size: var(--text-xs);
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-sub);
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.total-bar-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.total-bar-bg {
|
|
flex: 1;
|
|
height: 18px;
|
|
background: var(--accent-bg);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.total-bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
|
|
border-radius: 10px;
|
|
transition: width 0.3s ease;
|
|
min-width: 0;
|
|
}
|
|
|
|
.total-bar-text {
|
|
font-size: var(--text-sm);
|
|
font-weight: 400;
|
|
color: var(--text-h);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.label {
|
|
flex: 1;
|
|
font-size: var(--text-sm);
|
|
font-weight: 300;
|
|
color: var(--text);
|
|
}
|
|
|
|
.value {
|
|
font-size: var(--text-sm);
|
|
font-weight: 400;
|
|
color: var(--text-h);
|
|
}
|
|
|
|
.total {
|
|
font-weight: 400;
|
|
color: var(--text-sub);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.donut-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.donut-svg {
|
|
width: 160px;
|
|
height: 160px;
|
|
filter: drop-shadow(0 2px 8px rgba(99,102,241,0.15));
|
|
}
|
|
|
|
.donut-label {
|
|
fill: var(--text-h);
|
|
font-family: var(--sans);
|
|
font-weight: 300;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.seg-group:hover .donut-label {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tooltip-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.tooltip-list {
|
|
display: none;
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
background: var(--text-h);
|
|
color: var(--bg-raised);
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
z-index: 20;
|
|
white-space: nowrap;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.tooltip-wrap:hover .tooltip-list {
|
|
display: block;
|
|
}
|
|
|
|
.tooltip-item {
|
|
display: block;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.tooltip-item + .tooltip-item {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.disclaimer {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-sub);
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
}
|
|
</style>
|