From 3a558e2a8c19c4a6187767ade16d881ec8ac4fcc Mon Sep 17 00:00:00 2001 From: Adel Memariani Date: Tue, 10 Sep 2024 11:13:49 +0200 Subject: [PATCH] Add unit #1765 --- .../src/components/comparisonBoardMain.js | 81 +++++++++++++------ 1 file changed, 56 insertions(+), 25 deletions(-) diff --git a/factsheet/frontend/src/components/comparisonBoardMain.js b/factsheet/frontend/src/components/comparisonBoardMain.js index 04d2379c0..9fce824fc 100644 --- a/factsheet/frontend/src/components/comparisonBoardMain.js +++ b/factsheet/frontend/src/components/comparisonBoardMain.js @@ -40,7 +40,6 @@ import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import ListItemText from '@mui/material/ListItemText'; import Select, { SelectChangeEvent } from '@mui/material/Select'; -import Divider from '@mui/material/Divider'; import IconButton from '@mui/material/IconButton'; import AddIcon from '@mui/icons-material/Add'; import { useRef } from 'react'; @@ -85,8 +84,8 @@ const ComparisonBoardMain = (props) => { const [chartType, setChartType] = React.useState(""); const [groupedBarChartsRandomColors, setGroupedBarChartsRandomColors] = React.useState([]); const [showTitle, setShowTitle] = React.useState(false); - - + const [disableAddVisualization, setDisableAddVisualization] = React.useState(false); + const [units, SetUnits] = React.useState([]); const category_disctionary = { "OEO_00010038" : "1 Energy", @@ -481,8 +480,8 @@ const ComparisonBoardMain = (props) => { setLoading(true); //const data_tabels = []; - // const data_tabels = [`"eu_leg_data_2023_eea"`, `"scenario_eu_leg_data_2021"`] ; - const data_tabels = [`"eu_leg_data_2023_eea"`] ; + const data_tabels = [`"eu_leg_data_2023_eea"`, `"scenario_eu_leg_data_2021"`] ; + // const data_tabels = [`"eu_leg_data_2023_eea"`] ; selectedOutputDatasets.map(elem => data_tabels.push('"' + elem.split(":")[1] + '"')); @@ -550,8 +549,8 @@ const ComparisonBoardMain = (props) => { const sendGetGasQuery = async () => { setLoading(true); - //const data_tabels = [`"eu_leg_data_2023_eea"`, `"scenario_eu_leg_data_2021"`] ; - const data_tabels = [ `"scenario_eu_leg_data_2021"`] ; + const data_tabels = [`"eu_leg_data_2023_eea"`, `"scenario_eu_leg_data_2021"`] ; + // const data_tabels = [ `"scenario_eu_leg_data_2021"`] ; selectedOutputDatasets.map(elem => data_tabels.push('"' + elem.split(":")[1] + '"')); @@ -680,8 +679,8 @@ const sendQuery = async (index) => { console.log(chartData); setLoading(true); - // const data_tabels = [`"eu_leg_data_2023_eea"`, `"scenario_eu_leg_data_2021"`] ; - const data_tabels = [ `"scenario_eu_leg_data_2021"`] ; + const data_tabels = [`"eu_leg_data_2023_eea"`, `"scenario_eu_leg_data_2021"`] ; + // const data_tabels = [ `"scenario_eu_leg_data_2021"`] ; // const data_tabels = []; selectedInputDatasets.map(elem => data_tabels.push('"' + elem.split(":")[1] + '"')); @@ -715,17 +714,20 @@ const sendQuery = async (index) => { PREFIX oeo: PREFIX llc: - SELECT DISTINCT ?s ?value ?country_code ?year ?category ?gas ?table_name WHERE { + SELECT DISTINCT ?s ?value ?country_code ?year ?category ?gas ?table_name ?unit WHERE { ?s oeo:OEO_00020221 ?country_code . ?s oeo:OEO_00020224 ?year . ?s oeo:OEO_00140178 ?value . ?s oeo:OEO_00000504 ?table_name . ?s oeo:has_sector_division ?category . ?s oeo:OEO_00020226 ?scenario . - ?s oeo:OEO_00010121 ?gas + ?s oeo:OEO_00010121 ?gas . + ?s oeo:OEO_00040010 ?unit . FILTER(?table_name IN (${data_tabels}) && ?scenario IN (${scenariosFilter}) && ?category IN (${categories}) && ?gas IN (${gases}) ) . }`; + console.log(main_query); + const response = await axios.post( conf.obdi, main_query, @@ -743,6 +745,17 @@ const sendQuery = async (index) => { if (sparqOutput.length !== 0) { + const distinctUnits = []; + sparqOutput.map((obj) => { + if (!distinctUnits.includes(obj.unit.value)) { + distinctUnits.push(obj.unit.value) + } + } ); + + SetUnits(distinctUnits); + + console.log(distinctUnits); + const distinctTables = []; sparqOutput.map((obj) => { if (!distinctTables.includes(obj.table_name.value)) { @@ -827,7 +840,7 @@ const sendQuery = async (index) => { const transformGroupedItems = (groupedItems) => { const total_num_of_colors = Object.keys(groupedItems).length + categorieIDs.length - const groupedRandomColors = Array.from({ length: total_num_of_colors }, generateRandomColor); + const groupedRandomColors = Array.from({ length: total_num_of_colors + 1 }, generateRandomColor); setGroupedBarChartsRandomColors(groupedRandomColors); @@ -858,6 +871,7 @@ const sendQuery = async (index) => { .map(el => el.country_code.value.split('/').pop()); groupedStackedBarChartsLegend.push([group, category_disctionary[cat.split("/").pop()], cat, groupedRandomColors[colorIndex]]); + console.log(colorIndex, groupedRandomColors[colorIndex], groupedStackedBarChartsLegend); colorIndex++; return categorized; }); @@ -909,6 +923,7 @@ const sendQuery = async (index) => { setShowTitle(true); + } else { setLoading(false); setShowChart(false); @@ -923,7 +938,10 @@ const sendQuery = async (index) => { } const addVisualization = (index) => { + setDisableAddVisualization(true); + addVisualizationRows(visualizationRows + 1); + }; @@ -1191,17 +1209,20 @@ const sendQuery = async (index) => { - - - {showTitle === true && - {selectedGas.map((i, index) => index === selectedGas.length - 1 ? i + ', ': i + ' and ')} from {selectedCategories.map((i, index) => index === selectedGas.length - 1 ? i + ', ': i + ' and ')} in {selectedScenarios.map(i => i)} + + + + {showTitle === true && + {selectedGas.map((i, index) => index === selectedGas.length - 1 ? i + ', ': i + ' and ')} from {selectedCategories.map((i, index) => index === selectedCategories.length - 1 ? i + ', ': i + ' and ')} {selectedScenarios.map(i => i)} } - - + + {showChart == true && - + + + handleYearChange(e, number, index)} @@ -1224,7 +1245,17 @@ const sendQuery = async (index) => { - + + + {units[0].replace(/\r/g, ' ')} + + + { } - - - ))} - + + + + {console.log(legendForGroupedStackedBarCharts)}
{chartType === "MultipleDataTable" && legendForGroupedStackedBarCharts.map((category, idx) => ( @@ -1261,11 +1292,11 @@ const sendQuery = async (index) => { } - addVisualization(index)} + disabled={disableAddVisualization === true} >