MPDX-8479 HI Report Page & key #1228
Conversation
window.ResizeObserver is undefined, so there is no reason to mock it sometimes and restore it afterwards.
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
| @@ -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), | |||
There was a problem hiding this comment.
✅ Getting better: Complex Method
AccountSummary:React.FC<AccountSummaryProps> decreases in cyclomatic complexity from 27 to 25, threshold = 10
| @@ -47,15 +47,18 @@ export const dayMonthFormat = ( | |||
| }).format(DateTime.local().set({ month, day }).toJSDate()); | |||
|
|
|||
| export const monthYearFormat = ( | |||
| month: number, | |||
| year: number, | |||
| date: DateTime | null, | |||
There was a problem hiding this comment.
❌ New issue: Primitive Obsession
In this module, 50.0% of all function arguments are primitive types, threshold = 30.0%
| @@ -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 { | |||
There was a problem hiding this comment.
✅ No longer an issue: Code Duplication
The module no longer contains too many functions with similar structure
| @@ -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 { | |||
There was a problem hiding this comment.
✅ No longer an issue: Code Duplication
The module no longer contains too many functions with similar structure
| graphBlue1: { | ||
| main: graphColors.blue1, | ||
| }, | ||
| graphBlue2: { | ||
| main: graphColors.blue2, | ||
| }, | ||
| graphBlue3: { | ||
| main: graphColors.blue3, | ||
| }, | ||
| graphTeal: { | ||
| main: graphColors.teal, | ||
| }, |
There was a problem hiding this comment.
❌ Getting worse: Large Method
theme increases from 147 to 159 lines of code, threshold = 70
There was a problem hiding this comment.
We can exclude this file if we decide we want to from the CodeScene config.
| 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> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
❌ New issue: Complex Method
HealthIndicatorFormula:React.FC<HealthIndicatorFormulaProps> has a cyclomatic complexity of 10, threshold = 10
|
Looks like it passed the CodeScene check after that last commit. |
src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx
Outdated
Show resolved
Hide resolved
src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx
Outdated
Show resolved
Hide resolved
src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx
Outdated
Show resolved
Hide resolved
src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx
Outdated
Show resolved
Hide resolved
|
@dr-bizz Either here or in different PR can you adjust the formula in the |
|
@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? |
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. |
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: