swap chart and table position

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

Hide file tree

Showing 2 changed files with 54 additions and 54 deletions.
diff --git a/components/Energy/TimeOfDay.vue b/components/Energy/TimeOfDay.vue
@@ -1,58 +1,6 @@
 <template>
   <div 
-    style="display: flex; flex-wrap: nowrap;">
-    <div style="width: 25%;">
-      <table 
-        style="font-size: 11px; table-layout: fixed;" 
-        class="table is-narrow is-fullwidth is-hoverable">
-        <thead>
-          <tr>
-            <!-- <th colspan="2">
-              <button 
-                class="button is-small" 
-                @click="handleTableToggle">
-                <i 
-                  class="fal fa-fw" 
-                  :class="{ 'fa-caret-right': !expand, 'fa-caret-down': expand }" />
-                {{ title }}
-              </button>
-            </th> -->
-
-            <th 
-              colspan="2" 
-              class="title">
-              {{ title }}
-            </th>
-
-            <!-- <th style="text-align:right; white-space: nowrap">{{ currentX }}</th> -->
-          </tr>
-        </thead>
-        <tbody>
-          <tr 
-            v-for="(domain, i) in tableRowDomains" 
-            :key="`${domain.id}-${i}`"
-            style="font-weight: bold;"
-            :style="{
-              color: getTextColour(domain.id),
-              'background-color': highlightRow === domain.id ? 'rgba(255,255,255, 0.8)' : 'transparent'
-            }"
-            @mouseenter="() => handleMouseEnter(domain.id)"
-            @mouseleave="() => handleMouseLeave()">
-            <td>{{ domain.label }}</td>
-            <td style="text-align: right;">{{ domain.value | formatValue }}</td>
-          </tr>
-        </tbody>
-
-        <tfoot>
-          <tr>
-            <th 
-              colspan="2"
-              style="text-align:right; white-space: nowrap; height: 23px;">{{ currentX }}</th>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-
+    style="display: flex; flex-wrap: nowrap; gap: 10px; padding-right: 1rem;">
     <div
       style="width: 75%" 
       class="vis-wrapper">
@@ -167,6 +115,58 @@
         class="date-brush vis-chart"
       />
     </div>
+
+    <div style="width: 25%;">
+      <table 
+        style="font-size: 11px; table-layout: fixed;" 
+        class="table is-narrow is-fullwidth is-hoverable">
+        <thead>
+          <tr>
+            <!-- <th colspan="2">
+              <button 
+                class="button is-small" 
+                @click="handleTableToggle">
+                <i 
+                  class="fal fa-fw" 
+                  :class="{ 'fa-caret-right': !expand, 'fa-caret-down': expand }" />
+                {{ title }}
+              </button>
+            </th> -->
+
+            <th 
+              colspan="2" 
+              class="title">
+              {{ title }}
+            </th>
+
+            <!-- <th style="text-align:right; white-space: nowrap">{{ currentX }}</th> -->
+          </tr>
+        </thead>
+        <tbody>
+          <tr 
+            v-for="(domain, i) in tableRowDomains" 
+            :key="`${domain.id}-${i}`"
+            style="font-weight: bold;"
+            :style="{
+              color: getTextColour(domain.id),
+              'background-color': highlightRow === domain.id ? 'rgba(255,255,255, 0.8)' : 'transparent'
+            }"
+            @mouseenter="() => handleMouseEnter(domain.id)"
+            @mouseleave="() => handleMouseLeave()">
+            <td>{{ domain.label }}</td>
+            <td style="text-align: right;">{{ domain.value | formatValue }}</td>
+          </tr>
+        </tbody>
+
+        <tfoot>
+          <tr>
+            <th 
+              colspan="2"
+              style="text-align:right; white-space: nowrap; height: 23px;">{{ currentX }}</th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
   </div>
 </template>
 

diff --git a/components/Energy/TimeOfDaySection.vue b/components/Energy/TimeOfDaySection.vue
@@ -72,7 +72,7 @@
     <div 
       v-for="ds in selectedToDs"
       :key="ds.id"
-      style="width: 100%">
+      style="width: 100%; margin-top: 1rem;">
       <TimeOfDay
         :title="ds.label"
         :domains="timeDomains"