feat(heatmap): Heatmap learned flipAxes true/false, to flip the heatm…

…ap :-)

package.json

@@ -52,6 +52,7 @@
     "maplibre-gl": ">=1.14.0",
     "markdown-it": "^12.2.0",
     "marked": "^0.8.0",
+    "mathjs": "^10.0.0",
     "medium-zoom": "^1.0.5",
     "micromatch": "^4.0.2",
     "moment": "^2.24.0",

src/charts/heatmap.vue

@@ -9,6 +9,7 @@ VuePlotly.myplot(
 
 <script lang="ts">
 import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+import { transpose } from 'mathjs'
 
 import VuePlotly from '@/components/VuePlotly.vue'
 import DashboardDataManager from '@/js/DashboardDataManager'
@@ -126,11 +127,13 @@ export default class VueComponent extends Vue {
       subMatrix = []
     }
 
+    if (this.config.flipAxes) matrix = transpose(matrix)
+
     // Pushes the data into the chart
     this.data = [
       {
-        x: xaxis,
-        y: yaxis,
+        x: this.config.flipAxes ? yaxis : xaxis,
+        y: this.config.flipAxes ? xaxis : yaxis,
         z: matrix,
         colorscale: 'Viridis', // 'YlOrRed', // 'Hot',
         type: 'heatmap',
@@ -140,11 +143,7 @@ export default class VueComponent extends Vue {
   }
 
   private layout: any = {
-    height: 300,
-    width: 0,
-    margin: { t: 30, b: 50, l: 60, r: 20 },
-    //automargin: true,
-    //legend: { orientation: 'h' }, // , yanchor: 'bottom', y: -0.4 },
+    margin: { t: 8, b: 50 },
     font: {
       color: '#444444',
       family: UI_FONT,