From 223b5a0174033242e33ce4a81e2a32053532a385 Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Tue, 14 Nov 2023 13:56:14 +0100
Subject: [PATCH] Remove legend from budget graph and refactor slightly
---
.../src/components/graphing/LineGraph.tsx | 55 ------------
.../src/helpers/dataconversion.tsx | 22 ++---
compendium-frontend/src/pages/Budget.tsx | 85 ++++++++++++++++---
3 files changed, 86 insertions(+), 76 deletions(-)
delete mode 100644 compendium-frontend/src/components/graphing/LineGraph.tsx
diff --git a/compendium-frontend/src/components/graphing/LineGraph.tsx b/compendium-frontend/src/components/graphing/LineGraph.tsx
deleted file mode 100644
index b62d686f..00000000
--- 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 a844dbc0..4a2053fb 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 6805452f..e51ab2e6 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>
</>
--
GitLab