Merge branch 'feature/COMP-186-Fixed-Size-Graphs' into 'develop'

Increase font size and set fixed height based on amount of data on chartJS graphs

See merge request !29

webapp/src/components/graphing/LineGraph.tsx

@@ -14,6 +14,8 @@ import {
 } from 'chart.js';
 import {BasicDataset} from "../../Schema";
 
+ChartJS.defaults.font.size = 16;
+
 
 ChartJS.register(
   CategoryScale,

webapp/src/helpers/dataconversion.tsx

@@ -134,10 +134,10 @@ export const createFundingSourceDataset = (fundingSourcesData: FundingSource[])
                 return dataForYear.get(fundingSource) ?? 0
             }),
             stack: year,
+            borderSkipped: true,
             borderRadius: 10,
-            borderSkipped: false,
-            barPercentage: 0.5,
             borderWidth: 0.5,
+            barPercentage: 0.5,
             categoryPercentage: 0.8,
             hidden: false
 

webapp/src/pages/Budget.tsx

@@ -8,7 +8,6 @@ import Filter from "../components/graphing/Filter";
 import LineGraph from "../components/graphing/LineGraph";
 import { Sections } from '../helpers/constants';
 
-
 interface inputProps {
     filterSelection: FilterSelection
     setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>

webapp/src/pages/FundingSource.tsx

@@ -8,6 +8,8 @@ import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 
+ChartJS.defaults.font.size = 16;
+
 
 ChartJS.register(
     CategoryScale,
@@ -26,14 +28,6 @@ export const chartOptions = {
     plugins: {
         legend: {
             display: false,
-            labels: {
-                boxWidth: 20,
-                boxHeight: 30,
-                pointStyle: "rectRounded",
-                borderRadius: 6,
-                useBorderRadius: true,
-
-            },
         },
     },
     scales: {
@@ -42,7 +36,7 @@ export const chartOptions = {
             ticks: {
                 callback: (value: string | number) => {
                     if (typeof value === 'number') {
-                        return value.toFixed(2);
+                        return `${value}%`;
                     }
                     return value;
                 },
@@ -96,10 +90,15 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
         setFilterSelection={setFilterSelection}
     />
 
+    const numNrens = filterSelection.selectedNrens.length;
+    const numYears = filterSelection.selectedYears.length;
+    let heightPerBar = 4; // every added bar should give this much additional height
 
+    // set a minimum height of 20rem, additional years need some more space
+    const height = Math.max(numNrens * heightPerBar + (numYears * 2 * heightPerBar), 20);
     return (
         <DataPage title="Funding Source" category={Sections.Organisation} filter={filterNode}>
-            <div className="chart-container" style={{ 'minHeight': '100vh', 'width': '60vw', }}>
+            <div className="chart-container" style={{ 'height': `${height}rem` }}>
                 <Bar
                     data={fundingSourceDataset}
                     options={chartOptions}

webapp/src/pages/StaffGraph.tsx

@@ -8,6 +8,7 @@ import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 
+ChartJS.defaults.font.size = 14;
 
 ChartJS.register(
     CategoryScale,
@@ -102,10 +103,16 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
         setFilterSelection={setFilterSelection}
     />
 
+    const numNrens = filterSelection.selectedNrens.length;
+    let 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);
+
     const text = roles ? "Roles" : "Employment";
     return (
         <DataPage title={"NREN Staff " + text} category={Sections.Organisation} filter={filterNode}>
-            <div className="chart-container" style={{ 'minHeight': '60vh', 'width': '60vw', }}>
+            <div className="chart-container" style={{ 'height': `${height}rem` }}>
                 <Bar
                     data={nrenStaffDataset}
                     options={chartOptions}