From 5ef55a9d8e31e7e6e02f2b36970604eabf484848 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Tue, 31 Oct 2023 21:33:30 +0100
Subject: [PATCH] Add dark mode support for QC graphs.

Closes #159.
---
 .../components/graph-arrays-ij-scatter.vue    | 22 ++++++++++++++++--
 .../src/components/graph-guns-depth.vue       | 21 ++++++++++++++++-
 .../src/components/graph-guns-heatmap.vue     | 11 ++++++++-
 .../src/components/graph-guns-pressure.vue    | 23 +++++++++++++++++--
 .../src/components/graph-guns-timing.vue      | 21 ++++++++++++++++-
 5 files changed, 91 insertions(+), 7 deletions(-)

diff --git a/lib/www/client/source/src/components/graph-arrays-ij-scatter.vue b/lib/www/client/source/src/components/graph-arrays-ij-scatter.vue
index f1edb10..aa099b8 100644
--- a/lib/www/client/source/src/components/graph-arrays-ij-scatter.vue
+++ b/lib/www/client/source/src/components/graph-arrays-ij-scatter.vue
@@ -1,5 +1,5 @@
 <template>
-<v-card style="min-height:400px;">
+<v-card style="min-height:400px;" outlined>
   <v-card-title class="headline">
     Array inline / crossline error
     <v-spacer></v-spacer>
@@ -35,7 +35,6 @@
 <style scoped>
 
 .graph-container {
-  background-color: red;
   width: 100%;
   height: 100%;
 }
@@ -95,6 +94,10 @@ export default {
     scatterplot () {
       this.plot();
       this.$emit("update:settings", {[`${this.$options.name}.scatterplot`]: this.scatterplot});
+    },
+
+    "$vuetify.theme.isDark" () {
+      this.plot();
     }
   },
 
@@ -175,6 +178,11 @@ export default {
 			title: "Shotpoint",
             anchor: "x1"
 		},
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
@@ -233,6 +241,11 @@ export default {
 		xaxis: {
 			title: "Crossline (m)"
 		},
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
@@ -306,6 +319,11 @@ export default {
           domain: [ 0.55, 1 ],
           anchor: 'x2'
         },
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
diff --git a/lib/www/client/source/src/components/graph-guns-depth.vue b/lib/www/client/source/src/components/graph-guns-depth.vue
index 04924da..b912b97 100644
--- a/lib/www/client/source/src/components/graph-guns-depth.vue
+++ b/lib/www/client/source/src/components/graph-guns-depth.vue
@@ -1,5 +1,5 @@
 <template>
-<v-card style="min-height:400px;">
+<v-card style="min-height:400px;" outlined>
   <v-card-title class="headline">
     Gun depth
     <v-spacer></v-spacer>
@@ -98,6 +98,10 @@ export default {
         this.plotViolin();
       }
       this.$emit("update:settings", {[`${this.$options.name}.violinplot`]: this.violinplot});
+    },
+
+    "$vuetify.theme.isDark" () {
+      this.plot();
     }
 
   },
@@ -196,6 +200,11 @@ export default {
           title: "Shotpoint",
           showspikes: true
         },
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
@@ -232,6 +241,11 @@ export default {
             title: "Gun number",
             type: 'category'
           },
+          font: {
+            color: this.$vuetify.theme.isDark ? "#fff" : undefined
+          },
+          plot_bgcolor:"rgba(0,0,0,0)",
+          paper_bgcolor:"rgba(0,0,0,0)",
           meta: {
             point
           }
@@ -305,6 +319,11 @@ export default {
 		xaxis: {
 			title: "Gun number"
 		},
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
diff --git a/lib/www/client/source/src/components/graph-guns-heatmap.vue b/lib/www/client/source/src/components/graph-guns-heatmap.vue
index a9a9919..6effaa6 100644
--- a/lib/www/client/source/src/components/graph-guns-heatmap.vue
+++ b/lib/www/client/source/src/components/graph-guns-heatmap.vue
@@ -1,5 +1,5 @@
 <template>
-<v-card style="min-height:400px;">
+<v-card style="min-height:400px;" outlined>
   <v-card-title class="headline">
     Gun details
   </v-card-title>
@@ -76,6 +76,10 @@ export default {
       if (this.violinplot) {
         this.plotViolin();
       }
+    },
+
+    "$vuetify.theme.isDark" () {
+      this.plot();
     }
 
   },
