COMP-184:Funding Source Issue

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,

webapp/src/components/ColorBadge.tsx

+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

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
 

webapp/src/pages/FundingSource.tsx

 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>
     );
 }

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