Feature/compare ft generation (#257)

* Add compare ft generation * add solar+wind metric
opennem · May 23, 2024 · 416634a · 416634a
1 parent 84bad40
commit 416634a
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 12 deletions.
diff --git a/components/Charts/OpenChart.vue b/components/Charts/OpenChart.vue
@@ -112,6 +112,7 @@
       :convert-value="convertValue"
       :pad-y-axis="padYAxis"
       :annotations="annotations"
+      :path-stroke-width="2"
       class="vis-chart"
       @date-hover="handleDateHover"
       @domain-hover="handleDomainHover"

diff --git a/components/MetricsSelect.vue b/components/MetricsSelect.vue
@@ -6,6 +6,17 @@
         value="carbonIntensity">
         Carbon intensity
       </option>
+
+      <optgroup 
+        label="Generation" 
+        v-if="isCompareView">
+        <option value="renewables">Renewables generation</option>
+        <option value="solarWind">Solar + Wind generation</option>
+        <option value="solar">Solar generation</option>
+        <option value="wind">Wind generation</option>
+        <option value="gas">Gas generation</option>
+        <option value="coal">Coal generation</option>
+      </optgroup>
 
       <optgroup label="Proportion of demand">
         <option value="netInterconnectorFlow">
@@ -14,6 +25,9 @@
         <option value="renewablesProportion">
           Renewables proportion
         </option>
+        <option value="solarWindProportion">
+          Solar + Wind proportion
+        </option>
         <option value="solarProportion">
           Solar proportion
         </option>
@@ -44,17 +58,25 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
   export default {
     computed: {
+      ...mapGetters({
+        currentView: 'currentView',
+      }),
       selectedMetric: {
-      get() {
-        return this.$store.getters['stripes/selectedMetric']
-      },
+        get() {
+          return this.$store.getters['stripes/selectedMetric']
+        },
 
-      set(val) {
-        this.$store.commit('stripes/selectedMetric', val)
-      }
-    },
+        set(val) {
+          this.$store.commit('stripes/selectedMetric', val)
+        }
+      },
+      isCompareView() {
+        return this.currentView === 'compare'
+      },
     }
   }
 </script>
