Add x-axis to the top and bottom of Staff Graphs

webapp/src/pages/StaffGraph.tsx

@@ -46,6 +46,7 @@ const chartOptions = {
 
     scales: {
         x: {
+            position: 'top' as const,
             stacked: true,
             ticks: {
                 callback: (value: string | number, index: number) => {
@@ -53,6 +54,19 @@ const chartOptions = {
                 },
             },
         },
+        x2: {
+            ticks: {
+                callback: (value: string | number) => {
+                    if (typeof value === 'number') {
+                        return `${value * 100}%`;
+                    }
+                    return value;
+                },
+            },
+            grid: {
+                drawOnChartArea: false
+            }
+        },
         y: {
             stacked: true,
             ticks: {
@@ -104,7 +118,7 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
     />
 
     const numNrens = filterSelection.selectedNrens.length;
-    let heightPerBar = 1.5; // every added bar should give this much additional height
+    const heightPerBar = 1.5; // every added bar should give this much additional height
 
     // set a minimum height of 20rem
     const height = Math.max(numNrens * heightPerBar, 20);