Improve result charts with arrow indicator

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe
 - key results for wind, pv ground and pv roof settings panels
 - scenario settings
 - additional slider marker
+- result chart arrow indicator
 
 ### Changed
 - Adapt municipality label font size according to zoom level

digiplan/map/charts/capacity.json

@@ -12,6 +12,7 @@
       "Wasserkraft",
       "Bioenergie"
     ],
+    "itemGap": 15,
     "orient": "vertical",
     "right": "-5%",
     "bottom": "15%"

digiplan/map/charts/detailed_overview.json

@@ -16,7 +16,7 @@
     "top": "10%",
     "left": "3%",
     "right": "15%",
-    "bottom": "20%",
+    "bottom": "14%",
     "containLabel": true
   },
   "yAxis": {

digiplan/map/charts/electricity_overview.json

@@ -3,7 +3,7 @@
     "top": "10%",
     "left": "3%",
     "right": "15%",
-    "bottom": "20%",
+    "bottom": "30%",
     "containLabel": true
   },
   "yAxis": {

digiplan/map/charts/general_options.json

@@ -22,6 +22,7 @@
     "show": true,
     "bottom": "12",
     "itemWidth": 14,
-    "itemHeight": 14
+    "itemHeight": 14,
+    "itemGap": 15
   }
 }

digiplan/map/charts/heat_centralized.json

@@ -3,7 +3,8 @@
     "bottom": "28%"
   },
   "legend": {
-    "bottom": "0"
+    "bottom": "0",
+    "itemGap": 15
   },
   "brush": {
     "toolbox": ["rect", "polygon", "lineX", "lineY", "keep", "clear"],

digiplan/map/charts/heat_decentralized.json

@@ -3,7 +3,8 @@
     "bottom": "28%"
   },
   "legend": {
-    "bottom": "0"
+    "bottom": "0",
+    "itemGap": 15
   },
   "brush": {
     "toolbox": ["rect", "polygon", "lineX", "lineY", "keep", "clear"],

digiplan/map/charts/heat_demand.json

@@ -10,6 +10,7 @@
         "GHD",
         "Industrie"
       ],
+      "itemGap": 15,
       "orient": "vertical",
       "right": "1%",
       "bottom": "35%"

digiplan/map/charts/mobility_ghg.json

