Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sorting #191

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Sorting #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
78fb0ef
Sorting
GuiMF Mar 12, 2025
3260644
Done ig
GuiMF Mar 12, 2025
519c54f
Deleted sorting button
GuiMF Mar 12, 2025
781ffcb
Deleted sorting button
GuiMF Mar 12, 2025
516a0c2
Deleted comments
GuiMF Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 33 additions & 6 deletions src/components/AreaLeaderboard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
area.tags.name &&
area.tags['icon:square'] &&
area.tags.continent &&
area.tags.population &&
Object.keys(area.tags).find((key) => key.includes('contact')) &&
$reports.find((report) => report.area_id === area.id)
);
Expand All @@ -33,6 +34,7 @@
area.tags.geo_json &&
area.tags.name &&
area.tags.continent &&
area.tags.population &&
validateContinents(area.tags.continent)
);
}
Expand All @@ -52,9 +54,15 @@
let gradeTooltip: HTMLButtonElement;
let gradeTooltipMobile: HTMLButtonElement;

const score = (report: Report): number => {
const scorePerLocation = (report: Report): number => {
return Math.max(report.tags.total_elements - report.tags.outdated_elements * 5, 0);
};
const scorePerCapita = (report: Report, population: number): number => {
return Math.max(
(report.tags.total_elements - report.tags.outdated_elements * 5) / population,
0
);
};

const populateLeaderboard = (status: boolean, areasFiltered: Area[], areasReports: Report[]) => {
if (areasFiltered.length && areasReports.length && !status) {
Expand All @@ -72,13 +80,22 @@
});

leaderboard.sort((a, b) => {
const aScore = score(a.report);
const bScore = score(b.report);

let aScore: number = 0;
let bScore: number = 0;
if (localStorage.currentSort === 'totalLocations') {
aScore = scorePerLocation(a.report);
bScore = scorePerLocation(b.report);
} else {
aScore = scorePerCapita(a.report, Number(a.tags.population));
bScore = scorePerCapita(b.report, Number(b.tags.population));
}

if (bScore === aScore) {
return b.report.tags.total_elements - a.report.tags.total_elements;
} else {
return bScore - aScore;
// I know the number is already a number, but it wont accept it without the number for some reason.
return Number(bScore) - Number(aScore);
}
});

Expand All @@ -93,7 +110,14 @@
$: leaderboardPaginated =
leaderboard && leaderboard.length && !loading ? leaderboard.slice(0, leaderboardCount) : [];

const headings = ['Position', 'Name', 'Up-To-Date', 'Total Locations', 'Grade'];
let headings = [
'Position',
'Name',
'Up-To-Date',
'Total Location',
'Locations Per Capita',
'Grade'
];

const setTooltips = () => {
tippy([upToDateTooltip, upToDateTooltipMobile], {
Expand All @@ -115,7 +139,7 @@
</script>

<section id="leaderboard" class="dark:lg:rounded dark:lg:bg-white/10 dark:lg:py-8">
<div class="mb-5 hidden grid-cols-5 text-center lg:grid">
<div class="mb-5 hidden grid-cols-6 text-center lg:grid">
{#each headings as heading}
<h3 class="text-lg font-semibold text-primary dark:text-white">
{heading}
Expand Down Expand Up @@ -160,6 +184,9 @@
id={item.id}
upToDate={item.report.tags.up_to_date_percent}
total={item.report.tags.total_elements}
perCapita={Math.round(
(item.report.tags.total_elements / Number(item.tags.population)) * 1000000
)}
grade={item.grade}
/>
{/each}
Expand Down
4 changes: 3 additions & 1 deletion src/components/AreaLeaderboardItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let id: string;
export let upToDate: number;
export let total: number;
export let perCapita: number;
export let grade: Grade;

import { SponsorBadge } from '$lib/comp';
Expand All @@ -15,12 +16,13 @@
$: stats = [
{ stat: upToDate, title: 'Up-To-Date' },
{ stat: total, title: 'Total Locations' },
{ stat: perCapita, title: 'Total Per Capita' },
{ stat: grade, title: 'Grade' }
];
</script>

<div
class="grid-cols-5 border-b border-statBorder py-5 text-center text-lg font-semibold text-link lg:grid"
class="grid-cols-6 border-b border-statBorder py-5 text-center text-lg font-semibold text-link lg:grid"
>
<span
class="my-auto {position > 3
Expand Down
8 changes: 8 additions & 0 deletions src/lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ export const detectTheme = () => {
}
};

export const detectSort = () => {
if (localStorage.currentSort === 'totalLocations' || !('currentSort' in localStorage)) {
return 'totalLocations';
} else {
return 'locationsPerCap';
}
};

export const updateChartThemes = (
charts: Chart<'line' | 'bar', number[] | undefined, string>[]
) => {
Expand Down
27 changes: 26 additions & 1 deletion src/routes/communities/leaderboard/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,27 @@
PrimaryButton
} from '$lib/comp';
import { theme } from '$lib/store';
import { detectTheme } from '$lib/utils';
import { detectTheme, detectSort } from '$lib/utils';
import { onMount } from 'svelte';

let currentSort: undefined | string;

onMount(() => {
currentSort = detectSort();
});

const toggleSort = () => {
if (currentSort === 'totalLocations') {
currentSort = 'locationsPerCap';
localStorage.currentSort = currentSort;
console.log(localStorage.currentSort);
} else {
currentSort = 'totalLocations';
localStorage.currentSort = currentSort;
console.log(localStorage.currentSort);
}
location.reload();
};

const routes = [
{ name: 'Communities', url: '/communities' },
Expand Down Expand Up @@ -66,6 +86,11 @@
style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
link="/communities/map"
/>
<PrimaryButton
text="Toggle Sort"
style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
click={toggleSort}
/>
</div>
</div>

Expand Down
39 changes: 33 additions & 6 deletions src/routes/countries/leaderboard/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,27 @@
PrimaryButton
} from '$lib/comp';
import { theme } from '$lib/store';
import { detectTheme } from '$lib/utils';
import { detectTheme, detectSort } from '$lib/utils';
import { onMount } from 'svelte';

let currentSort: undefined | string;

onMount(() => {
currentSort = detectSort();
});

const toggleSort = () => {
if (currentSort === 'totalLocations') {
currentSort = 'locationsPerCap';
localStorage.currentSort = currentSort;
console.log(localStorage.currentSort);
} else {
currentSort = 'totalLocations';
localStorage.currentSort = currentSort;
console.log(localStorage.currentSort);
}
location.reload();
};

const routes = [
{ name: 'Countries', url: '/countries' },
Expand Down Expand Up @@ -47,11 +67,18 @@
Insights into bitcoin adoption worldwide!
</h2>

<PrimaryButton
text="View directory"
style="md:w-[200px] mx-auto py-3 rounded-xl"
link="/countries"
/>
<div class="items-center justify-center space-y-5 md:flex md:space-x-5 md:space-y-0">
<PrimaryButton
text="View directory"
style="md:w-[200px] mx-auto py-3 md:mx-0 rounded-xl"
link="/countries"
/>
<PrimaryButton
text="Toggle Sort"
style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
click={toggleSort}
/>
</div>

<AreaLeaderboard type="country" />

Expand Down