Feature/growth chart (#249)

* add growthstacked area option for powerenergy chart

* wip: calculate growth dataset

* WIP: growth chart

* Update PowerEnergyChart.vue

* Update PowerEnergyChart.vue

* Update PowerEnergyChart.vue

* fix issue where switching growth charts to stacked area doesn't update the data properly

* fix issue where tooltip is not using growth dataset on hover

* fix issue where yAxis doesn't rescale correctly when zoomed in

* refactor and fix issue where growth dataset is not calculated when hiddenDomains changed

* update growth dataset calculation for rolling sum

* refactor and fix issue where zoom out sometimes doesn't work in growth chart

* refactor and fix issue where growth dataset is not calculated when filter period changes

* revert to stacked chart when switching from energy growth chart to power chart

Author: chienleng

components/Charts/PowerEnergyChart.vue

@@ -21,6 +21,7 @@
       :is-type-proportion="isTypeProportion"
       :is-type-line="isTypeLine"
       :is-type-change-since-line="isTypeChangeSinceLine"
+      :is-type-growth-stacked-area="isTypeGrowthStackedArea"
       :is-y-axis-absolute="isYAxisAbsolute"
       :is-y-axis-percentage="isYAxisPercentage"
       :is-y-axis-average-power="isYAxisAveragePower"
@@ -50,15 +51,15 @@
     />
 
     <stacked-area-vis
-      v-if="chartShown && (isTypeArea || isTypeProportion)"
+      v-if="chartShown && (isTypeArea || isTypeProportion || isTypeGrowthStackedArea)"
       :read-only="readOnly"
       :domains="domains"
-      :dataset="stackedAreaDataset"
+      :dataset="isTypeGrowthStackedArea ? growthDataset : stackedAreaDataset"
       :range="range"
       :interval="interval"
       :curve="chartCurve"
-      :y-min="isTypeArea ? computedYMin : 0"
-      :y-max="isTypeArea ? computedYMax : 100"
+      :y-min="isTypeGrowthStackedArea ? computedGrowthYMin : isTypeArea ? computedYMin : 0"
+      :y-max="isTypeGrowthStackedArea ? computedGrowthYMax : isTypeArea ? computedYMax : 100"
       :vis-height="visHeight"
       :hover-on="hoverOn"
       :hover-date="hoverDate"
@@ -88,6 +89,7 @@
       :show-total-line="chartEnergyNetLine"
       :total-line-domain="'_total'"
       :class="{ dragging: dragging }"
+      :use-offset-diverge="isTypeGrowthStackedArea ? true : false"
       class="vis-chart"
       @dateOver="handleDateHover"
       @domainOver="handleDomainHover"
@@ -150,7 +152,24 @@
     />
 
     <date-brush
-      v-if="showDateAxis && chartShown"
+      v-if="showDateAxis && chartShown && isTypeGrowthStackedArea"
+      :dataset="growthDataset"
+      :zoom-range="zoomExtent"
+      :x-ticks="xTicks"
+      :tick-format="tickFormat"
+      :second-tick-format="secondTickFormat"
+      :read-only="readOnly"
+      :interval="interval"
+      :filter-period="filterPeriod"
+      :append-datapoint="isEnergyType"
+      class="date-brush vis-chart"
+      @date-hover="handleDateHover"
+      @date-filter="handleZoomExtent"
+      @enter="handleVisEnter"
+      @leave="handleVisLeave"
+    />
+    <date-brush
+      v-if="showDateAxis && chartShown && !isTypeGrowthStackedArea"
       :dataset="dataset"
       :zoom-range="zoomExtent"
       :x-ticks="xTicks"
@@ -191,6 +210,7 @@ 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 DateDisplay from '@/services/DateDisplay.js'
 import MultiLine from '@/components/Vis/MultiLine'
 import DateBrush from '@/components/Vis/DateBrush'
@@ -218,7 +238,8 @@ const energyOptions = {
     OPTIONS.CHART_STACKED,
     OPTIONS.CHART_PROPORTION,
     OPTIONS.CHART_LINE,
-    OPTIONS.CHART_CHANGE_SINCE_LINE
+    OPTIONS.CHART_CHANGE_SINCE_LINE,
+    OPTIONS.CHART_GROWTH_STACKED_AREA
   ],
   curve: [
     OPTIONS.CHART_CURVE_SMOOTH,
@@ -337,13 +358,17 @@ export default {
       visHeight: 330,
       draggedHeight: 330,
       dragging: false,
-      showDivider: false
+      showDivider: false,
+
+      growthDataset: []
     }
   },
 
   computed: {
     ...mapGetters({
       percentContributionTo: 'percentContributionTo',
+      fuelTechGroupName: 'fuelTechGroupName',
+
       tabletBreak: 'app/tabletBreak',
 
       hoverDomain: 'visInteract/hoverDomain',
@@ -381,6 +406,7 @@ export default {
       isTypeProportion: 'chartOptionsPowerEnergy/isTypeProportion',
       isTypeLine: 'chartOptionsPowerEnergy/isTypeLine',
       isTypeChangeSinceLine: 'chartOptionsPowerEnergy/isTypeChangeSinceLine',
+      isTypeGrowthStackedArea: 'chartOptionsPowerEnergy/isTypeGrowthStackedArea',
       allowResize: 'regionEnergy/allowResize'
     }),
 
@@ -434,7 +460,7 @@ export default {
     shouldConvertValue() {
       return (
         this.isTypeArea ||
-        ((this.isTypeLine || this.isTypeChangeSinceLine) &&
+        ((this.isTypeLine || this.isTypeChangeSinceLine || this.isTypeGrowthStackedArea) &&
           !this.isYAxisPercentage)
       )
     },
@@ -712,6 +738,7 @@ export default {
       this.$emit('selectedDataset', ds)
       return ds
     },
+
     // yMin() {
     //   const loadDomains = this.domains.filter((d) => d.category === LOAD)
     //   if (loadDomains.length === 0) {
@@ -741,6 +768,61 @@ export default {
     //   })
     //   return max(dataset, d => d._stackedTotalMax)
     // },
+    computedGrowthYMin() {
+      let lowest = 0
+
+      const filteredDataset =
+        this.zoomExtent.length > 0
+          ? this.growthDataset.filter(
+              (d) =>
+                d.time >= this.zoomExtent[0].getTime() &&
+                d.time <= this.zoomExtent[1].getTime() - 1
+            )
+          : this.growthDataset
+
+      filteredDataset.forEach((d) => {
+        let total = 0
+
+        this.powerEnergyDomains.forEach((domain) => {
+          const value = d[domain.id] || 0
+          total += value < 0 ? value : 0
+        })
+
+        if (total < lowest) {
+          lowest = total
+        }
+      })
+
+      return lowest
+    },
+
+    computedGrowthYMax() {
+      let highest = 0
+
+      const filteredDataset =
+        this.zoomExtent.length > 0
+          ? this.growthDataset.filter(
+              (d) =>
+                d.time >= this.zoomExtent[0].getTime() &&
+                d.time <= this.zoomExtent[1].getTime() - 1
+            )
+          : this.growthDataset
+
+      filteredDataset.forEach((d) => {
+        let total = 0
+        this.powerEnergyDomains.forEach((domain) => {
+          const value = d[domain.id] || 0
+          total += value > 0 ? value : 0
+        })
+
+        if (total > highest) {
+          highest = total
+        }
+      })
+
+      return highest
+    },
+
     computedYMin() {
       let lowest = 0
 
@@ -858,7 +940,9 @@ export default {
         return null
       }
       const time = date.getTime()
-      return this.dataset.find((d) => d.time === time)
+      return this.isTypeGrowthStackedArea
+        ? this.growthDataset.find((d) => d.time === time)
+        : this.dataset.find((d) => d.time === time)
     },
     hoverValue() {
       let value = null
@@ -905,6 +989,7 @@ export default {
     hoverTotal() {
       let total = 0
       let allNulls = true
+
       if (this.hoverData) {
         this.domains.forEach((d) => {
           const value = this.hoverData[d.id]
@@ -941,13 +1026,59 @@ export default {
     chartUnitPrefix() {
       this.$emit('selectedDataset', this.dataset)
     },
+
+    zoomExtent() {
+      if (this.isTypeGrowthStackedArea) {
+        this.updateGrowDataset()
+      }
+    },
+
+    filterPeriod() {
+      if (this.isTypeGrowthStackedArea) {
+        this.updateGrowDataset()
+      }
+    },
+
+    fuelTechGroupName() {
+      if (this.isTypeGrowthStackedArea) {
+        this.updateGrowDataset()
+      }
+    },
+
     interval() {
       this.handleTypeClick()
+
+      if (this.isTypeGrowthStackedArea) {
+        this.updateGrowDataset()
+      }
+    },
+
+    isTypeGrowthStackedArea(val) {
+      if (val) {
+        this.updateGrowDataset()
+      }
+    },
+
+    hiddenDomains() {
+      if (this.isTypeGrowthStackedArea) {
+        this.updateGrowDataset()
+      }
     }
   },
 
   mounted() {
     this.visHeight = this.chartHeight
+
+    if (this.isTypeGrowthStackedArea) {
+      this.updateGrowDataset()
+    }
+
+    if (!this.isEnergyType && this.isTypeGrowthStackedArea) {
+      this.$store.commit(
+        'chartOptionsPowerEnergy/chartType',
+        OPTIONS.CHART_STACKED
+      )
+    }
   },
 
   methods: {
@@ -960,6 +1091,12 @@ export default {
       doUpdateTickFormats: 'visInteract/doUpdateTickFormats'
     }),
 
+    updateGrowDataset() {
+      this.growthDataset = this.zoomExtent.length > 0 ? this.getGrowthDataset().filter((d) => {
+          return d.date >= this.zoomExtent[0] && d.date < this.zoomExtent[1]
+        }) : this.getGrowthDataset()
+    },
+
     convertValue(value) {
       return SI.convertValue(
         this.chartUnitPrefix,
@@ -1048,6 +1185,24 @@ export default {
       return newDataset
     },
 
+    getGrowthDataset() {
+      let compareIndex = 1
+      
+      if (this.isRollingSumRange) {
+        if (this.interval === 'Season' || this.interval === 'Quarter') {
+          compareIndex = 4
+        } else if (this.interval === 'Half Year') {
+          compareIndex = 2
+        }
+      }
+
+      const dataset = transformToGrowthTimeSeries(this.powerEnergyDataset, this.domains, compareIndex)
+
+      this.handleTypeClick()
+
+      return dataset
+    },
+
     handleDomainHover(domain) {
       this.setHoverDomain(domain)
     },

components/Charts/PowerEnergyChartOptions.vue

@@ -155,6 +155,10 @@ export default {
       type: Boolean,
       default: false
     },
+    isTypeGrowthStackedArea: {
+      type: Boolean,
+      default: false
+    },
     isYAxisAbsolute: {
       type: Boolean,
       default: false
@@ -246,7 +250,7 @@ export default {
       return (
         !this.isRenewableLineOnly &&
         (this.isTypeArea ||
-          ((this.isTypeLine || this.isTypeChangeSinceLine) &&
+          ((this.isTypeLine || this.isTypeChangeSinceLine || this.isTypeGrowthStackedArea) &&
             !this.isYAxisPercentage))
       )
     },
@@ -279,8 +283,8 @@ export default {
       let options = []
       if (this.isEnergyType) {
         options = this.energyOptions
-        if (this.isTypeLine || this.isTypeChangeSinceLine) {
-          if (this.isTypeChangeSinceLine) {
+        if (this.isTypeLine || this.isTypeChangeSinceLine || this.isTypeGrowthStackedArea) {
+          if (this.isTypeChangeSinceLine || this.isTypeGrowthStackedArea) {
             options.yAxis = [
               OPTIONS.CHART_YAXIS_ENERGY,
               OPTIONS.CHART_YAXIS_AVERAGE_POWER
@@ -427,7 +431,7 @@ export default {
       if (!this.isRenewableLineOnly) {
         if (
           this.isTypeArea ||
-          ((this.isTypeLine || this.isTypeChangeSinceLine) &&
+          ((this.isTypeLine || this.isTypeChangeSinceLine || this.isTypeGrowthStackedArea) &&
             !this.isYAxisPercentage)
         ) {
           const updatedPrefix = this.togglePrefix(this.chartDisplayPrefix)

components/Vis/StackedArea.vue

@@ -568,6 +568,16 @@ export default {
   },
 
   watch: {
+    yMin() {
+      this.update()
+    },
+    yMax() {
+      this.update()
+    },
+    useOffsetDiverge() {
+      this.setup()
+    },
+
     showXAxis() {
       this.handleResize()
     },

constants/chart-options.js

@@ -3,6 +3,7 @@ export const CHART_STACKED = 'area'
 export const CHART_PROPORTION = 'proportion'
 export const CHART_LINE = 'line'
 export const CHART_CHANGE_SINCE_LINE = 'change-since-line'
+export const CHART_GROWTH_STACKED_AREA = 'growth-stacked-area'
 
 export const CHART_CURVE_SMOOTH = 'smooth'
 export const CHART_CURVE_STEP = 'step'
@@ -24,6 +25,7 @@ CHART_LABEL[CHART_STACKED] = 'Stacked'
 CHART_LABEL[CHART_PROPORTION] = 'Proportion'
 CHART_LABEL[CHART_LINE] = 'Line'
 CHART_LABEL[CHART_CHANGE_SINCE_LINE] = 'Change'
+CHART_LABEL[CHART_GROWTH_STACKED_AREA] = 'Growth'
 CHART_LABEL[CHART_CURVE_SMOOTH] = 'Smooth'
 CHART_LABEL[CHART_CURVE_STEP] = 'Step'
 CHART_LABEL[CHART_CURVE_STRAIGHT] = 'Straight'