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

Author: chienleng

assets/scss/vis-table.scss

@@ -57,7 +57,6 @@
       cursor: pointer;
       padding: 3px 5px;
       margin-right: 5px;
-      margin-left: -10px;
       border-radius: 3px;
 
       &:hover {
@@ -66,14 +65,9 @@
     }
 
     .chart-label {
-      padding: 2px 0.5rem;
+      padding: 2px;
       display: flex;
       align-items: center;
-
-      small {
-        position: relative;
-        left: 3px;
-      }
     }
 
     .hover-date-value {

components/Charts/EmissionIntensityChartOptions.vue

@@ -21,14 +21,14 @@
     </template>
 
     <template v-slot:label-unit>
-      <strong>Emission Intensity</strong>
-      <div 
-        v-show="chartShown" 
-        style="display: flex; gap: 5px; align-items: center;">
-        <small v-if="is12MthRollingSum">(12-month rolling)</small>
+      <strong v-show="!chartShown">Emission Intensity</strong>
+      <div v-show="chartShown">
+        <strong>Emission Intensity</strong>
+        <small v-if="is12MthRollingSum">12-month rolling</small>
         <small>kgCO₂e/MWh</small>
       </div>
     </template>
+
     <template 
       v-slot:average-value 
       v-if="!readOnly">

components/Charts/EmissionsChart.vue

@@ -31,6 +31,7 @@
       :show-average-value="showAverageValue"
       :emissions-options="emissionsOptions"
       :show-date-axis="showDateAxis"
+      :change-since-label="changeSinceLabel"
       @type-click="handleTypeClick"
       @date-axis="(visible) => showDateAxis = visible"
     />
@@ -696,6 +697,35 @@ export default {
         })
       }
       return this.convertValue(total)
+    },
+
+    changeSinceLabel() {
+      const ds = this.dataset
+
+      if (ds.length === 0) {
+        return ''
+      }
+
+      if (this.zoomExtent.length > 0) {
+        return DateDisplay.specialDateFormats(
+          this.zoomExtent[0].getTime(),
+          this.range,
+          this.interval,
+          false,
+          false,
+          false,
+          true
+        )
+      }
+      return DateDisplay.specialDateFormats(
+          ds[0].time,
+          this.range,
+          this.interval,
+          false,
+          false,
+          false,
+          true
+        )
     }
   },
 

components/Charts/EmissionsChartOptions.vue

@@ -26,12 +26,10 @@
     </template>
 
     <template v-slot:label-unit>
-      <strong>Emissions Volume</strong>
-
-      <div 
-        v-show="chartShown" 
-        style="display: flex; gap: 1px; align-items: center;">
-        <small v-if="is12MthRollingSum">(12-month rolling)</small>
+      <strong v-show="!chartShown">Emissions Volume</strong>
+      <div v-show="chartShown">
+        <strong>Emissions Volume</strong>
+        <small v-if="is12MthRollingSum">12-month rolling</small>
         <small v-if="isPercentage"> {{ displayUnit }}</small>
         <small
           v-if="!isPercentage"
@@ -40,8 +38,10 @@
         >
           {{ displayUnit }}/{{ interval | intervalLabel }}
         </small>
+        <small v-if="isTypeChangeSinceLine">change since {{ changeSinceLabel }}</small>
       </div>
     </template>
+
     <template
       v-slot:average-value
       v-if="!readOnly && !isPercentage && showAverageValue"
@@ -185,6 +185,10 @@ export default {
     showDateAxis: {
       type: Boolean,
       default: () => false
+    },
+    changeSinceLabel: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -268,11 +272,10 @@ export default {
 <style lang="scss" scoped>
 .display-unit {
   cursor: pointer;
-  padding: 2px 4px 1px;
-  border-radius: 4px;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.7);
+    text-decoration: underline;
+    color: black;
   }
 }
 </style>

components/Charts/PowerEnergyChart.vue

@@ -47,6 +47,7 @@
       :single-domain-label="singleDomainLabel"
       :show-date-axis="showDateAxis"
       :change-since-label="changeSinceLabel"
+      :growth-label="growthLabel"
       @type-click="handleTypeClick"
       @date-axis="(visible) => showDateAxis = visible"
     />
