feat: lender stats data import updated

package.json

@@ -49,7 +49,7 @@
 		"@godaddy/terminus": "^4.11.0",
 		"@graphql-tools/load": "^7.7.0",
 		"@graphql-tools/url-loader": "^7.17.18",
-		"@kiva/kv-components": "^3.94.0",
+		"@kiva/kv-components": "^3.96.0",
 		"@kiva/kv-shop": "^1.12.8",
 		"@kiva/kv-tokens": "^2.11.1",
 		"@mdi/js": "^7",

src/components/LenderProfile/LenderMap.vue

@@ -111,6 +111,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		lenderStats: {
+			type: Object,
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -125,7 +129,7 @@ export default {
 				: 'Lending Activity by Country';
 		},
 		countriesData() {
-			return (this.lenderInfo?.statsPerCountry?.values ?? []).map(stat => ({
+			return (this.lenderStats?.statsPerCountry?.values ?? []).map(stat => ({
 				label: stat.country?.name ?? '',
 				value: stat.loanCount ?? '',
 				lat: stat.country?.geocode?.latitude ?? 0,

src/components/LenderProfile/LenderProfileWrapper.vue

@@ -32,16 +32,21 @@
 		/>
 
 		<lender-stats
-			:lender-info="lenderInfo"
+			:public-id="publicId"
+			:lender-stats="lenderStats"
+			@get-lender-stats="fetchLenderStats"
 		/>
 
 		<lender-map
 			:lender-info="lenderInfo"
+			:lender-stats="lenderStats"
 		/>
 	</div>
 </template>
 
 <script>
+import lenderStatsQuery from '@/graphql/query/lenderStats.graphql';
+import logReadQueryError from '@/util/logReadQueryError';
 import LenderSummary from '@/components/LenderProfile/LenderSummary';
 import LenderLoansList from '@/components/LenderProfile/LenderLoansList';
 import LenderStats from '@/components/LenderProfile/LenderStats';
@@ -53,6 +58,7 @@ import LenderMap from '@/components/LenderProfile/LenderMap';
 
 export default {
 	name: 'LenderProfileWrapper',
+	inject: ['apollo', 'cookieStore'],
 	props: {
 		publicId: {
 			type: String,
@@ -72,6 +78,11 @@ export default {
 			default: () => ([]),
 		},
 	},
+	data() {
+		return {
+			lenderStats: {},
+		};
+	},
 	components: {
 		LenderSummary,
 		LenderLoansList,
@@ -82,5 +93,21 @@ export default {
 		LenderDedicationsList,
 		LenderMap,
 	},
+	methods: {
+		async fetchLenderStats() {
+			try {
+				const { data } = await this.apollo.query({
+					query: lenderStatsQuery,
+					variables: {
+						publicId: this.publicId,
+					},
+				});
+
+				this.lenderStats = data.community?.lender ?? {};
+			} catch (e) {
+				logReadQueryError(e, 'LenderStats lenderStatsQuery');
+			}
+		},
+	},
 };
 </script>

src/components/LenderProfile/LenderStats.vue

@@ -1,5 +1,5 @@
 <template>
-	<async-lender-section @visible="() => isLoading = false">
+	<async-lender-section @visible="$emit('get-lender-stats')">
 		<section class="tw-my-8">
 			<div v-if="isLoading">
 				<kv-loading-placeholder
@@ -35,11 +35,9 @@ import AsyncLenderSection from './AsyncLenderSection';
 
 export default {
 	name: 'LenderStats',
-	inject: ['apollo', 'cookieStore'],
 	props: {
-		lenderInfo: {
+		lenderStats: {
 			type: Object,
-			default: () => ({}),
 			required: true,
 		},
 	},
@@ -66,29 +64,36 @@ export default {
 	},
 	computed: {
 		locationStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerCountry?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerCountry?.values ?? []).map(stat => ({
 				label: stat.country.name,
 				value: stat.loanCount,
 			})));
 		},
 		genderStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerGender?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerGender?.values ?? []).map(stat => ({
 				label: `${stat.gender.charAt(0).toUpperCase()}${stat.gender.slice(1)}`,
 				value: stat.loanCount,
 			})));
 		},
 		sectorStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerSector?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerSector?.values ?? []).map(stat => ({
 				label: stat.sector.name,
 				value: stat.loanCount,
 			})));
 		},
 		partnerStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerPartner?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerPartner?.values ?? []).map(stat => ({
 				label: stat.partner?.name ?? 'No partner',
 				value: stat.loanCount,
 			})));
 		},
-	}
+	},
+	watch: {
+		lenderStats() {
+			if (Object.keys(this.lenderStats).length !== 0) {
+				this.isLoading = false;
+			}
+		},
+	},
 };
 </script>

src/graphql/query/lenderPublicProfile.graphql

@@ -24,48 +24,6 @@ query LenderPublicProfile ($publicId: String!) {
 				otherInfo
 				url
 			}
-			statsPerCountry {
-				values {
-					id
-					loanCount
-					country {
-						name
-						numLoansFundraising
-						geocode {
-							latitude
-							longitude
-						}
-						isoCode
-					}
-				}
-			}
-			statsPerGender {
-				values {
-					id
-					loanCount
-					gender
-				}
-			}
-			statsPerPartner {
-				values {
-					id
-					loanCount
-					partner {
-						id
-						name
-					}
-				}
-			}
-			statsPerSector {
-				values {
-					id
-					loanCount
-					sector {
-						id
-						name
-					}
-				}
-			}
 		}
 	}
 	userAchievementProgress(publicId: $publicId) {

src/graphql/query/lenderStats.graphql

@@ -0,0 +1,49 @@
+query LenderStats ($publicId: String!) {
+	community {
+		lender(publicId: $publicId) {
+			id
+			statsPerCountry {
+				values {
+					id
+					loanCount
+					country {
+						name
+						numLoansFundraising
+						geocode {
+							latitude
+							longitude
+						}
+						isoCode
+					}
+				}
+			}
+			statsPerGender {
+				values {
+					id
+					loanCount
+					gender
+				}
+			}
+			statsPerPartner {
+				values {
+					id
+					loanCount
+					partner {
+						id
+						name
+					}
+				}
+			}
+			statsPerSector {
+				values {
+					id
+					loanCount
+					sector {
+						id
+						name
+					}
+				}
+			}
+		}
+	}
+}