Feature/results calculation user feedback

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe
 - scenario settings
 - additional slider marker
 - result chart arrow indicator
+- feedback during simulation: results progress bar and chart placeholders
 
 ### Changed
 - Adapt municipality label font size according to zoom level

digiplan/static/js/charts.js

@@ -1,151 +1,75 @@
-// Goals & scenarios, initioalize charts
-
-// Results view, initiliaze charts
-// const detailed_overview_chart = echarts.init(document.getElementById("detailed_overview_chart"));
-const wind_capacity_chart = echarts.init(document.getElementById("wind_capacity_chart"));
-const wind_areas_chart = echarts.init(document.getElementById("wind_areas_chart"));
-const pv_ground_capacity_chart = echarts.init(document.getElementById("pv_ground_capacity_chart"));
-const pv_ground_areas_chart = echarts.init(document.getElementById("pv_ground_areas_chart"));
-const pv_roof_capacity_chart = echarts.init(document.getElementById("pv_roof_capacity_chart"));
-const pv_roof_areas_chart = echarts.init(document.getElementById("pv_roof_areas_chart"));
-
-const electricity_overview_chart = echarts.init(document.getElementById("electricity_overview_chart"));
-const electricity_autarky_chart = echarts.init(document.getElementById("electricity_autarky_chart"));
-// const mobility_overview_chart = echarts.init(document.getElementById("mobility_overview_chart"));
-// const mobility_THG_chart = echarts.init(document.getElementById("mobility_THG_chart"));
-const heat_decentralized_chart = echarts.init(document.getElementById("heat_decentralized_chart"));
-const heat_centralized_chart = echarts.init(document.getElementById("heat_centralized_chart"));
+export const preResultCharts = {
+  wind_capacity: "wind_capacity_chart",
+  wind_areas: "wind_areas_chart",
+  pv_ground_capacity: "pv_ground_capacity_chart",
+  pv_ground_areas: "pv_ground_areas_chart",
+  pv_roof_capacity: "pv_roof_capacity_chart",
+  pv_roof_areas: "pv_roof_areas_chart",
+};
 
 // Onboarding Charts
 const onboarding_wind_div = document.getElementById("onboarding_wind_chart");
 const onboarding_wind_chart = echarts.init(onboarding_wind_div);
-const onboarding_pv_ground_div = document.getElementById("onboarding_pv_ground_chart");
+const onboarding_wind_option = JSON.parse(
+  document.getElementById("onboarding_wind").textContent,
+);
+onboarding_wind_chart.setOption(onboarding_wind_option);
+
+const onboarding_pv_ground_div = document.getElementById(
+  "onboarding_pv_ground_chart",
+);
 const onboarding_pv_ground_chart = echarts.init(onboarding_pv_ground_div);
-const onboarding_pv_roof_div = document.getElementById("onboarding_pv_roof_chart");
+const onboarding_pv_ground_option = JSON.parse(
+  document.getElementById("onboarding_pv_ground").textContent,
+);
+onboarding_pv_ground_chart.setOption(onboarding_pv_ground_option);
+
+const onboarding_pv_roof_div = document.getElementById(
+  "onboarding_pv_roof_chart",
+);
 const onboarding_pv_roof_chart = echarts.init(onboarding_pv_roof_div);
+const onboarding_pv_roof_option = JSON.parse(
+  document.getElementById("onboarding_pv_roof").textContent,
+);
+onboarding_pv_roof_chart.setOption(onboarding_pv_roof_option);
 
 PubSub.subscribe(eventTopics.MENU_CHANGED, resizeCharts);
 
