feat: loans map added to lender profile (#5438)

* feat: loans map added to lender profile

* fix: lint error fixed

* feat: lender map tweaks

* fix: country borders file removed

* fix: conflict fix

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.90.1",
+		"@kiva/kv-components": "^3.91.0",
 		"@kiva/kv-shop": "^1.12.8",
 		"@kiva/kv-tokens": "^2.11.1",
 		"@mdi/js": "^7",

src/components/LenderProfile/LenderMap.vue

@@ -0,0 +1,180 @@
+<template>
+	<section v-if="countriesData.length > 0">
+		<h4 class="data-hj-suppress tw-mb-2">
+			{{ lenderMapTitle }}
+		</h4>
+		<kv-map
+			class="
+				tw-rounded
+				tw-overflow-hidden
+				tw-mb-3
+			"
+			:auto-zoom-delay="500"
+			:aspect-ratio="1.8"
+			:lat="30"
+			:long="1"
+			:zoom-level="2"
+			:use-leaflet="true"
+			:show-zoom-control="true"
+			:allow-dragging="true"
+			:show-labels="false"
+			:countries-data="countriesData"
+			:show-fundraising-loans="showFundraisingLoans"
+			@country-lend-filter="countryFilterClicked"
+		/>
+		<div>
+			<p class="tw-mb-1 tw-font-medium">
+				Legend:
+			</p>
+			<div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-3 tw-gap-2">
+				<div
+					v-for="legend in legendData"
+					:key="legend.color"
+					class="tw-flex tw-items-start tw-gap-1"
+				>
+					<span
+						:class="[
+							'tw-w-4',
+							'tw-h-2',
+							'tw-border',
+							legend.color,
+						]"
+					></span>
+					<p class="tw-text-small tw-font-medium">
+						{{ legend.label }}
+					</p>
+				</div>
+			</div>
+			<div class="tw-flex tw-items-center tw-gap-1 tw-mt-2">
+				<span
+					class="tw-w-1 tw-h-1 tw-border tw-rounded-full tw-bg-brand-900"
+				></span>
+				<p class="tw-text-small tw-font-medium">
+					Fundraising loans
+				</p>
+			</div>
+		</div>
+		<div class="tw-mt-3">
+			<p class="tw-mb-1 tw-font-medium">
+				Options:
+			</p>
+			<kv-checkbox
+				class="tw-text-small tw-font-medium custom-checkbox"
+				v-model="showFundraisingLoans"
+			>
+				Show fundraising loans
+			</kv-checkbox>
+		</div>
+	</section>
+</template>
+
+<script>
+import numeral from 'numeral';
+import KvCheckbox from '~/@kiva/kv-components/vue/KvCheckbox';
+import KvMap from '~/@kiva/kv-components/vue/KvMap';
+import { getLoansIntervals } from '~/@kiva/kv-components/utils/mapUtils';
+
+const mapColors = [
+	100,
+	300,
+	500,
+	650,
+	800,
+	1000,
+];
+
+export default {
+	name: 'LenderMap',
+	components: {
+		KvMap,
+		KvCheckbox,
+	},
+	props: {
+		lenderInfo: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			showFundraisingLoans: true,
+		};
+	},
+	computed: {
+		lenderMapTitle() {
+			return this.lenderInfo?.name
+				? `${this.lenderInfo.name}'s Lending Activity by Country`
+				: 'Lending Activity by Country';
+		},
+		countriesData() {
+			return (this.lenderInfo?.statsPerCountry?.values ?? []).map(stat => ({
+				label: stat.country?.name ?? '',
+				value: stat.loanCount ?? '',
+				lat: stat.country?.geocode?.latitude ?? 0,
+				long: stat.country?.geocode?.longitude ?? 0,
+				isoCode: stat.country?.isoCode ?? '',
+				numLoansFundraising: stat.country?.numLoansFundraising ?? 0,
+			}));
+		},
+		legendData() {
+			const legendLabels = [];
+			const loanCountsArray = [];
+			this.countriesData.forEach(country => {
+				loanCountsArray.push(country.value);
+			});
+
+			const maxNumLoansToOneCountry = Math.max(...loanCountsArray);
+			const intervals = getLoansIntervals(1, maxNumLoansToOneCountry, 6);
+
+			if (intervals.length === 1) {
+				const [inf, sup] = intervals[0]; // eslint-disable-line no-unused-vars
+
+				for (let i = 0; i < sup; i += 1) {
+					const loansNumber = i + 1;
+					const label = `${loansNumber} loan${loansNumber > 1 ? 's' : ''} made`;
+
+					legendLabels.push({
+						color: `tw-bg-brand-${mapColors[i]}`,
+						label,
+					});
+				}
+			} else {
+				intervals.forEach((interval, index) => {
+					const [inf, sup] = interval;
+					const formattedInf = numeral(inf).format('0,0');
+					const formattedSup = numeral(sup).format('0,0');
+
+					let label = `${formattedInf} - ${formattedSup} loans made`;
+					if (inf === sup) {
+						label = `${formattedInf} loans made`;
+					}
+
+					legendLabels.push({
+						color: `tw-bg-brand-${mapColors[index]}`,
+						label,
+					});
+				});
+			}
+
+			return legendLabels;
+		},
+
+	},
+	methods: {
+		countryFilterClicked(countryIso) {
+			this.$router.push({
+				path: '/lend/filter',
+				query: {
+					country: countryIso,
+				},
+			});
+		},
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+.custom-checkbox ::v-deep label > div:first-of-type {
+	@apply tw-w-2 tw-h-2;
+}
+</style>

src/graphql/query/lenderPublicProfile.graphql

@@ -24,6 +24,12 @@ query LenderPublicProfile ($publicId: String!) {
 					loanCount
 					country {
 						name
+						numLoansFundraising
+						geocode {
+							latitude
+							longitude
+						}
+						isoCode
 					}
 				}
 			}

src/pages/LenderProfile/LenderProfile.vue

@@ -1,7 +1,7 @@
 <template>
 	<www-page>
 		<kv-page-container
-			class="tw-py-2"
+			class="tw-pt-4 tw-pb-8"
 		>
 			<lender-summary
 				:public-id="publicId"
@@ -37,6 +37,10 @@
 			<lender-stats
 				:lender-info="lenderInfo"
 			/>
+
+			<lender-map
+				:lender-info="lenderInfo"
+			/>
 		</kv-page-container>
 	</www-page>
 </template>
@@ -52,6 +56,7 @@ import LenderTeamsList from '@/components/LenderProfile/LenderTeamsList';
 import LenderBadges from '@/components/LenderProfile/LenderBadges';
 import LenderInviteesList from '@/components/LenderProfile/LenderInviteesList';
 import LenderDedicationsList from '@/components/LenderProfile/LenderDedicationsList';
+import LenderMap from '@/components/LenderProfile/LenderMap';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
 
 export default {
@@ -67,6 +72,7 @@ export default {
 		LenderBadges,
 		LenderInviteesList,
 		LenderDedicationsList,
+		LenderMap,
 	},
 	metaInfo() {
 		return {