Add labels for BarChart

Author: lars-petter-hauge

frontend/src/components/BarChart.tsx

@@ -11,9 +11,11 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend,
 interface BarChartProps {
     graphData: ChartDataSet[];
     aspectRatio?: number;
+    xLabel?: string;
+    yLabel?: string;
 }
 
-const BarChart: React.FC<BarChartProps> = ({ graphData, aspectRatio = 4 }) => {
+const BarChart: React.FC<BarChartProps> = ({ graphData, aspectRatio = 4, xLabel, yLabel }) => {
     const chartRef = useRef<any>(null);
 
     const allX = Array.from(new Set(graphData.flatMap((ds) => ds.data.map((point) => point.x))));
@@ -72,9 +74,11 @@ const BarChart: React.FC<BarChartProps> = ({ graphData, aspectRatio = 4 }) => {
         scales: {
             x: {
                 grid: { display: true },
+                title: { display: !!xLabel, text: xLabel ?? "" },
             },
             y: {
                 grid: { display: true },
+                title: { display: !!yLabel, text: yLabel ?? "" },
             },
         },
     };

frontend/src/components/LabResultsPlot.tsx

@@ -57,6 +57,8 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({
                     data: ds.data.filter((point) => plotComponents.length === 0 || plotComponents.includes(point.x)),
                 }))}
                 aspectRatio={4}
+                yLabel="Concentration (ppm)"
+                xLabel="Components"
             />
             <div style={{ marginBottom: "20px" }}>
                 Plot subset of components:{" "}

frontend/src/components/Simulation/Results.tsx

@@ -94,6 +94,8 @@ const Results: React.FC<ResultsProps> = ({ simulationResults }) => {
                                 concentrations: initialConcentrations,
                             },
                         })}
+                        xLabel="Components"
+                        yLabel="Concentration (ppm)"
                     />
 
                     <ResultConcTable

frontend/src/pages/Compare.tsx

@@ -198,7 +198,7 @@ const Compare: React.FC = () => {
                 Output Concentrations
             </Typography>
 
-            <BarChart graphData={chartData} aspectRatio={3} />
+            <BarChart graphData={chartData} aspectRatio={3} xLabel="Components" yLabel="Concentration (ppm)" />
 
             <Typography variant="h5" style={{ marginBottom: "1rem" }}>
                 Concentration Values (≥ 0.01)