-// Styling variables
-/* const chart_tooltip = {
-  trigger: 'axis',
-  axisPointer: {
-  type: 'shadow'
-  }
-};
-const chart_bar_width_sm = 16;
-const chart_grid_goal = {
-  top: '10%',
-  left: '15%',
-  right: '15%',
-  bottom: '18%',
-  height: '120',
-  containLabel: true
-};
-const chart_grid_results = {
-  top: '10%',
-  left: '3%',
-  right: '25%',
-  bottom: '18%',
-  containLabel: true
-};
-const chart_text_style = {
-  fontFamily: "Roboto",
-  fontSize: 10,
-  //fontWeight: 300,
-  //color: '#002C50'
-};
-const chart_legend = {
-  show: true,
-  bottom: '0',
-  itemWidth: 10,
-  itemHeight: 10
-}; */
-
-// CHARTS -> defined in /map/charts/
-
-// get options for result view charts
-// const detailed_overview_option = JSON.parse(document.getElementById("detailed_overview").textContent);
-const wind_capacity_option = JSON.parse(document.getElementById("wind_capacity").textContent);
-const wind_areas_option = JSON.parse(document.getElementById("wind_areas").textContent);
-const pv_ground_capacity_option = JSON.parse(document.getElementById("pv_ground_capacity").textContent);
-const pv_ground_areas_option = JSON.parse(document.getElementById("pv_ground_areas").textContent);
-const pv_roof_capacity_option = JSON.parse(document.getElementById("pv_roof_capacity").textContent);
-const pv_roof_areas_option = JSON.parse(document.getElementById("pv_roof_areas").textContent);
-
-const electricity_overview_option = JSON.parse(document.getElementById("electricity_overview").textContent);
-const electricity_autarky_option = JSON.parse(document.getElementById("electricity_autarky").textContent);
-// const mobility_overview_option = JSON.parse(document.getElementById("mobility_overview").textContent);
-// const mobility_ghg_option = JSON.parse(document.getElementById("mobility_ghg").textContent);
-const heat_decentralized_option = JSON.parse(document.getElementById("heat_decentralized").textContent);
-const heat_centralized_option = JSON.parse(document.getElementById("heat_centralized").textContent);
-
-// get options for onboarding charts
-const onboarding_wind_option = JSON.parse(document.getElementById("onboarding_wind").textContent);
-const onboarding_pv_ground_option = JSON.parse(document.getElementById("onboarding_pv_ground").textContent);
-const onboarding_pv_roof_option = JSON.parse(document.getElementById("onboarding_pv_roof").textContent);
-
 function resizeCharts() {
   setTimeout(function () {
-    // detailed_overview_chart.resize();
-    wind_capacity_chart.resize();
-    wind_areas_chart.resize();
-    pv_ground_capacity_chart.resize();
-    pv_ground_areas_chart.resize();
-    pv_roof_capacity_chart.resize();
-    pv_roof_areas_chart.resize();
-    electricity_overview_chart.resize();
-    electricity_autarky_chart.resize();
-    // mobility_overview_chart.resize();
-    // mobility_THG_chart.resize();
-    heat_decentralized_chart.resize();
-    heat_centralized_chart.resize();
+    for (const preResultChart of Object.values(preResultCharts)) {
+      const chartDiv = document.getElementById(preResultChart);
+      const chart = echarts.getInstanceByDom(chartDiv);
+      if (chart !== undefined) {
+        chart.resize();
+      }
+    }
     onboarding_wind_chart.resize();
     onboarding_pv_ground_chart.resize();
     onboarding_pv_roof_chart.resize();
   }, 200);
 }
 
-// Results, setOptions
-// detailed_overview_chart.setOption(detailed_overview_option);
-wind_capacity_chart.setOption(wind_capacity_option);
-wind_areas_chart.setOption(wind_areas_option);
-pv_ground_capacity_chart.setOption(pv_ground_capacity_option);
-pv_ground_areas_chart.setOption(pv_ground_areas_option);
-pv_roof_capacity_chart.setOption(pv_roof_capacity_option);
-pv_roof_areas_chart.setOption(pv_roof_areas_option);
-electricity_overview_chart.setOption(electricity_overview_option);
-electricity_autarky_chart.setOption(electricity_autarky_option);
-// mobility_overview_chart.setOption(mobility_overview_option);
-// mobility_THG_chart.setOption(mobility_ghg_option);
-heat_decentralized_chart.setOption(heat_decentralized_option);
-heat_centralized_chart.setOption(heat_centralized_option);
-
-// onboarding Charts
-onboarding_wind_chart.setOption(onboarding_wind_option);
-onboarding_pv_ground_chart.setOption(onboarding_pv_ground_option);
-onboarding_pv_roof_chart.setOption(onboarding_pv_roof_option);
-
 resizeCharts();
 
 window.addEventListener("resize", resizeCharts);
 document.addEventListener("show.bs.tab", resizeCharts);
 
-
-function createChart(div_id, options) {
+export function createChart(div_id, options) {
   const chartElement = document.getElementById(div_id);
+  chartElement.innerHTML = "";
   let chart;
   if (echarts.getInstanceByDom(chartElement)) {
-    chart =  echarts.getInstanceByDom(chartElement);
+    chart = echarts.getInstanceByDom(chartElement);
     chart.clear();
   } else {
-    chart = echarts.init(chartElement, null, {renderer: 'svg'});
+    chart = echarts.init(chartElement, null, { renderer: "svg" });
   }
   chart.setOption(options);
   chart.resize();
 }
 
-function clearChart(div_id) {
+export function clearChart(div_id) {
   const chartElement = document.getElementById(div_id);
   if (echarts.getInstanceByDom(chartElement)) {
     const chart = echarts.getInstanceByDom(chartElement);

digiplan/static/js/results.js

@@ -1,4 +1,5 @@
 import { statusquoDropdown, futureDropdown } from "./elements.js";
+import { preResultCharts, createChart, clearChart } from "./charts.js";
 
 const imageResults = document.getElementById("info_tooltip_results");
 const resultSimNote = document.getElementById("result_simnote");
@@ -19,15 +20,6 @@ const PRE_RESULTS = [
   "heat_demand_capita_2045",
 ];
 
-const preResultCharts = {
-  wind_capacity: "wind_capacity_chart",
-  wind_areas: "wind_areas_chart",
-  pv_ground_capacity: "pv_ground_capacity_chart",
-  pv_ground_areas: "pv_ground_areas_chart",
-  pv_roof_capacity: "pv_roof_capacity_chart",
-  pv_roof_areas: "pv_roof_areas_chart",
-};
-
 const resultCharts = {};
 
 const SUMMARY_PRE_RESULTS = [
@@ -68,6 +60,7 @@ futureDropdown.addEventListener("change", function () {
 });
 
 // Subscriptions
+PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, showResultSkeletons);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, storePreResults);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, showPreResultCharts);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, showSummaryPreResults);
@@ -230,3 +223,17 @@ function showSummaryResults(summaries = []) {
     },
   });
 }