@@ -731,6 +732,11 @@ export default {
 
     changeSinceLabel() {
       const ds = this.isTypeGrowthStackedArea ? this.growthDataset : this.stackedAreaDataset
+
+      if (ds.length === 0) {
+        return ''
+      }
+
       if (this.zoomExtent.length > 0) {
         return DateDisplay.specialDateFormats(
           this.zoomExtent[0].getTime(),
@@ -753,6 +759,15 @@ export default {
         )
     },
 
+    growthLabel() {
+      const label = this.interval.toLowerCase()
+
+      if (this.isRollingSumRange) {
+        return `${label}-on-previous-year-${label}`
+      }
+      return `${label}-on-${label}`
+    },
+
     dataset() {
       let ds = null
       if (this.isTypeLine) {
@@ -1054,6 +1069,12 @@ export default {
       this.$emit('selectedDataset', this.dataset)
     },
 
+    isYAxisAveragePower() {
+      if (this.isTypeGrowthStackedArea) {
+        this.updateGrowDataset()
+      }
+    },
+
     zoomExtent() {
       if (this.isTypeGrowthStackedArea) {
         this.updateGrowDataset()
@@ -1225,10 +1246,21 @@ export default {
         }
       }
 
-      const dataset = transformToGrowthTimeSeries(this.powerEnergyDataset, this.domains, compareIndex)
+      const ds = this.isYAxisAbsolute
+        ? this.powerEnergyDataset
+        : this.averagePowerDataset
+
+      const dataset = transformToGrowthTimeSeries(ds, this.domains, compareIndex)
 
       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/Charts/PowerEnergyChartOptions.vue

@@ -28,19 +28,16 @@
     </template>
 
     <template v-slot:label-unit>
-      <strong>{{ displayTitle }}</strong>
-      <div 
-        v-show="chartShown" 
-        style="display: flex; gap: 1px; align-items: center;">
-        <small v-if="is12MthRollingSum">(12-month rolling)</small>
+      <strong v-show="!chartShown">{{ displayTitle }}</strong>
+      <div v-show="chartShown">
+        <strong>{{ displayTitle }}</strong>
+        <small v-if="is12MthRollingSum">12-month rolling</small>
         <small
           :class="{ 'display-unit': allowDisplayHover }"
           @click.stop="handleUnitClick"
-        >
-          {{ displayUnit }}
-        </small>
-        <small v-if="isTypeChangeSinceLine">(change since {{ changeSinceLabel }})</small>
-        <small v-if="isTypeGrowthStackedArea">(growth year-on-year)</small>
+        >{{ displayUnit }}</small>
+        <small v-if="isTypeChangeSinceLine">change since {{ changeSinceLabel }}</small>
+        <small v-if="isTypeGrowthStackedArea">growth {{ growthLabel }}</small>
       </div>
     </template>
 
@@ -250,6 +247,10 @@ export default {
     changeSinceLabel: {
       type: String,
       default: ''
+    },
+    growthLabel: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -462,11 +463,10 @@ export default {
 <style lang="scss" scoped>
 .display-unit {
   cursor: pointer;
-  padding: 2px 4px 1px;
-  border-radius: 4px;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.7);
+    text-decoration: underline;
+    color: black;
   }
 }
 </style>

components/Charts/PriceChartOptions.vue

@@ -21,11 +21,10 @@
     </template>
 
     <template v-slot:label-unit>
-      <strong>Price</strong>
-      <div 
-        v-show="chartShown" 
-        style="display: flex; gap: 5px; align-items: center;">
-        <small v-if="is12MthRollingSum">(12-month rolling)</small>
+      <strong v-show="!chartShown">Price</strong>
+      <div v-show="chartShown">
+        <strong>Price</strong>
+        <small v-if="is12MthRollingSum">12-month rolling</small>
         <small>$/MWh</small>
       </div>
     </template>

components/Energy/Charts/TemperatureChartOptions.vue

@@ -21,14 +21,14 @@
     </template>
 
     <template v-slot:label-unit>
-      <strong>Temperature</strong>
-      <div 
-        v-show="chartShown" 
-        style="display: flex; gap: 5px; align-items: center;">
-        <small v-if="is12MthRollingSum">(12-month rolling)</small>
+      <strong v-show="!chartShown">Temperature</strong>
+      <div v-show="chartShown">
+        <strong>Temperature</strong>
+        <small v-if="is12MthRollingSum">12-month rolling</small>
         <small>°C</small>
       </div>
     </template>
+
     <template 
       v-slot:average-value 
       v-if="!readOnly">

components/Energy/VisSection.vue

@@ -383,8 +383,7 @@ export default {
           dateRange[1]
         )
         if (this.interval === 'Fin Year') {
-          startTime = addYears(startTime, 2)
-          endTime = addYears(endTime, 1)
+          startTime = addYears(startTime, 1)
         }
 
         filteredDates = [startTime, endTime]

components/Vis/DateBrush.vue

@@ -33,6 +33,7 @@ import { extent } from 'd3-array'
 import { brushX } from 'd3-brush'
 import EventBus from '~/plugins/eventBus.js'
 import { onBrush, onBrushEnded } from './shared/brushEvents'
+import { getNextDateByInterval } from '@/services/datetime-helpers.js'
 import * as CONFIG from './shared/config.js'
 
 export default {
@@ -114,19 +115,25 @@ export default {
       if (this.dataset.length > 0) {
         if (this.appendDatapoint) {
           const updated = _cloneDeep(this.dataset)
-          const lastSecondItem = _cloneDeep(updated[updated.length - 2])
           const lastItem = _cloneDeep(updated[updated.length - 1])
-          const intervalTime = lastItem.time - lastSecondItem.time
-          lastItem.time = lastItem.time + intervalTime
-          lastItem.date = new Date(lastItem.time)
+
+          const nextDate = getNextDateByInterval(
+            lastItem.date,
+            this.interval,
+            this.filterPeriod !== 'All'
+          )
+          lastItem.date = nextDate
+          lastItem.time = nextDate.getTime()
+
           updated.push(lastItem)
           return updated
-        } else {
-          return this.dataset
         }
+
+        return this.dataset
       }
       return []
     },
+    
     datasetDateExtent() {
       return extent(this.updatedDataset, (d) => new Date(d.date))
     }

components/layout/AppHeader.vue

@@ -280,7 +280,7 @@ export default {
         const ei = this.emissionIntensityData.find(
           (e) => e.time === d.time
         )
-        obj['Emissions Intensity - kgCO₂e/MWh'] = format(ei._emissionIntensity)
+        obj['Emissions Intensity - kgCO₂e/MWh'] = ei ? format(ei._emissionIntensity) : ''
 
         if (this.isEnergyType) {
           if (this.demandPriceDomains.length) {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "opennem",
-  "version": "4.25.0",
+  "version": "4.25.3",
   "description": "An Open Platform for National Electricity Market Data",
   "author": "Steven Tan",
   "private": true,