MPDX-8479 HI Report Page & key #1228

dr-bizz · 2024-12-16T19:09:38Z

Description

In this PR, I add the MPD HI report page. This uses many of the same charts or graphs of the other PRs, so it doesn't look completely done, but it's not far off.

If you have no data, it shows a message stating there is no data.

The monthly goal graph will also show the HI widget

Checklist:

I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
I have requested a review from another person on the project

codescene-delta-analysis

❌ Code Health Quality Gates: FAILED

Change in average Code Health of affected files: +0.19 (9.31 -> 9.50)

Declining Code Health: 3 findings(s) 🚩
Improving Code Health: 3 findings(s) ✅

View detailed results in CodeScene

codescene-delta-analysis · 2024-12-16T19:11:08Z

src/components/Reports/FinancialAccountsReport/AccountSummary/AccountSummary.tsx

@@ -166,8 +166,7 @@ export const AccountSummary: React.FC<AccountSummaryProps> = ({

      // Periods
      const startDateFormatted = monthYearFormat(
-        DateTime.fromISO(item?.startDate ?? '').month,
-        DateTime.fromISO(item?.startDate ?? '').year,
+        DateTime.fromISO(item.startDate),


✅ Getting better: Complex Method
AccountSummary:React.FC<AccountSummaryProps> decreases in cyclomatic complexity from 27 to 25, threshold = 10

codescene-delta-analysis · 2024-12-16T19:11:09Z

src/lib/intlFormat.ts

@@ -47,15 +47,18 @@ export const dayMonthFormat = (
  }).format(DateTime.local().set({ month, day }).toJSDate());

 export const monthYearFormat = (
-  month: number,
-  year: number,
+  date: DateTime | null,


❌ New issue: Primitive Obsession
In this module, 50.0% of all function arguments are primitive types, threshold = 30.0%

_Suppress

codescene-delta-analysis · 2024-12-16T19:11:09Z

src/components/Reports/DonationsReport/DonationsReport.test.tsx

@@ -5,10 +5,6 @@ import userEvent from '@testing-library/user-event';
 import { DateTime } from 'luxon';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import {


✅ No longer an issue: Code Duplication
The module no longer contains too many functions with similar structure

codescene-delta-analysis · 2024-12-16T19:11:09Z

...omponents/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.test.tsx

@@ -2,10 +2,6 @@ import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { render } from '__tests__/util/testingLibraryReactMock';
-import {


✅ No longer an issue: Code Duplication
The module no longer contains too many functions with similar structure

codescene-delta-analysis · 2024-12-16T19:11:10Z

src/theme.ts

+    graphBlue1: {
+      main: graphColors.blue1,
+    },
+    graphBlue2: {
+      main: graphColors.blue2,
+    },
+    graphBlue3: {
+      main: graphColors.blue3,
+    },
+    graphTeal: {
+      main: graphColors.teal,
+    },


❌ Getting worse: Large Method
theme increases from 147 to 159 lines of code, threshold = 70

_Suppress

We can exclude this file if we decide we want to from the CodeScene config.

codescene-delta-analysis · 2024-12-16T19:11:10Z

src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx

+export const HealthIndicatorFormula: React.FC<HealthIndicatorFormulaProps> = ({
+  accountListId,
+  setNoHealthIndicatorData,
+}) => {
+  const { t } = useTranslation();
+
+  const { data, loading } = useHealthIndicatorFormulaQuery({
+    variables: {
+      accountListId,
+      month: DateTime.now().startOf('month').toISODate(),
+    },
+  });
+
+  const latestMpdHealthData = data?.healthIndicatorData[0];
+
+  if (!data?.healthIndicatorData?.length && !loading) {
+    setNoHealthIndicatorData(true);
+    return null;
+  }
+
+  return (
+    <Card sx={{ padding: 3 }}>
+      <Typography variant="h6" mb={2}>
+        {t('MPD Health')} = [({t('Ownership')} * 3) + ({t('Success')} * 2) + (
+        {t('Consistency')} * 1) + ({t('Depth')} * 1)] / 7
+      </Typography>
+      <Box pl={2}>
+        <FormulaItem
+          name={t('Ownership')}
+          explanation={t('% of Self-raised Funds over Total Funds')}
+          value={latestMpdHealthData?.ownershipHi ?? 0}
+          isLoading={loading}
+        />
+        <FormulaItem
+          name={t('Success')}
+          explanation={t('% of Self-raised Funds over Support Goal')}
+          value={latestMpdHealthData?.successHi ?? 0}
+          isLoading={loading}
+        />
+        <FormulaItem
+          name={t('Consistency')}
+          explanation={t('% of months with positive account balance')}
+          value={latestMpdHealthData?.consistencyHi ?? 0}
+          isLoading={loading}
+        />
+        <FormulaItem
+          name={t('Depth')}
+          explanation={t('Trend of local partners')}
+          value={latestMpdHealthData?.depthHi ?? 0}
+          isLoading={loading}
+        />
+      </Box>
+    </Card>
+  );
+};


❌ New issue: Complex Method
HealthIndicatorFormula:React.FC<HealthIndicatorFormulaProps> has a cyclomatic complexity of 10, threshold = 10

_Suppress

codescene-delta-analysis

❌ Code Health Quality Gates: FAILED

Change in average Code Health of affected files: +0.19 (9.31 -> 9.50)

Declining Code Health: 3 findings(s) 🚩
Improving Code Health: 3 findings(s) ✅

View detailed results in CodeScene

wrandall22 · 2024-12-17T13:51:23Z

Looks like it passed the CodeScene check after that last commit.

src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx

src/components/Coaching/CoachingDetail/CoachingDetail.tsx

src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx

canac · 2024-12-19T19:00:52Z

@dr-bizz Either here or in different PR can you adjust the formula in the HealthIndicatorWidget tooltip to use x instead of * and change the case of the tooltip explanations the match this PR?

canac · 2024-12-19T19:02:41Z

@dr-bizz On the report page, the widget has a View Details button that links to the report page you're on. Clicking it appears to do nothing. Could we remove it so that it doesn't confuse users?

dr-bizz · 2024-12-19T19:03:34Z

@dr-bizz Either here or in different PR can you adjust the formula in the HealthIndicatorWidget tooltip to use x instead of * and change the case of the tooltip explanations the match this PR?

Sorry, I thought I did. I reset my local branch as I was showing Caleb A how to do certain Git commands. I will re-add it.

canac

One last thought, but this all looks really good!

src/components/Reports/HealthIndicatorReport/HealthIndicatorReport.tsx

github-actions · 2025-01-06T16:14:31Z

Preview branch generated at https://8479-hi-report-page.d3dytjb8adxkk5.amplifyapp.com

dr-bizz · 2025-01-09T13:34:14Z

src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx

@@ -51,7 +53,8 @@ export const HealthIndicatorWidget: React.FC<HealthIndicatorWidgetProps> = ({
  const { data, loading } = useHealthIndicatorWidgetQuery({
    variables: {
      accountListId,
-      month: DateTime.now().startOf('month').toISODate(),
+      month: '2024-12-01',


Remove this and just grab the last item using .at(-1)

dr-bizz · 2025-01-09T13:34:45Z

src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx

+  const { data, loading } = useHealthIndicatorFormulaQuery({
+    variables: {
+      accountListId,
+      month: '2024-12-01',


Remove month and just grab the last item using .at(-1)

canac

Sorry I missed that you were waiting on a review. Looks good!

src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx

src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx

canac · 2025-01-09T21:58:40Z

src/components/Dashboard/MonthlyGoal/MonthlyGoal.tsx

@@ -65,6 +66,7 @@ const MonthlyGoal = ({
  pledged = 0,
  totalGiftsNotStarted,
  currencyCode = 'USD',
+  onDashboard = true,


It's not a big deal, but I would expect this prop to default to false

codescene-delta-analysis bot reviewed Dec 16, 2024

View reviewed changes

canac reviewed Dec 17, 2024

View reviewed changes

dr-bizz requested a review from canac December 19, 2024 18:38

canac reviewed Dec 19, 2024

View reviewed changes

src/components/Reports/HealthIndicatorReport/HealthIndicatorReport.tsx Show resolved Hide resolved

dr-bizz requested a review from canac December 19, 2024 19:24

dr-bizz added the Preview Environment Add this label to create an Amplify Preview label Jan 6, 2025

dr-bizz commented Jan 9, 2025

View reviewed changes

canac approved these changes Jan 9, 2025

View reviewed changes

dr-bizz force-pushed the 8479-hi-report-page branch from bfc9116 to 2dd1f76 Compare January 9, 2025 22:23

dr-bizz added 4 commits January 9, 2025 17:32

Create bare bones of the MPD Health Indicator report page

ce71bb4

Adding Monthly goal and HI graphs to report page

be34ecf

Health Formula component

c1107db

Show no data message if no HI data

091a9c9

dr-bizz force-pushed the 8479-hi-report-page branch from 2dd1f76 to 091a9c9 Compare January 9, 2025 22:42

dr-bizz merged commit 2ce0474 into health-indicator Jan 9, 2025
5 of 16 checks passed

dr-bizz deleted the 8479-hi-report-page branch January 9, 2025 22:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MPDX-8479 HI Report Page & key #1228

MPDX-8479 HI Report Page & key #1228

dr-bizz commented Dec 16, 2024

codescene-delta-analysis bot left a comment

codescene-delta-analysis bot Dec 16, 2024

codescene-delta-analysis bot Dec 16, 2024

codescene-delta-analysis bot Dec 16, 2024

codescene-delta-analysis bot Dec 16, 2024

codescene-delta-analysis bot Dec 16, 2024

wrandall22 Dec 16, 2024

codescene-delta-analysis bot Dec 16, 2024

codescene-delta-analysis bot left a comment

wrandall22 commented Dec 17, 2024

canac commented Dec 19, 2024

canac commented Dec 19, 2024

dr-bizz commented Dec 19, 2024

canac left a comment

github-actions bot commented Jan 6, 2025

dr-bizz Jan 9, 2025

dr-bizz Jan 9, 2025

canac left a comment

canac Jan 9, 2025

MPDX-8479 HI Report Page & key #1228

MPDX-8479 HI Report Page & key #1228

Conversation

dr-bizz commented Dec 16, 2024

Description

Checklist:

codescene-delta-analysis bot left a comment

Choose a reason for hiding this comment

codescene-delta-analysis bot Dec 16, 2024

Choose a reason for hiding this comment

codescene-delta-analysis bot Dec 16, 2024

Choose a reason for hiding this comment

codescene-delta-analysis bot Dec 16, 2024

Choose a reason for hiding this comment

codescene-delta-analysis bot Dec 16, 2024

Choose a reason for hiding this comment

codescene-delta-analysis bot Dec 16, 2024

Choose a reason for hiding this comment

wrandall22 Dec 16, 2024

Choose a reason for hiding this comment

codescene-delta-analysis bot Dec 16, 2024

Choose a reason for hiding this comment

codescene-delta-analysis bot left a comment

Choose a reason for hiding this comment

wrandall22 commented Dec 17, 2024

canac commented Dec 19, 2024

canac commented Dec 19, 2024

dr-bizz commented Dec 19, 2024

canac left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 6, 2025

dr-bizz Jan 9, 2025

Choose a reason for hiding this comment

dr-bizz Jan 9, 2025

Choose a reason for hiding this comment

canac left a comment

Choose a reason for hiding this comment

canac Jan 9, 2025

Choose a reason for hiding this comment