diff --git a/webapp/src/pages/DataAnalysis.tsx b/webapp/src/pages/DataAnalysis.tsx index 9a0cfdac48e4d247289e8fe3259e7afeacf4d8a7..c8ad47bd984aa4514e1490ebf624ab0c47ca8ad1 100644 --- a/webapp/src/pages/DataAnalysis.tsx +++ b/webapp/src/pages/DataAnalysis.tsx @@ -23,7 +23,7 @@ export const options = { }; function DataAnalysis(): ReactElement { - function api<T>(url: string, options: RequestInit): Promise<T> { + function api<T>(url: string, options: RequestInit | undefined = undefined): Promise<T> { return fetch(url, options) .then((response) => { if (!response.ok) { @@ -42,54 +42,38 @@ function DataAnalysis(): ReactElement { const [selectedDataEntry, setSelectedDataEntry] = useState<number>(0); useEffect(() => { - // let timeoutRef = 0; - const getDataEntries = () => { - const dataEntrySectionResponse: DataEntrySection = { - description: "Org", - items: [ - { - id: 2, - title: "NREN Budgets per year, in Millions EUR", - url: "/api/data-entries/item/2" - } - // { - // id:3, - // title:"NREN Budgets per NREN, in Millions EUR", - // url:"/api/data-entries/item/3" - // } - ], - name: "Organisation" - } - setDataEntrySection(dataEntrySectionResponse); - console.log("getDataEntries " + dataEntrySection); - // Autoload the first graph - if (dataEntrySectionResponse.items.length > 0) { - setSelectedDataEntry(dataEntrySectionResponse.items[0].id); - } + // hardcode selected section for now + const dataEntrySectionResponse: DataEntrySection = { + description: "Org", + items: [ + { + id: 0, + title: "NREN Budgets per year, in Millions EUR", + url: "/api/data-entries/item/2" + } + // { + // id:3, + // title:"NREN Budgets per NREN, in Millions EUR", + // url:"/api/data-entries/item/3" + // } + ], + name: "Organisation" } - const loadData = () => { - console.log("selectedDataEntry " + selectedDataEntry) - if (selectedDataEntry == 0) { - getDataEntries(); - return; - } - console.log("budgetResponse " + budgetResponse) - if (budgetResponse == undefined) { - api<Budget[]>('/api/budget', { - referrerPolicy: "unsafe-url", - headers: { - "Access-Control-Allow-Origin": "*", - "Content-Type": "text/plain", - "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS", - "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token" + setDataEntrySection(dataEntrySectionResponse); + setSelectedDataEntry(dataEntrySectionResponse.items[0].id); + }, []) - } - }) + useEffect(() => { + const loadData = async () => { + if (budgetResponse == undefined) { + api<Budget[]>('/api/budget/', {}) .then((budget: Budget[]) => { - if (selectedDataEntry == 2) - options.plugins.title.text = 'NREN Budgets per year, in Millions EUR'; + console.log('budget:', budget) + const entry = dataEntrySection?.items.find(i => i.id == selectedDataEntry) + console.log(selectedDataEntry, dataEntrySection, entry) + if (entry) + options.plugins.title.text = entry.title; setBudget(budget) - console.log("API positive response Budget : " + budget) convertToBudgetPerYearDataResponse(budget) }) .catch(error => { @@ -101,7 +85,7 @@ function DataAnalysis(): ReactElement { } loadData() - }, [selectedDataEntry]); + }, [dataEntrySection, selectedDataEntry]); const empty_bar_response = { data: { @@ -128,13 +112,10 @@ function DataAnalysis(): ReactElement { const convertToBudgetPerYearDataResponse = (budgetResponse: Budget[]) => { - console.log("convertToBudgetPerYearDataResponse budgetResponse " + budgetResponse); const barResponse = budgetResponse != undefined ? budgetResponse : empty_budget_response; const labelsYear = [...new Set(barResponse.map((item) => item.BUDGET_YEAR))]; const labelsNREN = [...new Set(barResponse.map((item) => item.NREN))]; - console.log("convertToBudgetPerYearDataResponse " + barResponse); - function getRandomColor() { const red = Math.floor(Math.random() * 256).toString(16).padStart(2, '0'); // generates a value between 00 and ff @@ -173,7 +154,7 @@ function DataAnalysis(): ReactElement { } }) - if (selectedDataEntry == 2) { + if (selectedDataEntry == 0) { const dataResponse: BudgetMatrix = { data: { datasets: datasetPerNREN, @@ -186,7 +167,7 @@ function DataAnalysis(): ReactElement { " have been higher. (For comparison, the total budget" + " according to the 2021 survey results based on the data" + " for all responding NRENs that year is €555 M). The" + - " percentage change is based on the previous year’s" + + " percentage change is based on the previous year's" + " budget.", id: "3", settings: {},