Add dark mode support for QC graphs.

Closes #159.
This commit is contained in:
D. Berge
2023-10-31 21:33:30 +01:00
parent f53e15df93
commit 5ef55a9d8e
5 changed files with 91 additions and 7 deletions

View File

@@ -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
};

View File

@@ -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
};

View File

@@ -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
};

View File

@@ -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
};

View File

@@ -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
};