replace comm count on dash with uptodate percent

teambtcmap · Dec 22, 2023 · e5221ca · e5221ca
1 parent 6a0d4c6
commit e5221ca
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 33 deletions.
diff --git a/src/components/DashboardStat.svelte b/src/components/DashboardStat.svelte
@@ -12,16 +12,15 @@
 <div class="space-y-5 p-5 {border}">
 	<h3 class="text-center text-xl text-primary dark:text-white md:h-[56px] md:text-left">
 		{title}
-		{#if title === 'Number of communities'}
-			<a href="/communities"><i class="fa-solid fa-circle-info text-base" /></a>
-		{/if}
 		{#if loading}
 			<LoadingSpinner color="text-link" style="inline" />
 		{/if}
 	</h3>
 	<div class="flex justify-center md:justify-start">
 		{#if stat !== undefined}
-			<span class="text-5xl font-semibold text-primary dark:text-white">{stat}</span>
+			<span class="text-5xl font-semibold text-primary dark:text-white">
+				{stat}{title === 'Up-To-Date Percent' ? '%' : ''}
+			</span>
 			{#if percent}
 				<span
 					class="{percent === '+0'

diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
@@ -1,16 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { DashboardStat, Footer, Header, HeaderPlaceholder } from '$lib/comp';
-	import {
-		areaError,
-		areas,
-		eventError,
-		events,
-		reportError,
-		reports,
-		syncStatus,
-		theme
-	} from '$lib/store';
+	import { eventError, events, reportError, reports, syncStatus, theme } from '$lib/store';
 	import type { ChartHistory, EventType, Report } from '$lib/types';
 	import { detectTheme, errToast, updateChartThemes } from '$lib/utils';
 	import Chart from 'chart.js/auto';
@@ -20,9 +11,6 @@
 	// alert for event errors
 	$: $eventError && errToast($eventError);
 
-	// alert for area errors
-	$: $areaError && errToast($areaError);
-
 	// alert for report errors
 	$: $reportError && errToast($reportError);
 
@@ -80,20 +68,6 @@
 				})
 			: [];
 
-	$: communities =
-		$areas && $areas.length && $reports && $reports.length
-			? $areas.filter(
-					(area) =>
-						area.tags.type === 'community' &&
-						area.tags.geo_json &&
-						area.tags.name &&
-						area.tags['icon:square'] &&
-						area.tags.continent &&
-						Object.keys(area.tags).find((key) => key.includes('contact')) &&
-						$reports.find((report) => report.area_id === area.id)
-				)
-			: undefined;
-
 	const getStatPeriod = () => {
 		return new Date(new Date().getTime() - 24 * 60 * 60 * 1000).getTime();
 	};
@@ -140,6 +114,8 @@
 	$: lightning = stats && stats[0].tags.total_elements_lightning;
 	$: nfc = stats && stats[0].tags.total_elements_lightning_contactless;
 
+	$: upToDatePercent = stats && stats[0].tags.up_to_date_percent;
+
 	$: totalChange =
 		stats && total
 			? new Intl.NumberFormat('en-US', { signDisplay: 'always' }).format(
@@ -207,6 +183,13 @@
 				)
 			: '';
 
+	$: upToDatePercentChange =
+		stats && upToDatePercent
+			? new Intl.NumberFormat('en-US', { signDisplay: 'always' }).format(
+					upToDatePercent - stats[1].tags.up_to_date_percent
+				)
+			: undefined;
+
 	let upToDateChartCanvas: HTMLCanvasElement;
 	let upToDateChart: Chart<'line', number[] | undefined, string>;
 	let totalChartCanvas: HTMLCanvasElement;
@@ -703,8 +686,9 @@
 						loading={$syncStatus && chartsRendered}
 					/>
 					<DashboardStat
-						title="Number of communities"
-						stat={communities && communities.length}
+						title="Up-To-Date Percent"
+						stat={upToDatePercent}
+						change={upToDatePercentChange}
 						loading={$syncStatus && chartsRendered}
 					/>
 				</div>