ui polish

opennem · Sep 13, 2023 · 3242321 · 3242321
1 parent f84898a
commit 3242321
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/components/Energy/TimeOfDay.vue b/components/Energy/TimeOfDay.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    style="display: flex; flex-wrap: nowrap; gap: 10px; padding-right: 1rem;">
+    style="display: flex; flex-wrap: nowrap; gap: 1rem;">
     <div
       style="width: 66%; position: relative;" 
       class="vis-wrapper">

diff --git a/components/Energy/TimeOfDaySection.vue b/components/Energy/TimeOfDaySection.vue
@@ -37,6 +37,7 @@
         :cursor-type="'line'"
         :margin-left="0"
         :append-datapoint="false"
+        :positive-y-bg="'transparent'"
         class="vis-chart"
         @date-hover="(evt, date) => handleDateHover(date)"
         @domain-hover="handleDomainHover"
@@ -55,9 +56,11 @@
       />
     </div>
 
-    <div v-if="showSparklines">
+    <div 
+      v-if="showSparklines" 
+      style="background-color: rgba(255, 255, 255, 0.5); padding: 1rem;  margin-right: 1rem; border-radius: 1rem;">
       <h4>Time of Day</h4>
-      <div style="display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0;">
+      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 2rem;">
         <div 
           v-for="ds in datasetsWithPositiveLoads" 
           :key="ds.id"
@@ -195,6 +198,39 @@ export default {
       if (!this.currentDomainPowerEnergy) return []
       if (this.domainPrice.length > 0) price.push(this.domainPrice[0])
 
+      const domainPower = [...this.currentDomainPowerEnergy]
+
+      const domainTotalRenewables = []
+      if (this.chartEnergyRenewablesLine) {
+        domainTotalRenewables.push({
+          domain: '_totalRenewables',
+          id: '_totalRenewables',
+          label: 'Renewables'
+        })
+      }
+      const domainTotalNetGeneration = []
+      if (this.chartEnergyNetLine) {
+        domainTotalNetGeneration.push({
+          domain: '_total',
+          id: '_total',
+          label: 'Net'
+        })
+      }
+      
+      return [
+        ...domainTotalNetGeneration,
+        ...domainTotalRenewables,
+        ...domainPower.reverse(),
+        ...price,
+        ...this.domainTemperature
+      ]
+    },
+
+    averageStackedDomains() {
+      const price = []
+      if (!this.currentDomainPowerEnergy) return []
+      if (this.domainPrice.length > 0) price.push(this.domainPrice[0])
+
       const filtered = this.currentDomainPowerEnergy.filter((domain) => {
         const ft = domain.fuelTech || domain.group
         return !this.hiddenFuelTechs.includes(ft)
@@ -254,7 +290,7 @@ export default {
     },
 
     datasets() {
-      const datasets = this.allDomains.map(domain => {
+      const datasets = this.averageStackedDomains.map(domain => {
         const data = getDataBucket({
           data: this.currentDataset,
           domain: domain.id,
@@ -484,12 +520,10 @@ export default {
 @import '~/assets/scss/variables.scss';
 
 h4 {
-  font-size: 16px;
+  font-size: 18px;
   font-family: $header-font-family;
   font-weight: bold;
-  margin: 10px 0;
-  padding-top: 10px;
-  border-top: 1px solid #ddd;
+  margin: 0 0 1rem;
 }
 .chart-title {
   font-size: 13px;

diff --git a/components/Energy/TimeOfDaySparkline.vue b/components/Energy/TimeOfDaySparkline.vue
@@ -329,19 +329,22 @@ $border-radius: 0.4rem;
 .sparkline-button {
   cursor: pointer;
   border-radius: $border-radius;
-  background-color: rgba(255,255,255, 0.3);
+  background-color: rgba(200,200,200, 0.3);
+  transition: all 0.2s ease-in-out;
 
   .selected {
     background-color: #c74523;
     color: #fff;
 
     &:hover {
-      background-color: #963f29;
+      background-color: #c74523;
     }
   }
 
   &:hover {
-    background-color: rgba(255,255,255, 0.8);
+    background-color: #fefefe;
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(0,0,0,0.05);
   }
 }