fix: replace inline functions, resolve PR comments

samshara · tnagorra · commit 32ccc1998238 · 2024-10-17T14:30:11.000+05:45
diff --git a/app/src/components/domain/PerAssessmentSummary/i18n.json b/app/src/components/domain/PerAssessmentSummary/i18n.json
@@ -1,7 +1,7 @@
 {
-    "namespace": "common",
+    "namespace": "perAssessmentSummary",
     "strings": {
-        "multiImageArea": "Area {areaId}",
+        "perArea": "Area {areaId}",
         "benchmarksAssessed": "{totalQuestionCount} benchmarks assessed",
         "perAssessmentSummaryHeading": "Summary",
         "benchmarksAssessedTitle": "benchmarks assessed : {allAnsweredResponses} / {totalQuestionCount}"
diff --git a/app/src/components/domain/PerAssessmentSummary/index.tsx b/app/src/components/domain/PerAssessmentSummary/index.tsx
@@ -22,6 +22,11 @@ import {
 } from '@togglecorp/fujs';
 import { PartialForm } from '@togglecorp/toggle-form';
 
+import {
+    PER_FALLBACK_COLOR,
+    perAreaColorMap,
+    perRatingColorMap,
+} from '#utils/domain/per';
 import { type GoApiResponse } from '#utils/restRequest';
 
 import i18n from './i18n.json';
@@ -43,27 +48,29 @@ interface Props {
     areaIdToTitleMap: Record<number, string | undefined>;
 }
 
-const perRatingColors: {
-    [key: string]: string;
-} = {
-    5: 'var(--go-ui-color-dark-blue-40)',
-    4: 'var(--go-ui-color-dark-blue-30)',
-    3: 'var(--go-ui-color-dark-blue-20)',
-    2: 'var(--go-ui-color-dark-blue-10)',
-    1: 'var(--go-ui-color-gray-40)',
-    0: 'var(--go-ui-color-gray-30)',
-};
-
-const areaColorShades: { [key: string]: string } = {
-    1: 'var(--go-ui-color-purple-per)',
-    2: 'var(--go-ui-color-orange-per)',
-    3: 'var(--go-ui-color-blue-per)',
-    4: 'var(--go-ui-color-teal-per)',
-    5: 'var(--go-ui-color-red-per)',
-};
-
 const progressBarColor = 'var(--go-ui-color-dark-blue-40)';
 
+function numberOfComponentsSelector({ components } : { components: unknown[]}) {
+    return components.length;
+}
+
+function perRatingColorSelector({ ratingValue }: { ratingValue: number | undefined }) {
+    if (isDefined(ratingValue)) {
+        return perRatingColorMap[ratingValue];
+    }
+    return PER_FALLBACK_COLOR;
+}
+
+function perRatingLabelSelector({
+    ratingValue,
+    ratingDisplay,
+}: {
+    ratingValue?: number;
+    ratingDisplay?: string;
+}): string {
+    return `${ratingValue}-${ratingDisplay}`;
+}
+
 function PerAssessmentSummary(props: Props) {
     const {
         className,
@@ -156,7 +163,7 @@ function PerAssessmentSummary(props: Props) {
             // components?
             const filteredComponents = areaResponse?.component_responses?.filter(
                 (component) => isDefined(component?.rating_details?.value)
-                    && component.rating_details?.value !== 0,
+                    && component.rating_details.value !== 0,
             ) ?? [];
 
             if (filteredComponents.length === 0) {
@@ -185,7 +192,7 @@ function PerAssessmentSummary(props: Props) {
             areaId,
             rating: averageRatingByAreaMap[Number(areaId)] ?? 0,
             areaDisplay: resolveToString(
-                strings.multiImageArea,
+                strings.perArea,
                 { areaId },
             ),
         }),
@@ -241,20 +248,9 @@ function PerAssessmentSummary(props: Props) {
             <StackedProgressBar
                 className={styles.componentRating}
                 data={statusGroupedComponentList ?? []}
-                // FIXME: don't use inline selectors
-                valueSelector={
-                    (statusGroupedComponent) => (
-                        statusGroupedComponent.components.length
-                    )
-                }
-                // FIXME: don't use inline selectors
-                colorSelector={(statusGroupedComponent) => (
-                    perRatingColors[statusGroupedComponent.ratingValue ?? 0]
-                )}
-                // FIXME: don't use inline selectors
-                labelSelector={
-                    (statusGroupedComponent) => `${statusGroupedComponent.ratingValue}-${statusGroupedComponent.ratingDisplay}`
-                }
+                valueSelector={numberOfComponentsSelector}
+                colorSelector={perRatingColorSelector}
+                labelSelector={perRatingLabelSelector}
             />
             <div className={styles.avgComponentRating}>
                 {averageRatingByAreaList.map(
@@ -272,7 +268,7 @@ function PerAssessmentSummary(props: Props) {
                                     className={styles.filledBar}
                                     style={{
                                         height: `${getPercentage(rating.rating, averageRatingByAreaList.length)}%`,
-                                        backgroundColor: areaColorShades[rating.areaId],
+                                        backgroundColor: perAreaColorMap[Number(rating.areaId)],
                                     }}
                                 />
                             </div>
diff --git a/app/src/utils/domain/per.ts b/app/src/utils/domain/per.ts
@@ -81,10 +81,24 @@ export const perBenchmarkColorMap: {
     5: 'var(--go-ui-color-dark-blue-10)',
 };
 
+export const PER_FALLBACK_COLOR = 'var(--go-ui-color-gray-40)';
+
 export function perRatingColorSelector(item: {
-    value: number;
+    value: number | undefined;
 }) {
-    return perRatingColorMap[item.value];
+    if (isDefined(item.value)) {
+        return perRatingColorMap[item.value];
+    }
+    return PER_FALLBACK_COLOR;
+}
+
+export function perAreaColorSelector(item: {
+    value: number | undefined;
+}) {
+    if (isDefined(item.value)) {
+        return perRatingColorMap[item.value];
+    }
+    return PER_FALLBACK_COLOR;
 }
 
 export function perBenchmarkColorSelector(item: {
@@ -94,5 +108,3 @@ export function perBenchmarkColorSelector(item: {
 }) {
     return perBenchmarkColorMap[item.id];
 }
-
-export const PER_FALLBACK_COLOR = 'var(--go-ui-color-gray-40)';
diff --git a/app/src/views/CountryPreparedness/RatingByAreaChart/i18n.json b/app/src/views/CountryPreparedness/RatingByAreaChart/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "ratingByAreaChart",
+    "strings": {
+        "perArea": "Area {areaNumber}: {areaTitle}"
+    }
+}
diff --git a/app/src/views/CountryPreparedness/RatingByAreaChart/index.tsx b/app/src/views/CountryPreparedness/RatingByAreaChart/index.tsx
@@ -2,13 +2,18 @@ import {
     ChartAxes,
     ChartContainer,
 } from '@ifrc-go/ui';
-import { DEFAULT_INVALID_TEXT } from '@ifrc-go/ui/utils';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    DEFAULT_INVALID_TEXT,
+    resolveToString,
+} from '@ifrc-go/ui/utils';
 import { listToMap } from '@togglecorp/fujs';
 
 import useNumericChartData from '#hooks/useNumericChartData';
 import { defaultChartMargin } from '#utils/constants';
 import { type GoApiResponse } from '#utils/restRequest';
 
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 type PerOptionsResponse = GoApiResponse<'/api/v2/per-options/'>;
@@ -34,6 +39,8 @@ function RatingByAreaChart(props: Props) {
         formAreaOptions,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const ratingTitleMap = listToMap(
         ratingOptions,
         (option) => option.value,
@@ -43,7 +50,13 @@ function RatingByAreaChart(props: Props) {
     const formAreaMap = listToMap(
         formAreaOptions,
         (option) => option.area_num ?? DEFAULT_INVALID_TEXT,
-        (option) => `Area ${option.area_num}: ${option.title}`,
+        (option) => resolveToString(
+            strings.perArea,
+            {
+                areaNumber: option.area_num,
+                areaTitle: option.title,
+            },
+        ),
     );
 
     const chartData = useNumericChartData(
diff --git a/app/src/views/PerExport/index.tsx b/app/src/views/PerExport/index.tsx
@@ -547,7 +547,7 @@ export function Component() {
                                 return null;
                             }
 
-                            const color = perAreaColorMap?.[perFormArea?.area_num];
+                            const color = perAreaColorMap?.[perFormArea.area_num];
                             return (
                                 <LegendItem
                                     key={perFormArea.id}
diff --git a/app/src/views/PerExport/styles.module.css b/app/src/views/PerExport/styles.module.css
@@ -88,6 +88,12 @@
         .legend {
             display: flex;
             gap: var(--go-ui-spacing-sm);
+
+            .separator {
+                align-self: stretch;
+                background-color: var(--go-ui-color-separator);
+                width: var(--go-ui-width-separator-thin);
+            }
         }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -547,7 +547,7 @@ export function Component() {`
`547`	`547`	`return null;`
`548`	`548`	`}`
`549`	`549`
`550`		`- const color = perAreaColorMap?.[perFormArea?.area_num];`
	`550`	`+ const color = perAreaColorMap?.[perFormArea.area_num];`
`551`	`551`	`return (`
`552`	`552`	`<LegendItem`
`553`	`553`	`key={perFormArea.id}`
Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,12 @@`
`88`	`88`	`.legend {`
`89`	`89`	`display: flex;`
`90`	`90`	`gap: var(--go-ui-spacing-sm);`
	`91`	`+`
	`92`	`+ .separator {`
	`93`	`+ align-self: stretch;`
	`94`	`+ background-color: var(--go-ui-color-separator);`
	`95`	`+ width: var(--go-ui-width-separator-thin);`
	`96`	`+ }`
`91`	`97`	`}`
`92`	`98`	`}`
`93`	`99`	`}`