wip: update layout

opennem · Sep 8, 2023 · 4e6ebc8 · 4e6ebc8
1 parent ef6ccba
commit 4e6ebc8
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 17 deletions.
diff --git a/components/Energy/TimeOfDay.vue b/components/Energy/TimeOfDay.vue
@@ -254,17 +254,21 @@ export default {
     },
 
     chartHeight() {
-      return 688
+      // return 688
+      return 400
     },
 
     chartHeightPrice() {
-      return 392
+      // return 392
+      return 200
     },
     chartHeightPositiveLogPrice() {
-      return 150
+      // return 150
+      return 100
     },
     chartHeightNegativeLogPrice() {
-      return 150
+      // return 150
+      return 100
     },
 
     domainsWithColour() {

diff --git a/components/Energy/TimeOfDaySection.vue b/components/Energy/TimeOfDaySection.vue
@@ -41,16 +41,18 @@
       />
     </div>
 
+    <!-- :style="{
+          width: sparklineButtonWidth
+        }" -->
+
     <div 
       v-if="showSparklines" 
-      style="display: flex; flex-wrap: wrap; gap: 1%;">
+      style="display: flex; justify-content: center; flex-wrap: wrap; gap: 5px;">
       <div 
         v-for="ds in datasetsWithPositiveLoads" 
         :key="ds.id"
-        class="sparkline-button"
-        style="margin-bottom: 1%;"
-        :style="{ width: sparklineButtonWidth }"
-        @click="() => selectedToD = ds">
+        class="sparkline-button"        
+        @click="() => toggleSelected(ds)">
         <TimeOfDaySparkline
           :title="ds.label"
           :domains="filteredTimeDomains"
@@ -62,10 +64,31 @@
           :y-min="ds.yMin"
           :y-max="ds.yMax"
           :today-key="todayKey"
+          :selected="isSelected(ds.id)"
         />
       </div>
     </div>
 
+    <div 
+      v-for="ds in selectedToDs"
+      :key="ds.id"
+      style="width: 100%">
+      <TimeOfDay
+        :title="ds.label"
+        :domains="timeDomains"
+        :dataset="ds.data"
+        :y-ticks="yTicks"
+        :tick-format="tickFormat"
+        :second-tick-format="secondTickFormat"
+        :curve="ds.label === 'Price' ? curveStep : curveSmooth"
+        :y-min="ds.yMin"
+        :y-max="ds.yMax"
+        :hover-date="hoverDate"
+        :today-key="todayKey"
+        @date-hover="handleDateHover"
+      />
+    </div>
+
     <div 
       v-show="selectedToD" 
       class="time-of-day-detailed"
@@ -148,7 +171,8 @@ export default {
       xTicks: utcHour.every(2),
       curveSmooth: CHART_CURVE_SMOOTH,
       curveStep: CHART_CURVE_STEP,
-      selectedToD: null
+      selectedToD: null,
+      selectedToDs: []
     }
   },
 
@@ -431,6 +455,20 @@ export default {
       })
 
       return max
+    },
+
+    isSelected(id) {
+      const find = this.selectedToDs.find(d => d.id === id)
+      return find
+    },
+
+    toggleSelected(ds) {
+      const find = this.selectedToDs.find(d => d.id === ds.id)
+      if (find) {
+        this.selectedToDs = this.selectedToDs.filter(d => d.id !== ds.id)
+      } else {
+        this.selectedToDs.push(ds)
+      }
     }
   }
 }

diff --git a/components/Energy/TimeOfDaySparkline.vue b/components/Energy/TimeOfDaySparkline.vue
@@ -1,12 +1,15 @@
 <template>
   <div 
     style="width: 100%" 
-    class="vis-wrapper sparkline-button">
+    class="vis-wrapper sparkline-button"
+    :class=" { selected: selected }"
+  >
+    <span>{{ title }}</span>
 
-    <TimeOfDayChartHeader 
+    <!-- <TimeOfDayChartHeader 
       class="header" 
-      :title="title" />
-
+      :title="title" /> -->
+    <!-- 
     <div 
       v-if="title === 'Price'" 
       class="sparkline">
@@ -129,7 +132,7 @@
       <div 
         v-else 
         style="height: 16.5px;"/>
-    </footer>
+    </footer> -->
   </div>
 </template>
 
@@ -189,6 +192,10 @@ export default {
     todayKey: {
       type: String,
       default: ''
+    },
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -340,19 +347,38 @@ export default {
 @import '~/assets/scss/variables.scss';
 $border-radius: 0.4rem;
 
+// .sparkline-button {
+//   cursor: pointer;
+//   border-radius: $border-radius;
+//   background-color: rgba(255,255,255, 0.3);
+
+//   &:hover {
+//     background-color: rgba(255,255,255, 0.8);
+//   }
+// }
+
 .sparkline-button {
   cursor: pointer;
-  // border: 1px solid #ccc;
   border-radius: $border-radius;
   background-color: rgba(255,255,255, 0.3);
+  padding: 0.3rem 0.6rem;
+
+  .selected {
+    background-color: $opennem-link-color;
+    color: #fff;
+
+    &:hover {
+      background-color: $opennem-link-color-dark;
+    }
+  }
 
   &:hover {
     background-color: rgba(255,255,255, 0.8);
   }
 }
 
 header {
-  padding-left: 0.3rem;
+  // padding-left: 0.3rem;
 }
 
 .sparkline {