COMP-201: Funding Source UI

webapp/src/components/DataPage.tsx

@@ -11,12 +11,13 @@ import PolicySidebar from "./PolicySidebar";
 
 interface inputProps {
     title: string,
+    description?: string,
     filter: ReactElement,
     children: ReactElement,
     category: Sections
 }
 
-function DataPage({ title, filter, children, category }: inputProps): ReactElement {
+function DataPage({ title,description, filter, children, category }: inputProps): ReactElement {
     return (
         <>
             {category === Sections.Organisation && <OrganizationSidebar />}
@@ -33,6 +34,9 @@ function DataPage({ title, filter, children, category }: inputProps): ReactEleme
                 <Row>
                     <h3 className="m-4">{title}</h3>
                 </Row>
+                <Row>
+                    <p className="p-md-4">{description}</p>
+                </Row>
                 <Row>
                     {filter}
                 </Row>

webapp/src/main.scss

 @import 'scss/fonts';
 @import 'scss/base/text';
 @import 'scss/layout/components';
+@import 'scss/pages/FundingSources';
 
 .external-page-nav-bar {
   background-color: #003753;

webapp/src/pages/FundingSource.tsx

@@ -8,7 +8,6 @@ import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelecti
 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;
@@ -100,6 +99,32 @@ export const chartOptions = {
     indexAxis: "y" as const
 };
 
+function FundingSourceLegend() {
+    return ( 
+        <Container  className="border rounded-3 border-1 funding-chart-Legend">
+            <Row fluid className="justify-content-center "
+            style={{paddingLeft:'7vw'}}> 
+                <Col className="d-flex align-items-center">
+                <ColorBadge key={0} index={0}/>
+                <span className='bold-14pt'>Client Institutions</span></Col>
+                <Col className="d-flex align-items-center" >
+                <ColorBadge key={1} index={1}/>
+                <span className='bold-14pt'>Commercial</span></Col>
+                <Col className="d-flex align-items-center" >
+                <ColorBadge key={2} index={2}/>
+                <span className='bold-14pt'>European Funding</span></Col>
+                <Col className="d-flex align-items-center" >
+                <ColorBadge key={3} index={3}/>
+                <span className='bold-14pt'>Gov/Public Bodies</span></Col>
+                <Col className="d-flex align-items-center" >
+                <ColorBadge key={4} index={4}/>
+                <span className='bold-14pt'>Other</span></Col>
+            </Row>
+        </Container>  
+     );
+}
+
+
 interface inputProps {
     filterSelection: FilterSelection
     setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
@@ -145,35 +170,20 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
     // set a minimum height of 20rem, additional years need some more space
     const height = Math.max(numNrens * heightPerBar + (numYears * 2 * heightPerBar), 20);
     return (
-        <DataPage title="Funding Source" category={Sections.Organisation} filter={filterNode}>
+        <DataPage title="Income Source Of NRENs per Year" 
+        description='The graph shows the percentage share of their income that individual NRENs derived from different sources. 
+        On hovering over the graphs will give income share in that year.  This can be used to compare selecting multiple years to see how the 
+        share has changed between the years.'
+        category={Sections.Organisation} filter={filterNode}>
             <div>
-        <Container  className=" border rounded-3 border-1 funding-chart-Legend" 
-        style={{ marginTop: '20px', marginBottom: '20px', padding: '10px'}}>
-            <Row fluid className="justify-content-center"> 
-                <Col className="d-flex align-items-center">
-                <ColorBadge key={0} index={0}/>
-                <span className='bold-caps-16pt'>CLIENT INSTITUTIONS</span></Col>
-                <Col className="d-flex align-items-center" >
-                <ColorBadge key={1} index={1}/>
-                <span className='bold-caps-16pt'>COMMERCIAL</span></Col>
-                <Col className="d-flex align-items-center" >
-                <ColorBadge key={2} index={2}/>
-                <span className='bold-caps-16pt'>EUROPEAN FUNDING</span></Col>
-                <Col className="d-flex align-items-center" >
-                <ColorBadge key={3} index={3}/>
-                <span className='bold-caps-16pt'>GOV/PUBLIC BODIES</span></Col>
-                <Col className="d-flex align-items-center" >
-                <ColorBadge key={4} index={4}/>
-                <span className='bold-caps-16pt dark-teal'>OTHER</span></Col>
-            </Row>
-        </Container>  
-
+            <FundingSourceLegend/>
             <div className="chart-container" style={{ 'height': `${height}rem` }}>
                 <Bar
                     data={fundingSourceDataset}
                     options={chartOptions}
                 />
             </div>
+            <FundingSourceLegend/>
             </div>
         </DataPage>
     );

webapp/src/scss/base/_text.scss

@@ -47,4 +47,10 @@
 .geant-header {
     @extend .bold-caps-20pt;
     color: $dark-teal;
+}
+
+.bold-14pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 14pt;
+    font-weight: bold;
 }
\ No newline at end of file

webapp/src/scss/pages/FundingSources.scss

+
+.funding-chart-Legend{
+    margin-top: 2vw;
+    margin-bottom: 2vw;
+    padding: 1vw;
+}
+