Add units and better currency formatting

compendium-frontend/src/helpers/charthelpers.tsx

@@ -6,7 +6,7 @@ interface options {
     tooltipPrefix?: string;
     tooltipUnit?: string;
     tickLimit?: number;
-    valueTransform?: (value: number) => number;
+    valueTransform?: (value: any) => number | string;
 }
 export const getLineChartOptions = ({ title, unit, tooltipPrefix, tooltipUnit, tickLimit, valueTransform }: options) => {
     return {
@@ -61,7 +61,7 @@ export const getLineChartOptions = ({ title, unit, tooltipPrefix, tooltipUnit, t
 
 }
 
-export const getBarChartOptions = ({ title, unit, tooltipPrefix, tooltipUnit, tickLimit, valueTransform }: options) => {
+export const getBarChartOptions = ({ title, unit, tooltipPrefix, tooltipUnit, valueTransform }: options) => {
     return {
         maintainAspectRatio: false,
         layout: {
@@ -105,7 +105,8 @@ export const getBarChartOptions = ({ title, unit, tooltipPrefix, tooltipUnit, ti
                 ticks: {
                     callback: (value: string | number) => {
                         if (!value) return value;
-                        return `${value} ${unit || ''}`;
+                        const val = valueTransform ? valueTransform(value) : value;
+                        return `${val} ${unit || ''}`;
                     },
                 },
             },
@@ -117,7 +118,8 @@ export const getBarChartOptions = ({ title, unit, tooltipPrefix, tooltipUnit, ti
                 ticks: {
                     callback: (value: string | number) => {
                         if (!value) return value;
-                        return `${value} ${unit || ''}`;
+                        const val = valueTransform ? valueTransform(value) : value;
+                        return `${val} ${unit || ''}`;
                     },
                 },
                 grid: {

compendium-frontend/src/pages/Network/DarkFibreInstalled.tsx

@@ -53,7 +53,7 @@ function DarkFibreInstalledPage(): ReactElement {
         setFilterSelection={setFilterSelection}
     />
 
-    const options = getLineChartOptions({ title: 'Kilometres of Installed Dark Fibre', tooltipUnit: 'km' });
+    const options = getLineChartOptions({ title: 'Kilometres of Installed Dark Fibre', tooltipUnit: 'km', unit: 'km' });
 
     const description =
         <span>This graph shows the number of Kilometres of dark fibre installed by NRENs within their own countries, which they own themselves.

compendium-frontend/src/pages/Network/DarkFibreLease.tsx

@@ -54,7 +54,7 @@ function DarkFibreLeasePage({ national }: Props): ReactElement {
         setFilterSelection={setFilterSelection}
     />
 
-    const options = getLineChartOptions({ title: 'Kilometres of Leased Dark Fibre', tooltipUnit: 'km' });
+    const options = getLineChartOptions({ title: 'Kilometres of Leased Dark Fibre', tooltipUnit: 'km', unit: 'km' });
 
     const description =
         <span>This graph shows the number of Kilometres of dark fibre leased by NRENs {national ? 'within' : 'outside'} their own countries.

compendium-frontend/src/pages/Organization/Budget.tsx

@@ -51,7 +51,7 @@ function BudgetPage(): ReactElement {
         setFilterSelection={setFilterSelection}
     />
 
-    const options = getLineChartOptions({ title: 'Budget in M€', tooltipUnit: 'M€' });
+    const options = getLineChartOptions({ title: 'Budget in M€', tooltipUnit: 'M€', unit: 'M€' });
 
     return (
         <DataPage title="Budget of NRENs per Year"

compendium-frontend/src/pages/Organization/StaffGraphAbsolute.tsx

@@ -11,6 +11,7 @@ import { FilterSelectionContext } from '../../providers/FilterSelectionProvider'
 import { useData } from '../../helpers/useData';
 import ChartContainer from '../../components/graphing/ChartContainer';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { getBarChartOptions } from '../../helpers/charthelpers';
 
 ChartJS.register(
     CategoryScale,
@@ -20,68 +21,6 @@ ChartJS.register(
     Tooltip,
     Legend
 );
-const chartOptions = {
-    maintainAspectRatio: false,
-    layout: {
-        padding: {
-            right: 60
-        }
-    },
-    animation: {
-        duration: 0
-    },
-    plugins: {
-        legend: {
-            display: false,
-        },
-        chartDataLabels: {
-            font: {
-                family: `"Open Sans", sans-serif`
-            },
-        },
-        tooltip: {
-            mode: "y" as const,
-            intersect: false,
-        },
-    },
-    scales: {
-        x: {
-            position: 'top' as const,
-        },
-        x2: {
-
-            grid: {
-                drawOnChartArea: false
-            },
-            afterDataLimits: function (axis) {
-                const indices = Object.keys(ChartJS.instances)
-
-                // initial values should be far outside possible range
-                let max = -999999
-                let min = 999999
-
-                for (const index of indices) {
-                    if (ChartJS.instances[index] && axis.chart.scales.x2) {
-                        min = Math.min(ChartJS.instances[index].scales.x.min, min);
-                        max = Math.max(ChartJS.instances[index].scales.x.max, max);
-                    }
-                }
-
-                axis.chart.scales.x2.options.min = min;
-                axis.chart.scales.x2.options.max = max;
-                axis.chart.scales.x2.min = min;
-                axis.chart.scales.x2.max = max;
-            },
-        },
-        y: {
-            stacked: true,
-            ticks: {
-                autoSkip: false,
-            },
-        },
-    },
-    indexAxis: "y" as const
-};
 
 function StaffGraphAbsolutePage() {
     const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
@@ -108,6 +47,7 @@ function StaffGraphAbsolutePage() {
     const title = "Number of NREN Employees";
     const description = `The graph shows the total number of employees (in FTEs) at each NREN. When filling in the survey, NRENs are asked about the number of staff engaged (whether permanent or subcontracted) in NREN activities. Please note that diversity within the NREN community means that there is not one single definition of what constitutes "NREN activities". Therefore due to differences in how their organisations are arranged, and the relationship, in some cases, with parent organisations, there can be inconsistencies in how NRENs approach this question.`
 
+    const options = getBarChartOptions({ tooltipPrefix: "FTEs", title: "Full-Time Equivalents" });
     const filename = "number_of_nren_employees";
     return (
         <DataPage title={title}
@@ -119,7 +59,7 @@ function StaffGraphAbsolutePage() {
                 <div className="chart-container" style={{ 'height': `${height}rem` }}>
                     <Bar
                         data={nrenStaffDataset}
-                        options={chartOptions}
+                        options={options}
                         plugins={[ChartDataLabels]}
                     />
                 </div>

compendium-frontend/src/pages/Standards&Policies/CentralProcurement.tsx

@@ -19,9 +19,7 @@ import { getBarChartOptions } from '../../helpers/charthelpers';
 import { Sections } from '../../helpers/constants';
 import { createBarChartDataset } from '../../helpers/dataconversion';
 import { useData } from '../../helpers/useData';
-import {
-  FilterSelectionContext,
-} from '../../providers/FilterSelectionProvider';
+import { FilterSelectionContext } from '../../providers/FilterSelectionProvider';
 import { CentralProcurement } from '../../Schema';
 
 ChartJS.register(
@@ -64,15 +62,21 @@ function CentralProcurementPage() {
 
     const options = getBarChartOptions({
         title: "Software Procurement Value",
-        tooltipUnit: '€',
-        unit: '€',
+        valueTransform(value) {
+            const formatter = new Intl.NumberFormat(void 0, {
+                style: 'currency',
+                currency: 'EUR',
+                trailingZeroDisplay: 'stripIfInteger',
+            });
+            return `${formatter.format(value)}`
+        },
     });
 
     const filename = "central_procurement";
     return (
         <DataPage title={title}
             description={description}
-            category={Sections.Network} filter={filterNode}
+            category={Sections.Policy} filter={filterNode}
             data={selectedData} filename={filename}>
 
             <ChartContainer>