@kiva/kv-components 3.90.4 → 3.91.0

package/tests/unit/specs/utils/{mapAnimationUtils.spec.js → mapUtils.spec.js}

@@ -1,8 +1,12 @@
+import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
 import {
 	getCoordinatesBetween,
-} from '../../../../utils/mapAnimation';
+	getLoansIntervals,
+	getCountryColor,
+} from '../../../../utils/mapUtils';
+import mockLenderCountries from '../../../fixtures/mockLenderCountries';
 
-describe('mapAnimation', () => {
+describe('mapUtils', () => {
 	describe('getCoordinatesBetween', () => {
 		it('should return empty array if inputs are invalid', () => {
 			expect(getCoordinatesBetween([100, 88], undefined, 10)).toStrictEqual([]);
@@ -10,6 +14,7 @@ describe('mapAnimation', () => {
 			expect(getCoordinatesBetween(undefined, undefined, 0)).toStrictEqual([]);
 			expect(getCoordinatesBetween(undefined, [-89, -89], 0)).toStrictEqual([]);
 		});
+
 		it('should return an array of steps', () => {
 			expect(getCoordinatesBetween([0, 0], [100, 100], 10)).toStrictEqual(
 				[[0, 0], [10, 10], [20, 20], [30, 30], [40, 40], [50, 50], [60, 60], [70, 70], [80, 80], [100, 100]],
@@ -21,20 +26,47 @@ describe('mapAnimation', () => {
 				[[0, 0], [100, 101]],
 			);
 		});
+
 		it('should handle negative numbers', () => {
 			expect(getCoordinatesBetween([-10, -30], [-90, -45.123], 3)).toStrictEqual(
 				[[-10, -30], [-36.66666666666667, -35.041], [-90, -45.123]],
 			);
 		});
+
 		it('last item should be our exact endpoint', () => {
 			expect(getCoordinatesBetween([0, 0], [100, -180], 3)).toStrictEqual(
 				[[0, 0], [33.333333333333336, -60], [100, -180]],
 			);
 		});
+
 		it('should handle long decimals', () => {
 			expect(getCoordinatesBetween([0.123, 0.999], [100.123, 101.666], 3)).toStrictEqual(
 				[[0.123, 0.999], [33.45633333333333, 34.55466666666667], [100.123, 101.666]],
 			);
 		});
 	});
+
+	describe('getLoansIntervals', () => {
+		it('should return array of length 1 if max number is smaller than number of interval', () => {
+			const result = getLoansIntervals(1, 5, 6);
+			expect(result.length).toStrictEqual(1);
+		});
+
+		it('should dont overlap results', () => {
+			const result = getLoansIntervals(1, 30, 6);
+			expect(result[0][1]).not.toBe(result[1][0]);
+		});
+
+		it('should have a difference by one between intervals', () => {
+			const result = getLoansIntervals(1, 120, 6);
+			expect(result[0][1]).toBe(result[1][0] - 1);
+		});
+	});
+
+	describe('getCountryColor', () => {
+		it('should return #C4C4C4 gray as default color', () => {
+			const result = getCountryColor(0, mockLenderCountries, kvTokensPrimitives);
+			expect(result).toBe('#C4C4C4');
+		});
+	});
 });

package/utils/{mapAnimation.js → mapUtils.js}

@@ -1,3 +1,5 @@
+import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
+
 /**
  * Code to generate random coordinates
  * */
@@ -10,6 +12,18 @@ const randomCoordinates = Array.from(
 	() => [getRandomInRange(-180, 180, 3), getRandomInRange(-90, 90, 3)],
 );
 
+/**
+ * Color indexes for the map
+ * */
+const mapColors = [
+	100,
+	300,
+	500,
+	650,
+	800,
+	1000,
+];
+
 /**
  * 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]
@@ -270,3 +284,79 @@ export function animationCoordinator(mapInstance, borrowerPoints) {
 		flyToPoint(currentPointIndex);
 	});
 }
+
+/**
+ * This function returns an array of not overlapped intervals between min and max
+ * @param {Integer} min - min number of the interval
+ * @param {Integer} max - max number of the interval
+ * @param {Integer} nbIntervals - number of intervals
+ * @returns {Array} - array with intervals
+ * */
+export const getLoansIntervals = (min, max, nbIntervals) => {
+	const size = Math.floor((max - min) / nbIntervals);
+	const result = [];
+
+	if (size <= 0) return [[min, max]];
+
+	for (let i = 0; i < nbIntervals; i += 1) {
+		let inf = min + (i * size);
+		let sup = ((inf + size) < max) ? inf + size : max;
+
+		if (i > 0) {
+			inf += (1 * i);
+			sup += (1 * i);
+		}
+
+		if (i > 0 && sup > max) {
+			sup = max;
+		}
+
+		if (i === (nbIntervals - 1)) {
+			if (sup < max || sup > max) sup = max;
+		}
+
+		result.push([inf, sup]);
+
+		if (sup >= max) break;
+	}
+
+	return result;
+};
+
+/**
+ * This function returns the color of the country based on the number of loans
+ * @param {Integer} lenderLoans - number of loans per country
+ * @param {Array} countriesData - data of countries
+ * @param {Object} kvTokensPrimitives - kv tokens for colors
+ * @returns {String} - color of the country
+ * */
+export const getCountryColor = (lenderLoans, countriesData) => {
+	const loanCountsArray = [];
+	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;
+
+			if (lenderLoans && lenderLoans >= loansNumber && lenderLoans < loansNumber + 1) {
+				return kvTokensPrimitives.colors.brand[mapColors[i]];
+			}
+		}
+	} else {
+		for (let i = 0; i < intervals.length; i += 1) {
+			const [inf, sup] = intervals[i];
+			if (lenderLoans && lenderLoans >= inf && lenderLoans <= sup) {
+				return kvTokensPrimitives.colors.brand[mapColors[i]];
+			}
+		}
+	}
+
+	return kvTokensPrimitives.colors.gray[300];
+};

package/vue/KvIntroductionLoanCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="card-container"
+		class="tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1"
 		:class="{ 'tw-pointer-events-none' : isLoading }"
 		data-testid="loan-card"
 		style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);"
@@ -382,9 +382,6 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.card-container {
-	@apply tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1;
-}
 .loan-callouts >>> span {
 	@apply !tw-bg-transparent tw-text-brand;
 }

package/vue/KvMap.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script>
-import { animationCoordinator, generateMapMarkers } from '../utils/mapAnimation';
+import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
+import { animationCoordinator, generateMapMarkers, getCountryColor } from '../utils/mapUtils';
+import countriesBorders from '../data/countries-borders.json';
 
 export default {
 	name: 'KvMap',
@@ -115,6 +117,44 @@ export default {
 			required: false,
 			default: () => ({}),
 		},
+		/**
+		 * Show the zoom control
+		 */
+		showZoomControl: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Allow dragging of the map
+		 */
+		allowDragging: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Show labels on the map
+		 * Working for leaflet only
+		 */
+		showLabels: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Lender data for the map
+		 * Working for leaflet only
+		 */
+		countriesData: {
+			type: Array,
+			default: () => ([]),
+		},
+		/**
+		 * Show fundraising loans
+		 * Working for leaflet only
+		 */
+		showFundraisingLoans: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -154,6 +194,12 @@ export default {
 				this.initializeMap();
 			}
 		},
+		showFundraisingLoans() {
+			if (this.mapInstance) {
+				this.mapInstance.remove();
+				this.initializeLeaflet();
+			}
+		},
 	},
 	mounted() {
 		if (!this.mapLibreReady && !this.leafletReady) {
@@ -287,8 +333,8 @@ export default {
 				center: [this.lat, this.long],
 				zoom: this.initialZoom || this.zoomLevel,
 				// todo make props for the following options
-				dragging: false,
-				zoomControl: false,
+				dragging: this.allowDragging,
+				zoomControl: this.showZoomControl,
 				animate: true,
 				scrollWheelZoom: false,
 				doubleClickZoom: false,
@@ -296,12 +342,45 @@ export default {
 			});
 			/* eslint-disable quotes */
 			// Add our tileset to the mapInstance
-			L.tileLayer('https://api.maptiler.com/maps/bright/{z}/{x}/{y}.png?key=n1Mz5ziX3k6JfdjFe7mx', {
+			let tileLayer = 'https://api.maptiler.com/maps/landscape/{z}/{x}/{y}.png?key=n1Mz5ziX3k6JfdjFe7mx';
+			if (this.showLabels) {
+				tileLayer = 'https://api.maptiler.com/maps/bright/{z}/{x}/{y}.png?key=n1Mz5ziX3k6JfdjFe7mx';
+			}
+			L.tileLayer(tileLayer, {
 				tileSize: 512,
 				zoomOffset: -1,
 				minZoom: 1,
 				crossOrigin: true,
 			}).addTo(this.mapInstance);
+
+			if (this.countriesData.length > 0) {
+				L.geoJson(
+					this.getCountriesData(),
+					{
+						style: this.countryStyle,
+						onEachFeature: this.onEachCountryFeature,
+					},
+				).addTo(this.mapInstance);
+
+				this.countriesData.forEach((country) => {
+					if (country.numLoansFundraising > 0 && this.showFundraisingLoans) {
+						const circle = L.circle([country.lat, country.long], {
+							color: kvTokensPrimitives.colors.black,
+							weight: 1,
+							fillColor: kvTokensPrimitives.colors.brand[900],
+							fillOpacity: 1,
+							radius: 130000,
+						}).addTo(this.mapInstance);
+
+						const tooltipText = `Click to see ${country.numLoansFundraising} fundraising loans in ${country.label}`;
+						circle.bindTooltip(tooltipText);
+
+						circle.on('click', () => {
+							this.circleMapClicked(country.isoCode);
+						});
+					}
+				});
+			}
 			/* eslint-enable quotes */
 			/* eslint-enable no-undef, max-len */
 
@@ -314,19 +393,28 @@ export default {
 		},
 		initializeMapLibre() {
 			// Initialize primary mapInstance
-			// eslint-disable-next-line no-undef
+			/* eslint-disable no-undef */
+			let tileLayer = 'https://api.maptiler.com/maps/landscape/style.json?key=n1Mz5ziX3k6JfdjFe7mx';
+			if (this.showLabels) {
+				tileLayer = 'https://api.maptiler.com/maps/bright/style.json?key=n1Mz5ziX3k6JfdjFe7mx';
+			}
+
 			this.mapInstance = new maplibregl.Map({
 				container: `kv-map-holder-${this.mapId}`,
-				style: 'https://api.maptiler.com/maps/bright/style.json?key=n1Mz5ziX3k6JfdjFe7mx',
+				style: tileLayer,
 				center: [this.long, this.lat],
 				zoom: this.initialZoom || this.zoomLevel,
 				attributionControl: false,
-				dragPan: false,
+				dragPan: this.allowDragging,
 				scrollZoom: false,
 				doubleClickZoom: false,
 				dragRotate: false,
 			});
 
+			if (this.showZoomControl) {
+				this.mapInstance.addControl(new maplibregl.NavigationControl());
+			}
+
 			this.mapInstance.on('load', () => {
 				// signify map has loaded
 				this.mapLoaded = true;
@@ -335,6 +423,7 @@ export default {
 					this.createWrapperObserver();
 				}
 			});
+			/* eslint-enable no-undef */
 		},
 		animateMap() {
 			// remove country labels
@@ -408,6 +497,60 @@ export default {
 				}, timeout);
 			});
 		},
+		getCountriesData() {
+			const countriesFeatures = countriesBorders.features ?? [];
+
+			countriesFeatures.forEach((country, index) => {
+				const countryData = this.countriesData.find((data) => data.isoCode === country.properties.ISO_A2);
+				if (countryData) {
+					countriesFeatures[index].lenderLoans = countryData.value;
+					countriesFeatures[index].numLoansFundraising = countryData.numLoansFundraising;
+				}
+			});
+
+			return countriesBorders;
+		},
+		countryStyle(feature) {
+			return {
+				color: kvTokensPrimitives.colors.white,
+				fillColor: getCountryColor(feature.lenderLoans, this.countriesData),
+				weight: 1,
+				fillOpacity: 1,
+			};
+		},
+		onEachCountryFeature(feature, layer) {
+			const loansString = feature.lenderLoans
+				? `${feature.lenderLoans} loan${feature.lenderLoans > 1 ? 's' : ''}`
+				: '0 loans';
+			const countryString = `${feature.properties.NAME} <br/> ${loansString}`;
+
+			layer.bindTooltip(countryString, {
+				sticky: true,
+			});
+
+			layer.on({
+				mouseover: this.highlightFeature,
+				mouseout: this.resetHighlight,
+			});
+		},
+		highlightFeature(e) {
+			const layer = e.target;
+
+			layer.setStyle({
+				fillColor: kvTokensPrimitives.colors.gray[500],
+			});
+		},
+		resetHighlight(e) {
+			const layer = e.target;
+			const { feature } = layer;
+
+			layer.setStyle({
+				fillColor: getCountryColor(feature.lenderLoans, this.countriesData),
+			});
+		},
+		circleMapClicked(countryIso) {
+			this.$emit('country-lend-filter', countryIso);
+		},
 	},
 };
 </script>

package/vue/stories/KvMap.stories.js

@@ -1,3 +1,4 @@
+import mockLenderCountries from '../../tests/fixtures/mockLenderCountries';
 import KvMap from '../KvMap.vue';
 
 export default {
@@ -32,6 +33,11 @@ const Template = (args, { argTypes }) => ({
 		:width="width"
 		:zoom-level="zoomLevel"
 		:advanced-animation="advancedAnimation"
+		:show-zoom-control="showZoomControl"
+		:allow-dragging="allowDragging"
+		:show-labels="showLabels"
+		:countries-data="countriesData"
+		:show-fundraising-loans="showFundraisingLoans"
 	/>`,
 });
 
@@ -98,3 +104,18 @@ AdvancedAnimation.args = {
 	long: -31.690,
 	advancedAnimation,
 };
+
+export const LoansMap = Template.bind({});
+LoansMap.args = {
+	autoZoomDelay: 500,
+	aspectRatio: 1.8,
+	lat: 30,
+	long: 1,
+	zoomLevel: 2,
+	useLeaflet: true,
+	showZoomControl: true,
+	allowDragging: true,
+	showLabels: false,
+	countriesData: mockLenderCountries,
+	showFundraisingLoans: true,
+};