Skip to content
Snippets Groups Projects
Commit 0bd8dac5 authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

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

parent ff0c78d8
Branches
Tags
1 merge request!29Increase font size and set fixed height based on amount of data on chartJS graphs
......@@ -14,6 +14,8 @@ import {
} from 'chart.js';
import {BasicDataset} from "../../Schema";
ChartJS.defaults.font.size = 16;
ChartJS.register(
CategoryScale,
......
......@@ -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
......
......@@ -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>>
......
......@@ -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}
......
......@@ -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}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment