Merge branch 'master' into 476-analysis-comparison

WFP-VAM · Jul 18, 2023 · 6817f1a · 6817f1a
2 parents febeaee + d7a00c9
commit 6817f1a
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 8 deletions.
diff --git a/frontend/src/components/Common/ReportDialog/index.tsx b/frontend/src/components/Common/ReportDialog/index.tsx
@@ -103,7 +103,6 @@ const ReportDialog = memo(
             showToolbar={false}
           >
             <ReportDoc
-              t={t}
               exposureLegendDefinition={analysisResult?.legend ?? []}
               theme={theme}
               tableShowTotal
@@ -169,7 +168,6 @@ const ReportDialog = memo(
           <PDFDownloadLink
             document={
               <ReportDoc
-                t={t}
                 exposureLegendDefinition={analysisResult?.legend ?? []}
                 theme={theme}
                 reportTitle={`${t(reportConfig.title)} ${reportDate}`}

diff --git a/frontend/src/components/Common/ReportDialog/reportDoc.tsx b/frontend/src/components/Common/ReportDialog/reportDoc.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import {
   Document,
+  Font,
   Image,
   Page,
   StyleSheet,
@@ -11,20 +12,34 @@ import { Theme } from '@material-ui/core';
 import { TableRow as AnalysisTableRow } from 'context/analysisResultStateSlice';
 import { getLegendItemLabel } from 'components/MapView/utils';
 import { LegendDefinition, ReportType } from 'config/types';
-import { TFunction } from 'utils/data-utils';
 import { Column } from 'utils/analysis-utils';
+import RobotoFont from 'fonts/Roboto-Regular.ttf';
+import KhmerFont from 'fonts/Khmer-Regular.ttf';
+import { useSafeTranslation } from 'i18n';
 import { PDFLegendDefinition } from './types';
 import ReportDocLegend from './ReportDocLegend';
 import ReportDocTable from './ReportDocTable';
+import { getReportFontFamily } from './utils';
 
-const makeStyles = (theme: Theme) =>
+// Register all the fonts necessary
+Font.register({
+  family: 'Roboto',
+  src: RobotoFont,
+});
+
+Font.register({
+  family: 'Khmer',
+  src: KhmerFont,
+});
+
+const makeStyles = (theme: Theme, selectedLanguage: string) =>
   StyleSheet.create({
     page: {
       flexDirection: 'column',
       backgroundColor: '#FFF',
       paddingBottom: 25,
       paddingTop: '1vh',
-      fontFamily: 'Roboto',
+      fontFamily: getReportFontFamily(selectedLanguage),
     },
     section: {
       width: '96vw',
@@ -83,11 +98,12 @@ const ReportDoc = memo(
     reportTitle,
     reportConfig,
     exposureLegendDefinition,
-    t,
     tableData,
     columns,
   }: ReportDocProps) => {
-    const styles = makeStyles(theme);
+    const { t, i18n } = useSafeTranslation();
+
+    const styles = makeStyles(theme, i18n.language);
 
     const date = useMemo(() => {
       return new Date().toUTCString();
@@ -272,7 +288,6 @@ interface ReportDocProps {
   reportConfig: ReportType;
   tableShowTotal: boolean;
   exposureLegendDefinition: LegendDefinition;
-  t: TFunction;
   tableData: AnalysisTableRow[];
   columns: Column[];
 }

diff --git a/frontend/src/components/Common/ReportDialog/utils.ts b/frontend/src/components/Common/ReportDialog/utils.ts
@@ -0,0 +1,8 @@
+export const getReportFontFamily = (selectedLanguage: string): string => {
+  switch (selectedLanguage) {
+    case 'kh':
+      return 'Khmer';
+    default:
+      return 'Roboto';
+  }
+};
diff --git a/frontend/src/components/MapView/FoldButton/index.tsx b/frontend/src/components/MapView/FoldButton/index.tsx
@@ -69,6 +69,7 @@ const FoldButton = ({
             horizontal: 'right',
             vertical: 'top',
           }}
+          overlap="rectangular"
           badgeContent={badgeContent}
           color="secondary"
         >

diff --git a/frontend/src/components/MapView/LeftPanel/LeftPanelTabs/index.tsx b/frontend/src/components/MapView/LeftPanel/LeftPanelTabs/index.tsx
@@ -129,6 +129,7 @@ const LeftPanelTabs = memo(
               horizontal: 'left',
               vertical: 'top',
             }}
+            overlap="rectangular"
             badgeContent={layersBadgeContent}
             color="secondary"
           >

diff --git a/frontend/src/fonts/Khmer-Regular.ttf b/frontend/src/fonts/Khmer-Regular.ttf
diff --git a/frontend/src/fonts/Roboto-Regular.ttf b/frontend/src/fonts/Roboto-Regular.ttf
diff --git a/frontend/src/types/custom.d.ts b/frontend/src/types/custom.d.ts
@@ -25,3 +25,5 @@ declare module 'prism-common';
 declare module 'zonal';
 
 declare module 'redux-async-initial-state';
+
+declare module '*.ttf';