update summary table

opennem · Oct 5, 2023 · 3390db3 · 3390db3
1 parent b650fb1
commit 3390db3
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 29 deletions.
diff --git a/components/Charts/TimeOfDay/AverageStackedArea.vue b/components/Charts/TimeOfDay/AverageStackedArea.vue
@@ -44,6 +44,9 @@
       class="vis-chart"
       @date-hover="(evt, date) => $emit('date-hover', date)"
       @domain-hover="(domain) => highlightFuelTech = domain"
+      @enter="handleVisEnter"
+      @leave="handleVisLeave"
+
     />
     <DateBrush
       :dataset="averagesDataset"
@@ -56,12 +59,14 @@
       class="date-brush vis-chart"
       @date-hover="(evt, date) => $emit('date-hover', date)"
       @date-filter="(dateRange) => $emit('date-filter', dateRange)"
+      @enter="handleVisEnter"
+      @leave="handleVisLeave"
     />
   </section>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import { CHART_CURVE_SMOOTH } from '@/constants/chart-options.js'
 import * as SI from '@/constants/si'
 import ChartHeader from './ChartHeader.vue'
@@ -129,31 +134,61 @@ export default {
       return this.chartPowerDisplayPrefix === SI.GIGA
     },
 
-    averagesDataset() {
-      const averagesDs = []
-
-      if (this.datasets.length > 0) {
-        this.datasets.forEach(ds => {
-          const id = ds.id
-
-          ds.data.forEach((d, i) => {
-            if (averagesDs.length !== ds.data.length) {
-              averagesDs.push({
-                x: d.x,
-                date: d.date,
-                time: d.time
-              })
-              averagesDs[i][id] = d._average
-            } else {
-              averagesDs[i][id] = d._average
-            }
+    averagesDataset: {
+      get() {
+        return this.$store.state.timeOfDay.averagesDataset
+      },
+      set(val) {
+        const averagesDs = []
+
+        if (val.length > 0) {
+          val.forEach(ds => {
+            const id = ds.id
+
+            ds.data.forEach((d, i) => {
+              if (averagesDs.length !== ds.data.length) {
+                averagesDs.push({
+                  x: d.x,
+                  date: d.date,
+                  time: d.time
+                })
+                averagesDs[i][id] = d._average
+              } else {
+                averagesDs[i][id] = d._average
+              }
+            })
           })
-        })
-      }
+        }
 
-      return averagesDs
+        this.setAveragesDataset(averagesDs)
+      }
     },
 
+    // averagesDataset() {
+    //   const averagesDs = []
+
+    //   if (this.datasets.length > 0) {
+    //     this.datasets.forEach(ds => {
+    //       const id = ds.id
+
+    //       ds.data.forEach((d, i) => {
+    //         if (averagesDs.length !== ds.data.length) {
+    //           averagesDs.push({
+    //             x: d.x,
+    //             date: d.date,
+    //             time: d.time
+    //           })
+    //           averagesDs[i][id] = d._average
+    //         } else {
+    //           averagesDs[i][id] = d._average
+    //         }
+    //       })
+    //     })
+    //   }
+
+    //   return averagesDs
+    // },
+
     averageYMin() {
       let min = 0
 
@@ -207,6 +242,28 @@ export default {
     hoverValues() {
       return this.hoverDate ? this.averagesDataset.find(d => d.time === this.hoverDate.getTime()) : null
     }
+  },
+
+  watch: {
+    datasets: {
+      immediate: true,
+      handler(val) {
+        this.averagesDataset = val
+      }
+    }
+  },
+
+  methods: {
+    ...mapMutations({
+      setAveragesDataset: 'timeOfDay/averagesDataset'
+    }),
+
+    handleVisEnter() {
+      this.$emit('is-hovering', true)
+    },
+    handleVisLeave() {
+      this.$emit('is-hovering', false)
+    }
   }
 }
 </script>

diff --git a/components/Charts/TimeOfDay/index.vue b/components/Charts/TimeOfDay/index.vue
@@ -19,6 +19,7 @@
         @date-hover="handleDateHover"
         @date-filter="handleZoomRange"
         @unit-click="handleUnitClick"
+        @is-hovering="(val) => $emit('is-hovering', val)"
       />
     </div>
 
@@ -129,6 +130,7 @@ export default {
     ...mapGetters({
       tabletBreak: 'app/tabletBreak',
       widthBreak: 'app/widthBreak',
+      domainPowerEnergy: 'regionEnergy/domainPowerEnergy',
       domainTemperature: 'regionEnergy/domainTemperature',
       domainPrice: 'regionEnergy/domainPrice',
       domainDemandPower: 'regionEnergy/domainDemandPower',
@@ -354,6 +356,8 @@ export default {
         this.interval,
         this.filterPeriod
       )
+      this.$emit('dateHover', this.hoverDate)
+      this.$emit('is-hovering', true)
     },
 
     handleZoomRange(dateRange) {

diff --git a/components/SummaryTable/index.vue b/components/SummaryTable/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="summary-table">
+    {{ dashboardView }}
     <export-legend
       v-if="displayAsLegend"
       :domains="legendDomains"
@@ -532,6 +533,7 @@ export default {
     ...mapGetters({
       datasetFull: 'regionEnergy/datasetFull',
       changeSinceDataset: 'regionEnergy/changeSinceDataset',
+      domainPowerEnergy: 'regionEnergy/domainPowerEnergy',
       domainPowerEnergyGrouped: 'regionEnergy/domainPowerEnergyGrouped',
       regionTimezoneString: 'regionEnergy/regionTimezoneString',
       isEnergyType: 'regionEnergy/isEnergyType',
@@ -566,9 +568,16 @@ export default {
 
       emissionIntensityData: 'energy/emissions/emissionIntensityData',
       averageEmissionIntensity: 'energy/emissions/averageEmissionIntensity',
-      sumEmissionsMinusLoads: 'energy/emissions/sumEmissionsMinusLoads'
+      sumEmissionsMinusLoads: 'energy/emissions/sumEmissionsMinusLoads',
+
+      dashboardView: 'app/dashboardView',
+      averagesDataset: 'timeOfDay/averagesDataset'
     }),
 
+    isTimeOfDayView() {
+      return this.dashboardView === 'time-of-day'
+    },
+
     chartUnit() {
       return this.isEnergy ? this.chartEnergyUnit : this.chartPowerUnit
     },
@@ -1243,9 +1252,12 @@ export default {
       }
     },
 
-    calculatePointSummary(data, marketValueData) {
+    calculatePointSummary({ data, marketValueData }) {
+      let totalDemand = 0
       let totalSources = 0
       let totalGeneration = 0
+      let totalRenewables = 0
+      let totalEnergyForPercentageCalculation = 0
       let totalLoads = 0
       let totalPriceMarketValue = 0
       let hasLoadValue = false,
@@ -1255,10 +1267,26 @@ export default {
       this.pointSummaryLoads = {}
 
       if (!_isEmpty(this.pointSummary)) {
+        // if (this.isTimeOfDayView) {
+        //   this.domainPowerEnergy.forEach((ft) => {
+        //     if (ft.renewable) {
+        //       totalRenewables += data[ft.id] || 0
+        //     }
+        //   })
+        // }
+
         this.energyDomains.forEach((ft) => {
           const category = ft.category
           const value = this.pointSummary[ft.id]
 
+          if (category !== 'load' || _includes(ft.id, 'exports')) {
+            totalEnergyForPercentageCalculation += value || 0
+          }
+
+          if (ft.renewable) {
+            totalRenewables += data[ft.id] || 0
+          }
+
           if (category === 'source') {
             if (value || value === 0) {
               hasSourceValue = true
@@ -1275,6 +1303,8 @@ export default {
             this.pointSummaryLoads[ft.id] = value
             totalLoads += value
           }
+
+          totalDemand += value || 0
         })
 
         if (!hasSourceValue) {
@@ -1346,15 +1376,29 @@ export default {
         }
         this.pointSummary._totalAverageValue = totalAverageValue
       }
+      this.pointSummary._totalEnergyForPercentageCalculation =
+        totalEnergyForPercentageCalculation
       this.pointSummarySources._total = totalSources
       this.pointSummarySources._totalGeneration = totalGeneration
       this.pointSummaryLoads._total = totalLoads
+
+      if (!this.pointSummary._total) {
+        this.pointSummary._total = totalDemand
+      }
+      if (!this.pointSummary._totalRenewables) {
+        this.pointSummary._totalRenewables = totalRenewables
+      }
     },
 
     updatePointSummary(date) {
       if (!date) return
 
-      const dataFound = this.dataset.find((d) => d.time === date.getTime())
+      // const dataFound = this.dataset.find((d) => d.time === date.getTime())
+      // const todDataFound = this.averagesDataset.find((d) => d.time === date.getTime())
+
+      const dataFound = this.isTimeOfDayView
+        ? this.averagesDataset.find((d) => d.time === date.getTime())
+        : this.dataset.find((d) => d.time === date.getTime())
 
       this.hoveredTemperature =
         dataFound && dataFound[this.temperatureId]
@@ -1377,7 +1421,10 @@ export default {
         // }
       }
 
-      this.calculatePointSummary(point, _cloneDeep(dataFound))
+      this.calculatePointSummary({
+        data: point,
+        marketValueData: _cloneDeep(dataFound)
+      })
     },
 
     handleSourcesOrderUpdate(newSourceOrder) {

diff --git a/pages/energy/_region/index.vue b/pages/energy/_region/index.vue
@@ -104,7 +104,10 @@
         style="margin-right: 10px;"
         :style="{ width: `${visWidth}${widthUnit}`}"
         :class="{ dragging: dragging }">
-        <TimeOfDaySection :show-sparklines="false" />
+        <TimeOfDaySection 
+          :show-sparklines="false" 
+          @dateHover="handleDateHover"
+          @is-hovering="handleIsHovering" />
       </div>
 
       <Divider 

diff --git a/store/timeOfDay.js b/store/timeOfDay.js
@@ -1,14 +1,19 @@
 export const state = () => ({
-  selectedToDs: []
+  selectedToDs: [],
+  averagesDataset: []
 })
 
 export const getters = {
-  selectedToDs: (state) => state.selectedToDs
+  selectedToDs: (state) => state.selectedToDs,
+  averagesDataset: (state) => state.averagesDataset
 }
 
 export const mutations = {
   selectedToDs(state, selectedToDs) {
     state.selectedToDs = selectedToDs
+  },
+  averagesDataset(state, averagesDataset) {
+    state.averagesDataset = averagesDataset
   }
 }