fix: Fix dark/light mode watcher in dashboard charts

simwrapper · Dec 8, 2021 · 1291ef7 · 1291ef7
1 parent 1e6fb21
commit 1291ef7
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 42 deletions.
diff --git a/src/charts/area.vue b/src/charts/area.vue
@@ -16,6 +16,8 @@ import VuePlotly from '@/components/VuePlotly.vue'
 import DashboardDataManager from '@/js/DashboardDataManager'
 import { FileSystemConfig, UI_FONT } from '@/Globals'
 
+import globalStore from '@/store'
+
 @Component({ components: { VuePlotly } })
 export default class VueComponent extends Vue {
   @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
@@ -24,7 +26,7 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) config!: any
   @Prop() datamanager!: DashboardDataManager
 
-  private globalState = this.$store.state
+  private globalState = globalStore.state
 
   // dataSet is either x,y or allRows[]
   private dataSet: { x?: any[]; y?: any[]; allRows?: any[] } = {}
@@ -38,9 +40,12 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('globalState.isDarkMode') updateTheme() {
-    this.layout.paper_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff' // #f8f8ff
-    this.layout.plot_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff'
-    this.layout.font.color = this.globalState.isDarkMode ? '#cccccc' : '#444444'
+    const colors = {
+      paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
+    }
+    this.layout = Object.assign({}, this.layout, colors)
   }
 
   private async loadData() {

diff --git a/src/charts/bar.vue b/src/charts/bar.vue
@@ -59,14 +59,17 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('globalState.isDarkMode') updateTheme() {
-    this.layout.paper_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff' // #f8f8ff
-    this.layout.plot_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff'
-    this.layout.font.color = this.globalState.isDarkMode ? '#cccccc' : '#444444'
+    const colors = {
+      paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
+    }
+    this.layout = Object.assign({}, this.layout, colors)
   }
 
   private updateLayout() {
-    this.layout.xaxis.title = this.config.xAxisTitle || ''
-    this.layout.yaxis.title = this.config.yAxisTitle || ''
+    this.layout.xaxis.title = this.config.xAxisTitle || this.config.xAxisName || ''
+    this.layout.yaxis.title = this.config.yAxisTitle || this.config.yAxisName || ''
   }
 
   private async handlePlotlyClick(click: any) {
@@ -187,11 +190,14 @@ export default class VueComponent extends Vue {
 
     var useOwnNames = false
 
+    // old configs called it "usedCol" --> now "columns"
+    const columns = this.config.columns || this.config.usedCol
+
     // old legendname field
     if (this.config.legendName) this.config.legendTitles = this.config.legendName
 
     if (this.config.legendTitles !== undefined) {
-      if (this.config.legendTitles.length === this.config.columns.length) {
+      if (this.config.legendTitles.length === columns.length) {
         useOwnNames = true
       }
     }
@@ -208,9 +214,6 @@ export default class VueComponent extends Vue {
       }
     }
 
-    // old configs called it "usedCol" --> now "columns"
-    const columns = this.config.columns || this.config.usedCol
-
     for (let i = 0; i < columns.length; i++) {
       const name = columns[i]
       let legendName = ''

diff --git a/src/charts/bubble.vue b/src/charts/bubble.vue
@@ -14,6 +14,7 @@ import DashboardDataManager from '@/js/DashboardDataManager'
 import VuePlotly from '@/components/VuePlotly.vue'
 
 import { FileSystemConfig, UI_FONT } from '@/Globals'
+import globalStore from '@/store'
 
 @Component({ components: { VuePlotly } })
 export default class VueComponent extends Vue {
@@ -23,7 +24,7 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) config!: any
   @Prop() datamanager!: DashboardDataManager
 
-  private globalState = this.$store.state
+  private globalState = globalStore.state
 
   // dataSet is either x,y or allRows[]
   private dataSet: { x?: any[]; y?: any[]; allRows?: any[] } = {}
@@ -37,9 +38,12 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('globalState.isDarkMode') updateTheme() {
-    this.layout.paper_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff' // #f8f8ff
-    this.layout.plot_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff'
-    this.layout.font.color = this.globalState.isDarkMode ? '#cccccc' : '#444444'
+    const colors = {
+      paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
+    }
+    this.layout = Object.assign({}, this.layout, colors)
   }
 
   private async loadData() {
@@ -57,6 +61,9 @@ export default class VueComponent extends Vue {
   }
 
   private updateChart() {
+    this.layout.xaxis.title = this.config.xAxisTitle || this.config.xAxisName || ''
+    this.layout.yaxis.title = this.config.yAxisTitle || this.config.yAxisName || ''
+
     if (this.config.groupBy) this.updateChartWithGroupBy()
     else this.updateChartSimple()
   }
@@ -131,11 +138,11 @@ export default class VueComponent extends Vue {
     },
     xaxis: {
       autorange: true,
-      title: this.config.xAxisName,
+      title: '',
     },
     yaxis: {
       autorange: true,
-      title: this.config.yAxisName,
+      title: '',
     },
     legend: {
       x: 1,

diff --git a/src/charts/heatmap.vue b/src/charts/heatmap.vue
@@ -14,6 +14,7 @@ import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
 import VuePlotly from '@/components/VuePlotly.vue'
 import DashboardDataManager from '@/js/DashboardDataManager'
 import { FileSystemConfig, UI_FONT } from '@/Globals'
+import globalStore from '@/store'
 
 @Component({ components: { VuePlotly } })
 export default class VueComponent extends Vue {
@@ -23,7 +24,7 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) config!: any
   @Prop() datamanager!: DashboardDataManager
 
-  private globalState = this.$store.state
+  private globalState = globalStore.state
 
   // dataSet is either x,y or allRows[]
   private dataSet: { x?: any[]; y?: any[]; allRows?: any[] } = {}
@@ -37,9 +38,12 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('globalState.isDarkMode') updateTheme() {
-    this.layout.paper_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff' // #f8f8ff
-    this.layout.plot_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff'
-    this.layout.font.color = this.globalState.isDarkMode ? '#cccccc' : '#444444'
+    const colors = {
+      paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
+    }
+    this.layout = Object.assign({}, this.layout, colors)
   }
 
   private async loadData() {

diff --git a/src/charts/line.vue b/src/charts/line.vue
@@ -15,6 +15,8 @@ import VuePlotly from '@/components/VuePlotly.vue'
 
 import { FileSystemConfig, UI_FONT } from '@/Globals'
 
+import globalStore from '@/store'
+
 @Component({ components: { VuePlotly } })
 export default class VueComponent extends Vue {
   @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
@@ -23,7 +25,7 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) config!: any
   @Prop() datamanager!: DashboardDataManager
 
-  private globalState = this.$store.state
+  private globalState = globalStore.state
 
   // dataSet is either x,y or allRows[]
   private dataSet: { x?: any[]; y?: any[]; allRows?: any[] } = {}
@@ -37,9 +39,12 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('globalState.isDarkMode') updateTheme() {
-    this.layout.paper_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff' // #f8f8ff
-    this.layout.plot_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff'
-    this.layout.font.color = this.globalState.isDarkMode ? '#cccccc' : '#444444'
+    const colors = {
+      paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
+    }
+    this.layout = Object.assign({}, this.layout, colors)
   }
 
   private async loadData() {
@@ -57,6 +62,9 @@ export default class VueComponent extends Vue {
   }
 
   private updateChart() {
+    this.layout.xaxis.title = this.config.xAxisTitle || this.config.xAxisName || ''
+    this.layout.yaxis.title = this.config.yAxisTitle || this.config.yAxisName || ''
+
     if (this.config.groupBy) this.updateChartWithGroupBy()
     else this.updateChartSimple()
   }
@@ -131,11 +139,11 @@ export default class VueComponent extends Vue {
     },
     xaxis: {
       autorange: true,
-      title: this.config.xAxisName,
+      title: '',
     },
     yaxis: {
       autorange: true,
-      title: this.config.yAxisName,
+      title: '',
     },
     legend: {
       x: 1,

diff --git a/src/charts/pie.vue b/src/charts/pie.vue
@@ -14,6 +14,7 @@ import DashboardDataManager from '@/js/DashboardDataManager'
 import VuePlotly from '@/components/VuePlotly.vue'
 
 import { FileSystemConfig, UI_FONT } from '@/Globals'
+import globalStore from '@/store'
 
 @Component({ components: { VuePlotly } })
 export default class VueComponent extends Vue {
@@ -23,7 +24,7 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) config!: any
   @Prop() datamanager!: DashboardDataManager
 
-  private globalState = this.$store.state
+  private globalState = globalStore.state
 
   private id = 'pie-' + Math.random()
 
@@ -38,9 +39,12 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('globalState.isDarkMode') updateTheme() {
-    this.layout.paper_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff' // #f8f8ff
-    this.layout.plot_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff'
-    this.layout.font.color = this.globalState.isDarkMode ? '#cccccc' : '#444444'
+    const colors = {
+      paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
+    }
+    this.layout = Object.assign({}, this.layout, colors)
   }
 
   private async loadData() {
@@ -68,10 +72,8 @@ export default class VueComponent extends Vue {
 
   private updateChartSimple() {
     const allRows = this.dataSet.allRows || {}
-    console.log({ allRows })
     this.data[0].labels = Object.keys(allRows)
     this.data[0].values = Object.values(allRows)
-    console.log(this.data)
   }
 
   private layout: any = {

diff --git a/src/charts/scatter.vue b/src/charts/scatter.vue
@@ -14,6 +14,7 @@ import DashboardDataManager from '@/js/DashboardDataManager'
 import VuePlotly from '@/components/VuePlotly.vue'
 
 import { FileSystemConfig, UI_FONT } from '@/Globals'
+import globalStore from '@/store'
 
 @Component({ components: { VuePlotly } })
 export default class VueComponent extends Vue {
@@ -23,7 +24,7 @@ export default class VueComponent extends Vue {
   @Prop({ required: true }) config!: any
   @Prop() datamanager!: DashboardDataManager
 
-  private globalState = this.$store.state
+  private globalState = globalStore.state
 
   // dataSet is either x,y or allRows[]
   private dataSet: { x?: any[]; y?: any[]; allRows?: any[] } = {}
@@ -37,9 +38,12 @@ export default class VueComponent extends Vue {
   }
 
   @Watch('globalState.isDarkMode') updateTheme() {
-    this.layout.paper_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff' // #f8f8ff
-    this.layout.plot_bgcolor = this.globalState.isDarkMode ? '#282c34' : '#fff'
-    this.layout.font.color = this.globalState.isDarkMode ? '#cccccc' : '#444444'
+    const colors = {
+      paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
+      font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
+    }
+    this.layout = Object.assign({}, this.layout, colors)
   }
 
   private async loadData() {
@@ -57,6 +61,9 @@ export default class VueComponent extends Vue {
   }
 
   private updateChart() {
+    this.layout.xaxis.title = this.config.xAxisTitle || this.config.xAxisName || ''
+    this.layout.yaxis.title = this.config.yAxisTitle || this.config.yAxisName || ''
+
     if (this.config.groupBy) this.updateChartWithGroupBy()
     else this.updateChartSimple()
   }
@@ -136,11 +143,11 @@ export default class VueComponent extends Vue {
     },
     xaxis: {
       autorange: true,
-      title: this.config.xAxisName,
+      title: this.config?.xAxisName,
     },
     yaxis: {
       autorange: true,
-      title: this.config.yAxisName,
+      title: this.config?.yAxisName,
     },
     legend: {
       x: 1,

diff --git a/src/components/VuePlotly.vue b/src/components/VuePlotly.vue
@@ -38,7 +38,11 @@ export default class VueComponent extends Vue {
   @Watch('layout')
   @Watch('options')
   private updatePlot() {
-    Plotly.react(this.plotlyId, this.data, this.layout, this.options)
+    try {
+      Plotly.react(this.plotlyId, this.data, this.layout, this.options)
+    } catch (e) {
+      // can error if layout changes before plot is plotted. Ignore.
+    }
   }
 }
 </script>