Merge branch 'develop' into fix/e2e-tests

Open-Earth-Foundation · Jan 8, 2025 · b645bb0 · b645bb0
2 parents 1e9ac74 + 192d843
commit b645bb0
Show file tree

Hide file tree

Showing 18 changed files with 97 additions and 51 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "city-catalyst",
-  "version": "0.39.0-dev.0",
+  "version": "0.40.0-dev.0",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorChart.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorChart.tsx
@@ -1,6 +1,6 @@
 import { SectorEmission } from "@/util/types";
 import { ResponsiveBar } from "@nivo/bar";
-import { SECTORS } from "@/util/constants";
+import { allSectorColors, SECTORS } from "@/util/constants";
 import { convertKgToKiloTonnes, convertKgToTonnes } from "@/util/helpers";
 import { useTranslation } from "@/i18n/client";
 import { toKebabCaseModified } from "@/app/[lng]/[inventory]/InventoryResultTab/index";
@@ -46,8 +46,6 @@ const EmissionBySectorChart: React.FC<EmissionBySectorChartProps> = ({
     toKebabCaseModified(sector.name),
   );
 
-  const colors = ["#5785F4", "#F17105", "#25AC4B", "#BFA937", "#F5D949"];
-
   return (
     <div className="min-h-[600px]">
       <div className="h-[600px]">
@@ -80,7 +78,7 @@ const EmissionBySectorChart: React.FC<EmissionBySectorChartProps> = ({
           )}
           valueScale={{ type: "linear", min: 0, max: "auto" }}
           indexScale={{ type: "band", round: true }}
-          colors={colors}
+          colors={allSectorColors}
           borderColor={{
             from: "color",
             modifiers: [["darker", 1.6]],
@@ -136,7 +134,7 @@ const EmissionBySectorChart: React.FC<EmissionBySectorChartProps> = ({
           >
             <Box
               className="h-4 w-4"
-              style={{ backgroundColor: colors[index] }}
+              style={{ backgroundColor: allSectorColors[index] }}
             ></Box>
             <Text
               fontSize="body.md"

diff --git a/...src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastChart.tsx b/...src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastChart.tsx
@@ -1,6 +1,11 @@
 import { EmissionsForecastData } from "@/util/types";
 import { TFunction } from "i18next/typescript/t";
-import { getReferenceNumberByName, SECTORS, ISector } from "@/util/constants";
+import {
+  allSectorColors,
+  getReferenceNumberByName,
+  ISector,
+  SECTORS,
+} from "@/util/constants";
 import {
   Badge,
   Box,
@@ -10,11 +15,13 @@ import {
   Tbody,
   Td,
   Text,
+  Tfoot,
   Th,
+  Thead,
   Tr,
 } from "@chakra-ui/react";
+import { convertKgToTonnes, toKebabCase } from "@/util/helpers";
 import { ResponsiveLine } from "@nivo/line";
-import { convertKgToTonnes } from "@/util/helpers";
 
 interface LineChartData {
   id: string;
@@ -55,7 +62,6 @@ export const EmissionsForecastChart = ({
 
   const data = convertToLineChartData(forecast);
 
-  const colors = ["#FFAB51", "#5162FF", "#51ABFF", "#D45252", "#CFAE53"];
   return (
     <ResponsiveLine
       data={data}
@@ -80,7 +86,7 @@ export const EmissionsForecastChart = ({
         tickRotation: 0,
         format: (value: number) => convertKgToTonnes(value),
       }}
-      colors={colors}
+      colors={allSectorColors}
       tooltip={({ point }) => {
         const year = point.data.x;
         const sumOfYs = data.reduce((sum, series) => {
@@ -104,6 +110,14 @@ export const EmissionsForecastChart = ({
             </Box>
             <Box padding="4">
               <Table variant="simple" size={"sm"}>
+                <Thead>
+                  <Tr>
+                    <Th>{t("sector")}</Th>
+                    <Th>{t("rate")}</Th>
+                    <Th>%</Th>
+                    <Th>{t("total-emissions")}</Th>
+                  </Tr>
+                </Thead>
                 <Tbody>
                   {data.map((series, index) => {
                     const yearData = series.data.find(
@@ -113,27 +127,23 @@ export const EmissionsForecastChart = ({
                       ? ((yearData.y / sumOfYs) * 100).toFixed(2)
                       : 0;
                     const sectorRefNo = getReferenceNumberByName(
-                      point.serieId as keyof ISector,
+                      toKebabCase(point.serieId as string) as keyof ISector,
                     );
-
+                    const yearGrowthRates =
+                      yearData && forecast.growthRates[yearData.x as string];
+                    const growthRate = yearGrowthRates?.[sectorRefNo!];
                     return (
                       <Tr key={series.id}>
                         <Td>
                           <Badge
                             colorScheme="gray"
                             boxSize="10px"
-                            bg={colors[index]}
+                            bg={allSectorColors[index]}
                             marginRight="8px"
                           />
                           {series.id}
                         </Td>
-                        <Td>
-                          {
-                            forecast.growthRates[point.data.x as number]?.[
-                              sectorRefNo!
-                            ]
-                          }
-                        </Td>
+                        <Td>{growthRate}</Td>
                         <Td>{percentage}%</Td>
                         <Td>
                           {convertKgToTonnes(
@@ -143,12 +153,15 @@ export const EmissionsForecastChart = ({
                       </Tr>
                     );
                   })}
+                </Tbody>
+                <Tfoot>
                   <Tr>
                     <Th>{t("total")}</Th>
                     <Th></Th>
+                    <Th></Th>
                     <Th>{convertKgToTonnes(sumOfYs)}</Th>
                   </Tr>
-                </Tbody>
+                </Tfoot>
               </Table>
             </Box>
           </Card>

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx
@@ -31,6 +31,7 @@ import {
   SegmentedProgressValues,
 } from "@/components/SegmentedProgress";
 import { EmptyStateCardContent } from "@/app/[lng]/[inventory]/InventoryResultTab/EmptyStateCardContent";
+import { allSectorColors, SECTORS } from "@/util/constants";
 
 const EmissionsTable = ({
   topEmissions,
@@ -96,11 +97,12 @@ const TopEmissionsWidget = ({
 
   function getPercentagesForProgress(): SegmentedProgressValues[] {
     const bySector: SectorEmission[] = results?.totalEmissions.bySector ?? [];
-    return bySector.map(({ sectorName, co2eq, percentage }) => {
+    return SECTORS.map(({ name }) => {
+      const sector = bySector.find((sector) => sector.sectorName === name)!;
       return {
-        name: sectorName,
-        value: co2eq,
-        percentage: percentage,
+        name,
+        value: sector?.co2eq || 0,
+        percentage: sector?.percentage || 0,
       } as SegmentedProgressValues;
     });
   }
@@ -147,6 +149,7 @@ const TopEmissionsWidget = ({
                 values={getPercentagesForProgress()}
                 total={results?.totalEmissions.total}
                 t={t}
+                colors={allSectorColors}
                 showLabels
                 showHover
               />

diff --git a/app/src/backend/OpenClimateService.ts b/app/src/backend/OpenClimateService.ts
@@ -1,5 +1,6 @@
 import { EmissionsForecastData } from "@/util/types";
 import { GLOBAL_API_URL } from "@/services/api";
+import { logger } from "@/services/logger";
 
 export type GrowthRatesResponse = Omit<EmissionsForecastData, "forecast">;
 
@@ -10,8 +11,7 @@ export const getGrowthRatesFromOC = async (
   try {
     const URL = `${GLOBAL_API_URL}/api/v0/ghgi/emissions_forecast/city/${encodeURIComponent(locode)}/${forecastYear}`;
     const response = await fetch(URL);
-
-    console.info(`getGrowthRatesFromOC Status: ${response.status}`);
+    logger.info(`${URL} Response Status: ${response.status}`);
     const data = await response.json();
     return {
       ...data,

diff --git a/app/src/components/Modals/delete-inventory-modal.tsx b/app/src/components/Modals/delete-inventory-modal.tsx
@@ -192,7 +192,7 @@ const DeleteInventoryModal: FC<DeleteInventoryModalProps> = ({
                         error={errors.password}
                         register={register}
                         t={t}
-                        name="Password"
+                        name={t("password")}
                       />
                       <Box
                         display="flex"

diff --git a/app/src/components/SegmentedProgress.tsx b/app/src/components/SegmentedProgress.tsx
@@ -25,13 +25,7 @@ export type SegmentedProgressValues =
 
 export function SegmentedProgress({
   values,
-  colors = [
-    "interactive.connected",
-    "interactive.tertiary",
-    "interactive.secondary",
-    "sentiment.negativeDefault",
-    "interactive.control",
-  ],
+  colors = ["interactive.connected", "interactive.tertiary"],
   max = 1,
   height = 4,
   showLabels = false,

diff --git a/app/src/components/password-input.tsx b/app/src/components/password-input.tsx
@@ -15,6 +15,7 @@ import {
 import { useState } from "react";
 import { FieldError } from "react-hook-form";
 import { CheckListIcon, CloseListIcon } from "./icons";
+import { TFunction } from "i18next";
 
 export default function PasswordInput({
   children,
@@ -30,7 +31,7 @@ export default function PasswordInput({
   children?: React.ReactNode;
   error: FieldError | undefined;
   register: Function;
-  t: Function;
+  t: TFunction;
   name?: String;
   id?: String;
   w?: string;
@@ -187,7 +188,7 @@ export default function PasswordInput({
             letterSpacing="wide"
             color="content.tertiary"
           >
-            {t(error.message)}
+            {t(error.message || "")}
           </Text>
         </FormErrorMessage>
       )}

diff --git a/app/src/components/recent-searches.tsx b/app/src/components/recent-searches.tsx
@@ -1,7 +1,8 @@
 import { Box, Text } from "@chakra-ui/react";
+import { TFunction } from "i18next";
 import React from "react";
 
-const RecentSearches = () => {
+const RecentSearches = ({ t }: { t: TFunction }) => {
   const data = [
     {
       id: 1,
@@ -31,7 +32,7 @@ const RecentSearches = () => {
           fontSize="overline"
           fontFamily="heading"
         >
-          RECENT SEARCHES
+          {t("recent-searches-title")}
         </Text>
       </Box>
       {hasRecentSearches ? (
@@ -78,7 +79,7 @@ const RecentSearches = () => {
             lineHeight="24"
             letterSpacing="wide"
           >
-            You have no recent searches
+            {t("recent-searches-no-results")}
           </Text>
         </Box>
       )}

diff --git a/app/src/components/steps/select-city-steps.tsx b/app/src/components/steps/select-city-steps.tsx
@@ -320,7 +320,7 @@ export default function SelectCityStep({
                   shadow="2dp"
                   className="h-auto max-h-[272px] transition-all duration-150 overflow-scroll flex flex-col py-3 gap-3 rounded-lg w-full absolute bg-white z-50 mt-2 border border-[1px solid #E6E7FF]"
                 >
-                  {!isLoading && !cityInputQuery && <RecentSearches />}
+                  {!isLoading && !cityInputQuery && <RecentSearches t={t} />}
                   {isLoading && <p className="px-4">Fetching Cities...</p>}
                   {isSuccess &&
                     cities &&

diff --git a/app/src/i18n/locales/de/onboarding.json b/app/src/i18n/locales/de/onboarding.json
@@ -68,5 +68,7 @@
   "start-inventory": "Startinventar",
   "city-boundary-info": "Falls die geografische Grenze nicht korrekt ist <0><1>Kontaktieren Sie uns</1></0>",
   "unselected-city-boundary-heading": "Suchen und wählen Sie die Stadt aus, die auf der Karte angezeigt werden soll",
-  "unselected-city-boundary-description": "Sie können die geografische Grenze für Ihren Bestand überprüfen"
+  "unselected-city-boundary-description": "Sie können die geografische Grenze für Ihren Bestand überprüfen",
+  "recent-searches-title": "Letzte Suchen",
+  "recent-searches-no-results": "Sie haben keine kürzlichen Suchen"
 }
diff --git a/app/src/i18n/locales/en/onboarding.json b/app/src/i18n/locales/en/onboarding.json
@@ -68,5 +68,7 @@
   "start-inventory": "Start Inventory",
   "city-boundary-info": "In case the geographical boundary is not the right one <0><1>Contact Us</1></0>",
   "unselected-city-boundary-heading": "Search and select the city to be shown on the map",
-  "unselected-city-boundary-description": "You will be able to check the geographical boundary for your inventory"
+  "unselected-city-boundary-description": "You will be able to check the geographical boundary for your inventory",
+  "recent-searches-title": "Recent Searches",
+  "recent-searches-no-results": "You have no recent searches"
 }
diff --git a/app/src/i18n/locales/es/onboarding.json b/app/src/i18n/locales/es/onboarding.json
@@ -69,5 +69,7 @@
   "start-inventory": "Inicio de Inventario",
   "city-boundary-info": "En caso de que el límite geográfico no sea el correcto <0><1>Contáctenos</1></0>",
   "unselected-city-boundary-heading": "Busque y seleccione la ciudad que se mostrará en el mapa",
-  "unselected-city-boundary-description": "Podrá verificar el límite geográfico de su inventario"
+  "unselected-city-boundary-description": "Podrá verificar el límite geográfico de su inventario",
+  "recent-searches-title": "Búsquedas recientes",
+  "recent-searches-no-results": "No tienes búsquedas recientes"
 }
diff --git a/app/src/i18n/locales/pt/onboarding.json b/app/src/i18n/locales/pt/onboarding.json
@@ -68,6 +68,7 @@
   "start-inventory": "Iniciar Inventário",
   "city-boundary-info": "Caso a fronteira geográfica não seja a correta <0><1>Contate-nos</1></0>",
   "unselected-city-boundary-heading": "Pesquise e selecione a cidade a ser exibida no mapa",
-  "unselected-city-boundary-description": "Você poderá verificar a fronteira geográfica do seu inventário"
-
+  "unselected-city-boundary-description": "Você poderá verificar a fronteira geográfica do seu inventário",
+  "recent-searches-title": "Pesquisas Recentes",
+  "recent-searches-no-results": "Você não tem pesquisas recentes"
 }
diff --git a/app/src/lib/app-theme.ts b/app/src/lib/app-theme.ts
@@ -1,5 +1,13 @@
 import { extendTheme, theme } from "@chakra-ui/react";
 
+export enum SectorColors {
+  I = "#575BF4",
+  II = "#DF2222",
+  III = "#F28C37",
+  IV = "#2D0D58",
+  V = "#CC6B1D",
+}
+
 export const appTheme = extendTheme({
   colors: {
     brand: {
@@ -15,6 +23,14 @@ export const appTheme = extendTheme({
       alternative: "#001EA7",
     },
 
+    sectors: {
+      I: SectorColors.I,
+      II: SectorColors.II,
+      III: SectorColors.III,
+      IV: SectorColors.IV,
+      V: SectorColors.V,
+    },
+
     semantic: {
       success: "#24BE00",
       successOverlay: "#EFFDE5",