Add metrics to the site

src/views/CommunityView.vue

@@ -67,6 +67,11 @@
 				<a href="mailto:[email protected]">
 						[email protected]</a>.
 			</p>
+			<h2><i class="fa fa-code-fork"></i> Merged Pull Requests</h2>
+				<p>We have merged <strong>{{ mergeCount }} pull requests</strong> across <strong>{{ repoCount }} repositories</strong>.</p>
+				<a href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25/views/1">
+					<i class="fa fa-external-link"></i> Good first issues
+				</a>
 		</GridItem>
 		<GridItem class="text-xl hyphens-auto" lang="en">
 			<h3><i class="fa fa-map-o" aria-hidden="true"></i> Locate sources</h3>
@@ -113,5 +118,15 @@ export default {
 		GridContainer,
 		GridItem,
 	},
-};
+	data: () => ({
+		repoCount: 0,
+		mergeCount: 0,
+	}),
+	mounted: async function (){
+			const repos = await (await fetch(`https://api.github.com/orgs/Police-Data-Accessibility-Project/repos`)).json()
+			this.repoCount = repos.length;
+			const merges = await (await fetch(`https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+is:pr+is:merged`)).json()
+			this.mergeCount = merges.total_count
+		},
+	};
 </script>

src/views/DataView.vue

@@ -53,6 +53,14 @@
 				if you have something to share.
 			</p>
 		</GridItem>
+		<GridItem component="div" :span-column="3">
+			<h2><i class="fa fa-globe"></i> Geographic Coverage</h2>
+			<p>
+				Our database currently documents data sources from <br>
+				<strong>{{ agenciesCount }} agencies</strong> in <strong>{{ countiesCount }} counties</strong> across all <strong>{{ statesCount }} states </strong> and the District of Columbia.
+			</p>
+			<a href="https://data-sources.pdap.io"><i class="fa fa-external-link"></i> Explore the data</a>
+		</GridItem>
 	</GridContainer>
 	<GridContainer class="px-4 md:px-8 mb-12" component="section" :columns="2">
 		<GridItem component="h2" :span-column="2">
@@ -73,6 +81,19 @@
 import { FlexContainer, GridContainer, GridItem } from 'pdap-design-system';
 import HelpTextIcon from '../components/HelpTextIcon.vue';
 
+const baseUrl = "https://data-sources.pdap.io/api/";
+const api_key = import.meta.env.VITE_API_KEY;
+
+const headers = {
+  'Authorization': `Bearer ${api_key}`,
+  'Content-Type': 'application/json'
+};
+
+const body = {
+    "email": "[email protected]",
+    "password": "FourPlugTripMint"
+}
+
 export default {
 	name: 'DataView',
 	components: {
@@ -81,5 +102,57 @@ export default {
 		GridItem,
 		HelpTextIcon,
 	},
-};
+	data: () => ({
+		agenciesCount: 0,
+		countiesCount: 0,
+		statesCount: 0,
+	}),
+	mounted: async function(){
+			const newKey = await (await fetch(`${baseUrl}login`, {
+				method: 'POST',
+				headers: headers,
+				body: JSON.stringify(body),
+			})).json();
+
+			const newHeaders = {
+			'Authorization': `Bearer ${newKey.data}`,
+			'Content-Type': 'application/json'
+			};
+
+			let tempAgencyCount = 1;
+			let page = 1;
+			let states = [];
+			let counties = [];
+			let agencies =[];
+
+			while (tempAgencyCount !== 0) {
+				const tempAgencies = await (await fetch(`${baseUrl}agencies/${page}`, {
+					method: 'GET',
+					headers: newHeaders,
+				})).json();
+
+				for (const entry of tempAgencies.data){
+					if (entry.count_data_sources > 0){
+						const tempAgency = entry.name;
+						if (!agencies.includes(tempAgency)) {
+							agencies.push(tempAgency);
+						}
+						const tempState = entry.state_iso;
+						if (!states.includes(tempState)) {
+							states.push(tempState);
+						}
+						const tempCounty = entry.county_fips;
+						if (!counties.includes(tempCounty)) {
+							counties.push(tempCounty);
+						}
+					}
+				}
+				page += 1; 
+				tempAgencyCount = tempAgencies.count;
+			}
+			this.statesCount = states.length-2;
+			this.countiesCount = counties.length;
+			this.agenciesCount = agencies.length;
+		},
+	};
 </script>

src/views/HomeView.vue

@@ -20,6 +20,13 @@
 			<QuickSearchForm :baseUrlForRedirect="baseUrlForRedirect" />
 		</GridItem>
 	</GridContainer>
+	<FlexContainer component="section">
+		<h2><i class="fa fa-check-square-o"></i> Completed Data Requests</h2>
+		<p>Completed <strong> {{ requests }} data requests</strong> since January 9, 2023.</p>
+		<a href="https://airtable.com/shrbFfWk6fjzGnNsk">
+			<i class="fa fa-external-link"></i> Make a request
+		</a>
+	</FlexContainer>
 	<FlexContainer component="section">
 		<h1>Case studies</h1>
 		<p>
@@ -133,6 +140,13 @@
 import { Button, Form, FlexContainer, GridContainer, GridItem, QuickSearchForm } from 'pdap-design-system';
 import { RouterLink } from 'vue-router';
 
+const airtable_api_key = import.meta.env.VITE_AIRTABLE_API_KEY;
+
+const headers = {
+  'Authorization': `Bearer ${airtable_api_key}`,
+  'Content-Type': 'application/json'
+};
+
 export default {
 	name: 'HomeView',
 	components: {
@@ -144,12 +158,19 @@ export default {
     QuickSearchForm,
     RouterLink
 	},
-	data() {
-		return {
-			baseUrlForRedirect: import.meta.env.MODE === 'production' 
-			? 'https://data-sources.pdap.io' 
-			: 'https://data-sources.pdap.dev'
-		};
-	}
-};
+	data: () => ({
+		requests: 0,
+		baseUrlForRedirect: import.meta.env.MODE === 'production' 
+		? 'https://data-sources.pdap.io' 
+		: 'https://data-sources.pdap.dev'
+	}),
+	mounted: async function(){
+			const dataRequests = await (await fetch(`https://api.airtable.com/v0/app473MWXVJVaD7Es/Data%20Requests?filterByFormula=%28%7Brequest_status%7D%3D%27Complete%27%29`, { 
+				method: 'GET',
+				headers: headers
+			})
+			).json();
+			this.requests = dataRequests.records.length;
+		},
+	};
 </script>