organize chart data separately based on chart_type and chart_group pr…

…ovided by export
watertap-org · Apr 16, 2024 · 7324255 · 7324255
1 parent f91c8b1
commit 7324255
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 4 deletions.
diff --git 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 = //"<b>%{text}</b><br><br>" +
             "%{data.name}: %{y:,.3f}<br>" +
             //"%{xaxis.title.text}: %{x:.0%}<br>" +

diff --git 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 &&
                 <OutputComparisonChart 
                   flowsheetData={outputData}
-                  historyData={historyDataOrganized}
+                  historyData={chartData}
                   categoriesWithCharts={categoriesWithCharts}
                 />
             }