diff --git a/electron/ui/src/components/OutputComparisonChart/OutputComparisonChart.js b/electron/ui/src/components/OutputComparisonChart/OutputComparisonChart.js index 9bcaee8a..29850f69 100644 --- a/electron/ui/src/components/OutputComparisonChart/OutputComparisonChart.js +++ b/electron/ui/src/components/OutputComparisonChart/OutputComparisonChart.js @@ -35,7 +35,8 @@ export default function OutputComparisonChart(props) { barChartKeys.push(each.obj_key) } unpackData( - 'bar', + // 'bar', + historyData[0].data[displayCategory].chartType, barChartKeys ) } @@ -54,7 +55,7 @@ export default function OutputComparisonChart(props) { } const unpackData = (plotType, yVariables) => { - if (plotType === "bar") { + if (plotType === "stacked_bar_with_net") { let hovertemplate = //"%{text}

" + "%{data.name}: %{y:,.3f}
" + //"%{xaxis.title.text}: %{x:.0%}
" + diff --git a/electron/ui/src/views/FlowsheetConfig/ConfigOutput/OutputComparison.js b/electron/ui/src/views/FlowsheetConfig/ConfigOutput/OutputComparison.js index ff65b1d6..08bbf0bd 100644 --- a/electron/ui/src/views/FlowsheetConfig/ConfigOutput/OutputComparison.js +++ b/electron/ui/src/views/FlowsheetConfig/ConfigOutput/OutputComparison.js @@ -12,18 +12,30 @@ export default function OutputComparison(props) { const [ historyData, setHistoryData ] = useState([]) const [ historyDataOrganized, setHistoryDataOrganized ] = useState([]) const [ categoriesWithCharts, setCategoriesWithCharts ] = useState([]) + const [ chartData, setChartData ] = useState([]) const [ tabValue, setTabValue ] = useState(0) useEffect(() => { if (historyData.length > 1) { try{ organizeVariables() - } catch { + } catch (e){ console.error("unable to organize variables") } } }, [historyData]) + useEffect(() => { + if (historyData.length > 1) { + try{ + organizeChartData() + } catch (e){ + console.error("unable to organize chart data") + console.log(e) + } + } + }, [historyData]) + useEffect(()=>{ listConfigNames(params.id, outputData.inputData.version) .then(response => response.json()) @@ -115,6 +127,79 @@ export default function OutputComparison(props) { } } setHistoryDataOrganized(tempHistoryDataOrganized) + } + + } + + const organizeChartData = () => { + // return + var tempChartData = [] + for (const bvars of historyData) { + let raw_inputs = {} + let raw_outputs = {} + let raw_variables = {} + let var_sections = {} + let tempVariables = {} + let tempName = bvars.name + for (const [key, v] of Object.entries(bvars.data.outputData.model_objects)) { + let catg = v.chart_group + let chartType = v.chart_type + if (catg) { + let is_input = v.is_input + let is_output = v.is_output + + raw_variables[key] = v + if (is_input) { + raw_inputs[key] = v + catg = v.input_category + } + if (is_output) { + raw_outputs[key] = v + catg = v.output_category + } + if (catg === null) { + catg = "" + } + if (!Object.hasOwn(var_sections, catg)) { + var_sections[catg] = {display_name: catg, variables: [], input_variables:[], output_variables:[], chartType: chartType} + } + if (!Object.hasOwn(tempVariables, catg)) { + tempVariables[catg] = {variables: [], input_variables:[], output_variables:[], chartType: chartType} + } + tempVariables[catg].variables.push(v) + var_sections[catg]["variables"] = [...tempVariables[catg].variables]; + if(is_output) { + tempVariables[catg].output_variables.push(v) + var_sections[catg]["output_variables"] = [...tempVariables[catg].output_variables]; + } + } + + } + tempChartData.push({name: tempName, data: var_sections, raw: {data: raw_variables, inputs: raw_inputs, outputs: raw_outputs}}) + + let tempChartDataOrganized = [...tempChartData] + let tempCategoriesWithCharts = [] + for (let optimization of tempChartDataOrganized) { + let optimizationData = optimization.data + for (let categoryKey of Object.keys(optimizationData)) { + let categoryData = optimizationData[categoryKey] + let categoryVariables = categoryData.output_variables + if (categoryVariables.length > 0) { + let displayUnits = categoryVariables[0].display_units + categoryData.hasChart = true + for(let output_variable of categoryVariables) { + // check if display units match + if (output_variable.display_units !== displayUnits) { + categoryData.hasChart = false + } + } + if(categoryData.hasChart && !tempCategoriesWithCharts.includes(categoryKey)) tempCategoriesWithCharts.push(categoryKey) + } else { + categoryData.hasChart = false + } + } + } + setChartData(tempChartDataOrganized) setCategoriesWithCharts(tempCategoriesWithCharts) } @@ -140,7 +225,7 @@ export default function OutputComparison(props) { { tabValue === 1 && }