@@ -1,6 +1,6 @@
 {
   "grid": {
-    "bottom": "20%"
+    "bottom": "18%"
   },
   "xAxis": {
     "type": "value",

digiplan/map/charts/mobility_overview.json

@@ -1,6 +1,6 @@
 {
   "grid": {
-    "bottom": "20%"
+    "bottom": "18%"
   },
   "xAxis": {
     "type": "value",

digiplan/map/charts/onboarding_pv_ground.json

@@ -1,6 +1,7 @@
 {
   "legend": {
-    "data": ["Installierte Leistung", "Anlagenanzahl"]
+    "data": ["Installierte Leistung", "Anlagenanzahl"],
+    "itemGap": 15
   },
   "xAxis": [
     {

digiplan/map/charts/onboarding_pv_roof.json

@@ -1,6 +1,7 @@
 {
   "legend": {
-    "data": ["Installierte Leistung", "Anlagenanzahl"]
+    "data": ["Installierte Leistung", "Anlagenanzahl"],
+    "itemGap": 15
   },
   "xAxis": [
     {

digiplan/map/charts/onboarding_wind.json

@@ -1,6 +1,7 @@
 {
   "legend": {
-    "data": ["Installierte Leistung", "Anlagenanzahl"]
+    "data": ["Installierte Leistung", "Anlagenanzahl"],
+    "itemGap": 15
   },
   "xAxis": [
     {

digiplan/map/charts/overview_heat.json

@@ -1,6 +1,6 @@
 {
   "grid": {
-    "bottom": "20%"
+    "bottom": "18%"
   },
   "xAxis": {
     "type": "value",

digiplan/map/charts/pv_ground_areas.json

@@ -6,13 +6,14 @@
     }
   },
   "legend": {
-    "data": ["Fläche (ha)", "% der Regionsfläche"]
+    "data": ["Fläche (ha)", "% der Regionsfläche"],
+    "itemGap": 15
   },
   "grid": {
     "top": "10%",
     "left": "3%",
     "right": "3%",
-    "bottom": "10%",
+    "bottom": "14%",
     "containLabel": true
   },
   "xAxis": {

digiplan/map/charts/pv_ground_capacity.json

@@ -6,13 +6,14 @@
     }
   },
   "legend": {
-    "data": ["Leistung", "Anlagenanzahl"]
+    "data": ["Leistung", "Anlagenanzahl"],
+    "itemGap": 15
   },
   "grid": {
     "top": "10%",
     "left": "3%",
     "right": "3%",
-    "bottom": "10%",
+    "bottom": "14%",
     "containLabel": true
   },
   "xAxis": {

digiplan/map/charts/pv_roof_areas.json

@@ -6,13 +6,14 @@
     }
   },
   "legend": {
-    "data": ["Fläche (ha)", "% des Potenzials"]
+    "data": ["Fläche (ha)", "% des Potenzials"],
+    "itemGap": 15
   },
   "grid": {
     "top": "10%",
     "left": "3%",
     "right": "3%",
-    "bottom": "10%",
+    "bottom": "14%",
     "containLabel": true
   },
   "xAxis": {

digiplan/map/charts/pv_roof_capacity.json

@@ -6,13 +6,14 @@
     }
   },
   "legend": {
-    "data": ["Leistung", "Anlagenanzahl"]
+    "data": ["Leistung", "Anlagenanzahl"],
+    "itemGap": 15
   },
   "grid": {
     "top": "10%",
     "left": "3%",
     "right": "3%",
-    "bottom": "10%",
+    "bottom": "14%",
     "containLabel": true
   },
   "xAxis": {

digiplan/map/charts/renewable_electricity_production.json

@@ -12,6 +12,7 @@
       "Bioenergie",
       "Konventionell"
     ],
+    "itemGap": 15,
     "orient": "vertical",
     "right": "1%",
     "bottom": "5%"

digiplan/map/charts/wind_areas.json

@@ -6,13 +6,14 @@
     }
   },
   "legend": {
-    "data": ["Fläche (ha)", "% der Regionsfläche"]
+    "data": ["Fläche (ha)", "% der Regionsfläche"],
+    "itemGap": 15
   },
   "grid": {
     "top": "10%",
     "left": "3%",
     "right": "3%",
-    "bottom": "10%",
+    "bottom": "14%",
     "containLabel": true
   },
   "xAxis": {

digiplan/map/charts/wind_capacity.json

@@ -6,13 +6,14 @@
     }
   },
   "legend": {
-    "data": ["Leistung", "Anlagenanzahl"]
+    "data": ["Leistung", "Anlagenanzahl"],
+    "itemGap": 15
   },
   "grid": {
     "top": "10%",
     "left": "3%",
     "right": "3%",
-    "bottom": "10%",
+    "bottom": "14%",
     "containLabel": true
   },
   "xAxis": {

digiplan/static/js/charts.js

@@ -27,7 +27,7 @@ const onboarding_pv_roof_chart = echarts.init(onboarding_pv_roof_div);
 PubSub.subscribe(eventTopics.MENU_CHANGED, resizeCharts);
 
 // Styling variables
-const chart_tooltip = {
+/* const chart_tooltip = {
   trigger: 'axis',
   axisPointer: {
   type: 'shadow'
@@ -60,7 +60,7 @@ const chart_legend = {
   bottom: '0',
   itemWidth: 10,
   itemHeight: 10
-};
+}; */
 
 // CHARTS -> defined in /map/charts/
 

digiplan/static/js/elements.js

@@ -73,4 +73,36 @@ document.addEventListener('DOMContentLoaded', function() {
       svgContainer.style.display = 'block';
     }
   });
+
+  // Adding down arrow as scroll indicator
+  const arrow = document.querySelector('.arrow-container');
+  const resultTab = document.querySelector('#results-pv-tab.nav-link');
+  const mainTabContent = document.querySelector('#mainTabContent');
+  let arrowDisplayed = false;
+
+  if (resultTab && mainTabContent) {
+    const observer = new MutationObserver(function(mutations) { //jshint ignore:line
+      mutations.forEach(mutation => {
+        if (mutation.attributeName === 'class' && !arrowDisplayed) {
+          if (resultTab.classList.contains('active')) {
+            arrow.classList.add('show');
+            arrowDisplayed = true;
+          }
+        }
+      });
+    });
+
+    observer.observe(resultTab, {
+      attributes: true
+    });
+
+    mainTabContent.addEventListener('scroll', function() {
+      let threshold = mainTabContent.scrollHeight - mainTabContent.clientHeight - 300;
+      if (mainTabContent.scrollTop >= threshold && arrowDisplayed) {
+        arrow.classList.remove('show');
+      }
+    });
+  } else {
+    console.error('The required elements were not found in the DOM.');
+  }
 });

digiplan/static/scss/app.scss

@@ -8,6 +8,7 @@
 @import 'base/fonts';
 @import 'base/mixins';
 
+@import 'components/arrow-down';
 @import 'components/buttons';
 @import 'components/carousel';
 @import 'components/charts';

digiplan/static/scss/components/_arrow-down.scss

@@ -0,0 +1,28 @@
+.arrow-container {
+  position: absolute;
+  left: 49.5%;
+  bottom: 5rem;
+  transform: translateX(-50%) translateY(0);
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.5s ease-in-out;
+  animation: none;
+}
+
+.arrow-container.show {
+  visibility: visible;
+  opacity: 1;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+      transform: translateX(-50%) translateY(0);
+  }
+  40% {
+      transform: translateX(-50%) translateY(-15px);
+  }
+  60% {
+      transform: translateX(-50%) translateY(-7px);
+  }
+}

digiplan/static/scss/layouts/_results.scss

@@ -13,7 +13,7 @@
 
 .main-results {
   @extend .container;
-  @extend .mb-4;
+  @extend .mb-2;
 
   &__row {
     @extend .row;
@@ -106,26 +106,45 @@
     padding-right: 5rem !important;
   }
 
+  a {
+    @extend .fw-semibold;
+  }
+
   &__container {
     @extend .container;
+    @extend .mb-4;
   }
 
   &__header {
+    @extend .pt-3;
+
     h2 {
       @extend .fs-6;
       @extend .ps-0;
+      @extend .text-center;
     }
   }
 
   &__row {
     @extend .row;
-    @extend .mb-4;
-    @extend .g-4;
+    @extend .pb-4;
+
+    &:not(:last-of-type) {
+      @extend .border-bottom;
+    }
   }
 
   &__item {
     @extend .col-xl-6;
 
+    &:nth-of-type(odd) {
+      padding: 1rem 3rem 2rem 1rem;
+    }
+
+    &:nth-of-type(even) {
+      padding: 1rem 1rem 2rem 3rem;
+    }
+
     @include media-breakpoint-up(xl) {
       &:first-of-type {
         border-right: 1px solid $gray-200;
@@ -139,7 +158,7 @@
   }
 
   &__chart {
-    height: 400px;
+    height: 340px;
     width: 100%;
   }