Merge branch 'main' into feature/234-site-design-updates

Author: chienleng

.gitignore

@@ -70,6 +70,7 @@ typings/
 
 # Nuxt generate
 dist
+dist2
 
 # vuepress build output
 .vuepress/dist

components/Charts/PowerEnergyChart.vue

@@ -214,7 +214,8 @@ import * as SI from '@/constants/si.js'
 import { RANGE_ALL_12MTH_ROLLING } from '@/constants/ranges.js'
 import { LOAD } from '@/constants/energy-fuel-techs/group-detailed.js'
 import EnergyToAveragePower from '@/data/transform/energy-to-average-power.js'
-import transformToGrowthTimeSeries from '~/data/transform/growth-series.js'
+import transformToGrowthTimeSeries from '@/data/transform/growth-series.js'
+import { dataFilterByPeriod } from '@/data/parse/region-energy'
 import DateDisplay from '@/services/DateDisplay.js'
 import MultiLine from '@/components/Vis/MultiLine'
 import DateBrush from '@/components/Vis/DateBrush'
@@ -411,7 +412,8 @@ export default {
       isTypeLine: 'chartOptionsPowerEnergy/isTypeLine',
       isTypeChangeSinceLine: 'chartOptionsPowerEnergy/isTypeChangeSinceLine',
       isTypeGrowthStackedArea: 'chartOptionsPowerEnergy/isTypeGrowthStackedArea',
-      allowResize: 'regionEnergy/allowResize'
+      allowResize: 'regionEnergy/allowResize',
+      _rolledUpDataset: 'regionEnergy/_rolledUpDataset'
     }),
 
     showDateAxis: {
@@ -1235,7 +1237,8 @@ export default {
 
     getGrowthDataset() {
       let compareIndex = 1
-      
+      let dataset
+
       if (this.isRollingSumRange) {
         if (this.interval === 'Season' || this.interval === 'Quarter') {
           compareIndex = 4
@@ -1246,21 +1249,34 @@ export default {
         }
       }
 
-      const ds = this.isYAxisAbsolute
-        ? this.powerEnergyDataset
-        : this.averagePowerDataset
+      if (this.filterPeriod === 'All') {
+        const ds = this.isYAxisAbsolute
+          ? this.powerEnergyDataset
+          : this.averagePowerDataset
 
-      const dataset = transformToGrowthTimeSeries(ds, this.domains, compareIndex)
+        dataset = transformToGrowthTimeSeries(ds, this.domains, compareIndex)
+      } else {
+        const ds = this.isYAxisAbsolute
+          ? this._rolledUpDataset
+          : EnergyToAveragePower({
+            data: this._rolledUpDataset,
+            domains: this.domains,
+            range: this.range,
+            interval: this.interval,
+            exponent: this.chartEnergyUnitPrefix,
+            isRollingSum: this.isRollingSumRange
+          })
+        const transformedToGrowth = transformToGrowthTimeSeries(ds, this.domains, compareIndex)
+        const { filteredDatasetFlat } = dataFilterByPeriod({
+          currentDataset: transformedToGrowth,
+          interval: this.interval,
+          period: this.filterPeriod
+        })
+        dataset = filteredDatasetFlat
+      }
 
       this.handleTypeClick()
 
-      if (this.isRollingSumRange) {
-        // only return the data where there are values
-        return dataset.slice(compareIndex, dataset.length - 1)
-      }
-
-      // remove first null period
-      dataset.shift()
       return dataset
     },
 

components/layout/AppFooter.vue

@@ -44,9 +44,8 @@
         class="sources">
         <a 
           target="_blank" 
-          href="https://zenodo.org/record/7179775#.Y5WC4OxxU0E"
-          title="Link to dataset used by this visualisation">Gütschow, J.; Pflüger, M. (2022): The PRIMAP-hist national
-          historical emissions time series v2.4 (1750-2021).</a>
+          href="https://zenodo.org/records/10705513"
+          title="Link to dataset used by this visualisation">Gütschow, J.; Pflüger, M.; Busch, D. (2023): The PRIMAP-hist national historical emissions time series v2.5.1 (1750-2022). zenodo. doi:10.5281/zenodo.10705513.</a>
       </div>
 
       <div 

constants/facilities/map-styles.js

@@ -3,10 +3,15 @@ export const MAP_STYLE_LIGHT = 'light'
 export const MAP_STYLE_SATELLITE = 'satellite'
 
 export const MAP_STYLE_URLS = {}
+// MAP_STYLE_URLS[MAP_STYLE_LIGHT] =
+//   'mapbox://styles/steventan/ckoji70651l9j18p5uefuskvt'
+// MAP_STYLE_URLS[MAP_STYLE_SATELLITE] =
+//   'mapbox://styles/steventan/ckomkdzo11qcw17qljpcd1wki'
+
 MAP_STYLE_URLS[MAP_STYLE_LIGHT] =
-  'mapbox://styles/steventan/ckoji70651l9j18p5uefuskvt'
+  'mapbox://styles/mapbox/light-v11'
 MAP_STYLE_URLS[MAP_STYLE_SATELLITE] =
-  'mapbox://styles/steventan/ckomkdzo11qcw17qljpcd1wki'
+  'mapbox://styles/mapbox/satellite-v9'
 
 export const mapStyleSelections = [
   {

data/calculate-carbon-intensity.js

@@ -19,8 +19,6 @@ function calAverage(isEnergyType, isWemOrAu, dataset) {
 
     if (isWemOrAu) {
       ei = ei * 2
-    } else {
-      ei = ei * 12
     }
   }
 
@@ -35,7 +33,8 @@ export default function({
   domainPowerEnergy,
   isEnergyType,
   isWemOrAu,
-  regionId
+  regionId,
+  interval
 }) {
 
   /**
@@ -70,7 +69,14 @@ export default function({
   }
 
   const getPowerEnergy = (data, domain) => {
-    return data[domain.id] || 0
+    if (isEnergyType) {
+      return data[domain.id] || 0
+    } else {
+      if (data[`${domain.id}_to_energy`]) {
+        return data[`${domain.id}_to_energy`] || 0
+      }
+      return data[domain.id] || 0
+    }
   }
 
   const batteryDischarging = domainPowerEnergy.find(
@@ -109,7 +115,7 @@ export default function({
       }
     })
 
-    powerEnergyDomains.forEach((domain) => {
+    powerEnergyDomains.forEach((domain) => {      
       totalPowerEnergy += getPowerEnergy(d, domain)
     })
 
@@ -129,9 +135,7 @@ export default function({
 
       if (isWemOrAu) {
         ei = ei * 2
-      } else {
-        ei = ei * 12
-      }
+      } 
     }
 
     const isValidEI = Number.isFinite(ei)

data/parse/region-energy/group/index.js

@@ -24,15 +24,25 @@ export default function ({
     Object.keys(groups).forEach((key) => {
       if (key !== GROUP_DETAILED) {
         const groupDomains = groups[key]
+
         groupDomains.forEach((g) => {
           let groupValue = 0,
-            allNulls = true
+            allNulls = true,
+            groupPowerToEnergy = 0
+
           g.domainIds.forEach((dId) => {
             groupValue += d[dId]
+            groupPowerToEnergy += d[`${dId}_to_energy`] || 0
+
             if (d[dId] || d[dId] === 0) {
               allNulls = false
             }
           })
+
+          if (g.type === 'power') {
+            d[`${g.id}_to_energy`] = groupPowerToEnergy
+          }
+
           d[g.id] = allNulls ? null : groupValue
         })
       }

data/parse/region-energy/process/flattenAndInterpolate.js

@@ -4,6 +4,7 @@ import eachDayOfInterval from 'date-fns/eachDayOfInterval'
 import eachMonthOfInterval from 'date-fns/eachMonthOfInterval'
 import addMinutes from 'date-fns/addMinutes'
 import { mutateDate } from '@/services/datetime-helpers.js'
+import { isLoad } from '@/constants/energy-fuel-techs/group-detailed.js'
 import * as DT from '@/constants/data-types.js'
 import interpolateDataset from './interpolateDataset.js'
 
@@ -225,8 +226,28 @@ export default function (isPowerData, dataInterval, dataAll, displayTz) {
   })
 
   // interpolate and create pos/neg price props
+  // convert power to energy
   if (isPowerData) {
     interpolateDataset(dataAll, allArr)
+    const powerData = dataAll.filter((d) => d.type === 'power')
+    const powerIds = powerData.map((d) => { return {
+      id: d.id,
+      fuelTech: d.fuel_tech
+    }})
+
+    allArr.forEach((d) => {
+      let totalEnergy = 0
+      powerIds.forEach(({id, fuelTech}) => {
+        d[`${id}_to_energy`] = d[id] * 5 / 60
+
+        if (isLoad(fuelTech)) {
+          d[`${id}_to_energy`] = -d[`${id}_to_energy`]
+        }
+        
+        totalEnergy += d[`${id}_to_energy`]
+      })
+      d._totalPowerToEnergy = totalEnergy
+    })
 
     const priceObj = dataAll.find((d) => d.type === 'price')
     if (priceObj) {

data/parse/region-energy/rollUp/powerRollUp.js

@@ -1,12 +1,14 @@
-import { mean, rollups } from 'd3-array'
+import { sum, mean, rollups } from 'd3-array'
 import * as DT from '@/constants/data-types.js'
 
 function reducer(a, domains) {
   let obj = {}
   let priceId = null
 
   domains.forEach((domain) => {
+    let allNulls = true
     const id = domain.id
+    const toEnergyId = `${id}_to_energy`
     const type = domain.type
     const isPowerOrEnergy = DT.isPowerOrEnergy(type)
     const isTemperature = DT.isTemperature(type)
@@ -19,17 +21,40 @@ function reducer(a, domains) {
       id !== '_volWeightedPriceAbove300' &&
       id !== '_volWeightedPriceBelow0'
 
-    if (isPowerOrEnergy || isPrice || isEmissionsType) {
+    if (isPowerOrEnergy) {
+      // calculate mean power values
       obj[id] = mean(a, (d) => d[id] || 0)
 
-      if (type === DT.PRICE) {
-        // use the first 30min data for period
-        obj[id] = a[0][id]
-      }
+      // calculate energy and total energy values
+      let totalEnergy = 0
+      a.forEach((point) => {
+        point[toEnergyId] = point[id] * 5 / 60
+        if (domain.category === 'load') {
+          point[toEnergyId] = -point[toEnergyId]
+        }
+        totalEnergy += point[toEnergyId]
+      })
+
+      obj[toEnergyId] = sum(a, (d) => d[toEnergyId] || 0)
+      obj._totalPowerToEnergy = totalEnergy
 
+    } else if (isPrice) {
+      // use the first price value for the rest of the period
+      obj[id] = a[0][id]
       if (isOriginalPrice) {
         priceId = id
       }
+    } else if (isEmissionsType) {
+      const total = sum(a, (d) => {
+        let value = d[id]
+
+        if (value || value === 0) {
+          allNulls = false
+        }
+        return value
+      })
+
+      obj[id] = allNulls ? null : total
     } else if (isTemperature) {
       obj[id] = mean(a, (d) => d[id])
     }

nuxt.config.js

@@ -171,7 +171,6 @@ module.exports = {
       }
     ],
     script: [
-      { src: 'https://cdn.polyfill.io/v2/polyfill.min.js?features=default' },
       { async: true, src: 'https://www.googletagmanager.com/gtag/js?id=G-FYYXTDCEND"' },
       { src: '/scripts/ga.js' }
     ]
@@ -269,7 +268,7 @@ module.exports = {
     /*
      ** You can extend webpack config here
      */
-    // publicPath: `/_nuxt_${timestamp}/`,
+    // publicPath: `/nuxt_${timestamp}/`,
     publicPath: `/js/`,
     plugins: [
       new webpack.IgnorePlugin({