Skip to content

Commit 18c7910

Browse files
chrisjmchrisjm
committed
refactor: reorganize dashboard layout and clean up subdivision data
1 parent 53e8706 commit 18c7910

File tree

2 files changed

+105
-91
lines changed

2 files changed

+105
-91
lines changed

‎src/lib/subdivisions-to-country.ts‎

Lines changed: 75 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ function normalize(str: string) {
1111

1212
function fixKnownVariants(str: string) {
1313
const map: Record<string, string> = {
14-
missouri: 'missouri',
1514
niederosterreich: 'niederoesterreich',
1615
oberosterreich: 'oberoesterreich',
1716
karnten: 'kaernten',
@@ -26,18 +25,85 @@ const usSubdivisions = [
2625
'alabama', 'alaska', 'arizona', 'arkansas', 'california', 'colorado', 'connecticut', 'delaware', 'district of columbia', 'florida', 'georgia', 'hawaii', 'idaho', 'illinois', 'indiana', 'iowa', 'kansas', 'kentucky', 'louisiana', 'maine', 'maryland', 'massachusetts', 'michigan', 'minnesota', 'mississippi', 'missouri', 'montana', 'nebraska', 'nevada', 'new hampshire', 'new jersey', 'new mexico', 'new york', 'north carolina', 'north dakota', 'ohio', 'oklahoma', 'oregon', 'pennsylvania', 'rhode island', 'south carolina', 'south dakota', 'tennessee', 'texas', 'utah', 'vermont', 'virginia', 'washington', 'west virginia', 'wisconsin', 'wyoming',
2726
];
2827

29-
const irelandSubs = ['dublin', 'cork', 'kerry', 'galway', 'clare', 'kildare', 'kilkenny', 'laois', 'limerick', 'longford', 'louth', 'mayo', 'meath', 'monaghan', 'offaly', 'roscommon', 'sligo', 'tipperary', 'waterford', 'westmeath', 'wexford', 'wicklow', 'donegal'];
28+
const irelandSubs = [
29+
'carlow',
30+
'clare',
31+
'cork',
32+
'donegal',
33+
'dublin',
34+
'galway',
35+
'kerry',
36+
'kildare',
37+
'kilkenny',
38+
'laois',
39+
'limerick',
40+
'longford',
41+
'louth',
42+
'mayo',
43+
'meath',
44+
'monaghan',
45+
'offaly',
46+
'roscommon',
47+
'sligo',
48+
'tipperary',
49+
'waterford',
50+
'westmeath',
51+
'wexford',
52+
'wicklow',
53+
];
3054

31-
const portugalSubs = ['aveiro', 'beja', 'coimbra', 'faro', 'leiria', 'lisboa', 'portalegre', 'porto'];
55+
const portugalSubs = [
56+
'aveiro',
57+
'beja',
58+
'coimbra',
59+
'faro',
60+
'leiria',
61+
'lisboa',
62+
'portalegre',
63+
'porto',
64+
];
3265

33-
const austriaSubs = ['salzburg', 'steiermark', 'kaernten', 'niederoesterreich', 'oberoesterreich'];
66+
const austriaSubs = [
67+
'kaernten',
68+
'niederoesterreich',
69+
'oberoesterreich',
70+
'salzburg',
71+
'steiermark',
72+
];
3473

35-
const swedenSubs = ['halland', 'blekinge'];
74+
const swedenSubs = [
75+
'halland',
76+
'blekinge',
77+
];
3678

37-
const englandSubs = ['east sussex', 'west sussex'];
38-
const scotlandSubs = ['argyll', 'bute', 'east dunbartonshire', 'west dunbartonshire'];
79+
const englandSubs = [
80+
'east sussex',
81+
'west sussex',
82+
];
83+
const scotlandSubs = [
84+
'argyll',
85+
'bute',
86+
'east dunbartonshire',
87+
'west dunbartonshire',
88+
];
3989

40-
const koreaSubs = ['seoul', 'incheon', 'daejeon', 'daegu', 'busan', 'gwangju', 'jeollabukdo', 'jeollanamdo', 'jeju', 'jejudo', 'gyeonggido', 'chungcheongbukdo', 'chungcheongnamdo', 'gyeongsangbukdo', 'gyeongsangnamdo', 'gangwondo'];
90+
const southKoreaSubs = [
91+
'busan',
92+
'chungcheongbukdo',
93+
'chungcheongnamdo',
94+
'daejeon',
95+
'deagu',
96+
'gangwondo',
97+
'gwangju',
98+
'gyeonggido',
99+
'gyeongsangbukdo',
100+
'gyeongsangnamdo',
101+
'incheon',
102+
'jejudo',
103+
'jeollabukdo',
104+
'jeollanamdo',
105+
'seoul',
106+
];
41107

42108
const germanySubs = ['berlin'];
43109
const italySubs = ['bolzano'];
@@ -54,7 +120,7 @@ for (const name of austriaSubs) lookup.set(name, countryId('austria'));
54120
for (const name of swedenSubs) lookup.set(name, countryId('sweden'));
55121
for (const name of englandSubs) lookup.set(name, countryId('england'));
56122
for (const name of scotlandSubs) lookup.set(name, countryId('scotland'));
57-
for (const name of koreaSubs) lookup.set(name, countryId('south_korea'));
123+
for (const name of southKoreaSubs) lookup.set(name, countryId('south_korea'));
58124
for (const name of germanySubs) lookup.set(name, countryId('germany'));
59125
for (const name of italySubs) lookup.set(name, countryId('italy'));
60126
for (const name of japanSubs) lookup.set(name, countryId('japan'));

‎src/routes/dashboard/+page.svelte‎

Lines changed: 30 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -40,42 +40,39 @@
4040
<p class="font-medium">{data.error}</p>
4141
</div>
4242
{:else}
43-
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
44-
<div class="rounded-lg border bg-white p-5 shadow-sm">
45-
<p class="text-sm text-neutral-500">Total Breweries</p>
46-
<p class="mt-1 text-3xl font-semibold tabular-nums">
43+
<section class="mt-3 grid grid-cols-1 lg:grid-cols-3 gap-6">
44+
<div class="lg:col-span-1 flex flex-col gap-6">
45+
<div class="rounded-lg border bg-white p-5 shadow-sm">
46+
<p class="text-sm text-neutral-500">Total Breweries</p>
47+
<p class="mt-1 text-3xl font-semibold tabular-nums">
4748
{data.total.toLocaleString()}
48-
</p>
49-
</div>
50-
</section>
51-
52-
<section class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
53-
<div class="lg:col-span-1 rounded-lg border bg-white p-5 shadow-sm">
54-
<h2 class="text-base font-semibold">Type distribution</h2>
55-
<ul class="mt-4 space-y-3">
56-
{#each sortedTypes as t}
57-
<li class="flex items-center gap-3">
58-
<div class="w-28 shrink-0 text-sm text-neutral-700">{t.name}</div>
59-
<div class="flex-1">
60-
<div class="h-2 rounded bg-neutral-100">
61-
<div
62-
class="h-2 rounded bg-amber-500"
63-
style={`width: ${Math.min(100, Math.max(0, t.pct)).toFixed(2)}%`}
64-
aria-label={`{t.name} ${t.pct.toFixed(1)}%`}
65-
></div>
49+
</div>
50+
<div class="rounded-lg border bg-white p-5 shadow-sm">
51+
<h2 class="text-base font-semibold">Type distribution</h2>
52+
<ul class="mt-4 space-y-3">
53+
{#each sortedTypes as t}
54+
<li class="flex items-center gap-3">
55+
<div class="w-28 shrink-0 text-sm text-neutral-700">{t.name}</div>
56+
<div class="flex-1">
57+
<div class="h-2 rounded bg-neutral-100">
58+
<div
59+
class="h-2 rounded bg-amber-500"
60+
style={`width: ${Math.min(100, Math.max(0, t.pct)).toFixed(2)}%`}
61+
aria-label={`{t.name} ${t.pct.toFixed(1)}%`}
62+
></div>
63+
</div>
64+
</div>
65+
<div
66+
class="w-24 text-right text-sm tabular-nums text-neutral-700"
67+
>
68+
{t.count.toLocaleString()}
69+
<span class="text-neutral-500">({t.pct.toFixed(1)}%)</span>
6670
</div>
67-
</div>
68-
<div
69-
class="w-24 text-right text-sm tabular-nums text-neutral-700"
70-
>
71-
{t.count.toLocaleString()}
72-
<span class="text-neutral-500">({t.pct.toFixed(1)}%)</span>
73-
</div>
74-
</li>
75-
{/each}
76-
</ul>
71+
</li>
72+
{/each}
73+
</ul>
74+
</div>
7775
</div>
78-
7976
<div class="lg:col-span-2 rounded-lg border bg-white p-5 shadow-sm">
8077
<div class="flex items-center justify-between">
8178
<h2 class="text-base font-semibold">Breweries by country</h2>
@@ -113,55 +110,6 @@
113110
</table>
114111
</div>
115112
</div>
116-
117-
{#if (data.unknownSubs?.length ?? 0) > 0}
118-
<div class="mt-6 rounded-lg border border-amber-300 bg-amber-50 p-4">
119-
<div class="flex items-baseline justify-between">
120-
<h3 class="text-base font-semibold text-amber-800">
121-
Unknown subdivisions
122-
</h3>
123-
<span class="text-sm text-amber-700">
124-
Total missing: <span class="font-semibold tabular-nums"
125-
>{data.unknownTotal?.toLocaleString?.() ??
126-
data.unknownTotal}</span
127-
>
128-
</span>
129-
</div>
130-
<p class="mt-1 text-sm text-amber-700">
131-
These appear to be <span class="font-medium"
132-
>state/province formatting issues</span
133-
> that didn’t map to a country. Try searching the raw subdivision to
134-
confirm and help us fix the mapping.
135-
</p>
136-
<div class="mt-3 overflow-x-auto">
137-
<table class="min-w-full text-sm">
138-
<thead>
139-
<tr class="text-left text-amber-800">
140-
<th class="py-2 pr-3">Subdivision</th>
141-
<th class="py-2 pr-3">Breweries</th>
142-
</tr>
143-
</thead>
144-
<tbody>
145-
{#each unknownSorted as u}
146-
<tr class="border-t border-amber-200">
147-
<td class="py-2 pr-3">
148-
<a
149-
class="text-amber-700 hover:text-amber-900 underline decoration-amber-300 hover:decoration-amber-400"
150-
href={`/breweries?query=${encodeURIComponent(u.name)}`}
151-
>
152-
{u.name}
153-
</a>
154-
</td>
155-
<td class="py-2 pr-3 tabular-nums"
156-
>{u.count.toLocaleString()}</td
157-
>
158-
</tr>
159-
{/each}
160-
</tbody>
161-
</table>
162-
</div>
163-
</div>
164-
{/if}
165113
</div>
166114
</section>
167115
{/if}

0 commit comments

Comments
 (0)