Filter data correctly for TrafficRatio and Staffgraph

compendium-frontend/src/pages/Network/TrafficRatio.tsx

@@ -104,25 +104,10 @@ function TrafficRatioPage() {
     const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
     const { data: trafficRatioData, years, nrens } = useData<TrafficRatio>('/api/network/traffic-ratio', setFilterSelection);
 
-    const trafficRatioDataset = createTrafficRatioDataset(trafficRatioData, filterSelection.selectedYears[0]);
-
-    trafficRatioDataset.datasets.forEach(dataset => {
-        dataset.hidden = !filterSelection.selectedYears.includes(parseInt(dataset.stack));
-    });
-
     const selectedData = trafficRatioData.filter(data =>
         filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
     );
-
-    // remove the datapoints and labels for the nrens that aren't selected
-    // unfortunately we cannot just hide them because graph.js doesn't want
-    // to create a stack from a single dataset
-    trafficRatioDataset.datasets.forEach(dataset => {
-        dataset.data = dataset.data.filter((e, i) => {
-            return filterSelection.selectedNrens.includes(trafficRatioDataset.labels[i]);
-        });
-    });
-    trafficRatioDataset.labels = trafficRatioDataset.labels.filter((e) => filterSelection.selectedNrens.includes(e));
+    const trafficRatioDataset = createTrafficRatioDataset(selectedData, filterSelection.selectedYears[0]);
 
     const filterNode = <Filter
         max1year
@@ -131,7 +116,8 @@ function TrafficRatioPage() {
         setFilterSelection={setFilterSelection}
     />
 
-    const numNrens = filterSelection.selectedNrens.length;
+    const selectedNrens = Array.from(new Set(selectedData.map(data => data.nren))).map(nren => nrens.get(nren)).filter(nren => !!nren);
+    const numNrens = selectedNrens.length;
     const heightPerBar = 1.5; // every added bar should give this much additional height
 
     // set a minimum height of 20rem

compendium-frontend/src/pages/Organization/StaffGraph.tsx

@@ -106,36 +106,30 @@ interface inputProps {
 
 function StaffGraphPage({ roles = false }: inputProps) {
     const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
-    const { data: staffData, years, nrens } = useData<NrenStaff>('/api/staff/', setFilterSelection);
+    const { data, years, nrens } = useData<NrenStaff>('/api/staff/', setFilterSelection);
 
-    const nrenStaffDataset = createNRENStaffDataset(staffData, roles, filterSelection.selectedYears[0]);
-
-    nrenStaffDataset.datasets.forEach(dataset => {
-        dataset.hidden = !filterSelection.selectedYears.includes(parseInt(dataset.stack));
-    });
+    const rolesValid = (staffdata: NrenStaff) => {
+        return (roles && staffdata.technical_fte > 0 && staffdata.non_technical_fte > 0) ||
+            (!roles && staffdata.permanent_fte > 0 && staffdata.subcontracted_fte > 0);
+    }
+    const staffData = data.filter(rolesValid);
+    const validYears = Array.from(new Set(staffData.map(data => data.year)));
 
     const selectedData = staffData.filter(data =>
         filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
-      );
-
-    // remove the datapoints and labels for the nrens that aren't selected
-    // unfortunately we cannot just hide them because graph.js doesn't want
-    // to create a stack from a single dataset
-    nrenStaffDataset.datasets.forEach(dataset => {
-        dataset.data = dataset.data.filter((e, i) => {
-            return filterSelection.selectedNrens.includes(nrenStaffDataset.labels[i]);
-        });
-    });
-    nrenStaffDataset.labels = nrenStaffDataset.labels.filter((e) => filterSelection.selectedNrens.includes(e));
+    );
+
+    const nrenStaffDataset = createNRENStaffDataset(selectedData, roles, filterSelection.selectedYears[0]);
+    const selectedNrens = Array.from(new Set(selectedData.map(data => data.nren))).map(nren => nrens.get(nren)).filter(nren => !!nren);
 
     const filterNode = <Filter
         max1year
-        filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
+        filterOptions={{ availableYears: [...validYears], availableNrens: [...selectedNrens.values()] }}
         filterSelection={filterSelection}
         setFilterSelection={setFilterSelection}
     />
 
-    const numNrens = filterSelection.selectedNrens.length;
+    const numNrens = selectedNrens.length;
     const heightPerBar = 1.5; // every added bar should give this much additional height
 
     // set a minimum height of 20rem