@kiva/kv-components 3.93.0 → 3.95.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.95.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.94.0...@kiva/kv-components@3.95.0) (2024-08-28)
+
+
+### Bug Fixes
+
+* add story for long borrower name ([da58fc9](https://github.com/kiva/kv-ui-elements/commit/da58fc9a078626577370eea41a0d9336edc2c74e))
+* allow new card to be pull width ([59488dc](https://github.com/kiva/kv-ui-elements/commit/59488dc7e9550d8df38f73fe0b859844e65c6576))
+* fully funded card ([17a9156](https://github.com/kiva/kv-ui-elements/commit/17a9156fc8003f2a19feb030cfe1e1ba369222dc))
+* general new loan card styling tweaks ([dac3bb1](https://github.com/kiva/kv-ui-elements/commit/dac3bb14d62c97b04e7979e0c512edc4c90634c8))
+* hide country for US loans ([5353e0f](https://github.com/kiva/kv-ui-elements/commit/5353e0f9b1678d013becf7775bb4c408cf72887a))
+* one more small styling change ([042da40](https://github.com/kiva/kv-ui-elements/commit/042da402e089805260f4e465c8d237baf6bfe642))
+
+
+### Features
+
+* add emojis and colors to loan tags ([8d002c2](https://github.com/kiva/kv-ui-elements/commit/8d002c25a243c305fae5113305a604c2f34746e4))
+
+
+
+
+
+# [3.94.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.93.0...@kiva/kv-components@3.94.0) (2024-08-23)
+
+
+### Features
+
+* charts added to library ([#447](https://github.com/kiva/kv-ui-elements/issues/447)) ([575bd80](https://github.com/kiva/kv-ui-elements/commit/575bd80fb1700a38732a2b8cafbeb5cc5374764b))
+
+
+
+
+
 # [3.93.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.92.1...@kiva/kv-components@3.93.0) (2024-08-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.93.0",
+  "version": "3.95.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -71,6 +71,8 @@
     "moment": "^2.29.4",
     "nanoid": "^3.1.23",
     "numeral": "^2.0.6",
+    "popper.js": "^1.16.1",
+    "treemap-squarify": "^1.0.1",
     "vue-demi": "^0.14.7"
   },
   "peerDependencies": {
@@ -82,5 +84,5 @@
       "optional": true
     }
   },
-  "gitHead": "56fc9a0c3f8657e2bc69c6acecf01009ec86ee57"
+  "gitHead": "5f8bc910fcf78e8ea410172056d9172c55dc80c0"
 }

package/utils/Alea.js

@@ -0,0 +1,92 @@
+/* eslint-disable no-plusplus, no-param-reassign, no-return-assign, no-bitwise, prefer-rest-params, func-names */
+
+/**
+ * The hash function used for Alea pseudo random number generator
+ *
+ * Johannes Baagøe <baagoe@baagoe.com>, 2010
+ * Licensed under the MIT license
+ *
+ * {@link https://github.com/nquinlan/better-random-numbers-for-javascript-mirror}
+ *
+ * @returns The hash of the provided data
+ */
+export function Mash() {
+	let n = 0xefc8249d;
+
+	const mash = function (data) {
+		data = data.toString();
+		for (let i = 0; i < data.length; i++) {
+			n += data.charCodeAt(i);
+			let h = 0.02519603282416938 * n;
+			n = h >>> 0;
+			h -= n;
+			h *= n;
+			n = h >>> 0;
+			h -= n;
+			n += h * 0x100000000; // 2^32
+		}
+		return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
+	};
+
+	mash.version = 'Mash 0.9';
+
+	return mash;
+}
+
+/**
+ * Pseudo random number generator that returns a repeatable set of random numbers when supplied matching seeds
+ *
+ * Johannes Baagøe <baagoe@baagoe.com>, 2010
+ * Licensed under the MIT license
+ *
+ * {@link https://github.com/nquinlan/better-random-numbers-for-javascript-mirror}
+ *
+ * @returns The seeded generator function
+ */
+export default function Alea() {
+	return (function (args) {
+		let s0 = 0;
+		let s1 = 0;
+		let s2 = 0;
+		let c = 1;
+
+		if (args.length === 0) {
+			args = [+new Date()];
+		}
+
+		let mash = Mash();
+		s0 = mash(' ');
+		s1 = mash(' ');
+		s2 = mash(' ');
+
+		for (let i = 0; i < args.length; i++) {
+			s0 -= mash(args[i]);
+			if (s0 < 0) {
+				s0 += 1;
+			}
+			s1 -= mash(args[i]);
+			if (s1 < 0) {
+				s1 += 1;
+			}
+			s2 -= mash(args[i]);
+			if (s2 < 0) {
+				s2 += 1;
+			}
+		}
+
+		mash = null;
+
+		const random = function () {
+			const t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
+			s0 = s1;
+			s1 = s2;
+			return s2 = t - (c = t | 0);
+		};
+
+		random.version = 'Alea 0.9';
+
+		random.args = args;
+
+		return random;
+	}(Array.prototype.slice.call(arguments)));
+}

package/utils/loanCard.js

@@ -21,6 +21,7 @@ export function loanCardComputedProperties(props) {
 		loan,
 		categoryPageName,
 		customCallouts,
+		hideUnitedStatesText,
 	} = toRefs(props);
 
 	const tag = computed(() => (externalLinks.value ? 'a' : 'router-link'));
@@ -49,7 +50,9 @@ export function loanCardComputedProperties(props) {
 
 	const formattedLocation = computed(() => {
 		if (distributionModel.value === 'direct') {
-			return `${city.value}, ${state.value}, ${countryName.value}`;
+			const countryText = hideUnitedStatesText?.value && countryName.value.toLowerCase() === 'united states'
+				? '' : `, ${countryName.value}`;
+			return `${city.value}, ${state.value}${countryText}`;
 		}
 		if (countryName.value === 'Puerto Rico') {
 			return `${city.value}, PR`;

package/utils/touchEvents.js

@@ -0,0 +1,22 @@
+// Attach a touchstart event handler to the immediate children of the body.
+// Useful for capturing the user tapping outside of a target element.
+export function onBodyTouchstart(handler) {
+	[...document.body.children].forEach((child) => child.addEventListener('touchstart', handler));
+}
+
+// Remove a touchstart event handler from the immediate children of the body
+export function offBodyTouchstart(handler) {
+	[...document.body.children].forEach((child) => child.removeEventListener('touchstart', handler));
+}
+
+// Returns true if the event target is any of the given elements or if the event target
+// is contained by any of the given elements.
+export function isTargetElement(event, elements) {
+	const els = Array.isArray(elements) ? elements : [elements];
+	for (let i = 0; i < els.length; i += 1) {
+		if (els[i] === event.target || els[i].contains(event.target)) {
+			return true;
+		}
+	}
+	return false;
+}

package/vue/KvIntroductionLoanCard.vue

@@ -1,10 +1,10 @@
 <template>
 	<div
-		class="tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1"
+		class="tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-2"
 		:class="{ 'tw-pointer-events-none' : isLoading }"
 		data-testid="loan-card"
-		style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);"
-		:style="{ minWidth: '230px', maxWidth: '20.5rem' }"
+		style="box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);"
+		:style="{ minWidth: '230px', maxWidth: cardWidth }"
 	>
 		<div class="tw-grow">
 			<div class="loan-card-active-hover">
@@ -63,9 +63,9 @@
 								style="padding: 2px 6px;"
 							>
 								<kv-flag
-									class="tw-mr-0.5"
+									class="tw-ml-0.5 tw-mr-1"
 									:country="countryCode"
-									width-override="0.725rem"
+									width-override="16px"
 									hide-border
 								/>
 								{{ formattedLocation }}
@@ -82,13 +82,14 @@
 					:style="{ width: '60%', height: '1.75rem', 'border-radius': '500rem' }"
 				/>
 
-				<h2
+				<h3
 					class="loan-card-name"
-					:class="{'tw-text-center': borrowerName.length < 20}"
+					:class="{ 'tw-text-center': borrowerName.length < 20 }"
+					style="font-size: 28px;"
 					@click="clickReadMore('Name', $event)"
 				>
 					{{ borrowerName }}
-				</h2>
+				</h3>
 
 				<!-- Loan tag -->
 
@@ -99,17 +100,17 @@
 					<kv-loading-placeholder
 						v-if="isLoading || typeof loanCallouts === 'undefined'"
 						class="tw-mt-0.5 tw-mb-1"
-						:style="{ width: '20%', height: '1.75rem', 'border-radius': '500rem' }"
+						:style="{ width: '20%', height: '1.65rem', 'border-radius': '500rem' }"
 					/>
 					<kv-loading-placeholder
 						v-if="isLoading || typeof loanCallouts === 'undefined'"
 						class="tw-mt-0.5 tw-mb-1"
-						:style="{ width: '20%', height: '1.75rem', 'border-radius': '500rem' }"
+						:style="{ width: '20%', height: '1.65rem', 'border-radius': '500rem' }"
 					/>
 					<kv-loading-placeholder
 						v-if="isLoading || typeof loanCallouts === 'undefined'"
 						class="tw-mt-0.5 tw-mb-1"
-						:style="{ width: '20%', height: '1.75rem', 'border-radius': '500rem' }"
+						:style="{ width: '20%', height: '1.65rem', 'border-radius': '500rem' }"
 					/>
 				</div>
 
@@ -139,7 +140,7 @@
 				>
 					<!-- Loan use  -->
 					<div
-						class="tw-pt-1 tw-px-1"
+						class="tw-pt-0.5 tw-px-2"
 						:class="{'tw-mb-1.5': !isLoading}"
 					>
 						<div
@@ -172,7 +173,7 @@
 			</div>
 		</div>
 
-		<div class="tw-px-1">
+		<div class="tw-px-2">
 			<!-- Fundraising -->
 			<div
 				v-if="!hasProgressData"
@@ -215,21 +216,28 @@
 				</component>
 			</div>
 
-			<!-- Loan Match -->
+			<!-- Loan Tag -->
 			<kv-loading-placeholder
 				v-if="isLoading"
-				class="tw-rounded tw-mx-auto tw-mt-1"
+				class="tw-rounded tw-mx-auto tw-mt-2"
 				:style="{ width: '9rem', height: '1rem' }"
 			/>
 
-			<div class="tw-pb-2.5">
-				<kv-loan-tag
-					v-if="matchingText"
-					:loan="loan"
-					variation="matched-loan"
-					class="tw-text-center !tw-text-brand"
-				/>
+			<div
+				v-else-if="isFunded"
+				class="tw-bg-eco-green-1 tw-text-action tw-text-center tw-py-1.5"
+				style="font-weight: bold; font-size: 13px; border-radius: 8px;"
+			>
+				🎉 Fully funded!
 			</div>
+
+			<kv-loan-tag
+				v-else
+				:loan="loan"
+				:use-expanded-styles="true"
+				style="font-size: 15px;"
+				class="tw-text-center tw-pt-2"
+			/>
 		</div>
 	</div>
 </template>
@@ -300,6 +308,10 @@ export default {
 			type: Object,
 			default: undefined,
 		},
+		useFullWidth: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const {
@@ -324,7 +336,7 @@ export default {
 			state,
 			tag,
 			unreservedAmount,
-		} = loanCardComputedProperties(props);
+		} = loanCardComputedProperties({ ...props, hideUnitedStatesText: true });
 
 		const {
 			clickReadMore,
@@ -356,6 +368,9 @@ export default {
 		};
 	},
 	computed: {
+		cardWidth() {
+			return this.useFullWidth ? '100%' : '20.5rem';
+		},
 		imageAspectRatio() {
 			return 5 / 8;
 		},
@@ -374,8 +389,8 @@ export default {
 			const amount = this.loan?.loanFundraisingInfo?.fundedAmount ?? 0;
 			return numeral(parseFloat(amount)).format('$0,0');
 		},
-		matchingText() {
-			return this.loan?.matchingText ?? '';
+		isFunded() {
+			return this.loan?.status === 'funded' || parseFloat(this.unreservedAmount) === 0;
 		},
 	},
 };
@@ -383,7 +398,7 @@ export default {
 
 <style lang="postcss" scoped>
 .loan-callouts >>> span {
-	@apply !tw-bg-transparent tw-text-brand;
+	@apply !tw-bg-transparent tw-text-action;
 }
 .loan-card-use:hover,
 .loan-card-use:focus {

package/vue/KvLoanTag.vue

@@ -2,7 +2,7 @@
 	<div
 		v-if="!!variation"
 		class="tw-text-small tw-font-medium tw-pt-0.5 tw-line-clamp-1"
-		style="color: #CE4A00;"
+		:style="{ color: tagColor }"
 	>
 		{{ tagText }}
 		<kv-countdown-timer
@@ -29,6 +29,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		useExpandedStyles: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -59,11 +63,22 @@ export default {
 		},
 		tagText() {
 			switch (this.variation) {
-				case 'lse-loan': return 'High community impact';
-				case 'almost-funded': return 'Almost funded';
-				case 'matched-loan': return `${this.matchRatio + 1}x matching by ${this.loan?.matchingText}`;
-				default: return 'Ending soon: ';
+				case 'lse-loan': return `${this.useExpandedStyles ? '⚡ ' : ''}High community impact`;
+				case 'almost-funded': return `${this.useExpandedStyles ? '💸 ' : ''}Almost funded`;
+				// eslint-disable-next-line max-len
+				case 'matched-loan': return `${this.useExpandedStyles ? '🤝 ' : ''}${this.matchRatio + 1}x matching by ${this.loan?.matchingText}`;
+				default: return `${this.useExpandedStyles ? '⏰ ' : ''}Ending soon: `;
+			}
+		},
+		tagColor() {
+			if (this.useExpandedStyles) {
+				switch (this.variation) {
+					case 'almost-funded': return '#AF741C';
+					case 'ending-soon': return '#CE2626';
+					default: return '#2B7C5F';
+				}
 			}
+			return '#CE4A00';
 		},
 		matchRatio() {
 			return this.loan?.matchRatio;

package/vue/KvPieChart.vue

@@ -0,0 +1,232 @@
+<template>
+	<figure
+		class="pie-chart tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-center tw-gap-2"
+		@mouseleave="activeSlice = null"
+	>
+		<!-- pie chart -->
+		<div class="tw-relative tw-h-full">
+			<div
+				v-if="loading"
+				class="pie-placeholder tw-h-full tw-p-2.5"
+			>
+				<div class="tw-overflow-hidden tw-rounded-full tw-h-full">
+					<kv-loading-placeholder />
+				</div>
+			</div>
+			<svg
+				v-else
+				class="tw-h-full"
+				viewBox="0 0 32 32"
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:xlink="http://www.w3.org/1999/xlink"
+			>
+				<path
+					v-for="(slice, index) in slices"
+					:key="index"
+					class="tw-origin-center tw-transition-transform"
+					:style="activeSlice === slice ? { transform: 'scale(1.1)' } : {}"
+					:d="slice.path"
+					:stroke="slice.color"
+					:stroke-width="lineWidth"
+					fill="none"
+					@mouseenter="activeSlice = slice"
+					@click="activeSlice = slice"
+				/>
+			</svg>
+			<!-- active slice -->
+			<div
+				v-if="activeSlice"
+				class="
+					tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2
+					tw-flex tw-flex-col tw-items-center tw-text-center"
+				style="max-width: 8.5rem;"
+			>
+				<div class="tw-font-medium tw-line-clamp-4">
+					{{ activeSlice.label }}
+				</div>
+				<div>
+					{{ activeSlice.value }} ({{ activeSlicePercent }})
+				</div>
+			</div>
+		</div>
+		<!-- key -->
+		<div
+			style="width: 14rem; height: 85%;"
+			class="tw-flex tw-flex-col tw-justify-between"
+		>
+			<ol class="tw-pl-4 md:tw-pl-0">
+				<li
+					v-for="(slice, index) in slices.slice(pageIndex * slicesPerPage, (pageIndex + 1) * slicesPerPage)"
+					:key="index"
+					class="tw-flex tw-items-center"
+					@mouseenter="activeSlice = slice"
+					@click="activeSlice = slice"
+				>
+					<div
+						class="tw-w-2 tw-h-2 tw-mr-1 tw-rounded-full tw-flex-none"
+						:style="{ backgroundColor: slice.color }"
+					></div>
+					<span class="tw-truncate">
+						{{ slice.label }}
+					</span>
+				</li>
+			</ol>
+			<!-- paging controls -->
+			<div
+				v-if="pageCount > 1"
+				class="tw-flex tw-justify-center md:tw-justify-start"
+			>
+				<button
+					:disabled="pageIndex === 0"
+					class="tw-font-medium tw-p-0.5 disabled:tw-opacity-low"
+					@click="prevPage"
+				>
+					&lt;
+				</button>
+				{{ pageIndex + 1 }} / {{ pageCount }}
+				<button
+					:disabled="pageIndex === pageCount - 1"
+					class="tw-font-medium tw-p-0.5 disabled:tw-opacity-low"
+					@click="nextPage"
+				>
+					&gt;
+				</button>
+			</div>
+		</div>
+	</figure>
+</template>
+
+<script>
+import numeral from 'numeral';
+import { ref, toRefs, computed } from 'vue-demi';
+import Alea from '../utils/Alea';
+import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
+
+// convenience function to get point on circumference of a given circle (from https://codepen.io/grieve/pen/xwGMJp)
+function circumPointFromAngle(cx, cy, r, a) {
+	return [
+		cx + r * Math.cos(a),
+		cy + r * Math.sin(a),
+	];
+}
+
+export default {
+	name: 'PieChartFigure',
+	components: {
+		KvLoadingPlaceholder,
+	},
+	props: {
+		loading: {
+			type: Boolean,
+			default: true,
+		},
+		values: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+	setup(props) {
+		const {
+			values,
+		} = toRefs(props);
+
+		const svgSize = ref(32);
+		const lineWidth = ref(5);
+		const activeSlice = ref(null);
+		const pageIndex = ref(0);
+		const slicesPerPage = ref(10);
+
+		const activeSlicePercent = computed(() => {
+			return activeSlice.value ? numeral(activeSlice.value.percent).format('0.00%') : '';
+		});
+
+		const radius = computed(() => {
+			return (svgSize.value / 2) - (lineWidth.value / 2) - 2;
+		});
+
+		const center = computed(() => {
+			return svgSize.value / 2;
+		});
+
+		const pickColor = (index) => {
+			const rng = new Alea('loans', index, 'kiva');
+			let color = '#';
+			for (let i = 0; i < 3; i += 1) {
+				color += Math.floor(rng() * 256).toString(16).padStart(2, '0');
+			}
+			return color;
+		};
+
+		const slices = computed(() => {
+			const slicesArr = [];
+			// center point
+			const cX = center.value;
+			const cY = cX;
+			// radius
+			const r = radius.value;
+			// starting angle
+			let start = -0.25;
+			// loop through each value and create a pie slice path
+			for (let i = 0; i < values.value.length; i += 1) {
+				const value = values.value[i];
+				const end = start + value.percent;
+				const [startX, startY] = circumPointFromAngle(cX, cY, r, start * Math.PI * 2);
+				const [endX, endY] = circumPointFromAngle(cX, cY, r, end * Math.PI * 2);
+				const largeArc = value.percent > 0.5 ? 1 : 0;
+				// Draw just the outer arc of the slice
+				const path = `M ${startX} ${startY} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY}`;
+				slicesArr.push({
+					...value,
+					path,
+					color: pickColor(i),
+				});
+				start = end;
+			}
+			return slicesArr;
+		});
+
+		const pageCount = computed(() => {
+			return Math.ceil(slices.value.length / slicesPerPage.value);
+		});
+
+		const prevPage = () => {
+			if (pageIndex.value > 0) {
+				pageIndex.value -= 1;
+			}
+		};
+		const nextPage = () => {
+			if (pageIndex.value < pageCount.value - 1) {
+				pageIndex.value += 1;
+			}
+		};
+
+		return {
+			svgSize,
+			lineWidth,
+			activeSlice,
+			pageIndex,
+			slicesPerPage,
+			activeSlicePercent,
+			radius,
+			center,
+			slices,
+			pageCount,
+			prevPage,
+			nextPage,
+		};
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+.pie-chart {
+	height: 40rem;
+	@screen md {
+		height: 20rem;
+	}
+}
+
+.pie-placeholder {
+	width: 20rem;
+}
+</style>