+
+function showResultSkeletons(msg) {
+  const skeleton_template = document.getElementById("result_skeleton");
+  for (const chart_div_id of Object.values(preResultCharts)) {
+    const chart_div = document.getElementById(chart_div_id);
+    const chart = echarts.getInstanceByDom(chart_div);
+    if (chart !== undefined) {
+      chart.dispose();
+    }
+    const skeleton = skeleton_template.content.cloneNode(true);
+    chart_div.appendChild(skeleton);
+  }
+  return logMessage(msg);
+}

digiplan/static/scss/app.scss

@@ -19,8 +19,11 @@
 @import 'components/modals';
 @import 'components/offcanvas';
 @import 'components/popup';
+@import 'components/progress';
 @import 'components/scenarios';
+@import 'components/skeletons';
 @import 'components/tabs';
+@import 'components/tooltips';
 @import 'components/top-nav';
 @import 'components/sliders';
 @import 'components/widgets';

digiplan/static/scss/components/_progress.scss

@@ -0,0 +1,15 @@
+.progress {
+  .progress-bar {
+    @extend .progress-bar-striped;
+    @extend .progress-bar-animated;
+    @extend .bg-success;
+    background-color: rgba(74, 194, 157, var(--bs-bg-opacity)) !important;
+  }
+}
+
+.progress--error {
+  .progress-bar {
+    @extend .bg-danger;
+    background-color: rgba(229, 112, 127, var(--bs-bg-opacity)) !important;
+  }
+}

digiplan/static/scss/components/_skeletons.scss

@@ -0,0 +1,109 @@
+$skeleton-height-text: 0.875rem;
+$skeleton-bg-color: #C3D1DB;
+$skeleton-bg-color-light: #d8e2e9;
+$skeleton-border-radius: 4px;
+$skeleton-border-radius-none: 0;
+
+@mixin skeleton-style($skeleton-element-height, $skeleton-element-width, $skeleton-element-bg-color, $skeleton-element-border-radius) {
+  height: $skeleton-element-height;
+  width: $skeleton-element-width;
+  background-color: $skeleton-element-bg-color;
+  border-radius: $skeleton-element-border-radius;
+  animation: shimmer 1.5s infinite;
+  background: linear-gradient(to right, $skeleton-element-bg-color 25%, $gray-200, $skeleton-element-bg-color 75%);
+  background-size: 200% 100%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+.skeleton.skeleton--chart {
+  @extend .mt-2;
+  @extend .mb-4;
+
+  .skeleton__title {
+    @extend .mb-1;
+    @include skeleton-style($skeleton-height-text, 8rem, $skeleton-bg-color-light, $skeleton-border-radius);
+  }
+
+  .skeleton__chart {
+    @extend .row;
+    @extend .mb-3;
+    height: 12rem;
+
+    .skeleton__chart-yaxis {
+      @extend .col-3;
+      @extend .d-flex;
+      @extend .flex-column;
+      @extend .justify-content-around;
+      @extend .pe-1;
+      @extend .pt-2;
+
+      .skeleton__chart-yaxis-value {
+        @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      }
+    }
+
+    .skeleton__chart-bars {
+      @extend .col-6;
+      @extend .d-flex;
+      @extend .flex-column;
+      @extend .justify-content-around;
+      @extend .ps-1;
+      @extend .pt-2;
+      @extend .border-bottom;
+      @extend .border-start;
+
+      .skeleton__chart-bar {
+        @include skeleton-style(1.5rem, 66%, $skeleton-bg-color, $skeleton-border-radius-none);
+      }
+
+      .skeleton__chart-bar:first-of-type {
+        width: 33%;
+      }
+
+      .skeleton__chart-bar:last-of-type {
+        width: 100%;
+      }
+    }
+
+    .skeleton__chart-xaxis-legend {
+      @extend .col-3;
+      @extend .d-flex;
+      @extend .flex-column;
+      @extend .justify-content-end;
+      @extend .ps-1;
+
+      & > div {
+        @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      }
+    }
+  }
+
+  .skeleton__legend {
+    @extend .row;
+
+    .skeleton__legend-item {
+      @extend .col-4;
+      @extend .d-flex;
+      @extend .flex-row;
+      @extend .pe-3;
+      @extend .mb-1;
+
+      .skeleton__legend-color {
+        @include skeleton-style($skeleton-height-text, $skeleton-height-text, $skeleton-bg-color, 100px);
+      }
+
+      .skeleton__legend-description {
+        @extend .ms-1;
+        @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      }
+    }
+  }
+}