@@ -332,6 +336,11 @@ export default {
           title: "Shotpoint",
           showspikes: true
         },
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
 
         meta: this.data.meta
       };
diff --git a/lib/www/client/source/src/components/graph-guns-pressure.vue b/lib/www/client/source/src/components/graph-guns-pressure.vue
index 0b317ea..d54506a 100644
--- a/lib/www/client/source/src/components/graph-guns-pressure.vue
+++ b/lib/www/client/source/src/components/graph-guns-pressure.vue
@@ -1,5 +1,5 @@
 <template>
-<v-card style="min-height:400px;">
+<v-card style="min-height:400px;" outlined>
   <v-card-title class="headline">
     Gun pressures
     <v-spacer></v-spacer>
@@ -98,6 +98,10 @@ export default {
         this.plotViolin();
       }
       this.$emit("update:settings", {[`${this.$options.name}.violinplot`]: this.violinplot});
+    },
+
+    "$vuetify.theme.isDark" () {
+      this.plot();
     }
 
   },
@@ -123,7 +127,7 @@ export default {
         const gunPressuresSorted = gunPressures.map(s => d3a.sort(s));
         const gunVolumes = guns.map(s => s.map(g => g[12]));
         const gunPressureWeights = gunVolumes.map( (s, sidx) => s.map( v => v/meta[sidx].volume ));
-        const gunsWeightedAvgPressure = gunPressures.map( (s, sidx) => 
+        const gunsWeightedAvgPressure = gunPressures.map( (s, sidx) =>
           d3a.sum(s.map( (pressure, gidx) => pressure * gunPressureWeights[sidx][gidx] )) / d3a.sum(gunPressureWeights[sidx])
         );
 
@@ -210,6 +214,11 @@ export default {
           title: "Shotpoint",
           showspikes: true
         },
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
@@ -249,6 +258,11 @@ export default {
             title: "Gun number",
             type: 'category'
           },
+          font: {
+            color: this.$vuetify.theme.isDark ? "#fff" : undefined
+          },
+          plot_bgcolor:"rgba(0,0,0,0)",
+          paper_bgcolor:"rgba(0,0,0,0)",
           meta: {
             point
           }
@@ -322,6 +336,11 @@ export default {
 		xaxis: {
 			title: "Gun number"
 		},
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
diff --git a/lib/www/client/source/src/components/graph-guns-timing.vue b/lib/www/client/source/src/components/graph-guns-timing.vue
index d42e50d..f980fdc 100644
--- a/lib/www/client/source/src/components/graph-guns-timing.vue
+++ b/lib/www/client/source/src/components/graph-guns-timing.vue
@@ -1,5 +1,5 @@
 <template>
-<v-card style="min-height:400px;">
+<v-card style="min-height:400px;" outlined>
   <v-card-title class="headline">
     Gun timing
     <v-spacer></v-spacer>
@@ -98,6 +98,10 @@ export default {
         this.plotViolin();
       }
       this.$emit("update:settings", {[`${this.$options.name}.violinplot`]: this.violinplot});
+    },
+
+    "$vuetify.theme.isDark" () {
+      this.plot();
     }
 
   },
@@ -196,6 +200,11 @@ export default {
           title: "Shotpoint",
           showspikes: true
         },
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };
 
@@ -232,6 +241,11 @@ export default {
             title: "Gun number",
             type: 'category'
           },
+          font: {
+            color: this.$vuetify.theme.isDark ? "#fff" : undefined
+          },
+          plot_bgcolor:"rgba(0,0,0,0)",
+          paper_bgcolor:"rgba(0,0,0,0)",
           meta: {
             point
           }
@@ -305,6 +319,11 @@ export default {
 		xaxis: {
 			title: "Gun number"
 		},
+        font: {
+          color: this.$vuetify.theme.isDark ? "#fff" : undefined
+        },
+        plot_bgcolor:"rgba(0,0,0,0)",
+        paper_bgcolor:"rgba(0,0,0,0)",
         meta: this.data.meta
       };