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

Remove legend from budget graph and refactor slightly

parent 925a219e
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
compendium-frontend/src/components/graphing/LineGraph.tsx deleted 100644 → 0
+ 0
− 55
View file @ 925a219e
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;
compendium-frontend/src/helpers/dataconversion.tsx
+ 11
− 11
View file @ 223b5a01
......@@ -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);
......
compendium-frontend/src/pages/Budget.tsx
+ 75
− 10
View file @ 223b5a01
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>
</>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment