[ON-3141] in TopEmissionsWidget.tsx

Open-Earth-Foundation · Jan 3, 2025 · 5c54e7d · 5c54e7d
1 parent 388fbad
commit 5c54e7d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
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/util/constants.ts b/app/src/util/constants.ts
@@ -124,3 +124,5 @@ export const SECTORS: ISector[] = [
 ];
 
 export const allSectorColors = SECTORS.map((sector) => sector.color);
+export const getSectorByName = (name: string) =>
+  SECTORS.find((s) => s.name === name);