Merge pull request #341 from rl-institut/feature/onboarding_charts

Feature/onboarding charts
rl-institut · Aug 31, 2023 · de8f37f · de8f37f
2 parents 8f02e7c + f6cfbfb
commit de8f37f
Show file tree

Hide file tree

Showing 9 changed files with 266 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe
 - results for GHG reduction chart
 - adapt full load hours for renewables
 - demand results for 2045 scenario
+- onboarding charts
 
 ### Changed
 - remove language button

diff --git a/digiplan/map/charts/electricity_autarky.json b/digiplan/map/charts/electricity_autarky.json
@@ -1,4 +1,8 @@
 {
+  "brush": {
+    "toolbox": ["rect", "polygon", "lineX", "lineY", "keep", "clear"],
+    "xAxisIndex": 0
+  },
   "grid": {
     "bottom": "25%"
   },

diff --git a/digiplan/map/charts/onboarding_pv_ground.json b/digiplan/map/charts/onboarding_pv_ground.json
@@ -0,0 +1,69 @@
+{
+  "legend": {
+    "data": ["Installierte Leistung", "Anlagenanzahl"]
+  },
+  "xAxis": [
+    {
+      "type": "category",
+      "data": [
+        "2007",
+        "2008",
+        "2009",
+        "2010",
+        "2011",
+        "2012",
+        "2013",
+        "2014",
+        "2015",
+        "2016",
+        "2017",
+        "2018",
+        "2019",
+        "2020",
+        "2021",
+        "2022"
+      ],
+      "axisPointer": {
+        "type": "shadow"
+      }
+    }
+  ],
+  "yAxis": [
+    {
+      "type": "value",
+      "nameLocation": "start",
+      "min": 0,
+      "max": 400,
+      "interval": 50,
+      "axisLabel": {
+        "formatter": "{value} MW"
+      }
+    },
+    {
+      "type": "value",
+      "nameLocation": "start",
+      "min": 0,
+      "max": 200,
+      "interval": 50,
+      "axisLabel": {
+        "formatter": "{value}"
+      }
+    }
+  ],
+  "series": [
+    {
+      "name": "Installierte Leistung",
+      "type": "bar",
+      "color": "#EFAD25",
+      "barWidth": 10,
+      "data": [3.1, 20.9, 28.1, 58.8, 171.3, 237.2, 240.5, 267.4, 286.9, 303.9, 307.1, 317.7, 322.0, 340.3, 365.5, 371.5]
+    },
+    {
+      "name": "Anlagenanzahl",
+      "type": "line",
+      "color": "#CCCCCC",
+      "yAxisIndex": 1,
+      "data": [3, 17, 20, 30, 51, 84, 86, 94, 100, 104, 110, 121, 128, 140, 156, 162]
+    }
+  ]
+}
diff --git a/digiplan/map/charts/onboarding_pv_roof.json b/digiplan/map/charts/onboarding_pv_roof.json
@@ -0,0 +1,80 @@
+{
+  "legend": {
+    "data": ["Installierte Leistung", "Anlagenanzahl"]
+  },
+  "xAxis": [
+    {
+      "type": "category",
+      "data": [
+        "1993",
+        "1994",
+        "1995",
+        "1998",
+        "2000",
+        "2001",
+        "2002",
+        "2003",
+        "2004",
+        "2005",
+        "2006",
+        "2007",
+        "2008",
+        "2009",
+        "2010",
+        "2011",
+        "2012",
+        "2013",
+        "2014",
+        "2015",
+        "2016",
+        "2017",
+        "2018",
+        "2019",
+        "2020",
+        "2021",
+        "2022"
+      ],
+      "axisPointer": {
+        "type": "shadow"
+      }
+    }
+  ],
+  "yAxis": [
+    {
+      "type": "value",
+      "nameLocation": "start",
+      "min": 0,
+      "max": 390,
+      "interval": 60,
+      "axisLabel": {
+        "formatter": "{value} MW"
+      }
+    },
+    {
+      "type": "value",
+      "nameLocation": "start",
+      "min": 0,
+      "max": 10400,
+      "interval": 800,
+      "axisLabel": {
+        "formatter": "{value}"
+      }
+    }
+  ],
+  "series": [
+    {
+      "name": "Installierte Leistung",
+      "type": "bar",
+      "color": "#FFD660",
+      "barWidth": 8,
+      "data": [0.0, 0.0, 0.0, 0.1, 0.1, 0.1, 0.2, 0.3, 1.1, 2.7, 5.0, 7.5, 12.7, 25.0, 51.4, 77.1, 107.1, 122.4, 130.0, 134.6, 145.8, 158.1, 187.5, 226.4, 256.2, 276.8, 295.2]
+    },
+    {
+      "name": "Anlagenanzahl",
+      "type": "line",
+      "color": "#CCCCCC",
+      "yAxisIndex": 1,
+      "data": [5, 14, 17, 19, 22, 46, 63, 82, 166, 314, 541, 774, 1145, 1621, 2333, 3145, 3826, 4371, 4709, 4970, 5228, 5559, 5958, 6608, 7597, 8678, 10308]
+    }
+  ]
+}
diff --git a/digiplan/map/charts/onboarding_wind.json b/digiplan/map/charts/onboarding_wind.json
@@ -0,0 +1,79 @@
+{
+  "legend": {
+    "data": ["Installierte Leistung", "Anlagenanzahl"]
+  },
+  "xAxis": [
+    {
+      "type": "category",
+      "data": [
+        "1995",
+        "1997",
+        "1998",
+        "1999",
+        "2000",
+        "2001",
+        "2002",
+        "2003",
+        "2004",
+        "2005",
+        "2006",
+        "2007",
+        "2008",
+        "2009",
+        "2010",
+        "2011",
+        "2012",
+        "2013",
+        "2014",
+        "2015",
+        "2016",
+        "2017",
+        "2018",
+        "2019",
+        "2021",
+        "2022"
+      ],
+      "axisPointer": {
+        "type": "shadow"
+      }
+    }
+  ],
+  "yAxis": [
+    {
+      "type": "value",
+      "nameLocation": "start",
+      "min": 0,
+      "max": 800,
+      "interval": 100,
+      "axisLabel": {
+        "formatter": "{value} MW"
+      }
+    },
+    {
+      "type": "value",
+      "nameLocation": "start",
+      "min": 0,
+      "max": 400,
+      "interval": 100,
+      "axisLabel": {
+        "formatter": "{value}"
+      }
+    }
+  ],
+  "series": [
+    {
+      "name": "Installierte Leistung",
+      "type": "bar",
+      "color": "#6A89CC",
+      "barWidth": 10,
+      "data": [0.3, 1.3, 4.5, 23.6, 50.8, 63.0, 148.8, 178.0, 218.0, 309.6, 376.6, 427.0, 429.0, 437.8, 440.6, 449.8, 480.6, 482.9, 500.6, 536.0, 568.2, 612.9, 612.9, 652.7, 663.9, 669.5]
+    },
+    {
+      "name": "Anlagenanzahl",
+      "type": "line",
+      "color": "#CCCCCC",
+      "yAxisIndex": 1,
+      "data": [1, 3, 7, 26, 46, 57, 113, 135, 155, 205, 244, 276, 277, 282, 284, 288, 304, 305, 313, 325, 336, 352, 353, 364, 366, 367]
+    }
+  ]
+}
diff --git a/digiplan/map/views.py b/digiplan/map/views.py
@@ -83,6 +83,9 @@ def get_context_data(self, **kwargs) -> dict:
         context["heat_centralized"] = charts.Chart("heat_centralized").render()
         context["ghg_history"] = charts.Chart("ghg_history").render()
         context["ghg_reduction"] = charts.Chart("ghg_reduction").render()
+        context["onboarding_wind"] = charts.Chart("onboarding_wind").render()
+        context["onboarding_pv_ground"] = charts.Chart("onboarding_pv_ground").render()
+        context["onboarding_pv_roof"] = charts.Chart("onboarding_pv_roof").render()
 
         return context
 

diff --git a/digiplan/static/js/charts.js b/digiplan/static/js/charts.js
@@ -20,6 +20,14 @@ const heat_centralized_chart = echarts.init(document.getElementById("heat_centra
 const ghg_history_chart = echarts.init(document.getElementById("ghg_history_chart"));
 const ghg_reduction_chart = echarts.init(document.getElementById("ghg_reduction_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_pv_ground_chart = echarts.init(onboarding_pv_ground_div);
+const onboarding_pv_roof_div = document.getElementById("onboarding_pv_roof_chart");
+const onboarding_pv_roof_chart = echarts.init(onboarding_pv_roof_div);
+
 PubSub.subscribe(eventTopics.MENU_CHANGED, resizeCharts);
 
 // Styling variables
@@ -285,6 +293,11 @@ const heat_centralized_option = JSON.parse(document.getElementById("heat_central
 const ghg_history_option = JSON.parse(document.getElementById("ghg_history").textContent);
 const ghg_reduction_option = JSON.parse(document.getElementById("ghg_reduction").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 () {
     // renewable_share_goal_chart.resize();
@@ -301,6 +314,9 @@ function resizeCharts() {
     heat_centralized_chart.resize();
     ghg_history_chart.resize();
     ghg_reduction_chart.resize();
+    onboarding_wind_chart.resize();
+    onboarding_pv_ground_chart.resize();
+    onboarding_pv_roof_chart.resize();
   }, 200);
 }
 
@@ -322,6 +338,11 @@ heat_centralized_chart.setOption(heat_centralized_option);
 ghg_history_chart.setOption(ghg_history_option);
 ghg_reduction_chart.setOption(ghg_reduction_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);

diff --git a/digiplan/templates/components/onboarding.html b/digiplan/templates/components/onboarding.html
@@ -54,7 +54,8 @@
             <div class="carousel-item">
               <div class="row">
                 <div class="col-4">
-                  <img src="{% static 'images/map-wind.png' %}" alt="...">
+                    <img src="{% static 'images/map-wind.png' %}" alt="..." style="width: 448px; height:380px; padding-bottom: 15px;">
+                    <div id="onboarding_wind_chart" class="onboarding__chart" style="width: 448px; height: 320px;"></div>
                 </div>
                 <div class="carousel-item__content">
                   <h2>Windenergie</h2>
@@ -67,7 +68,8 @@ <h2>Windenergie</h2>
             <div class="carousel-item">
               <div class="row">
                 <div class="col-4">
-                  <img src="{% static 'images/map-outdoor-pv.png' %}" alt="...">
+                  <img src="{% static 'images/map-outdoor-pv.png' %}" alt="..." style="width: 448px; height:380px; padding-bottom: 15px;">
+                  <div id="onboarding_pv_ground_chart" class="onboarding__chart" style="width: 448px; height: 320px;"></div>
                 </div>
                 <div class="carousel-item__content">
                   <h2>PV-Freiflächenanlagen</h2>
@@ -81,7 +83,8 @@ <h2>PV-Freiflächenanlagen</h2>
             <div class="carousel-item">
               <div class="row">
                 <div class="col-4">
-                  <img src="{% static 'images/map-roof-pv.png' %}" alt="...">
+                  <img src="{% static 'images/map-roof-pv.png' %}" alt="..." style="width: 448px; height:380px; padding-bottom: 15px;">
+                  <div id="onboarding_pv_roof_chart" class="onboarding__chart" style="width: 448px; height: 320px;"></div>
                 </div>
                 <div class="carousel-item__content">
                   <h2>PV-Aufdachanlagen</h2>

diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html
@@ -95,6 +95,9 @@
   {{ heat_centralized|json_script:"heat_centralized" }}
   {{ ghg_history|json_script:"ghg_history" }}
   {{ ghg_reduction|json_script:"ghg_reduction" }}
+  {{ onboarding_wind|json_script:"onboarding_wind" }}
+  {{ onboarding_pv_ground|json_script:"onboarding_pv_ground" }}
+  {{ onboarding_pv_roof|json_script:"onboarding_pv_roof" }}
   {{ settings_parameters|json_script:"settings_parameters" }}
   {{ settings_dependency_map|json_script:"settings_dependency_map" }}
   {{ dependency_parameters|json_script:"dependency_parameters" }}