Skip to content

Commit

Permalink
Merge branch 'develop' into dependabot/npm_and_yarn/app/eslint-9.17.0
Browse files Browse the repository at this point in the history
  • Loading branch information
thehighestprimenumber authored Jan 8, 2025
2 parents ad2dacc + b8ea283 commit 07282c9
Show file tree
Hide file tree
Showing 78 changed files with 3,694 additions and 1,010 deletions.
77 changes: 75 additions & 2 deletions app/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion app/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "city-catalyst",
"version": "0.33.0-dev.0",
"version": "0.40.0-dev.0",
"private": true,
"type": "module",
"scripts": {
Expand Down Expand Up @@ -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",
Expand All @@ -65,6 +66,7 @@
"chakra-react-select": "^4.9.1",
"char-regex": "^2.0.1",
"csv-parse": "^5.5.6",
"csv-stringify": "^6.5.2",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"decimal.js": "^10.4.3",
Expand Down
Original file line number Diff line number Diff line change
@@ -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 { allSectorColors, SECTORS } from "@/util/constants";
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: {
Expand Down Expand Up @@ -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]">
Expand All @@ -61,9 +59,26 @@ 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}
colors={allSectorColors}
borderColor={{
from: "color",
modifiers: [["darker", 1.6]],
Expand All @@ -84,8 +99,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}
Expand All @@ -96,7 +111,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>
Expand All @@ -119,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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ interface EmissionBySectorTableProps {

type ExtendedSectorEmission = SectorEmission & {
percentageChange: number | null;
totalInventoryPercentage: number;
totalInventoryPercentage: number | null;
};

const EmissionBySectorTableSection: React.FC<EmissionBySectorTableProps> = ({
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
Loading

0 comments on commit 07282c9

Please sign in to comment.