From 53dfb5ca129fec5d121ece36868b1dade969dbd3 Mon Sep 17 00:00:00 2001 From: Ali Ebrahimi <65724329+ae2079@users.noreply.github.com> Date: Thu, 11 Jul 2024 17:33:13 +0330 Subject: [PATCH 1/2] Merge pull request #16 from Giveth/15-add-donation-box-metrics Add donation Box metrics --- .../views/home/DonationBoxMetrics.tsx | 93 +++++++++++++++++++ src/components/views/home/Home.index.tsx | 3 + src/gql/gqlDonations.ts | 16 ++++ src/hooks/useDonationBoxMetrics.ts | 29 ++++++ src/types/gql.ts | 6 ++ 5 files changed, 147 insertions(+) create mode 100644 src/components/views/home/DonationBoxMetrics.tsx create mode 100644 src/hooks/useDonationBoxMetrics.ts diff --git a/src/components/views/home/DonationBoxMetrics.tsx b/src/components/views/home/DonationBoxMetrics.tsx new file mode 100644 index 0000000..58c634c --- /dev/null +++ b/src/components/views/home/DonationBoxMetrics.tsx @@ -0,0 +1,93 @@ +import styled from 'styled-components'; +import { useState } from 'react'; +import { + H2, + H4, + H6, + IconHelpFilled16, + neutralColors, + Subline, +} from '@giveth/ui-design-system'; +import { Col, Row } from '../../styled-components/grid'; +import Spinner from '../../Spinner'; +import useDonationBoxMetrics from '../../../hooks/useDonationBoxMetrics'; +import { IconWithTooltip } from '../../IconWithTooltip'; +import { FlexCenter } from '../../styled-components/flex'; +import DatePicker from '../../DatePicker'; +import { firstOfNextMonth, firstOfThisMonth } from '../../../lib/helpers'; + +const DonationBoxMetrics = () => { + const [fromDate, setFromDate] = useState(firstOfThisMonth()); + const [toDate, setToDate] = useState(firstOfNextMonth()); + + const { donationMetrics, loading } = useDonationBoxMetrics( + fromDate, + toDate, + ); + + const { + totalDonationsToGiveth, + totalUsdValueToGiveth, + averagePercentageToGiveth, + } = donationMetrics || {}; + + return ( + + + +

Donation Box Metrics

