Merge tag 'v0.39.0-rc.0'

Open-Earth-Foundation · Jan 7, 2025 · 221b76b · 221b76b
2 parents c31584a + 75efef2
commit 221b76b
Show file tree

Hide file tree

Showing 46 changed files with 2,589 additions and 697 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.38.0",
+  "version": "0.39.0-rc.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -41,6 +41,7 @@
     "@huggingface/inference": "^2.8.0",
     "@next/env": "^14.2.5",
     "@nivo/bar": "^0.88.0",
+    "@nivo/line": "^0.88.0",
     "@react-email/components": "^0.0.19",
     "@reduxjs/toolkit": "^2.2.7",
     "@storybook/cli": "^8.3.4",

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorChart.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorChart.tsx
@@ -1,10 +1,10 @@
 import { SectorEmission } from "@/util/types";
 import { ResponsiveBar } from "@nivo/bar";
 import { SECTORS } from "@/util/constants";
-import { convertKgToKiloTonnes } from "@/util/helpers";
+import { convertKgToKiloTonnes, convertKgToTonnes } from "@/util/helpers";
 import { useTranslation } from "@/i18n/client";
 import { toKebabCaseModified } from "@/app/[lng]/[inventory]/InventoryResultTab/index";
-import { Box, Text } from "@chakra-ui/react";
+import { Badge, Box, Card, HStack, Text } from "@chakra-ui/react";
 
 interface EmissionBySectorChartProps {
   data: {
@@ -61,6 +61,23 @@ const EmissionBySectorChart: React.FC<EmissionBySectorChartProps> = ({
           layout={"vertical"}
           margin={{ top: 50, right: 130, bottom: 50, left: 120 }}
           padding={0.3}
+          tooltip={({ id, value, color }) => (
+            <Card py={2} px={2}>
+              <HStack>
+                <Badge
+                  colorScheme="gray"
+                  boxSize="16px"
+                  bg={color}
+                  marginRight="8px"
+                />
+                <Text>
+                  {tData(id as string)}
+                  {" - "}
+                  {convertKgToTonnes(value)}
+                </Text>
+              </HStack>
+            </Card>
+          )}
           valueScale={{ type: "linear", min: 0, max: "auto" }}
           indexScale={{ type: "band", round: true }}
           colors={colors}
@@ -84,8 +101,8 @@ const EmissionBySectorChart: React.FC<EmissionBySectorChartProps> = ({
             tickRotation: 0,
             legend: "CO2eq",
             legendPosition: "middle",
-            legendOffset: -75,
-            format: (value) => value,
+            legendOffset: -100,
+            format: (value) => convertKgToTonnes(value),
           }}
           labelSkipWidth={12}
           labelSkipHeight={12}
@@ -96,7 +113,7 @@ const EmissionBySectorChart: React.FC<EmissionBySectorChartProps> = ({
           role="application"
           ariaLabel="Nivo bar chart demo"
           barAriaLabel={function (e) {
-            return e.id + ": " + e.formattedValue + " in year: " + e.indexValue;
+            return `${e.id}: ${convertKgToTonnes(e.value!)} in year: ${e.indexValue}`;
           }}
         />
       </div>

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastCard.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastCard.tsx
@@ -0,0 +1,66 @@
+import { EmissionsForecastData } from "@/util/types";
+import { TFunction } from "i18next/typescript/t";
+import { useState } from "react";
+import { GrowthRatesExplanationModal } from "@/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/GrowthRatesExplanationModal";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  HStack,
+  IconButton,
+  Text,
+} from "@chakra-ui/react";
+import { InfoOutlineIcon } from "@chakra-ui/icons";
+import { EmissionsForecastChart } from "@/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastChart";
+
+export const EmissionsForecastCard = ({
+  forecast,
+  t,
+  lng,
+}: {
+  forecast: EmissionsForecastData;
+  t: TFunction;
+  lng: string;
+}) => {
+  const [isExplanationModalOpen, setIsExplanationModalOpen] = useState(false);
+
+  return (
+    <>
+      <GrowthRatesExplanationModal
+        t={t}
+        isOpen={isExplanationModalOpen}
+        onClose={() => setIsExplanationModalOpen(false)}
+        emissionsForecast={forecast}
+        lng={lng}
+      />
+
+      <Card paddingY="0px" paddingX="0px" height="100%" width="100%">
+        <CardHeader>
+          <HStack justifyContent="space-between">
+            <Text fontFamily="heading" fontSize="title.md" fontWeight="medium">
+              {t("breakdown-of-sub-sector-emissions")}
+            </Text>
+            <IconButton
+              width={"20px"}
+              height={"20px"}
+              variant={"unstyled"}
+              isRound
+              onClick={() => setIsExplanationModalOpen(true)}
+              icon={<InfoOutlineIcon marginRight={3} fontSize={"20px"} />}
+              aria-label={"growth-rates-explanation"}
+            />
+          </HStack>
+        </CardHeader>
+        <CardBody
+          paddingY="0px"
+          paddingLeft={4}
+          paddingRight={0}
+          height="100%"
+          width="100%"
+        >
+          <EmissionsForecastChart forecast={forecast} t={t} />
+        </CardBody>
+      </Card>
+    </>
+  );
+};