Skip to content

Commit

Permalink
Merge pull request #4973 from kiva/update-lending-insights-MARS-500
Browse files Browse the repository at this point in the history
  • Loading branch information
@christian14b
christian14b authored Sep 20, 2023
2 parents 1e71e34 + 995e0ed commit 17126b8
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 60 deletions.
16 changes: 0 additions & 16 deletions src/pages/Portfolio/ImpactDashboard/AccountOverview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,6 @@
{{ amountOutstanding | numeral('$0,0.00') }}
</dd>
</div>
<div class="tw-col-span-6">
<dt class="tw-text-h4">
Loans made
</dt>
<kv-loading-placeholder
v-if="loading"
class="placeholder tw-my-0.5 lg:tw-my-1"
style="width: 3rem;"
/>
<dd v-else class="tw-text-h2 tw-text-secondary">
{{ numberOfLoans | numeral('0,0') }}
</dd>
</div>
</dl>
<kv-button
class="tw-col-span-12 lg:tw-col-span-4"
Expand Down Expand Up @@ -88,7 +75,6 @@ export default {
loading: true,
amountOutstanding: 0,
balance: 0,
numberOfLoans: 0,
promoBalance: 0,
};
},
Expand All @@ -103,7 +89,6 @@ export default {
id
userStats {
amount_outstanding
number_of_loans
}
userAccount {
id
Expand All @@ -114,7 +99,6 @@ export default {
}`,
result({ data }) {
this.amountOutstanding = numeral(data?.my?.userStats?.amount_outstanding ?? 0).value();
this.numberOfLoans = data?.my?.userStats?.number_of_loans ?? 0;
this.balance = numeral(data?.my?.userAccount?.balance ?? 0).value();
this.promoBalance = numeral(data?.my?.userAccount?.promoBalance ?? 0).value();
this.loading = false;
Expand Down
103 changes: 59 additions & 44 deletions src/pages/Portfolio/ImpactDashboard/LendingInsights.vue
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,27 @@
<template>
<async-portfolio-section @visible="fetchAsyncData" data-testid="lending-insights">
<h2 class="tw-mb-3 md:tw-mb-2">
<async-portfolio-section @visible="fetchAsyncData" data-testid="lending-insights" class="!tw-bg-eco-green-4">
<h2 class="tw-mb-3 md:tw-mb-2 tw-text-white">
Your lending insights
</h2>
<kv-grid as="dl" class="tw-grid-cols-12">
<div class="tw-col-span-12 md:tw-col-span-6">
<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 4rem;" />
<dt v-show="!loading" class="stat-value">
{{ countryCount }}
</dt>
<dd class="stat-def">
Countries supported
</dd>
<router-link
to="/portfolio/lending-stats"
v-kv-track-event="['portfolio', 'click', 'countries-supported-details']"
>
Details
</router-link>
</div>
<div class="tw-col-span-12 md:tw-col-span-6">
<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 4rem;" />
<dt v-show="!loading" class="stat-value">
{{ inviteeLoanCount }}
</dt>
<dd class="stat-def">
Loans by your invitees
</dd>
<router-link
to="/portfolio/invites#myInviteActivity"
v-kv-track-event="['portfolio', 'click', 'invitee-loans-details']"
>
Details
</router-link>
</div>
<div class="tw-col-span-12 md:tw-col-span-6">
<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 10rem;" />
<kv-grid as="dl" class="tw-grid-cols-12 tw-p-1.5 tw-rounded tw-bg-white/5">
<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 7rem;" />
<dt v-show="!loading" class="stat-value">
{{ amountLent }}
</dt>
<dd class="stat-def">
Total amount lent
</dd>
<router-link
class="stat-link"
to="/portfolio/loans"
v-kv-track-event="['portfolio', 'click', 'total-amount-lent-details']"
>
Details
<kv-material-icon
class="tw-ml-0.5 tw-w-2 tw-h-2"
:icon="mdiArrowRight"
/>
</router-link>
<!-- <button
class="tw-text-link"
Expand All @@ -63,13 +38,46 @@
<loan-count-over-time-figure />
</kv-lightbox> -->
</div>
<div class="tw-col-span-12 md:tw-col-span-6">
<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
<kv-loading-placeholder
v-if="loading"
class="stat-placeholder"
style="width: 4rem;"
/>
<dd v-else class="stat-value">
{{ numberOfLoans | numeral('0,0') }}
</dd>
<dt class="stat-def">
Loans made
</dt>
</div>
<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 4rem;" />
<dt v-show="!loading" class="stat-value">
{{ countryCount }}
</dt>
<dd class="stat-def">
Countries supported
</dd>
<router-link
class="stat-link"
to="/portfolio/lending-stats"
v-kv-track-event="['portfolio', 'click', 'countries-supported-details']"
>
Details
<kv-material-icon
class="tw-ml-0.5 tw-w-2 tw-h-2"
:icon="mdiArrowRight"
/>
</router-link>
</div>
<div class="tw-col-span-12 md:tw-col-span-6 xl:tw-col-span-3">
<kv-loading-placeholder v-if="loading" class="stat-placeholder" style="width: 7rem;" />
<dt v-show="!loading" class="stat-value">
{{ percentile }}
</dt>
<dd class="stat-def">
Lending percentile on Kiva
Lending percentile
</dd>
</div>
</kv-grid>
Expand All @@ -80,10 +88,12 @@
import { gql } from '@apollo/client';
import numeral from 'numeral';
import getCacheKey from '@/util/getCacheKey';
import { mdiArrowRight } from '@mdi/js';
import AsyncPortfolioSection from './AsyncPortfolioSection';
// import LoanCountOverTimeFigure from './LoanCountOverTimeFigure';
import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
export default {
name: 'LendingInsights',
Expand All @@ -93,6 +103,7 @@ export default {
AsyncPortfolioSection,
KvGrid,
KvLoadingPlaceholder,
KvMaterialIcon
// LoanCountOverTimeFigure,
},
data() {
Expand All @@ -102,9 +113,10 @@ export default {
donationLightboxVisible: false,
// loanLightboxVisible: false,
countryCount: 0,
inviteeLoanCount: 0,
amountLent: 0,
percentile: 0,
numberOfLoans: 0,
mdiArrowRight,
};
},
methods: {
Expand All @@ -125,15 +137,15 @@ export default {
}
userStats {
amount_of_loans
number_of_loans_by_invitees
number_of_loans
}
}
}`
}).then(({ data }) => {
this.loading = false;
this.countryCount = data?.my?.lendingStats?.lentTo?.countries?.totalCount ?? 0;
this.percentile = numeral(data?.my?.lendingStats?.amountLentPercentile ?? 0).format('0o');
this.inviteeLoanCount = data?.my?.userStats?.number_of_loans_by_invitees ?? 0;
this.numberOfLoans = data?.my?.userStats?.number_of_loans ?? 0;
const amountOfLoans = numeral(data?.my?.userStats?.amount_of_loans ?? 0);
this.amountLent = amountOfLoans.format('$0,0[.]00');
Expand All @@ -148,16 +160,19 @@ export default {
<style lang="postcss" scoped>
.stat-placeholder {
margin-bottom: 6px;
@apply tw-mt-1 tw-h-4.5;
@apply tw-mt-1 tw-h-4.5 tw-mx-auto tw-mb-0.5;
}
.stat-value {
@apply tw-text-h1 tw-text-brand;
@apply tw-text-h2 tw-text-brand tw-text-center;
}
.stat-def {
@apply tw-text-h3 tw-mb-0.5;
@apply tw-text-base tw-mb-0.5 tw-text-center tw-text-white;
}
.stat-link {
@apply tw-w-full tw-inline-flex tw-justify-center tw-items-center tw-text-brand;
}
@screen md {
Expand Down

0 comments on commit 17126b8

Please sign in to comment.