+ } + direction={'top'} + > + + Overview of donation box metrics including total + donations and average percentage during the selected + timeframe. Note that the recurring donation is not + considered. + + + + + +
+ From: +
+
+
+ To: +
+ + + +
Total Donations to Giveth Using Donation Box:
+ {loading ? :

{totalDonationsToGiveth || 0}

} +
+
Total USD Value to Giveth Using Donation Box:
+ {loading ? :

{totalUsdValueToGiveth || 0}

} +
+
+ Average Percentage of Donation to Giveth Using Donation Box: +
+ {loading ? ( + + ) : ( +

{averagePercentageToGiveth || 0}%

+ )} + + + ); +}; + +const TooltipBody = styled(Subline)` + color: ${neutralColors.gray[100]}; + width: 270px; +`; + +const RowStyled = styled(Row)` + margin-top: 40px; + align-items: center; + margin-bottom: 40px; +`; + +export default DonationBoxMetrics; diff --git a/src/components/views/home/Home.index.tsx b/src/components/views/home/Home.index.tsx index b61d71b..aa97627 100644 --- a/src/components/views/home/Home.index.tsx +++ b/src/components/views/home/Home.index.tsx @@ -6,6 +6,7 @@ import TotalDonations from './TotalDonations'; import DonationsCount from './DonationsCount'; import NewDonorsCount from './NewDonorsCount'; import NewDonorsDonationTotalUsd from './NewDonorsDonationTotalUsd'; +import DonationBoxMetrics from './DonationBoxMetrics'; import MultisigSessionsCount from './MultisigSessionsCount'; import RecurringDonationsCount from './RecurringDonationsCount'; import RecurringDonationsTotalUsd from './RecurringDonationsTotalUsd'; @@ -30,6 +31,8 @@ const HomeIndex = () => {
+ +
); diff --git a/src/gql/gqlDonations.ts b/src/gql/gqlDonations.ts index 061205d..7670592 100644 --- a/src/gql/gqlDonations.ts +++ b/src/gql/gqlDonations.ts @@ -62,3 +62,19 @@ export const fetchDonationsCount = ` } } `; + +export const fetchDonationBoxMetrics = ` + query ( + $fromDate: String! + $toDate: String! + ) { + donationMetrics ( + startDate: $fromDate + endDate: $toDate + ) { + totalDonationsToGiveth + totalUsdValueToGiveth + averagePercentageToGiveth + } + } +`; diff --git a/src/hooks/useDonationBoxMetrics.ts b/src/hooks/useDonationBoxMetrics.ts new file mode 100644 index 0000000..1b55293 --- /dev/null +++ b/src/hooks/useDonationBoxMetrics.ts @@ -0,0 +1,29 @@ +import { useEffect, useState } from 'react'; +import { backendGQLRequest } from '../lib/requests'; +import { IDonationBoxMetrics } from '../types/gql'; +import { formatDateToISO, showToastError } from '../lib/helpers'; +import { fetchDonationBoxMetrics } from '../gql/gqlDonations'; + +const useDonationBoxMetrics = (fromDate: Date, toDate: Date) => { + const [donationMetrics, setDonationMetrics] = + useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + setLoading(true); + const variables = { + fromDate: formatDateToISO(fromDate), + toDate: formatDateToISO(toDate), + }; + backendGQLRequest(fetchDonationBoxMetrics, variables) + .then(res => { + setDonationMetrics(res.data.donationMetrics); + }) + .catch(showToastError) + .finally(() => setLoading(false)); + }, [fromDate, toDate]); + + return { donationMetrics, loading }; +}; + +export default useDonationBoxMetrics; diff --git a/src/types/gql.ts b/src/types/gql.ts index e41c6b3..40e6783 100644 --- a/src/types/gql.ts +++ b/src/types/gql.ts @@ -60,6 +60,12 @@ export interface ITotalDonationsPerCategory { totalUsd: number; } +export interface IDonationBoxMetrics { + totalDonationsToGiveth: number; + totalUsdValueToGiveth: number; + averagePercentageToGiveth: number; +} + export interface IRecurringDonationdPerTokenRecord { token: string; total: number; From de39b73d1013e650c7452f1772ce69e6874f8fcc Mon Sep 17 00:00:00 2001 From: Ali Ebrahimi <65724329+ae2079@users.noreply.github.com> Date: Thu, 25 Jul 2024 03:53:27 +0330 Subject: [PATCH 2/2] Merge pull request #27 from Giveth/fix-count-of-digits-on-donation-box-metrics Change numbers to have fixed digits --- src/components/views/home/DonationBoxMetrics.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/views/home/DonationBoxMetrics.tsx b/src/components/views/home/DonationBoxMetrics.tsx index 58c634c..c71ebe8 100644 --- a/src/components/views/home/DonationBoxMetrics.tsx +++ b/src/components/views/home/DonationBoxMetrics.tsx @@ -16,6 +16,12 @@ import { FlexCenter } from '../../styled-components/flex'; import DatePicker from '../../DatePicker'; import { firstOfNextMonth, firstOfThisMonth } from '../../../lib/helpers'; +const formatNumber = (number?: number) => { + return parseFloat(String(number || 0)).toLocaleString('en-US', { + maximumFractionDigits: 2, + }); +}; + const DonationBoxMetrics = () => { const [fromDate, setFromDate] = useState(firstOfThisMonth()); const [toDate, setToDate] = useState(firstOfNextMonth()); @@ -64,7 +70,11 @@ const DonationBoxMetrics = () => { {loading ? :

{totalDonationsToGiveth || 0}

}
Total USD Value to Giveth Using Donation Box:
- {loading ? :

{totalUsdValueToGiveth || 0}

} + {loading ? ( + + ) : ( +

{formatNumber(totalUsdValueToGiveth)}

+ )}
Average Percentage of Donation to Giveth Using Donation Box: @@ -72,7 +82,7 @@ const DonationBoxMetrics = () => { {loading ? ( ) : ( -

{averagePercentageToGiveth || 0}%

+

{formatNumber(averagePercentageToGiveth)}%

)}