diff --git a/components/Vis/MultiLine.vue b/components/Vis/MultiLine.vue
@@ -529,7 +529,7 @@ export default {
         .style('opacity', 0.9)
         .style('stroke-width', (d) => {
           const find = this.domains1.find((domain) => domain.id === d)
-          return find ? find.pathStrokeWidth : this.pathStrokeWidth
+          return find && find.pathStrokeWidth ? find.pathStrokeWidth : this.pathStrokeWidth
         })
 
       this.$projectionVisGroup
@@ -803,7 +803,7 @@ export default {
           .style('stroke', (key) => this.colours1[key])
           .style('stroke-width', (d) => {
             const find = this.domains1.find((domain) => domain.id === d)
-            return find ? find.pathStrokeWidth : this.pathStrokeWidth
+            return find && find.pathStrokeWidth ? find.pathStrokeWidth : this.pathStrokeWidth
           })
           // .style('filter', 'url(#shadow)')
           .style('stroke-dasharray', this.strokeDasharray)
@@ -863,7 +863,7 @@ export default {
         .style('stroke', (key) => this.colours1[key])
         .style('stroke-width', (d) => {
             const find = this.domains1.find((domain) => domain.id === d)
-            return find ? find.pathStrokeWidth : this.pathStrokeWidth
+            return find && find.pathStrokeWidth ? find.pathStrokeWidth : this.pathStrokeWidth
           })
         // .style('filter', 'url(#shadow)')
         .style('fill', 'transparent')

diff --git a/constants/energy-regions.js b/constants/energy-regions.js
@@ -45,7 +45,7 @@ const EnergyRegions = [
     id: ENERGY_SA,
     abbr: 'SA',
     label: 'South Australia',
-    colour: '#F8D35B',
+    colour: '#f7c41d',
     timezoneString: 'AEST',
     parentRegion: ENERGY_NEM
   },

diff --git a/constants/stripes/index.js b/constants/stripes/index.js
@@ -56,6 +56,16 @@ export const metrics = [
     numberFormatString: ',.0f',
     legendType: 'ramp'
   },
+  {
+    label: 'Solar + Wind proportion (of demand)',
+    value: 'solarWindProportion',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#52BCA3', 'darkgreen'],
+    unit: '%',
+    numberFormatString: ',.0f',
+    legendType: 'ramp'
+  },
   {
     label: 'Wind proportion (of demand)',
     value: 'windProportion',
@@ -113,6 +123,67 @@ export const metrics = [
     legendType: 'ramp'
   },
 
+  {
+    label: 'Renewables generation',
+    value: 'renewables',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#52BCA3', 'darkgreen'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Solar + Wind generation',
+    value: 'solarWind',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#52BCA3', 'darkgreen'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Solar generation',
+    value: 'solar',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#F3E13E', '#F0D800'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Wind generation',
+    value: 'wind',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#88B653', '#417505'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Gas generation',
+    value: 'gas',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#52BCA3', '#ccc', '#F48E1B'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Coal generation',
+    value: 'coal',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#52BCA3', '#ccc', '#131313'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+
   {
     label: 'Wind value',
     value: 'windValue',

diff --git a/data/transform/energy-to-stripe-metrics.js b/data/transform/energy-to-stripe-metrics.js
@@ -213,6 +213,7 @@ function updateMetricObject(
     }
 
     obj.carbonIntensity = setCarbonIntensity(ei, isValidEI)
+
     obj.renewablesProportion =
       d._totalDemandRenewablesPercentage < 0
         ? 0
@@ -221,12 +222,20 @@ function updateMetricObject(
       d._totalDemandWindProportion < 0 ? 0 : d._totalDemandWindProportion
     obj.solarProportion =
       d._totalDemandSolarProportion < 0 ? 0 : d._totalDemandSolarProportion
+    obj.solarWindProportion = obj.windProportion + obj.solarProportion
     obj.coalProportion =
       d._totalDemandCoalProportion < 0 ? 0 : d._totalDemandCoalProportion
     obj.coal = d._totalCoal
     obj.gasProportion =
       d._totalDemandGasProportion < 0 ? 0 : d._totalDemandGasProportion
+
     obj.gas = d._totalGas
+    obj.wind = d._totalWind
+    obj.solar = d._totalSolar
+    obj.solarWind = d._totalSolar + d._totalWind
+    obj.renewables = d._totalRenewables
+    obj.coal = d._totalCoal
+
     obj.temperature = temperature
     obj.maxTemperature = maxTemperature
     obj.minTemperature = minTemperature

diff --git a/pages/compare/index.vue b/pages/compare/index.vue
@@ -285,6 +285,18 @@ export default {
           metric: val
         }
       })
+
+      this.doUpdateXTicks({
+        range: this.range,
+        interval: this.interval,
+        isZoomed: this.zoomExtent.length > 0,
+        filterPeriod: this.filterPeriod
+      })
+      this.doUpdateTickFormats({
+        range: this.range,
+        interval: this.interval,
+        filterPeriod: this.filterPeriod
+      })
     },
     
     rangeIntervalsQuery(val) {
@@ -338,7 +350,9 @@ export default {
       doGetAllMonthlyData: 'regionEnergy/doGetAllMonthlyData',
       doUpdateAllRegionDatasetByInterval: 'regionEnergy/doUpdateAllRegionDatasetByInterval',
       doUpdateTickFormats: 'visInteract/doUpdateTickFormats',
-      doUpdateXGuides: 'visInteract/doUpdateXGuides'
+      doUpdateXGuides: 'visInteract/doUpdateXGuides',
+      doUpdateXTicks: 'visInteract/doUpdateXTicks',
+      doUpdateTickFormats: 'visInteract/doUpdateTickFormats'
     }),
     ...mapMutations({
       setHighlightDomain: 'visInteract/highlightDomain',