fix some sorting issues

compendium-frontend/src/helpers/dataconversion.tsx

 import { cartesianProduct } from 'cartesian-product-multiple-arrays';
 import {
     FundingSource, FundingSourceDataset,
-    Budget, BasicDataset, NrenStaff, NrenStaffDataset, TrafficVolume, Service, NrenAndYearDatapoint
+    Budget, BasicDataset, NrenStaff, NrenStaffDataset, TrafficVolume, NrenAndYearDatapoint
 } from "../Schema";
 
 // create a color from a string, credits https://stackoverflow.com/a/16348977
@@ -38,8 +38,8 @@ function getColorMap() {
 export const createTrafficVolumeDataset = (data: TrafficVolume[]) => {
     const dataLookup = createDataLookup(data);
 
-    const labelsYear = [...new Set(data.map((item: TrafficVolume) => item.year))];
-    const labelsNREN = [...new Set(data.map((item: TrafficVolume) => item.nren))];
+    const labelsYear = [...new Set(data.map((item: TrafficVolume) => item.year))].sort();
+    const labelsNREN = [...new Set(data.map((item: TrafficVolume) => item.nren))].sort();
 
     const sets = labelsYear.map(year => {
         return {
@@ -76,8 +76,8 @@ export const createTrafficVolumeDataset = (data: TrafficVolume[]) => {
 export const createFundingSourceDataset = (data: FundingSource[]) => {
     const dataLookup = createDataLookup(data);
 
-    const labelsYear = [...new Set(data.map((item: FundingSource) => item.year))];
-    const labelsNREN = [...new Set(data.map((item: FundingSource) => item.nren))];
+    const labelsYear = [...new Set(data.map((item: FundingSource) => item.year))].sort();
+    const labelsNREN = [...new Set(data.map((item: FundingSource) => item.nren))].sort();
     const fundingSources = [
         "CLIENT INSTITUTIONS",
         "COMMERCIAL",
@@ -196,7 +196,7 @@ export const createNRENStaffDataset = (data: NrenStaff[], roles: boolean, select
 
     const dataLookup = createDataLookup(data)
 
-    const labelsYear = [selectedYear];
+    const labelsYear = [selectedYear].sort();
     const labelsNREN = [...new Set(data.map((item: NrenStaff) => item.nren))].sort((nrenA, nrenB) => {
         const categoryMapNrenA = dataLookup.get(nrenA)!.get(selectedYear);
         const categoryMapNrenB = dataLookup.get(nrenB)!.get(selectedYear);

compendium-frontend/src/pages/ChargingStructure.tsx

@@ -30,7 +30,7 @@ function ChargingStructurePage(): React.ReactElement {
         coloredYears
     />
 
-    const showYears = [...filterSelection.selectedYears].sort();
+    const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
 
     return (
         <DataPage title="Charging Mechanism of NRENs per Year"

compendium-frontend/src/pages/Services.tsx

@@ -53,7 +53,7 @@ function ServicesPage({ category }: inputProps): React.ReactElement {
         coloredYears
     />
 
-    const showYears = [...filterSelection.selectedYears].sort();
+    const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
 
     return (
         <DataPage title={"NREN " + CategoryFriendlyNames[category] + " services matrix"}

compendium-frontend/src/pages/TrafficVolumePerNren.tsx

@@ -97,8 +97,6 @@ function TrafficVolumePage() {
   const numYears = filterSelection.selectedYears.length;
   const heightPerBar = 2; // every added bar should give this much additional height
 
-  console.log(trafficVolumeDataset)
-
   // set a minimum height of 20rem, additional years need some more space
   const height = numNrens * numYears * heightPerBar + 5;
   return (