Add time range label to exported pdfs

Also some tweaks to margins in the generated pdf and fixes it to one page.
metricq · Oct 25, 2024 · 147d61d · 147d61d
1 parent c2ff65a
commit 147d61d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git a/src/MetricTimestamp.js b/src/MetricTimestamp.js
@@ -52,4 +52,8 @@ export class MetricTimestamp {
   getValue () {
     return this.timeValue
   }
+
+  getString () {
+    return new Date(this.getUnix()).toLocaleString()
+  }
 }
diff --git a/src/components/analyzeTable.vue b/src/components/analyzeTable.vue
@@ -10,9 +10,6 @@
       bordered
       caption-top
     >
-      <caption>
-        Zeitraum von {{ startTimeFormatted }} bis {{ endTimeFormatted }} ( {{ timeLenghtFormatted }} Sekunden )
-      </caption>
       <b-thead>
         <b-tr>
           <b-th />
@@ -83,12 +80,6 @@ export default {
     }
   },
   computed: {
-    startTimeFormatted () {
-      return moment(this.timestamp.start).format('DD.MM.YYYY, HH:mm:ss')
-    },
-    endTimeFormatted () {
-      return moment(this.timestamp.end).format('DD.MM.YYYY, HH:mm:ss')
-    },
     timeLenghtFormatted () {
       return moment(this.timestamp.end).diff(moment(this.timestamp.start), 'seconds')
     },

diff --git a/src/ui/analyze-popup.vue b/src/ui/analyze-popup.vue
@@ -12,6 +12,9 @@
       <div class="modal-content">
         <popup-header :popup-title="popupTitle" />
         <div class="modal-body">
+          <div class="mb-3 text-center">
+            Zeitraum von <b>{{ startTimeFormatted }}</b> bis <b>{{ endTimeFormatted }}</b> <span class="text-secondary">{{ timeLenghtFormatted }} Sekunden</span>
+          </div>
           <analyzeTable />
         </div>
       </div>
@@ -20,6 +23,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import { veil } from './veil.js'
 import PopupHeader from './popup-header.vue'
 import AnalyzeTable from '../components/analyzeTable'
@@ -34,7 +38,17 @@ export default {
       popupTitle: 'Analyse'
     }
   },
-  computed: {},
+  computed: {
+    startTimeFormatted () {
+      return new Date(this.timestamp.start).toLocaleString()
+    },
+    endTimeFormatted () {
+      return new Date(this.timestamp.end).toLocaleString()
+    },
+    ...mapState([
+      'timestamp'
+    ])
+  },
   mounted () {
     const popupEle = document.querySelector('.analyze_popup_div')
     if (popupEle) {

diff --git a/src/ui/export-popup.vue b/src/ui/export-popup.vue
@@ -71,13 +71,12 @@
         :float-layout="true"
         :enable-download="true"
         :preview-modal="true"
-        :paginate-elements-by-height="5000"
         filename="MetricQWebview"
         :pdf-quality="2"
-        :manual-pagination="false"
+        :manual-pagination="true"
         pdf-format="a4"
         pdf-orientation="landscape"
-        pdf-content-width="100%"
+        pdf-content-width="99%"
       >
         <section slot="pdf-content">
           <img
@@ -87,7 +86,7 @@
           <div
             v-if="exportAnalyze"
             id="anaTable"
-            class="anaTable"
+            class="anaTable mx-3"
           >
             <analyzeTable @finished="onAnalyzeTableLoaded" />
           </div>
@@ -198,16 +197,19 @@ export default {
       canvas.height *= scale
       exportCanvasContext.scale(scale, scale)
       const margins = {
-        top: window.MetricQWebView.margins.canvas.top,
+        top: window.MetricQWebView.margins.canvas.top + 16,
         bottom: window.MetricQWebView.margins.canvas.bottom,
         left: window.MetricQWebView.margins.canvas.left,
-        right: window.MetricQWebView.margins.canvas.right
+        right: window.MetricQWebView.margins.canvas.right + 16
       }
       const size = [canvas.width / scale, canvas.height / scale, margins.left,
         margins.top,
         canvas.width / scale - (margins.right + margins.left),
         canvas.height / scale - (margins.top + margins.bottom)]
       window.MetricQWebView.graticule.draw(false, exportCanvasContext, size)
+      const timeRangeText = window.MetricQWebView.handler.startTime.getString() + ' - ' + window.MetricQWebView.handler.stopTime.getString()
+      exportCanvasContext.textAlign = 'center'
+      exportCanvasContext.fillText(timeRangeText, size[4] / 2 + margins.left, 15)
     },
     onAnalyzeTableLoaded () {
       this.analyzeTableReady = true