diff --git a/compendium-frontend/src/components/graphing/LineGraph.tsx b/compendium-frontend/src/components/graphing/LineGraph.tsx
deleted file mode 100644
index b62d686f42c2f1fa2382e86f9d28e4b9372cf56b..0000000000000000000000000000000000000000
--- a/compendium-frontend/src/components/graphing/LineGraph.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { ReactElement } from 'react';
-import { Line } from 'react-chartjs-2';
-
-
-import {
- Chart as ChartJS,
- CategoryScale,
- LinearScale,
- PointElement,
- LineElement,
- Title,
- Tooltip,
- Legend,
-} from 'chart.js';
-import { BasicDataset } from "../../Schema";
-
-
-ChartJS.register(
- CategoryScale,
- LinearScale,
- PointElement,
- LineElement,
- Title,
- Tooltip,
- Legend
-);
-
-const options = {
- responsive: true,
- animation: {
- duration: 0
- },
- plugins: {
- legend: {
- position: 'top' as const,
- onClick: () => { /* intentionally empty */ },
- },
- title: {
- display: true,
- text: '',
- },
- },
-};
-
-interface inputProps {
- data: BasicDataset
-}
-
-function LineGraph({ data }: inputProps): ReactElement {
- return (
- <Line data={data} options={options} />
- );
-}
-
-export default LineGraph;
diff --git a/compendium-frontend/src/helpers/dataconversion.tsx b/compendium-frontend/src/helpers/dataconversion.tsx
index a844dbc0f47c97d2c03913adf470b108b3bdc186..4a2053fb49c274240c7b8395dccf48cd1f6c6019 100644
--- a/compendium-frontend/src/helpers/dataconversion.tsx
+++ b/compendium-frontend/src/helpers/dataconversion.tsx
@@ -54,12 +54,12 @@ export const createTrafficVolumeDataset = (data: TrafficVolume[]) => {
datalabels: {
display: true,
color: 'grey',
- formatter: function(value, context) {
+ formatter: function (value, context) {
return context.dataset.label;
},
anchor: 'start',
align: 'end',
- offset: function(context) {
+ offset: function (context) {
return context.chart.chartArea.width;
}
}
@@ -102,7 +102,7 @@ export const createFundingSourceDataset = (data: FundingSource[]) => {
}
return dataForYear[fundingSource.toLowerCase().replaceAll("/", "_").replaceAll(" ", "_")] ?? 0
}),
- stack: year,
+ stack: year,
borderSkipped: true,
barPercentage: 0.8,
borderWidth: 0.5,
@@ -111,12 +111,12 @@ export const createFundingSourceDataset = (data: FundingSource[]) => {
datalabels: {
display: fundingSource == fundingSources[0],
color: 'grey',
- formatter: function(value, context) {
+ formatter: function (value, context) {
return context.dataset.stack;
},
anchor: 'start',
align: 'end',
- offset: function(context) {
+ offset: function (context) {
return context.chart.chartArea.width;
}
}
@@ -318,7 +318,7 @@ export function createMatrixDataLookup<Datatype extends NrenAndYearDatapoint>(da
return dataLookup;
}
-export function createConnectivityDataLookup<Datatype extends NrenAndYearDatapoint>(data: Datatype[], columnProperty: string,){
+export function createConnectivityDataLookup<Datatype extends NrenAndYearDatapoint>(data: Datatype[], columnProperty: string,) {
const dataLookup = new Map<string, Map<string, Map<number, Datatype>>>();
data.forEach(entry => {
@@ -338,7 +338,7 @@ export function createConnectivityDataLookup<Datatype extends NrenAndYearDatapoi
return dataLookup;
}
-export function createConnectivityDataLookupForCarrier<Datatype extends NrenAndYearDatapoint>(data: Datatype[], columnProperty: string,enumCategory){
+export function createConnectivityDataLookupForCarrier<Datatype extends NrenAndYearDatapoint>(data: Datatype[], columnProperty: string, enumCategory) {
const dataLookup = new Map<string, Map<string, Map<number, Map<string, Datatype>>>>();
data.forEach(entry => {
@@ -354,7 +354,7 @@ export function createConnectivityDataLookupForCarrier<Datatype extends NrenAndY
if (!yearEntry) {
yearEntry = new Map<string, Datatype>();
}
- yearEntry.set(entry[enumCategory],entry)
+ yearEntry.set(entry[enumCategory], entry)
nrenEntry.set(entry.year, yearEntry);
serviceEntry.set(entry.nren, nrenEntry);
dataLookup.set(entry[columnProperty], serviceEntry);
@@ -363,10 +363,10 @@ export function createConnectivityDataLookupForCarrier<Datatype extends NrenAndY
return dataLookup;
}
-export function createConnectivityDataLookupForCommercial<Datatype extends NrenAndYearDatapoint>(data: Datatype[], commercialCategory:string[]){
+export function createConnectivityDataLookupForCommercial<Datatype extends NrenAndYearDatapoint>(data: Datatype[], commercialCategory: string[]) {
const dataLookup = new Map<string, Map<string, Map<number, Map<string, Datatype>>>>();
- commercialCategory.forEach( category =>{
+ commercialCategory.forEach(category => {
data.forEach(entry => {
let serviceEntry = dataLookup.get(category);
if (!serviceEntry) {
@@ -381,7 +381,7 @@ export function createConnectivityDataLookupForCommercial<Datatype extends NrenA
if (!yearEntry) {
yearEntry = new Map<string, Datatype>();
}
- yearEntry.set(entry[category],entry)
+ yearEntry.set(entry[category], entry)
nrenEntry.set(entry.year, yearEntry);
serviceEntry.set(entry.nren, nrenEntry);
dataLookup.set(category, serviceEntry);
diff --git a/compendium-frontend/src/pages/Budget.tsx b/compendium-frontend/src/pages/Budget.tsx
index 6805452f38cc123171e78c95b2d8e34ea9e01529..e51ab2e65caec227a12430128ebd07dbd55a9aea 100644
--- a/compendium-frontend/src/pages/Budget.tsx
+++ b/compendium-frontend/src/pages/Budget.tsx
@@ -1,22 +1,87 @@
import React, { ReactElement, useContext } from 'react';
import { Row } from "react-bootstrap";
+import { Line } from 'react-chartjs-2';
+
+
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+} from 'chart.js';
import { Budget } from "../Schema";
import { createBudgetDataset } from "../helpers/dataconversion";
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter";
-import LineGraph from "../components/graphing/LineGraph";
-import {ExportType, Sections} from '../helpers/constants';
+import { ExportType, Sections } from '../helpers/constants';
import DownloadDataButton from "../components/DownloadDataButton";
import { FilterSelectionContext } from '../helpers/FilterSelectionProvider';
import DownloadImageChartButton from "../components/DownloadImageChartButton";
import ChartContainer from "../components/graphing/ChartContainer";
import { useData } from '../helpers/useData';
+const options = {
+ responsive: true,
+ animation: {
+ duration: 0
+ },
+ plugins: {
+ legend: {
+ display: false,
+ position: 'top' as const,
+ onClick: () => { /* intentionally empty */ },
+ },
+ title: {
+ display: true,
+ text: '',
+ },
+ // add M € to tooltip
+ tooltip: {
+ callbacks: {
+ label: function (tooltipItem) {
+ let label = tooltipItem.dataset.label || '';
+
+ if (tooltipItem.parsed.y !== null) {
+ label += `: ${tooltipItem.parsed.y} M€`
+ }
+ return label;
+ }
+ },
+ },
+ },
+ scales: {
+ y: {
+ ticks: {
+ callback: (value: string | number) => {
+ return `${value} M€`;
+ },
+ },
+ },
+ },
+
+
+};
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
+
function BudgetPage(): ReactElement {
- const {filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
- const {data: budgetResponse, nrens} = useData<Budget>('/api/budget/', setFilterSelection);
+ const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
+ const { data: budgetResponse, nrens } = useData<Budget>('/api/budget/', setFilterSelection);
const budgetData = createBudgetDataset(budgetResponse);
@@ -31,20 +96,20 @@ function BudgetPage(): ReactElement {
/>
return (
- <DataPage title="Budget of NRENs per Year"
- description='The graph shows the NRENs budget capita (in Million €) per year .
+ <DataPage title="Budget of NRENs per Year"
+ description='The graph shows the NRENs budget capita (in Million €) per year .
On hovering over the graphs data points will give NRENs budget share in that year. This graph can be used to compare, selecting multiple NRENs to see the
fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}>
<>
<Row>
- <DownloadDataButton data={budgetResponse} filename="budget_data.csv" exportType={ExportType.CSV}/>
+ <DownloadDataButton data={budgetResponse} filename="budget_data.csv" exportType={ExportType.CSV} />
<DownloadDataButton data={budgetResponse} filename="budget_data.xlsx"
- exportType={ExportType.EXCEL}/>
+ exportType={ExportType.EXCEL} />
</Row>
<Row>
- <DownloadImageChartButton filename="budget_data"/>
+ <DownloadImageChartButton filename="budget_data" />
<ChartContainer>
- <LineGraph data={budgetData}/>
+ <Line data={budgetData} options={options} />
</ChartContainer>
</Row>
</>