@kiva/kv-components 3.47.0 → 3.48.1

package/utils/mapAnimation.js

@@ -0,0 +1,272 @@
+/**
+ * Code to generate random coordinates
+ * */
+function getRandomInRange(from, to, fixed) {
+	return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
+	// .toFixed() returns string, so ' * 1' is a trick to convert to number
+}
+const randomCoordinates = Array.from(
+	{ length: 20 },
+	() => [getRandomInRange(-180, 180, 3), getRandomInRange(-90, 90, 3)],
+);
+
+/**
+ * Given 2 coordinates and the number of steps return an array of coordinates in between
+ * @param {Array} startCoordinates - starting coordinates in the format [latitude, longitude]
+ * @param {Array} endCoordinates - ending coordinates in the format [latitude, longitude]
+ * @param {Number} numberOfSteps - number of steps to take between the start and end coordinates
+ * @returns {Array} - array of coordinates in the format [[latitude, longitude], [latitude, longitude]]
+*/
+export function getCoordinatesBetween(startCoordinates, endCoordinates, numberOfSteps) {
+	// All invalid inputs should return an empty array
+	if (!startCoordinates
+		|| !endCoordinates
+		|| !numberOfSteps
+		|| numberOfSteps < 1
+		|| !Array.isArray(startCoordinates)
+		|| !Array.isArray(endCoordinates)
+		|| startCoordinates.length !== 2 || endCoordinates.length !== 2) {
+		return [];
+	}
+	const diffX = endCoordinates[0] - startCoordinates[0];
+	const diffY = endCoordinates[1] - startCoordinates[1];
+
+	const sfX = diffX / numberOfSteps;
+	const sfY = diffY / numberOfSteps;
+
+	let i = 0;
+	let j = 0;
+
+	const lineCoordinates = [];
+
+	while (Math.abs(i) < Math.abs(diffX) || Math.abs(j) < Math.abs(diffY)) {
+		lineCoordinates.push([startCoordinates[0] + i, startCoordinates[1] + j]);
+
+		if (Math.abs(i) < Math.abs(diffX)) {
+			i += sfX;
+		}
+
+		if (Math.abs(j) < Math.abs(diffY)) {
+			j += sfY;
+		}
+	}
+	// Because of rounding errors, lets push the exact end coordinates
+	// as the last item in the array to make sure the line ends precisely
+	lineCoordinates[lineCoordinates.length - 1] = [endCoordinates[0], endCoordinates[1]];
+	return lineCoordinates;
+}
+
+/**
+ * This function animates a series of lines from an array of starting coordinates to a single end point
+ * then animates removing the line from the origin to the end point
+ * returns a promise when the animation is complete
+ * @param {Map Instance} mapInstance - the map instance
+ * @param {Array} originPoints - array of starting coordinates in the format [[latitude, longitude], [latitude, longitude]]
+ * @param {Array} endPoint - single end point in the format [latitude, longitude]
+ * @returns {Promise} - promise that resolves when the animation is complete
+*/
+function animateLines(mapInstance, originPoints, endPoint) {
+	const speedFactor = 100; // number of frames per degree, controls animation speed
+	return new Promise((resolve) => {
+		// EndPoint
+		mapInstance.addSource('endpoint', {
+			type: 'geojson',
+			data: {
+				type: 'Point',
+				coordinates: [
+					endPoint[0], endPoint[1],
+				],
+			},
+		});
+
+		const lineFlight = (startCoordinates, endCoordinates, index, lastLine = false) => {
+			const lineCoordinates = getCoordinatesBetween(startCoordinates, endCoordinates, speedFactor);
+			let animationCounter = 0;
+
+			// Create a GeoJSON source with an empty lineString.
+			const geojson = {
+				type: 'FeatureCollection',
+				features: [{
+					type: 'Feature',
+					geometry: {
+						type: 'LineString',
+						coordinates: [],
+					},
+				}],
+			};
+
+			// Start Point
+			mapInstance.addSource(`startPoint${index}`, {
+				type: 'geojson',
+				data: {
+					type: 'Point',
+					coordinates: [
+						startCoordinates[0], startCoordinates[1],
+					],
+				},
+			});
+
+			// Line
+			mapInstance.addLayer({
+				id: `line-animation${index}`,
+				type: 'line',
+				source: {
+					type: 'geojson',
+					data: geojson,
+				},
+				layout: {
+					'line-cap': 'round',
+					'line-join': 'round',
+				},
+				paint: {
+					'line-color': '#277056',
+					'line-width': 2,
+				},
+			});
+
+			const animateLine = () => {
+				if (animationCounter < lineCoordinates.length) {
+					geojson.features[0].geometry.coordinates.push(lineCoordinates[animationCounter]);
+					mapInstance.getSource(`line-animation${index}`).setData(geojson);
+
+					requestAnimationFrame(animateLine);
+					animationCounter += 1;
+				} else {
+					// This else block is for animating line removal from start to end
+					const coord = geojson.features[0].geometry.coordinates;
+					// remove 2 points at a time so the removal is twice as fast as the line creation
+					coord.shift();
+					coord.shift();
+
+					if (coord.length > 0) {
+						geojson.features[0].geometry.coordinates = coord;
+						mapInstance.getSource(`line-animation${index}`).setData(geojson);
+						requestAnimationFrame(animateLine);
+					} else {
+						// remove all sources to allow for new animation
+						mapInstance.removeLayer(`line-animation${index}`);
+						mapInstance.removeSource(`line-animation${index}`);
+						mapInstance.removeSource(`startPoint${index}`);
+
+						if (lastLine) {
+							mapInstance.removeSource('endpoint');
+							resolve();
+						}
+					}
+				}
+			};
+
+			animateLine();
+		};
+
+		originPoints.forEach((coordinate, index) => {
+			lineFlight(coordinate, endPoint, index, index === originPoints.length - 1);
+		});
+	});
+}
+
+/**
+ * This function generates a map marker for each borrowerPoint
+ * @param {Map Instance} mapInstance - the map instance
+ * @param {Array} borrowerPoints - array of borrower objects
+ * @returns {void}
+ * */
+export function generateMapMarkers(mapInstance, borrowerPoints) {
+	const geojson = {
+		type: 'FeatureCollection',
+	};
+
+	geojson.features = borrowerPoints.map((borrower) => ({
+		type: 'Feature',
+		properties: {
+			message: 'test',
+			image: borrower.image,
+			iconSize: [80, 80],
+		},
+		geometry: {
+			type: 'Point',
+			coordinates: borrower.location,
+		},
+	}));
+	// add markers to map
+	geojson.features.forEach((marker) => {
+		// create a DOM element for the marker
+		const el = document.createElement('div');
+		el.className = 'map-marker';
+		el.style.backgroundImage = `url(${marker.properties.image})`;
+		el.style.width = `${marker.properties.iconSize[0]}px`;
+		el.style.height = `${marker.properties.iconSize[1]}px`;
+
+		// Possible place to add an event listener
+		// el.addEventListener('click', () => {
+		// 	window.alert(marker.properties.message);
+		// });
+
+		// add marker to map
+		// maplibregl should be defined in the KvMap component
+		// eslint-disable-next-line no-undef
+		new maplibregl.Marker({ element: el })
+			.setLngLat(marker.geometry.coordinates)
+			.addTo(mapInstance);
+	});
+}
+
+/**
+ * This function animates a series of lines from an array of starting coordinates to a single end point
+ * then animates removing the line from the origin to the end point
+ * then flies to the next point in the array and repeats the animation
+ * returns a promise when the animation is complete
+ * @param {Map Instance} mapInstance - the map instance
+ * @param {Array} borrowerPoints - array of borrower objects
+ * @returns {Promise} - promise that resolves when the animation is complete
+ * */
+export function animationCoordinator(mapInstance, borrowerPoints) {
+	return new Promise((resolve) => {
+		const destinationPoints = borrowerPoints.map((borrower) => borrower.location);
+		const totalNumberOfPoints = destinationPoints.length;
+		let currentPointIndex = 0;
+
+		const flyToPoint = (index) => {
+			mapInstance.flyTo({
+			// These options control the ending camera position: centered at
+			// the target, at zoom level 9, and north up.
+				center: destinationPoints[index],
+				zoom: 4,
+				bearing: 0,
+
+				// These options control the flight curve, making it move
+				// slowly and zoom out almost completely before starting
+				// to pan.
+				speed: 0.9, // make the flying slow
+				curve: 1, // change the speed at which it zooms out
+
+				// This can be any easing function: it takes a number between
+				// 0 and 1 and returns another number between 0 and 1.
+				easing(t) {
+					return t;
+				},
+
+				// this animation is considered essential with respect to prefers-reduced-motion
+				essential: true,
+			}, { flyEnd: true });
+		};
+
+		// This will trigger the next steps in the animation chain
+		mapInstance.on('moveend', (event) => {
+			if (event.flyEnd === true) {
+				animateLines(mapInstance, randomCoordinates, destinationPoints[currentPointIndex])
+					.then(() => {
+						if (currentPointIndex < totalNumberOfPoints - 1) {
+							currentPointIndex += 1;
+							flyToPoint(currentPointIndex);
+						} else {
+							resolve();
+						}
+					});
+			}
+		});
+
+		// fly to point 1
+		flyToPoint(currentPointIndex);
+	});
+}

package/vue/KvBorrowerImage.vue

@@ -146,8 +146,17 @@ export default {
 			if (!width && !height && !square && !faceZoom) {
 				return '';
 			}
-			const w = width ? `w${Math.ceil(width)}` : '';
-			const h = height ? `h${Math.ceil(height)}` : '';
+			let w = '';
+			let h = '';
+			// If width and height are different, use w and h
+			if (width === height) {
+				// if height and width are the same, use square param
+				// eslint-disable-next-line no-param-reassign
+				square = width;
+			} else {
+				w = width ? `w${Math.ceil(width)}` : '';
+				h = height ? `h${Math.ceil(height)}` : '';
+			}
 			const s = square ? `s${Math.ceil(square)}` : '';
 			const fz = faceZoom ? `fz${Math.ceil(faceZoom)}` : '';
 

package/vue/KvClassicLoanCard.vue

@@ -181,7 +181,7 @@
 			>
 				<kv-loan-progress-group
 					id="loanProgress"
-					:money-left="unreservedAmount"
+					:money-left="`${unreservedAmount}`"
 					:progress-percent="fundraisingPercent"
 					class="tw-text-black"
 				/>
@@ -220,7 +220,8 @@
 </template>
 
 <script>
-import { mdiMapMarker } from '@mdi/js';
+import { loanCardComputedProperties, loanCardMethods } from '../utils/loanCard';
+
 import KvLoanUse from './KvLoanUse.vue';
 import KvBorrowerImage from './KvBorrowerImage.vue';
 import KvLoanProgressGroup from './KvLoanProgressGroup.vue';
@@ -231,12 +232,6 @@ import KvLoanTag from './KvLoanTag.vue';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
 
-const LSE_LOAN_KEY = 'N/A';
-const ECO_FRIENDLY_KEY = 'ECO-FRIENDLY';
-const SUSTAINABLE_AG_KEY = 'SUSTAINABLE AG';
-const SINGLE_PARENT_KEY = 'SINGLE PARENT';
-const REFUGEE_KEY = 'REFUGEES/DISPLACED';
-
 export default {
 	name: 'KvClassicLoanCard',
 	components: {
@@ -263,10 +258,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		useFullWidth: {
-			type: Boolean,
-			default: false,
-		},
 		showTags: {
 			type: Boolean,
 			default: false,
@@ -279,10 +270,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		largeCard: {
-			type: Boolean,
-			default: false,
-		},
 		isAdding: {
 			type: Boolean,
 			default: false,
@@ -335,80 +322,77 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		customCallouts: {
+			type: Array,
+			default: () => ([]),
+		},
+		useFullWidth: {
+			type: Boolean,
+			default: false,
+		},
+		largeCard: {
+			type: Boolean,
+			default: false,
+		},
 	},
-	data() {
+	setup(props) {
+		const {
+			allDataLoaded,
+			borrowerName,
+			city,
+			countryName,
+			distributionModel,
+			formattedLocation,
+			fundraisingPercent,
+			hasProgressData,
+			imageHash,
+			isLoading,
+			loanAmount,
+			loanBorrowerCount,
+			loanCallouts,
+			loanStatus,
+			loanUse,
+			mdiMapMarker,
+			readMorePath,
+			state,
+			tag,
+			unreservedAmount,
+		} = loanCardComputedProperties(props);
+
+		const {
+			clickReadMore,
+			showLoanDetails,
+		} = loanCardMethods(props);
+
 		return {
+			allDataLoaded,
+			borrowerName,
+			city,
+			countryName,
+			distributionModel,
+			formattedLocation,
+			fundraisingPercent,
+			hasProgressData,
+			imageHash,
+			isLoading,
+			loanAmount,
+			loanBorrowerCount,
+			loanCallouts,
+			loanStatus,
+			loanUse,
 			mdiMapMarker,
+			readMorePath,
+			state,
+			tag,
+			unreservedAmount,
+			clickReadMore,
+			showLoanDetails,
 		};
 	},
 	computed: {
-		tag() {
-			return this.externalLinks ? 'a' : 'router-link';
-		},
-		readMorePath() {
-			return this.customLoanDetails ? '' : `/lend/${this.loanId}`;
-		},
-		isLoading() {
-			return !this.loanId || !this.loan;
-		},
 		cardWidth() {
 			return this.useFullWidth ? '100%' : '374px';
 		},
-		borrowerName() {
-			return this.loan?.name || '';
-		},
-		countryName() {
-			return this.loan?.geocode?.country?.name || '';
-		},
-		city() {
-			return this.loan?.geocode?.city || '';
-		},
-		state() {
-			return this.loan?.geocode?.state || '';
-		},
-		distributionModel() {
-			return this.loan?.distributionModel || '';
-		},
-		imageHash() {
-			return this.loan?.image?.hash ?? '';
-		},
-		hasProgressData() {
-			// Local resolver values for the progress bar load client-side
-			return typeof this.loan?.unreservedAmount !== 'undefined'
-				&& typeof this.loan?.fundraisingPercent !== 'undefined';
-		},
-		allDataLoaded() {
-			return !this.isLoading && this.hasProgressData;
-		},
-		fundraisingPercent() {
-			return this.loan?.fundraisingPercent ?? 0;
-		},
-		unreservedAmount() {
-			return this.loan?.unreservedAmount ?? '0';
-		},
-		formattedLocation() {
-			if (this.distributionModel === 'direct') {
-				const formattedString = `${this.city}, ${this.state}, ${this.countryName}`;
-				return formattedString;
-			}
-			if (this.countryName === 'Puerto Rico') {
-				const formattedString = `${this.city}, PR`;
-				return formattedString;
-			}
-			return this.countryName;
-		},
-		loanUse() {
-			return this.loan?.use ?? '';
-		},
-		loanStatus() {
-			return this.loan?.status ?? '';
-		},
-		loanAmount() {
-			return this.loan?.loanAmount ?? '0';
-		},
-		loanBorrowerCount() {
-			return this.loan?.borrowerCount ?? 0;
-		},
 		imageAspectRatio() {
 			if (this.largeCard) {
 				return 5 / 8;
@@ -430,95 +414,12 @@ export default {
 				{ width: 335, viewSize: 375 },
 			];
 		},
-		loanCallouts() {
-			const callouts = [];
-			const activityName = this.loan?.activity?.name ?? '';
-			const sectorName = this.loan?.sector?.name ?? '';
-			const tags = this.loan?.tags?.filter((tag) => tag.charAt(0) === '#')
-				.map((tag) => tag.substring(1)) ?? [];
-			const themes = this.loan?.themes ?? [];
-			const categories = {
-				ecoFriendly: !!tags // eslint-disable-next-line max-len
-					.filter((t) => t.toUpperCase() === ECO_FRIENDLY_KEY || t.toUpperCase() === SUSTAINABLE_AG_KEY).length,
-				refugeesIdps: !!themes.filter((t) => t.toUpperCase() === REFUGEE_KEY).length,
-				singleParents: !!tags.filter((t) => t.toUpperCase() === SINGLE_PARENT_KEY).length,
-			};
-
-			const isLseLoan = this.loan?.partnerName?.toUpperCase().includes(LSE_LOAN_KEY);
-
-			// P1 Category
-			// Exp limited to: Eco-friendly, Refugees and IDPs, Single Parents
-			// Tag as first option for LSE loans
-			if (isLseLoan && tags.length) {
-				const position = Math.floor(Math.random() * tags.length);
-				const tag = tags[position];
-				callouts.push(tag);
-			}
-
-			if (!this.categoryPageName) {
-				if (categories.ecoFriendly // eslint-disable-next-line max-len
-					&& !callouts.find((c) => c.toUpperCase() === ECO_FRIENDLY_KEY || c.toUpperCase() === SUSTAINABLE_AG_KEY)) {
-					callouts.push('Eco-friendly');
-				} else if (categories.refugeesIdps) {
-					callouts.push('Refugees and IDPs');
-				} else if (categories.singleParents
-					&& !callouts.find((c) => c.toUpperCase() === SINGLE_PARENT_KEY)) {
-					callouts.push('Single Parent');
-				}
-			}
-
-			// P2 Activity
-			if (activityName && this.categoryPageName?.toUpperCase() !== activityName.toUpperCase()) {
-				callouts.push(activityName);
-			}
-
-			// P3 Sector
-			if (sectorName
-				&& (activityName.toUpperCase() !== sectorName.toUpperCase())
-				&& (sectorName.toUpperCase() !== this.categoryPageName?.toUpperCase())
-				&& callouts.length < 2) {
-				callouts.push(sectorName);
-			}
-
-			// P4 Tag
-			if (!!tags.length && callouts.length < 2) {
-				const position = Math.floor(Math.random() * tags.length);
-				const tag = tags[position];
-				if (!callouts.filter((c) => c.toUpperCase() === tag.toUpperCase()).length) {
-					callouts.push(tag);
-				}
-			}
-
-			// P5 Theme
-			if (!!themes.length && callouts.length < 2) {
-				const position = Math.floor(Math.random() * themes.length);
-				const theme = themes[position];
-				if (!callouts.filter((c) => c.toUpperCase() === theme.toUpperCase()).length
-					&& theme.toUpperCase() !== this.categoryPageName?.toUpperCase()) {
-					callouts.push(theme);
-				}
-			}
-
-			// Only show one callout for LSE loans
-			if (isLseLoan && callouts.length > 1) return [callouts.shift()];
-			return callouts;
-		},
-	},
-	methods: {
-		showLoanDetails(e) {
-			if (this.customLoanDetails) {
-				e.preventDefault();
-				this.$emit('show-loan-details');
-			}
-		},
-		clickReadMore(target) {
-			this.kvTrackFunction('Lending', 'click-Read more', target, this.loanId);
-		},
 	},
 };
 </script>
 
 <style lang="postcss" scoped>
+/** Shared with KvWideLoanCard */
 .loan-card-use:hover,
 .loan-card-use:focus {
 	@apply tw-text-primary;