Fix AveragesMap zooming.

src/components/header/AveragesMap.vue

@@ -26,7 +26,8 @@ export default {
       height: 100,
       margin: { top: 10, right: 20, bottom: 20, left: 20 },
       scaleExtent: [1, Infinity],
-      lineWidth: 1
+      lineWidth: 1,
+      chartID: 'averagesMap'
     }
   },
   computed: {
@@ -101,11 +102,17 @@ export default {
     // --- Vuex store data ---
     chartData() {
       let result = {}
-      for (const camID of this.$store.getters.cameraIDs) {
-        result[camID] = this.$store.getters.chartData(this.cameraID)
+      for (const cameraID of this.cameraIDs) {
+        result[cameraID] = this.$store.getters.chartData(cameraID)
       }
       return result
     },
+    cameraIDs() {
+      return this.$store.getters.cameraIDs
+    },
+    stickIDs() {
+      return this.$store.getters.stickIDs
+    },
     timespan() {
       return [
         this.$store.getters.timespanStart,
@@ -153,10 +160,7 @@ export default {
       if (state.zoomingID === this.chartID) {
         return
       }
-      // update zoom of the chart
-      if (this.isVisible) {
-        this.updateZoom(state.selection)
-      }
+      this.updateZoom(state.selection)
 
       const transform = this.normalizedSelection2Transform(state.selection)
 
@@ -251,20 +255,20 @@ export default {
       // context: Canvas context, used for drawing into canvas.
       // x: D3 scale for x axis.
       // y: D3 scale for y axis.
-      for (const cameraID of this.$store.getters.cameraIDs) {
-        this.drawAggregatedAverages(context, x, y, cameraID)
-        if (this.activePoint.stickID !== null) {
-          this.drawSnowHeightAverage(
-            context,
-            x,
-            y,
-            this.activePoint.cameraID,
-            this.activePoint.stickID
-          )
-        }
-        // for (const stickID of this.$store.getters.stickIDs) {
-        //   this.drawSnowHeightAverage(context, x, y, cameraID, stickID)
+      for (const cameraID of this.cameraIDs) {
+        // this.drawAggregatedAverages(context, x, y, cameraID)
+        // if (this.activePoint.stickID !== null) {
+        //   this.drawSnowHeightAverage(
+        //     context,
+        //     x,
+        //     y,
+        //     this.activePoint.cameraID,
+        //     this.activePoint.stickID
+        //   )
         // }
+        for (const stickID of this.stickIDs) {
+          this.drawSnowHeightAverage(context, x, y, cameraID, stickID)
+        }
       }
     },
 
@@ -272,10 +276,11 @@ export default {
       // context: Canvas context, used for drawing into canvas.
       // x: D3 scale for x axis.
       // y: D3 scale for y axis.
+
       let lastTimestamp = null
       let lastSnowHeightAverage = null
-      // HACK!
-      const images = this.$store.getters.chartData(cameraID)
+      const images = this.chartData[cameraID]
+
       if (typeof images === 'undefined') {
         return
       }
@@ -348,9 +353,7 @@ export default {
       let lastTimestamp = null
       let lastAverageMin = -1
       let lastAverageMax = -1
-
-      // HACK!
-      const images = this.$store.getters.chartData(cameraID)
+      const images = this.chartData[cameraID]
       if (typeof images === 'undefined') {
         // chartData isn't loaded
         return
@@ -435,8 +438,9 @@ export default {
       context.lineTo(x1, yMax1)
       context.closePath()
       context.fill()
-      // context.stroke()
-    }
+    },
+
+    drawRectangle(context, x, y, lastTimestamp, timestamp, color, opacity) {}
   },
   mounted() {
     this.$chart.call(this.zoom).on('wheel', event => {

src/components/header/ContextMap.vue

@@ -10,7 +10,7 @@
       <g id="contextMap_XAxis" />
       <g id="contextMap_Brush" />
       <text text-anchor="end" :x="spanX + 30" :y="15" style="font-size:12">
-        stake overview
+        stake {{ stickID }} overview
       </text>
     </svg>
     <canvas id="contextMap_Canvas" :height="height" :width="width" />

src/components/header/Filters.vue

 <template>
-  <div>
+  <div style="position: fixed" class="card">
     <table>
       <caption style="font-weight: bold;">
         Image filters

src/components/header/Header.vue

 <template>
-  <div class="header">
-    <h1 style="margin-top: auto; margin-bottom: auto;">ANTARSTICK</h1>
-    <filter-icon class="icon" />
-    <map-legend-icon class="icon" />
-    <content-save-icon
-      class="icon"
-      :class="{ iconDisabled: pendingPostRequestsCount === 0 }"
-    />
-    <ContextMap class="context-map" />
-    <AveragesMap class="averages-map card" />
+  <div class="header-container">
+    <!-- <Filters /> -->
+    <div class="top-bar">
+      <h1 style="margin-top: auto; margin-bottom: auto;">ANTARSTICK</h1>
+      <filter-icon class="icon" />
+      <map-legend-icon class="icon" />
+      <content-save-icon
+        class="icon"
+        :class="{ iconDisabled: pendingPostRequestsCount === 0 }"
+      />
+    </div>
+    <div class="charts">
+      <ContextMap class="context-map" />
+      <AveragesMap class="averages-map card" />
+    </div>
   </div>
 </template>
 
 <script>
 import ContextMap from '@/components/header/ContextMap.vue'
 import AveragesMap from '@/components/header/AveragesMap.vue'
+import Filters from '@/components/header/Filters.vue'
+
 import ContentSaveIcon from 'icons/ContentSave'
 import FilterIcon from 'icons/Filter'
 import MapLegendIcon from 'icons/MapLegend'
@@ -24,6 +31,8 @@ export default {
   components: {
     ContextMap,
     AveragesMap,
+    // Filters,
+
     ContentSaveIcon,
     FilterIcon,
     MapLegendIcon
@@ -42,22 +51,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header {
+.header-container {
   position: fixed;
+  left: 0;
+  top: 0;
   z-index: 10;
   width: 100%;
 
+  background-color: #ffffff;
+  padding-bottom: 10px;
+}
+
+.top-bar {
   display: grid;
   row-gap: 10px;
-  grid-template-rows: 50px 100px 60px;
+  grid-template-rows: 50px;
   grid-template-columns: auto 50px 50px 50px 20px;
-  grid-template-areas:
-    '. . . .'
-    'averages-map averages-map averages-map averages-map'
-    'context-map context-map context-map context-map';
+}
 
-  background-color: #ffffff;
-  padding-bottom: 10px;
+.charts {
+  display: grid;
+  row-gap: 10px;
+  grid-template-rows: 100px 60px;
+  grid-template-columns: 150px auto 150px;
+  grid-template-areas:
+    '. averages-map .'
+    '. context-map .';
 }
 
 .context-map {