implement hover time display for averages

components/SummaryTable/DatesDisplayToD.vue

@@ -0,0 +1,79 @@
+<template>
+  <header>
+    <time v-if="isHovering">
+      {{
+        hoveredTime
+      }}
+    </time>
+
+    <span v-if="!isHovering">
+      <time>
+        {{ startDate | customFormatDate({ range, interval, isStart: true }) }}
+      </time>
+      –
+      <time>
+        {{
+          endDate
+            | customFormatDate({ range, interval, showYear: true, isEnd: true })
+        }}
+      </time>
+    </span>
+
+    <small>
+      {{ timezoneString }}
+    </small>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    isHovering: {
+      type: Boolean,
+      default: () => false
+    },
+    
+    startDate: {
+      type: Number,
+      default: () => 0
+    },
+    endDate: {
+      type: Number,
+      default: () => 0
+    },
+    hoveredTime: {
+      type: String,
+      default: ''
+    },
+    
+    range: {
+      type: String,
+      default: () => ''
+    },
+    interval: {
+      type: String,
+      default: () => ''
+    },
+    timezoneString: {
+      type: String,
+      default: () => ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+header {
+  text-align: right;
+  font-size: 16px;
+  font-weight: 300;
+  color: #000;
+  padding-bottom: 1rem / 5;
+  border-bottom: 1px solid #000;
+  user-select: none;
+
+  small {
+    font-size: 0.8em;
+  }
+}
+</style>

components/SummaryTable/index.vue

@@ -7,7 +7,19 @@
     />
 
     <div v-else>
+      <div v-if="isTimeOfDayView">
+        <DatesDisplayToD
+          :is-hovering="hoverOn"
+          :hovered-time="timeOfDayHoverTime"
+          :start-date="startDate"
+          :end-date="endDate"
+          :range="range"
+          :interval="interval"
+          :timezone-string="isEnergyType ? '' : regionTimezoneString"
+        />
+      </div>
       <dates-display
+        v-else
         :is-hovering="hoverOn"
         :hovered-date="hoveredDate"
         :focus-on="focusOn"
@@ -401,19 +413,22 @@ import { energy_sum } from '@opennem/energy-tools'
 import * as OPTIONS from '@/constants/chart-options.js'
 import { GROUP_DETAILED } from '@/constants/energy-fuel-techs'
 import EventBus from '@/plugins/eventBus'
+import { getTimeLabel } from '@/data/transform/time-of-day' 
 import Domain from '~/services/Domain.js'
 import GroupSelector from '~/components/ui/FuelTechGroupSelector'
 import ColumnSelector from '~/components/ui/SummaryColumnSelector'
 import ExportLegend from '@/components/Energy/Export/Legend'
 import Items from './Items'
 import DatesDisplay from './DatesDisplay'
+import DatesDisplayToD from './DatesDisplayToD'
 
 export default {
   components: {
     GroupSelector,
     ColumnSelector,
     Items,
     DatesDisplay,
+    DatesDisplayToD,
     ExportLegend
   },
 
@@ -577,6 +592,10 @@ export default {
       return this.dashboardView === 'time-of-day'
     },
 
+    timeOfDayHoverTime() {
+      return getTimeLabel(this.hoverDate)
+    },
+
     chartUnit() {
       return this.isEnergy ? this.chartEnergyUnit : this.chartPowerUnit
     },

data/transform/time-of-day.js

@@ -23,12 +23,12 @@ export function getTimeLabel(d) {
   const date = new Date(d)
   const hours = date.getUTCHours()
   const minutes = date.getUTCMinutes()
-  const ampm = hours >= 12 ? 'pm' : 'am'
+  const ampm = hours >= 12 ? 'PM' : 'AM'
   const hour = function() {
     return hours === 0 || hours === 12 ? 12 : hours % 12
   }()
   const min = minutes === 0 ? '' : `:${(minutes + '').padStart(2, '0')}`
-  return `${hour}${min}${ampm}`
+  return `${hour}${min} ${ampm}`
 }
 
 function getTimebucket(interval, jsDate) {