Merge pull request #1034 from Open-Earth-Foundation/nina/feat/ON-3141…

…/unifyColors [on-3141] unify colors
Open-Earth-Foundation · Jan 7, 2025 · 33a9c2c · 33a9c2c
2 parents a5b6e01 + 47370d0
commit 33a9c2c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 20 deletions.
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 {
+  getReferenceNumberByName,
+  SECTORS,
+  ISector,
+  allSectorColors,
+} from "@/util/constants";
 import {
   Badge,
   Box,
@@ -55,7 +60,6 @@ export const EmissionsForecastChart = ({
 
   const data = convertToLineChartData(forecast);
 
-  const colors = ["#FFAB51", "#5162FF", "#51ABFF", "#D45252", "#CFAE53"];
   return (
     <ResponsiveLine
       data={data}
@@ -80,7 +84,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) => {
@@ -122,7 +126,7 @@ export const EmissionsForecastChart = ({
                           <Badge
                             colorScheme="gray"
                             boxSize="10px"
-                            bg={colors[index]}
+                            bg={allSectorColors[index]}
                             marginRight="8px"
                           />
                           {series.id}

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/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/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",

diff --git a/app/src/util/constants.ts b/app/src/util/constants.ts
@@ -3,6 +3,7 @@ import { PiPlant, PiTrashLight } from "react-icons/pi";
 import { TbBuildingCommunity } from "react-icons/tb";
 import { IconBaseProps } from "react-icons";
 import { LiaIndustrySolid } from "react-icons/lia";
+import { appTheme, SectorColors } from "@/lib/app-theme"; // Import the appTheme
 
 export const maxPopulationYearDifference = 5;
 
@@ -28,6 +29,7 @@ export interface ISector {
       scopes: number[];
     };
   };
+  color: string;
 }
 
 export const getSectorsForInventory = (inventoryType?: InventoryType) => {
@@ -65,6 +67,7 @@ export const SECTORS: ISector[] = [
     name: "stationary-energy",
     description: "stationary-energy-description",
     icon: TbBuildingCommunity,
+    color: SectorColors.I,
     inventoryTypes: {
       [InventoryTypeEnum.GPC_BASIC]: { scopes: [1, 2] },
       [InventoryTypeEnum.GPC_BASIC_PLUS]: { scopes: [1, 2, 3] },
@@ -77,6 +80,7 @@ export const SECTORS: ISector[] = [
     name: "transportation",
     description: "transportation-description",
     icon: BsTruck,
+    color: SectorColors.II,
     inventoryTypes: {
       [InventoryTypeEnum.GPC_BASIC]: { scopes: [1, 2] },
       [InventoryTypeEnum.GPC_BASIC_PLUS]: { scopes: [1, 2, 3] },
@@ -89,6 +93,7 @@ export const SECTORS: ISector[] = [
     name: "waste",
     description: "waste-description",
     icon: PiTrashLight,
+    color: SectorColors.III,
     inventoryTypes: {
       [InventoryTypeEnum.GPC_BASIC]: { scopes: [1, 3] },
       [InventoryTypeEnum.GPC_BASIC_PLUS]: { scopes: [1, 3] },
@@ -101,6 +106,7 @@ export const SECTORS: ISector[] = [
     name: "ippu",
     description: "ippu-description",
     icon: LiaIndustrySolid,
+    color: SectorColors.IV,
     testId: "ippu-sector-card",
     inventoryTypes: {
       [InventoryTypeEnum.GPC_BASIC]: { scopes: [] },
@@ -113,6 +119,7 @@ export const SECTORS: ISector[] = [
     name: "afolu",
     description: "afolu-description",
     icon: PiPlant,
+    color: SectorColors.V,
     testId: "afolu-sector-card",
     inventoryTypes: {
       [InventoryTypeEnum.GPC_BASIC]: { scopes: [] },
@@ -121,5 +128,11 @@ export const SECTORS: ISector[] = [
   },
 ];
 
+export const allSectorColors = SECTORS.map((sector) => {
+  return sector.color;
+});
+export const getSectorByName = (name: string) =>
+  SECTORS.find((s) => s.name === name);
+
 export const getReferenceNumberByName = (name: keyof ISector) =>
   findBy("name", name)?.referenceNumber;