20256426/Map-Jurnal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

make stats panel colabseble

Browse Source
This commit is contained in:
Tomas Horsky
2026-06-10 22:56:56 +09:00
parent 5356c05654
commit cd682f738a
1 changed files with 111 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/lib/world-map/StatsPanel.svelte
View File

@@ -2,6 +2,8 @@
import { CONTINENTS, getContinent, continentTotals } from './continents.js';
import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
let collapsed = $state(false);
const continentColors = {
'Europe': '#3b82f6',
'Asia': '#ef4444',
@@ -30,7 +32,7 @@
const segs = [];
let deg = 0;
for (const cont of CONTINENTS) {
const angle = counts[cont] / total * 360;
const angle = Math.min(counts[cont] / total * 360, 359.99);
if (angle > 0) {
const startDeg = deg;
const endDeg = deg + angle;
@@ -59,51 +61,59 @@
});
</script>
<div class="panel">
<h2 class="headline">your statistics</h2>
<div class="panel" class:collapsed>
<button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
{collapsed ? '◀' : '▶'}
</button>
<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>
{#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">
<span class="dot" style="background: {continentColors[continent]}"></span>
<span class="label">{continent}</span>
<span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
</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="#f8fafc" />
</svg>
{:else}
<svg viewBox="0 0 180 180" class="donut-svg">
<circle cx="90" cy="90" r="65" fill="#e2e8f0" />
<circle cx="90" cy="90" r="30" fill="#f8fafc" />
</svg>
{/if}
</div>
<div class="divider"></div>
<div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</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">
<span class="dot" style="background: {continentColors[continent]}"></span>
<span class="label">{continent}</span>
<span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
</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 ? 7 : 9}px">{seg.cont}</text>
</g>
{/each}
<circle cx="90" cy="90" r="30" fill="#f8fafc" />
</svg>
{:else}
<svg viewBox="0 0 180 180" class="donut-svg">
<circle cx="90" cy="90" r="65" fill="#e2e8f0" />
<circle cx="90" cy="90" r="30" fill="#f8fafc" />
</svg>
{/if}
</div>
<div class="divider"></div>
<div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
{/if}
</div>
<style>
@@ -111,9 +121,65 @@
flex: 0 0 min(360px, 25vw);
background: #f8fafc;
border-left: 1px solid #dce8f0;
display: flex;
flex-direction: row;
font-family: sans-serif;
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;
font-family: sans-serif;
min-width: 0;
}
.collapse-btn {
flex: 0 0 auto;
align-self: flex-start;
background: #e2e8f0;
border: none;
border-radius: 0 8px 8px 0;
padding: 14px 5px;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: #1e293b;
transition: background 0.15s ease, padding 0.15s ease;
margin-top: 24px;
position: relative;
}
.collapse-btn:hover {
background: #94a3b8;
padding-right: 8px;
}
.collapse-btn::after {
content: attr(data-tip);
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
background: #1e293b;
color: #fff;
font-size: 14px;
font-weight: 600;
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 {