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

Author: chienleng

components/Charts/EmissionIntensityChart.vue

@@ -164,6 +164,10 @@ export default {
     averageEmissionIntensity: {
       type: Number,
       default: 0
+    },
+    isEnergyType: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -283,6 +287,12 @@ export default {
     if (this.tabletBreak) {
       this.chartHeight = 200
     }
+
+    if (this.isEnergyType) {
+      this.$store.commit('chartOptionsEmissionIntensity/chartCurve', 'step')
+    } else {
+      this.$store.commit('chartOptionsEmissionIntensity/chartCurve', 'smooth')
+    }
   },
 
   methods: {

components/Charts/EmissionIntensityChartOptions.vue

@@ -1,5 +1,7 @@
 <template>
-  <chart-header :chart-shown="chartShown">
+  <chart-header 
+    :chart-shown="chartShown" 
+    :has-hover-date="hoverDisplayDate.length > 0">
     <template 
       v-slot:options 
       v-if="!readOnly">
@@ -20,7 +22,12 @@
 
     <template v-slot:label-unit>
       <strong>Emission Intensity</strong>
-      <small v-if="chartShown">kgCO₂e/MWh</small>
+      <div 
+        v-show="chartShown" 
+        style="display: flex; gap: 5px; align-items: center;">
+        <small v-if="is12MthRollingSum">(12-month rolling)</small>
+        <small>kgCO₂e/MWh</small>
+      </div>
     </template>
     <template 
       v-slot:average-value 
@@ -32,9 +39,7 @@
       {{ hoverDisplayDate }}
     </template>
     <template v-slot:hover-values>
-      <span 
-        v-if="hoverValue" 
-        class="ft-value">
+      <span v-if="hoverValue">
         <strong>{{ hoverValue | formatValue }} kgCO₂e/MWh</strong>
       </span>
     </template>
@@ -104,6 +109,11 @@ export default {
       showChartOptions: false
     }
   },
+  computed: {
+    ...mapGetters({
+      is12MthRollingSum: 'is12MthRollingSum'
+    })
+  },
   methods: {
     handleTypeClick(type) {
       this.$store.commit('chartOptionsEmissionIntensity/chartType', type)

components/Charts/EmissionsChart.vue

@@ -273,6 +273,10 @@ export default {
     emissionsOptions: {
       type: Object,
       default: () => emissionsOptions
+    },
+    isEnergyType: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -707,6 +711,12 @@ export default {
     this.$emit('changeDataset', this.changeSinceDataset)
     this.chartHeight = this.visHeight
     this.handleTypeClick()
+
+    if (this.isEnergyType) {
+      this.$store.commit('chartOptionsEmissionsVolume/chartCurve', 'step')
+    } else {
+      this.$store.commit('chartOptionsEmissionsVolume/chartCurve', 'smooth')
+    }
   },
 
   methods: {

components/Charts/EmissionsChartOptions.vue

@@ -1,5 +1,7 @@
 <template>
-  <chart-header :chart-shown="chartShown">
+  <chart-header 
+    :chart-shown="chartShown" 
+    :has-hover-date="hoverDisplayDate.length > 0">
     <template 
       v-slot:options 
       v-if="!readOnly">
@@ -25,13 +27,20 @@
 
     <template v-slot:label-unit>
       <strong>Emissions Volume</strong>
-      <small v-if="chartShown && isPercentage"> {{ displayUnit }}</small>
-      <small
-        v-if="chartShown && !isPercentage"
-        class="display-unit"
-        @click.stop="handleUnitClick"
-      >{{ displayUnit }}/{{ interval | intervalLabel }}</small
-      >
+
+      <div 
+        v-show="chartShown" 
+        style="display: flex; gap: 1px; align-items: center;">
+        <small v-if="is12MthRollingSum">(12-month rolling)</small>
+        <small v-if="isPercentage"> {{ displayUnit }}</small>
+        <small
+          v-if="!isPercentage"
+          class="display-unit"
+          @click.stop="handleUnitClick"
+        >
+          {{ displayUnit }}/{{ interval | intervalLabel }}
+        </small>
+      </div>
     </template>
     <template
       v-slot:average-value
@@ -70,6 +79,7 @@
 </template>
 
 <script>
+import {mapGetters} from 'vuex'
 import _cloneDeep from 'lodash.clonedeep'
 import ChartHeader from '@/components/Vis/ChartHeader'
 import ChartOptions from '@/components/Vis/ChartOptions'
@@ -183,6 +193,10 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      is12MthRollingSum: 'is12MthRollingSum'
+    }),
+
     options() {
       let options = _cloneDeep(this.emissionsOptions)
       if (this.isTypeArea) {