From 5b69b8557edbbeb0dd27413818c33077ff63daf7 Mon Sep 17 00:00:00 2001
From: "saket.agrahari" <saket.agrahari@geant.org>
Date: Tue, 23 May 2023 19:44:48 +0100
Subject: [PATCH] COMP-184:Funding Source Issue
---
webapp/src/Schema.tsx | 1 -
webapp/src/components/ColorBadge.tsx | 21 ++++++++++
webapp/src/helpers/dataconversion.tsx | 5 +--
webapp/src/pages/FundingSource.tsx | 55 ++++++++++++++++++++++++-
webapp/src/scss/layout/_components.scss | 17 ++++++++
5 files changed, 93 insertions(+), 6 deletions(-)
create mode 100644 webapp/src/components/ColorBadge.tsx
diff --git a/webapp/src/Schema.tsx b/webapp/src/Schema.tsx
index 305a2a72..8f9f17f0 100644
--- a/webapp/src/Schema.tsx
+++ b/webapp/src/Schema.tsx
@@ -73,7 +73,6 @@ export interface FundingSourceDataset {
label: string,
data: number[],
backgroundColor: string
- borderRadius: number,
borderSkipped: boolean,
barPercentage: number,
borderWidth: number,
diff --git a/webapp/src/components/ColorBadge.tsx b/webapp/src/components/ColorBadge.tsx
new file mode 100644
index 00000000..052d257c
--- /dev/null
+++ b/webapp/src/components/ColorBadge.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+function ColorBadge({ index: index, active=true }) {
+ return (
+ <div className="d-inline-block" key={index}>
+ {active ? (
+ <div
+ className={`color-of-badge-${index % 5}`}
+ style={{ width: "15px", height: "30px", margin: "2px" }}
+ ></div>
+ ) : (
+ <div
+ className={`color-of-badge-blank`}
+ style={{ width: "15px", height: "30px", margin: "2px" }}
+ ></div>
+ )}
+ </div>
+ );
+}
+
+export default ColorBadge;
\ No newline at end of file
diff --git a/webapp/src/helpers/dataconversion.tsx b/webapp/src/helpers/dataconversion.tsx
index c800c2ee..60550fcf 100644
--- a/webapp/src/helpers/dataconversion.tsx
+++ b/webapp/src/helpers/dataconversion.tsx
@@ -133,11 +133,10 @@ export const createFundingSourceDataset = (fundingSourcesData: FundingSource[])
}
return dataForYear.get(fundingSource) ?? 0
}),
- stack: year,
+ stack: year,
borderSkipped: true,
- borderRadius: 10,
- borderWidth: 0.5,
barPercentage: 0.5,
+ borderWidth: 0.5,
categoryPercentage: 0.8,
hidden: false
diff --git a/webapp/src/pages/FundingSource.tsx b/webapp/src/pages/FundingSource.tsx
index e4809cab..310e37de 100644
--- a/webapp/src/pages/FundingSource.tsx
+++ b/webapp/src/pages/FundingSource.tsx
@@ -1,12 +1,15 @@
import React, { useEffect, useMemo, useState } from 'react';
import { Bar } from 'react-chartjs-2';
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
+import { Col, Container, Row, Table } from "react-bootstrap";
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, Chart } from 'chart.js';
import { FundingSource, FilterSelection } from "../Schema";
import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants';
+import ColorPill from '../components/ColorPill';
+import ColorBadge from '../components/ColorBadge';
ChartJS.defaults.font.size = 16;
@@ -20,6 +23,7 @@ ChartJS.register(
Legend
);
+
export const chartOptions = {
maintainAspectRatio: false,
animation: {
@@ -28,10 +32,35 @@ export const chartOptions = {
plugins: {
legend: {
display: false,
+ labels: {
+ boxWidth: 20,
+ boxHeight: 30,
+ pointStyle: "rectRounded",
+ borderRadius: 6,
+ useBorderRadius: true,
+
+ },
+ },
},
- },
scales: {
x: {
+ position: 'top' as const,
+ stacked: true,
+ ticks: {
+ callback: (value: string | number) => {
+ if (typeof value === 'number') {
+ return `${value}%`;
+ }
+ return value;
+ },
+ },
+ font: {
+ size: 29,
+ family: 'Roboto',
+ weight: 'bold',
+ }
+ },
+ x2: {
stacked: true,
ticks: {
callback: (value: string | number) => {
@@ -98,12 +127,34 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
const height = Math.max(numNrens * heightPerBar + (numYears * 2 * heightPerBar), 20);
return (
<DataPage title="Funding Source" category={Sections.Organisation} filter={filterNode}>
+ <div>
+ <Container className=" border border-dark chart-Legend">
+ <Row >
+ <Col>
+ <ColorBadge key={0} index={0}/>
+ <span>CLIENT INSTITUTIONS</span></Col>
+ <Col>
+ <ColorBadge key={1} index={1}/>
+ <span>COMMERCIAL</span></Col>
+ <Col>
+ <ColorBadge key={2} index={2}/>
+ <span>EUROPEAN FUNDING</span></Col>
+ <Col>
+ <ColorBadge key={3} index={3}/>
+ <span>GOV/PUBLIC_BODIES</span></Col>
+ <Col>
+ <ColorBadge key={4} index={4}/>
+ <span>OTHER</span></Col>
+ </Row>
+ </Container>
+
<div className="chart-container" style={{ 'height': `${height}rem` }}>
<Bar
data={fundingSourceDataset}
options={chartOptions}
/>
</div>
+ </div>
</DataPage>
);
}
diff --git a/webapp/src/scss/layout/_components.scss b/webapp/src/scss/layout/_components.scss
index b43c72fd..be754f7e 100644
--- a/webapp/src/scss/layout/_components.scss
+++ b/webapp/src/scss/layout/_components.scss
@@ -278,3 +278,20 @@ $year-colors: (
margin-right: 2.8em;
float: right;
}
+
+$funding-source-colors: (
+ rgb(157, 40, 114),
+ rgb(241, 224, 79),
+ rgb(219, 42, 76),
+ rgb(237, 141, 24),
+ rgb(137, 166, 121)
+);
+@for $i from 0 to list.length($funding-source-colors) {
+ .color-of-badge-#{$i} {
+ background-color: #{list.nth($funding-source-colors, $i + 1)};
+ }
+}
+
+.color-of-badge-blank {
+ background-color: rgb(0, 0, 0, 0);
+}
\ No newline at end of file
--
GitLab