Merge branch 'feature/COMP-174_fix_charging_mechanism_table' into 'develop'

loop over data instead of over filter selection and make sure each year has a fixed color

See merge request !22

webapp/src/components/ColorPill.tsx

 import React from "react";
 
-function ColorPill({ nren, year, index, dataLookup, discriminator }) {
+function ColorPill({ year, active }) {
   return (
     <div className="d-inline-block" key={year}>
-      {dataLookup.get(`${nren}/${year}`) === discriminator ? (
+      {active ? (
         <div
-          className={`rounded-pill color-of-the-year-${index}`}
+          className={`rounded-pill color-of-the-year-${year % 9}`}
           style={{ width: "75px", height: "30px", margin: "2px" }}
         ></div>
       ) : (

webapp/src/helpers/dataconversion.tsx

@@ -150,11 +150,16 @@ export function createBudgetDataset(budgetEntries: Budget[]): BasicDataset {
 
 
 export function createChargingStructureDataLookup(data: ChargingStructure[]) {
-    const dataLookup = new Map<string, (string | null)>();
-    data.forEach((item: ChargingStructure) => {
-        const lookupKey = `${item.NREN}/${item.YEAR}`
-        dataLookup.set(lookupKey, item.FEE_TYPE)
-    })
+    const dataLookup = new Map<string, Map<number, string>>();
+
+    data.forEach(entry => {
+        let nrenEntry = dataLookup.get(entry.NREN);
+        if (!nrenEntry) {
+            nrenEntry = new Map<number, string>();
+        }
+        nrenEntry.set(entry.YEAR, entry.FEE_TYPE || '');
+        dataLookup.set(entry.NREN, nrenEntry);
+    });
     return dataLookup;
 }
 

webapp/src/pages/ChargingStructure.tsx

@@ -45,7 +45,13 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
     const labelsNREN = [...new Set(chargingStructureData.map((item: ChargingStructure) => item.NREN))];
     const labelsYear = [...new Set(chargingStructureData.map((item: ChargingStructure) => item.YEAR))];
 
-    const dataLookup = createChargingStructureDataLookup(chargingStructureData)
+    const selectedData = (chargingStructureData || []).filter(data =>
+        filterSelection.selectedYears.includes(data.YEAR) && filterSelection.selectedNrens.includes(data.NREN)
+    );
+
+    const dataLookup = createChargingStructureDataLookup(selectedData);
+
+
     React.useEffect(() => {
         const loadData = async () => {
             const _chargingStructureData = await getData();
@@ -93,49 +99,17 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
                     </tr>
                 </thead>
                 <tbody>
-                    {filterSelection.selectedNrens
-                        .sort((a, b) => a > b ? 1 : -1)
-                        .map((nren: string) => (
+                    {Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
                             <tr key={nren}>
                                 <td>{nren}</td>
-                                <td >
-                                    {filterSelection.selectedYears
-                                        .sort((a, b) => a > b ? 1 : -1)
-                                        .map((year: number, index) => (
-                                            <ColorPill key={year} nren={nren} year={year} index={index} dataLookup={dataLookup} discriminator={"flat_fee"} />
+                                {["flat_fee", "usage_based_fee", "combination", "no_charge", "other"].map(discriminator => (
+                                    <td key={discriminator}>
+                                        {Array.from(nrenMap.entries()).map(([year, chargingMechanism]) => (
+                                            <ColorPill key={year} year={year} active={chargingMechanism == discriminator} />
                                         ))}
-                                </td>
-                                <td>
-                                    {filterSelection.selectedYears
-                                        .sort((a, b) => a > b ? 1 : -1)
-                                        .map((year: number, index) => (
-                                            <ColorPill key={year} nren={nren} year={year} index={index} dataLookup={dataLookup} discriminator={"usage_based_fee"} />
-                                        ))
-                                    }
-                                </td>
-                                <td>
-                                    {filterSelection.selectedYears
-                                        .sort((a, b) => a > b ? 1 : -1)
-                                        .map((year: number, index) => (
-                                            <ColorPill key={year} nren={nren} year={year} index={index} dataLookup={dataLookup} discriminator={"combination"} />
-                                        ))}
-                                </td>
-                                <td>
-                                    {filterSelection.selectedYears
-                                        .sort((a, b) => a > b ? 1 : -1)
-                                        .map((year: number, index) => (
-                                            <ColorPill key={year} nren={nren} year={year} index={index} dataLookup={dataLookup} discriminator={"no_charge"} />
-                                        ))}
-                                </td>
-                                <td>
-                                    {filterSelection.selectedYears
-                                        .sort((a, b) => a > b ? 1 : -1)
-                                        .map((year: number, index) => (
-                                            <ColorPill key={year} nren={nren} year={year} index={index} dataLookup={dataLookup} discriminator={"other"} />
-                                        ))}
-                                </td>
+                                    </td>
+                                ))}
                             </tr>
-
                         ))}
                 </tbody>
 

webapp/src/scss/layout/_components.scss

@@ -159,23 +159,39 @@
 }
 
 .color-of-the-year-0 {
-  background-color: rgba(244, 144, 28, 1);
+  background-color: #fd7f6f;
 }
 
 .color-of-the-year-1 {
-  background-color: rgba(140, 168, 128, 1);
+  background-color: #7eb0d5;
 }
 
 .color-of-the-year-2 {
-  background-color: rgb(48, 182, 255);
+  background-color: #ffee65;
 }
 
 .color-of-the-year-3 {
-  background-color: red;
+  background-color: #bd7ebe;
 }
 
 .color-of-the-year-4 {
-  background-color: green;
+  background-color: #beb9db;
+}
+
+.color-of-the-year-5 {
+  background-color: #b2e061;
+}
+
+.color-of-the-year-6 {
+  background-color: #ffb55a;
+}
+
+.color-of-the-year-7 {
+  background-color: #fdcce5;
+}
+
+.color-of-the-year-8 {
+  background-color: #8bd3c7;
 }
 
 .table-bg-highlighted {