change log and bundle

Changelog.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.17] - 2023-05-24
+- COMP-184 Funding Source UI upgrade
+- COMP-188 Nren Name correction
+- COMP-186 Fixed Graph Size
+- country to nren filterbo
+- Fixing side bars and banner
+- Collapsible box
+- clean up
+
 ## [0.16] - 2023-05-17
 - COMP-143 Policy Page UI changes 
 - COMP-180 Year selection UI chnages

webapp/src/components/ColorBadge.tsx

@@ -6,7 +6,7 @@ function ColorBadge({ index: index, active=true }) {
       {active ? (
         <div
           className={`color-of-badge-${index % 5}`}
-          style={{ width: "15px", height: "30px", margin: "2px" }}
+          style={{ width: "20px", height: "35px", margin: "2px" }}
         ></div>
       ) : (
         <div

webapp/src/pages/FundingSource.tsx

@@ -47,6 +47,11 @@ export const chartOptions = {
             position: 'top' as const,
             stacked: true,
             ticks: {
+                font:{
+                size: 20,
+                family: 'Open Sans, sans-serif',
+                weight: 'bold',
+                },
                 callback: (value: string | number) => {
                     if (typeof value === 'number') {
                         return `${value}%`;
@@ -54,11 +59,7 @@ export const chartOptions = {
                     return value;
                 },
             },
-            font: {
-                size: 29,
-                family: 'Roboto',
-                weight: 'bold',
-            }
+
         },
         x2: {
             stacked: true,
@@ -69,12 +70,30 @@ export const chartOptions = {
                     }
                     return value;
                 },
+                font: {
+                    size: 20,
+                    family: 'Open Sans, sans-serif',
+                    weight: 'bold',
+                }
+            },
+            grid: {
+                display: false,
+                drawTicks: false,
+                drawBorder: false,
             },
+            
+            min : 0,
+            max : 100
         },
         y: {
             stacked: true,
             ticks: {
                 autoSkip: false,
+                font: {
+                    size: 20,
+                    family: 'Open Sans, sans-serif',
+                    weight: 'bold',
+                }
             },
         },
     },
@@ -128,23 +147,24 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
     return (
         <DataPage title="Funding Source" category={Sections.Organisation} filter={filterNode}>
             <div>
-        <Container className=" border border-dark chart-Legend">
-            <Row > 
-                <Col>
+        <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>CLIENT INSTITUTIONS</span></Col>
-                <Col>
+                <span className='bold-caps-16pt'>CLIENT INSTITUTIONS</span></Col>
+                <Col className="d-flex align-items-center" >
                 <ColorBadge key={1} index={1}/>
-                <span>COMMERCIAL</span></Col>
-                <Col>
+                <span className='bold-caps-16pt'>COMMERCIAL</span></Col>
+                <Col className="d-flex align-items-center" >
                 <ColorBadge key={2} index={2}/>
-                <span>EUROPEAN FUNDING</span></Col>
-                <Col>
+                <span className='bold-caps-16pt'>EUROPEAN FUNDING</span></Col>
+                <Col className="d-flex align-items-center" >
                 <ColorBadge key={3} index={3}/>
-                <span>GOV/PUBLIC_BODIES</span></Col>
-                <Col>
+                <span className='bold-caps-16pt'>GOV/PUBLIC BODIES</span></Col>
+                <Col className="d-flex align-items-center" >
                 <ColorBadge key={4} index={4}/>
-                <span>OTHER</span></Col>
+                <span className='bold-caps-16pt dark-teal'>OTHER</span></Col>
             </Row>
         </Container>