feat: added regression information for selected datasets in heatadapt

eurodatacube · Oct 21, 2024 · 3a3e1cd · 3a3e1cd
1 parent c2105a5
commit 3a3e1cd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 10 deletions.
diff --git a/app/src/components/DataMockupView.vue b/app/src/components/DataMockupView.vue
@@ -389,15 +389,15 @@ export default {
             .then((resp) => resp.json())
             .then((json) => {
               // Load only selected gemeinde
-              const dataObj = {};
+              const dataArray = [];
               adminIds.forEach((key) => {
                 if (key in json) {
-                  dataObj[key] = json[key];
+                  dataArray.push(json[key]);
                 }
               });
               const ind = {
                 ...this.indicatorObject,
-                fetchedData: dataObj,
+                fetchedData: dataArray,
                 xAxis: 'Soil sealing percentage [%]',
                 yAxis: 'Average temperature [°]',
               };

diff --git a/app/src/components/IndicatorData.vue b/app/src/components/IndicatorData.vue
@@ -1309,29 +1309,31 @@ export default {
           });
         } else if (['HAUC1'].includes(indicatorCode)) {
           // Rendering for fetched data for rooftops
-          Object.keys(featureData.fetchedData).forEach((gemId, ind) => {
+          featureData.fetchedData.forEach((valArray, ind) => {
             // for each gemeinde group into a dataset
             const x = [];
             const y = [];
-            const zsps = [];
             const clrs = [];
-            featureData.fetchedData[gemId].forEach((value, idx) => {
+            valArray.forEach((value, idx) => {
               x.push(idx);
               y.push(value);
-              zsps.push(gemId);
               clrs.push(refColors[ind]);
             });
             const data = x.map((mm, j) => (
-              { x: mm, y: y[j], zsp: zsps[j] }
+              { x: mm, y: y[j] }
             ));
             datasets.push({
-              // label: zsp,
               fill: false,
               data,
               backgroundColor: clrs,
               borderColor: clrs,
               borderWidth: 1,
               pointRadius: 2,
+              regressions: {
+                type: 'polynomial',
+                line: { color: refColors[ind], width: 2 },
+                calculation: { precision: 6, order: 3 },
+              },
             });
           });
         } else if (['REP4_5'].includes(indicatorCode)) {
@@ -1555,6 +1557,41 @@ export default {
       // just one default yAxis
       customSettings.yAxis = [this.indicatorObject.yAxis];
 
+      if (['HAUC1'].includes(indicatorCode)) {
+        customSettings.plugins = {
+          regressions: {
+            onCompleteCalculation: (chart) => {
+              // remove potential previous div
+              const preEl = document.getElementById('regressionresult');
+              if (preEl) {
+                preEl.remove();
+              }
+              const parentDiv = document.createElement('div');
+              parentDiv.id = 'regressionresult';
+              parentDiv.style.position = 'absolute';
+              parentDiv.style.top = '105px';
+              parentDiv.style['margin-left'] = '80px';
+              parentDiv.style['font-size'] = '11px';
+              chart.data.datasets.forEach((val, idx) => {
+                // currently we do not use sections so we assume sections with length 1
+                const { sections } = ChartRegressions.getDataset(chart, idx);
+                if (sections && sections.length > 0) {
+                  const { result } = sections[0];
+                  const divEl = document.createElement('div');
+                  divEl.style.color = `${this.appConfig.refColors[idx]}`;
+                  const content = document.createTextNode(`R²: ${result.r2}; ${result.string}`);
+                  divEl.appendChild(content);
+                  parentDiv.appendChild(divEl);
+                }
+              });
+              chart.canvas.parentElement.parentElement.appendChild(parentDiv);
+            },
+          },
+          datalabels: {
+            display: false,
+          },
+        };
+      }
       if (!Number.isNaN(reference) && ['E13b', 'E200'].includes(indicatorCode)) {
         annotations.push({
           ...defaultAnnotationSettings,

diff --git a/app/src/plugins/charts.js b/app/src/plugins/charts.js
@@ -6,7 +6,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'; // eslint-disable-line
 
 import * as ChartAnnotation from 'chartjs-plugin-annotation';
 import * as ChartZoomPlugin from 'chartjs-plugin-zoom';
-import * as ChartRegressions from 'chartjs-plugin-regression';
+import { ChartRegressions } from 'chartjs-plugin-regression';
 
 /**
  * Used to show a small bar on the chart if the value is 0