2nd axis issue Funding source

webapp/src/pages/ChargingStructure.tsx

@@ -50,7 +50,10 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
     />
 
     return (
-        <DataPage title="Charging Structure" category={Sections.Organisation} filter={filterNode}>
+        <DataPage title="Charging Mechanism of NRENs per Year" 
+        description="The charging structure is the way in which NRENs charge their customers for the services they provide.
+         The charging structure can be based on a flat fee, usage based fee, a combination of both, or no direct charge."
+        category={Sections.Organisation} filter={filterNode}>
             <Table className="charging-struct-table" striped bordered responsive >
                 <colgroup>
                     <col span={1} style={{ width: "10%" }} />

webapp/src/pages/FundingSource.tsx

@@ -24,85 +24,129 @@ ChartJS.register(
 
 
 export const chartOptions = {
-    maintainAspectRatio: false,
-    animation: {
-        duration: 0
+  maintainAspectRatio: false,
+  animation: {
+    duration: 0,
+  },
+  plugins: {
+    legend: {
+      display: false,
+      labels: {
+        boxWidth: 20,
+        boxHeight: 30,
+        pointStyle: "rectRounded",
+        borderRadius: 6,
+        useBorderRadius: true,
+      },
     },
-    plugins: {
-        legend: {
-            display: false,
-            labels: {
-                boxWidth: 20,
-                boxHeight: 30,
-                pointStyle: "rectRounded",
-                borderRadius: 6,
-                useBorderRadius: true,
-
-                },
-            },
+  },
+  scales: {
+    x: {
+      position: "top" as const,
+      stacked: true,
+      ticks: {
+        font: {
+          size: 20,
+          family: "Open Sans, sans-serif",
+          weight: "bold",
         },
-    scales: {
-        x: {
-            position: 'top' as const,
-            stacked: true,
-            ticks: {
-                font:{
-                size: 20,
-                family: 'Open Sans, sans-serif',
-                weight: 'bold',
-                },
-                callback: (value: string | number) => {
-                    if (typeof value === 'number') {
-                        return `${value}%`;
-                    }
-                    return value;
-                },
-            },
-
+        callback: (value: string | number) => {
+          if (typeof value === "number") {
+            return `${value}%`;
+          }
+          return value;
         },
-        x2: {
-            stacked: true,
-            ticks: {
-                callback: (value: string | number) => {
-                    if (typeof value === 'number') {
-                        return `${value}%`;
-                    }
-                    return value;
-                },
-                font: {
-                    size: 20,
-                    family: 'Open Sans, sans-serif',
-                    weight: 'bold',
-                }
-            },
-            grid: {
-                display: false,
-                drawTicks: false,
-                drawBorder: false,
-            },
-            
-            min : 0,
-            max : 100
+      },
+    },
+    xBottom: {
+      stacked: true,
+      ticks: {
+        callback: (value: string | number) => {
+          if (typeof value === "number") {
+            return `${value}%`;
+          }
+          return value;
         },
-        y: {
-            stacked: true,
-            ticks: {
-                autoSkip: false,
-                font: {
-                    size: 20,
-                    family: 'Open Sans, sans-serif',
-                    weight: 'bold',
-                }
-            },
+        font: {
+          size: 20,
+          family: "Open Sans, sans-serif",
+          weight: "bold",
         },
+      },
+      grid: {
+        display: false,
+        drawTicks: false,
+        drawBorder: false,
+      },
+      afterDataLimits: function (axis) {
+        if (Chart.instances[1] && axis.chart.scales.xBottom) {
+          axis.chart.scales.xBottom.options.min = Chart.instances[1].scales.x.min;
+          axis.chart.scales.xBottom.options.max = Chart.instances[1].scales.x.max;
+        }
+      },
     },
-    indexAxis: "y" as const
+    y: {
+      stacked: true,
+      ticks: {
+        autoSkip: false,
+        font: {
+          size: 20,
+          family: "Open Sans, sans-serif",
+          weight: "bold",
+        },
+      },
+      title: {
+        display: true,
+        text: "---- NREN's names ---",
+        font: {
+          size: 20,
+          family: "Open Sans, sans-serif",
+          weight: "bold",
+        },
+      },
+    },
+    yRight: {
+      position: "right" as const,
+      stacked: true,
+      ticks: {
+        autoSkip: true,
+        font: {
+          size: 10,
+          family: "Open Sans, sans-serif",
+          weight: "bold",
+        },
+        callback: () => {
+          return getYearForAxisCategory();
+        },
+      },
+      title: {
+        display: true,
+        text: "---- Selected year's order ---",
+        font: {
+          size: 20,
+          family: "Open Sans, sans-serif",
+          weight: "bold",
+        },
+      },
+      offset: true,
+    },
+  },
+  indexAxis: "y" as const,
 };
 
+function getYearForAxisCategory() {
+  if (yearSelectionForAxes.length > 1) {
+    return [...yearSelectionForAxes].sort();
+  }
+  return [];
+}
+let yearSelectionForAxes: number[] = [];
+
+
 function FundingSourceLegend() {
     return ( 
         <Container  className="border rounded-3 border-1 funding-chart-Legend">
-            <Row fluid className="justify-content-center "
+            <Row className="justify-content-center "
             style={{paddingLeft:'7vw'}}> 
                 <Col className="d-flex align-items-center">
                 <ColorBadge key={0} index={0}/>
@@ -143,6 +187,8 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
         dataset.hidden = !filterSelection.selectedYears.includes(parseInt(dataset.stack));
     });
 
+    yearSelectionForAxes=filterSelection.selectedYears;
+
     // 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