Skip to content
Snippets Groups Projects
Commit a34c2887 authored by Ian Galpin's avatar Ian Galpin
Browse files

Added first version of reporting chart with hard-coded data

parent 9973161c
No related branches found
No related tags found
No related merge requests found
import React, {ReactElement} from 'react';
import {Accordion, Col, Container, Form, Row} from "react-bootstrap";
import {Bar} from 'react-chartjs-2';
// const api_url = window.location.origin+'/';
// console.log(api_url)
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
// Test colour pallets
const colour_palettes = [
["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"],
["#e60049", "#0bb4ff", "#50e991", "#e6d800", "#9b19f5", "#ffa300", "#dc0ab4", "#b3d4ff", "#00bfa0"],
["#b30000", "#7c1158", "#4421af", "#1a53ff", "#0d88e6", "#00b7c7", "#5ad45a", "#8be04e", "#ebdc78"],
["#fd7f6f", "#7eb0d5", "#b2e061", "#bd7ebe", "#ffb55a", "#ffee65", "#beb9db", "#fdcce5", "#8bd3c7"]
];
const selected_cp = colour_palettes[1];
const dataViewItem = {
title: 'NREN Budgets per year, in Millions EUR',
description: 'The numbers are based on 30 NRENs that reported their budgets continuously throughout this period. This means that some larger NRENs are not included and therefore the actual total budgets will have been higher. (For comparison, the total budget according to the 2021 survey results based on the data for all responding NRENs that year is €555 M). The percentage change is based on the previous year’s budget.'
}
export const options = {
// indexAxis: 'y' as const,
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: dataViewItem.title,
},
},
};
const labels = ["AL", "AM", "AT", "BA", "BE", "BG", "BY", "CH", "CY", "CZ", "DE", "DK", "EE", "ES", "FI", "FR", "GB", "GE", "GR", "HR", "HU", "IE", "IL", "IS", "IT", "LT", "LU", "LV", "MD", "ME", "MK", "NL", "NO", "PT", "RO", "RS", "SE", "SI", "SK", "TR", "UA"];
export const data = {
labels,
datasets: [
{
label: '2015',
data: [1.2, null, 5.6, 0.23, 16.46, 1, 0.4, 12, 0.4, 22.86, 40, 7.4, 1.3, 8, 7.4, 21, 86.4, 0.2, 7, 11.6, 8, 22, null, 0.5, 23, 1.6, 1.65, 0.7, 0.2, 0.1, 0.5, 34, 22.54, 6.8, 1.5, 1.4, 18, 5.4, 2.4, null,],
backgroundColor: selected_cp[0],
},
{
label: '2016',
data: [null, null, 5.7, 0.23, 13.57, null, 0.41, 13, 0.87, 14, 49, 7.92, 2.5, 8, 7, 28, null, 0.25, 6.5, null, 8, 15, null, null, 23.2, 1.6, 2.08, 0.22, null, null, null, 36, 30, 8.1, 2, 1.7, null, 5.6, 1.9, null,],
backgroundColor: selected_cp[1],
},
{
label: '2017',
data: [null, 0.15, 5.7, null, null, null, 0.82, 14, 0.7, 14, 45, null, 2.3, 8, 7.5, 29, null, 0.3, 6.5, 34.3, 12, 29, null, null, 21.7, 2, 2, null, 0.38, null, null, 40, 30, 8, 2, 1.7, null, 6, 1.9, 18, 0.12],
backgroundColor: selected_cp[2],
},
{
label: '2018',
data: [0.8, 0.25, 6.1, null, 15.52, null, 0.72, 14, 3.6, 17.88, 42, 7.41, 2.34, 8, 7.5, 33.9, null, 0.3, 6.9, 20.1, 12, 25.06, 3.72, null, 22.15, 2.28, 3.48, 1.04, 0.34, 0.08, 0.33, 40.5, 20, 14.25, 2, 2.03, 19, 7.5, 1.98, 21, 0.15],
backgroundColor: selected_cp[3],
},
{
label: '2019',
data: [0.8, 0.48, 6.1, null, 14.48, null, 0.924, 13.457, 0.92, 18.974, 42.343, null, 4.772, 8, 7.9, 32.2, 65.23, 0.4, 6.9, 36.446, 48, 25.591, 3.48, null, 22.329, 2.275, 4.027, 1.241, 0.38, 0.075, 0.955, 52.857, null, 16.249, 2, 2.47, 24, 8, 1.98, 17, 0.176],
backgroundColor: selected_cp[4],
},
],
};
function DataAnalysis(): ReactElement {
return (
<div>
<h1>Data Analysis</h1>
</div>
);
return (
<div>
<h1>Data Analysis</h1>
<Container>
<Row>
<Col>
<Row>
<Bar data={data} options={options}/>
</Row>
<Row>{dataViewItem.description}</Row>
</Col>
<Col xs={3}>
<Accordion defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header>NRENs</Accordion.Header>
<Accordion.Body>
<Form>
<Form.Check
type={'checkbox'}
label='JISC'/>
<Form.Check
type={'checkbox'}
label='SURF'/>
<Form.Check
type={'checkbox'}
label='URAN'/>
</Form>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</Col>
</Row>
</Container>
</div>
);
}
export default DataAnalysis;
......@@ -2,6 +2,6 @@ import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import './styles.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment