From b0b9fe67dbdfed08bd7ac0c1c1049990a30d129a Mon Sep 17 00:00:00 2001
From: Tero Tikkanen <tero.tikkanen@gmail.com>
Date: Fri, 29 Nov 2024 09:30:59 +0200
Subject: [PATCH] Make showing all goals data prettier

---
 components/paths/InventoryNodeSummary.tsx | 217 +++++++++++-----------
 components/providers/PathsProvider.tsx    |  15 +-
 2 files changed, 117 insertions(+), 115 deletions(-)

diff --git a/components/paths/InventoryNodeSummary.tsx b/components/paths/InventoryNodeSummary.tsx
index 6831b4ae..7b46c165 100644
--- a/components/paths/InventoryNodeSummary.tsx
+++ b/components/paths/InventoryNodeSummary.tsx
@@ -80,6 +80,7 @@ type EmissionDisplay = {
 type Emissions = {
   label: string | null;
   id: number | string;
+  metricName: string | null;
   latest: EmissionDisplay;
   reference: EmissionDisplay;
 };
@@ -92,6 +93,7 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
   const [emissions, setEmissions] = useState<Emissions[]>([
     {
       label: null,
+      metricName: null,
       id: 0,
       latest: {
         value: null,
@@ -109,10 +111,10 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
   ]);
 
   const [unit, setUnit] = useState<string | null>(null);
+  const nodeMetric = new DimensionalMetric(node.metricDim!);
 
-  // Redefine values if yearRange is maniupulated
+  // Redefine values if yearRange has been manipulated
   useEffect(() => {
-    const nodeMetric = new DimensionalMetric(node.metricDim!);
     const historicalYears = nodeMetric.getHistoricalYears();
     const lastHistoricalYear = historicalYears[historicalYears.length - 1];
     setUnit(nodeMetric.getUnit());
@@ -121,6 +123,8 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
 
     displayGoals.forEach((goal) => {
       const sliceConfig: SliceConfig = nodeMetric.getDefaultSliceConfig(goal);
+
+      // TODO: Data seems to exist even when goal is not available on metric?
       const latestData = nodeMetric.getSingleYear(
         lastHistoricalYear,
         sliceConfig.categories
@@ -129,6 +133,8 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
         yearRange[1],
         sliceConfig.categories
       );
+
+      // So we check slice config to determine if data is valid
       // Let's assume the first key is the one we want to display
       //const displayCategoryType = Object.keys(sliceConfig.categories)[0];
       const displayCategoryType =
@@ -139,46 +145,52 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
           ? { id: displayCategoryType?.groups[0], type: 'group' }
           : { id: displayCategoryType?.categories[0], type: 'category' };
 
-      if (displayCategory.id) {
-        const latestLabel = latestData.allLabels.find(
-          (label) => label.id === displayCategory.id
-        )?.label;
-        const referenceLabel = referenceData.allLabels.find(
-          (label) => label.id === displayCategory.id
-        )?.label;
+      const hasDataForThisGoal = displayCategory.id ? true : false;
+
+      const latestLabel = latestData.allLabels.find(
+        (label) => label.id === displayCategory.id
+      )?.label;
+      const referenceLabel = referenceData.allLabels.find(
+        (label) => label.id === displayCategory.id
+      )?.label;
 
-        const latestValue = getTotalValues(latestData)[0];
-        const referenceValue = goal?.hideForecast
+      const latestValue = hasDataForThisGoal
+        ? getTotalValues(latestData)[0]
+        : null;
+      const referenceValue =
+        goal?.hideForecast || !hasDataForThisGoal
           ? null
           : getTotalValues(referenceData)[0];
 
-        displayEmissions.push({
-          label: goal.label ? goal.label : null,
-          id: goal.id,
-          latest: {
-            value: latestValue,
-            label: latestLabel || null,
-            year: lastHistoricalYear,
-            change:
-              lastHistoricalYear > yearRange[1] &&
-              referenceValue &&
-              referenceValue !== latestValue
-                ? (latestValue - referenceValue) / Math.abs(referenceValue)
-                : null,
-          },
-          reference: {
-            value: referenceValue,
-            label: referenceLabel || null,
-            year: yearRange[1],
-            change:
-              lastHistoricalYear < yearRange[1] &&
-              latestValue &&
-              latestValue !== referenceValue
-                ? (referenceValue - latestValue) / Math.abs(latestValue)
-                : null,
-          },
-        });
-      }
+      displayEmissions.push({
+        metricName: nodeMetric.getName(),
+        label: goal.label ? goal.label : null,
+        id: goal.id,
+        latest: {
+          value: latestValue,
+          label: latestLabel || null,
+          year: lastHistoricalYear,
+          change:
+            latestValue !== null &&
+            lastHistoricalYear > yearRange[1] &&
+            referenceValue &&
+            referenceValue !== latestValue
+              ? (latestValue - referenceValue) / Math.abs(referenceValue)
+              : null,
+        },
+        reference: {
+          value: referenceValue,
+          label: referenceLabel || null,
+          year: yearRange[1],
+          change:
+            referenceValue !== null &&
+            lastHistoricalYear < yearRange[1] &&
+            latestValue &&
+            latestValue !== referenceValue
+              ? (referenceValue - latestValue) / Math.abs(latestValue)
+              : null,
+        },
+      });
     });
 
     setEmissions(displayEmissions);
@@ -187,78 +199,67 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [yearRange[1]]);
 
-  console.log('display goals', displayGoals);
-  console.log('emissions', emissions);
   return (
     <>
-      {emissions.map(
-        (em) =>
-          (em.latest.value || em.reference.value) && (
-            <Values key={em.id}>
-              <ValuesHeader>{em.label}</ValuesHeader>
-              {em.latest.value ? (
-                <SubValue>
-                  <HighlightValue
-                    displayValue={
-                      em.latest.value
-                        ? format.number(em.latest.value, {
-                            maximumSignificantDigits: 2,
-                          })
-                        : ''
-                    }
-                    header={`${em.latest.year}`}
-                    unit={unit || ''}
-                    size="md"
-                    change={
-                      em.latest.change != null
-                        ? `${em.latest.change > 0 ? '+' : ''}${format.number(
-                            em.latest.change * 100,
-                            {
-                              style: 'unit',
-                              unit: 'percent',
-                              maximumSignificantDigits: 2,
-                            }
-                          )}`
-                        : undefined
-                    }
-                  />
-                </SubValue>
-              ) : (
-                <SubValue />
-              )}
-              {em.reference.value ? (
-                <SubValue>
-                  <HighlightValue
-                    displayValue={
-                      em.reference.value
-                        ? format.number(em.reference.value, {
-                            maximumSignificantDigits: 2,
-                          })
-                        : ''
-                    }
-                    header={`${em.reference.year}`}
-                    unit={unit || ''}
-                    size="md"
-                    change={
-                      em.reference.change != null
-                        ? `${em.reference.change > 0 ? '+' : ''}${format.number(
-                            em.reference.change * 100,
-                            {
-                              style: 'unit',
-                              unit: 'percent',
-                              maximumSignificantDigits: 2,
-                            }
-                          )}`
-                        : undefined
-                    }
-                  />
-                </SubValue>
-              ) : (
-                <SubValue />
-              )}
-            </Values>
-          )
-      )}
+      {emissions.map((em) => (
+        <Values key={em.id}>
+          <ValuesHeader>{em.label}</ValuesHeader>
+
+          <SubValue>
+            <HighlightValue
+              displayValue={
+                em.latest.value != null
+                  ? format.number(em.latest.value, {
+                      maximumSignificantDigits: 2,
+                    })
+                  : ' '
+              }
+              header={`${em.latest.value != null ? em.latest.year : '-'}`}
+              unit={em.latest.value && unit ? unit : ''}
+              size="md"
+              change={
+                em.latest.change != null
+                  ? `${em.latest.change > 0 ? '+' : ''}${format.number(
+                      em.latest.change * 100,
+                      {
+                        style: 'unit',
+                        unit: 'percent',
+                        maximumSignificantDigits: 2,
+                      }
+                    )}`
+                  : undefined
+              }
+            />
+          </SubValue>
+
+          <SubValue>
+            <HighlightValue
+              displayValue={
+                em.reference.value != null
+                  ? format.number(em.reference.value, {
+                      maximumSignificantDigits: 2,
+                    })
+                  : ' '
+              }
+              header={`${em.reference.value != null ? em.reference.year : '-'}`}
+              unit={em.reference.value && unit ? unit : ''}
+              size="md"
+              change={
+                em.reference.change != null
+                  ? `${em.reference.change > 0 ? '+' : ''}${format.number(
+                      em.reference.change * 100,
+                      {
+                        style: 'unit',
+                        unit: 'percent',
+                        maximumSignificantDigits: 2,
+                      }
+                    )}`
+                  : undefined
+              }
+            />
+          </SubValue>
+        </Values>
+      ))}
     </>
   );
 };
diff --git a/components/providers/PathsProvider.tsx b/components/providers/PathsProvider.tsx
index ffbcb5e6..a4d839d1 100644
--- a/components/providers/PathsProvider.tsx
+++ b/components/providers/PathsProvider.tsx
@@ -33,14 +33,15 @@ export default function PathsProvider({ instance, children }: Props) {
     };
   });
 
-  const augmentedInstance = {
-    instance: { ...pathsInstance, goals: instanceGoals },
-    availableNormalizations: pathsAvailableNormalizations,
-    parameters: pathsParameters,
-    scenarios: pathsScenarios,
-  };
+  const augmentedInstance = instance
+    ? {
+        instance: { ...pathsInstance, goals: instanceGoals },
+        availableNormalizations: pathsAvailableNormalizations,
+        parameters: pathsParameters,
+        scenarios: pathsScenarios,
+      }
+    : undefined;
 
-  console.log('Augmented Paths instance', augmentedInstance);
   return (
     <PathsContext.Provider value={augmentedInstance}>
       {children}