Merge pull request #14 from opencollective/fix/diffs

Fix Percentage diffs

components/PercentageDiff.tsx

@@ -1,24 +1,30 @@
 import React from 'react';
 
+import { formatAmount } from '../lib/amounts';
+
 import { Span } from '@opencollective/frontend-components/components/Text';
 
-export const PercentageDiff = ({ previousValue, newValue }) => {
-  if (newValue === 0 || previousValue === 0 || newValue === previousValue) {
-    return null;
+export const PercentageDiff = ({ previousValue, newValue, currency }) => {
+  let percentage;
+  if (newValue && !previousValue) {
+    percentage = 100;
+  } else if (!newValue && previousValue) {
+    percentage = -100;
+  } else {
+    percentage = Math.round(((newValue - previousValue) / previousValue) * 100);
   }
 
-  const percentage = Math.round(((newValue - previousValue) / previousValue) * 100);
   if (!percentage) {
     return null;
   } else if (percentage > 0) {
     return (
-      <Span color="green.700">
+      <Span color="green.700" title={`Previous period: ${formatAmount({ value: previousValue, currency })}`}>
         <Span color="green.500">↑</Span> {percentage}%
       </Span>
     );
   } else {
     return (
-      <Span color="red.700">
+      <Span color="red.700" title={`Previous period: ${formatAmount({ value: previousValue, currency })}`}>
         <Span color="red.500">↓</Span> {percentage}%
       </Span>
     );

lib/amounts.ts

@@ -0,0 +1,7 @@
+import { Amount } from './graphql/types/v2/graphql';
+
+export const formatAmount = ({ value, currency }: Amount, abs = false) => {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(
+    abs ? Math.abs(value) : value,
+  );
+};

pages/funders-dashboard/[slug].tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { gql } from '@apollo/client';
+import dayjs from 'dayjs';
 import { isNil, uniqBy } from 'lodash';
 import type { NextPageContext } from 'next';
 import { useRouter } from 'next/router';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 
+import { formatAmount } from '../../lib/amounts';
 import { initializeApollo } from '../../lib/apollo-client';
-import { Amount } from '../../lib/graphql/types/v2/graphql';
 import { useLoggedInUser } from '../../lib/hooks/useLoggedInUser';
 import { parseDateInterval } from '@opencollective/frontend-components/lib/date-utils';
 
@@ -21,12 +22,6 @@ import LoadingPlaceholder from '@opencollective/frontend-components/components/L
 import StyledLink from '@opencollective/frontend-components/components/StyledLink';
 import { P, Span } from '@opencollective/frontend-components/components/Text';
 
-const formatAmount = ({ value, currency }: Amount, abs = false) => {
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(
-    abs ? Math.abs(value) : value,
-  );
-};
-
 const Table = styled.table`
   width: 100%;
   border-collapse: collapse;
@@ -60,7 +55,13 @@ const Table = styled.table`
 `;
 
 const funderQuery = gql`
-  query ContributorsDashboard($slug: String, $dateFrom: DateTime, $dateTo: DateTime) {
+  query ContributorsDashboard(
+    $slug: String
+    $dateFrom: DateTime
+    $dateTo: DateTime
+    $previousDateFrom: DateTime
+    $previousDateTo: DateTime
+  ) {
     account(slug: $slug) {
       slug
       name
@@ -78,29 +79,29 @@ const funderQuery = gql`
             name
             imageUrl(height: 80)
             stats {
-              totalAmountReceivedPastMonth: totalAmountReceived(
+              totalAmountReceivedPeriod: totalAmountReceived(
                 dateFrom: $dateFrom
                 dateTo: $dateTo
                 includeChildren: true
               ) {
                 value
                 currency
               }
-              totalAmountSpentPastMonth: totalAmountSpent(dateFrom: $dateFrom, dateTo: $dateTo, includeChildren: true) {
+              totalAmountSpentPeriod: totalAmountSpent(dateFrom: $dateFrom, dateTo: $dateTo, includeChildren: true) {
                 value
                 currency
               }
-              totalAmountReceivedPreviousMonth: totalAmountReceived(
-                dateFrom: $dateFrom
-                dateTo: $dateTo
+              totalAmountReceivedPreviousPeriod: totalAmountReceived(
+                dateFrom: $previousDateFrom
+                dateTo: $previousDateTo
                 includeChildren: true
               ) {
                 value
                 currency
               }
-              totalAmountSpentPreviousMonth: totalAmountSpent(
-                dateFrom: $dateFrom
-                dateTo: $dateTo
+              totalAmountSpentPreviousPeriod: totalAmountSpent(
+                dateFrom: $previousDateFrom
+                dateTo: $previousDateTo
                 includeChildren: true
               ) {
                 value
@@ -132,12 +133,22 @@ const funderQuery = gql`
 
 const getVariablesFromQuery = query => {
   const { from: dateFrom, to: dateTo } = parseDateInterval(query.period);
+  const [dateFromDayJs, dateToDayJs] = [dateFrom, dateTo].map(dayjs);
+  let previousDateFrom = dateFrom;
+  let previousDateTo = dateTo;
+  const period = dateToDayJs.diff(dateFromDayJs, 'day');
+  if (period > 0) {
+    previousDateFrom = dateFromDayJs.subtract(period, 'day').toISOString();
+    previousDateTo = dateToDayJs.subtract(period, 'day').toISOString();
+  }
   return {
     slug: query.slug,
     offset: parseInt(query.offset) || 0,
     limit: parseInt(query.limit) || 100,
     dateFrom,
     dateTo,
+    previousDateFrom,
+    previousDateTo,
   };
 };
 
@@ -245,20 +256,22 @@ export default function ContributorDashboard({ account = null }) {
                   </td>
                   <td style={{ textAlign: 'center' }}>{formatAmount(node.totalDonations)}</td>
                   <td style={{ textAlign: 'center' }}>
-                    {formatAmount(node.account.stats.totalAmountReceivedPastMonth)}
+                    {formatAmount(node.account.stats.totalAmountReceivedPeriod)}
                     <Span fontSize="14px" ml="8px">
                       <PercentageDiff
-                        previousValue={node.account.stats.totalAmountReceivedPreviousMonth.value}
-                        newValue={node.account.stats.totalAmountReceivedPastMonth.value}
+                        previousValue={node.account.stats.totalAmountReceivedPeriod.value}
+                        newValue={node.account.stats.totalAmountReceivedPeriod.value}
+                        currency={node.account.stats.totalAmountReceivedPeriod.currency}
                       />
                     </Span>
                   </td>
                   <td style={{ textAlign: 'center' }}>
-                    {formatAmount(node.account.stats.totalAmountSpentPastMonth)}
+                    {formatAmount(node.account.stats.totalAmountSpentPeriod)}
                     <Span fontSize="14px" ml="8px">
                       <PercentageDiff
-                        previousValue={node.account.stats.totalAmountSpentPreviousMonth.value}
-                        newValue={node.account.stats.totalAmountSpentPastMonth.value}
+                        previousValue={node.account.stats.totalAmountSpentPreviousPeriod.value}
+                        newValue={node.account.stats.totalAmountSpentPeriod.value}
+                        currency={node.account.stats.totalAmountSpentPeriod.currency}
                       />
                     </Span>
                   </td>