Merge pull request #28 from Giveth/release-donation-box-metrics

Release donation box metrics

src/components/views/home/DonationBoxMetrics.tsx

@@ -0,0 +1,103 @@
+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 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());
+
+	const { donationMetrics, loading } = useDonationBoxMetrics(
+		fromDate,
+		toDate,
+	);
+
+	const {
+		totalDonationsToGiveth,
+		totalUsdValueToGiveth,
+		averagePercentageToGiveth,
+	} = donationMetrics || {};
+
+	return (
+		<RowStyled>
+			<Col md={4}>
+				<FlexCenter gap='10px'>
+					<H4>Donation Box Metrics</H4>
+					<IconWithTooltip
+						icon={<IconHelpFilled16 />}
+						direction={'top'}
+					>
+						<TooltipBody>
+							Overview of donation box metrics including total
+							donations and average percentage during the selected
+							timeframe. Note that the recurring donation is not
+							considered.
+						</TooltipBody>
+					</IconWithTooltip>
+				</FlexCenter>
+			</Col>
+			<Col md={4}>
+				<div>
+					From: <DatePicker date={fromDate} setDate={setFromDate} />
+				</div>
+				<br />
+				<div>
+					To: <DatePicker date={toDate} setDate={setToDate} />
+				</div>
+			</Col>
+			<Col md={1} />
+			<Col md={2}>
+				<H6>Total Donations to Giveth Using Donation Box:</H6>
+				{loading ? <Spinner /> : <H2>{totalDonationsToGiveth || 0}</H2>}
+				<br />
+				<H6>Total USD Value to Giveth Using Donation Box:</H6>
+				{loading ? (
+					<Spinner />
+				) : (
+					<H2>{formatNumber(totalUsdValueToGiveth)}</H2>
+				)}
+				<br />
+				<H6>
+					Average Percentage of Donation to Giveth Using Donation Box:
+				</H6>
+				{loading ? (
+					<Spinner />
+				) : (
+					<H2>{formatNumber(averagePercentageToGiveth)}%</H2>
+				)}
+			</Col>
+		</RowStyled>
+	);
+};
+
+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;

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 = () => {
 			<hr />
 			<NewDonorsDonationTotalUsd />
 			<hr />
+			<DonationBoxMetrics />
+			<hr />
 			<MultisigSessionsCount />
 		</ContainerStyled>
 	);

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
+    }
+  }
+`;

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<IDonationBoxMetrics | null>(null);
+	const [loading, setLoading] = useState<boolean>(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;

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;