Refactor

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