update period selections

opennem · Sep 10, 2024 · 1c8ed6a · 1c8ed6a
1 parent 0b47fae
commit 1c8ed6a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/components/Energy/DataOptionsBar.vue b/components/Energy/DataOptionsBar.vue
@@ -76,7 +76,23 @@
       <label 
         v-if="tabletBreak" 
         style="margin-top: 16px;">Time Interval:</label>
-      <div class="interval-dropdowns">
+
+      <div 
+        v-if="(isPowerRange && !periodDropdownBreak) || (is1yRange && !periodDropdownBreak)" 
+        class="period-buttons buttons has-addons">
+        <button
+          v-on-clickaway="handleClickAway"
+          v-for="(p, i) in selectedRangeIntervals"
+          :key="i"
+          :class="{ 'is-selected': p === selectedInterval }"
+          class="button is-rounded"
+          @click.stop="handleIntervalChange(p)"
+        >{{ p }}</button>
+      </div>
+
+      <div 
+        v-else 
+        class="interval-dropdowns">
         <IntervalDropdown
           :show-caret="selectedRangeIntervals && selectedRangeIntervals.length > 1"
           :selected="selectedInterval" 
@@ -203,7 +219,8 @@ export default {
   computed: {
     ...mapGetters({
       tabletBreak: 'app/tabletBreak',
-      rangeDropdownBreak: 'app/rangeDropdownBreak'
+      rangeDropdownBreak: 'app/rangeDropdownBreak',
+      periodDropdownBreak: 'app/periodDropdownBreak'
     }),
     regionId() {
       return this.$route.params.region
@@ -226,6 +243,11 @@ export default {
         this.selectedRange === RANGE_3D ||
         this.selectedRange === RANGE_7D
       )
+    },
+    is1yRange() {
+      return (
+        this.selectedRange === RANGE_1Y
+      )
     }
   },
 

diff --git a/store/app.js b/store/app.js
@@ -20,8 +20,9 @@ export const getters = {
   wideScreenBreak: (state) => state.windowWidth < 1450,
   widthBreak: (state) => state.windowWidth < 1024,
   tabletBreak: (state) => state.windowWidth < 769,
-  toolbarBreak: (state) => state.windowWidth < 1160,
-  rangeDropdownBreak: (state) => state.windowWidth < 1470 && state.windowWidth >= 1160,
+  toolbarBreak: (state) => state.windowWidth < 770,
+  rangeDropdownBreak: (state) => state.windowWidth < 1090 && state.windowWidth >= 770,
+  periodDropdownBreak: (state) => state.windowWidth < 990 && state.windowWidth >= 870,
   showError: (state) => state.showError,
   errorHeader: (state) => state.errorHeader,
   errorMessage: (state) => state.errorMessage,