fix(style): text color on bed mesh chart (#1371)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
fluidd-core · Feb 20, 2024 · 3863fdd · 3863fdd
1 parent 1fec488
commit 3863fdd
Showing 1 changed file with 31 additions and 37 deletions.
diff --git a/src/components/widgets/bedmesh/BedMeshChart.vue b/src/components/widgets/bedmesh/BedMeshChart.vue
@@ -71,20 +71,16 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
     // If options includes series data, rip it out so we can merge it with
     // the given series in our initial options.
     const darkMode = this.$store.state.config.uiSettings.theme.isDark
+
+    const fontColor = (darkMode) ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.45)'
     const fontSize = (this.isMobileViewport) ? 14 : 16
-    let labelBackground = 'rgba(10,10,10,0.90)'
+    const labelBackground = (darkMode) ? 'rgba(10,10,10,0.90)' : 'rgba(255,255,255,0.90)'
     const opacity = 0.10
-    let fontColor = 'rgba(255,255,255,0.25)'
-    let lineColor = '#ffffff'
+    const lineColor = (darkMode) ? '#ffffff' : '#000000'
     const visualMap = {
       itemWidth: (this.isMobileViewport) ? 15 : 25,
       itemHeight: (this.isMobileViewport) ? 140 : 280
     }
-    if (!darkMode) {
-      labelBackground = 'rgba(255,255,255,0.90)'
-      fontColor = 'rgba(0,0,0,0.45)'
-      lineColor = '#000000'
-    }
 
     const axisCommon = {
       nameTextStyle: {
@@ -159,7 +155,33 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
           color: fontColor,
           fontSize: 18
         },
-        formatter: this.tooltipFormatter
+        formatter: (params: any) => {
+          let text = ''
+          if (params.value && Array.isArray(params.value)) {
+            text += `
+              <div>
+                <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  ${this.$filters.startCase(params.seriesName)}
+                </span>
+                <div style="clear: both"></div>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  x: ${params.value[0].toFixed(4)}
+                </span>
+                <div style="clear: both"></div>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  y: ${params.value[1].toFixed(4)}
+                </span>
+                <div style="clear: both"></div>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  z: ${params.value[2].toFixed(4)}
+                </span>
+                <div style="clear: both"></div>
+              </div>
+              `
+          }
+          return text
+        }
       },
       visualMap: {
         type: 'continuous',
@@ -217,34 +239,6 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
     return opts
   }
 
-  tooltipFormatter (params: any) {
-    let text = ''
-    if (params.value && Array.isArray(params.value)) {
-      text += `
-        <div>
-          <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            ${this.$filters.startCase(params.seriesName)}
-          </span>
-          <div style="clear: both"></div>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            x: ${params.value[0].toFixed(4)}
-          </span>
-          <div style="clear: both"></div>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            y: ${params.value[1].toFixed(4)}
-          </span>
-          <div style="clear: both"></div>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            z: ${params.value[2].toFixed(4)}
-          </span>
-          <div style="clear: both"></div>
-        </div>
-        `
-    }
-    return text
-  }
-
   async copyImage () {
     const image = await fetch(this.chart.getDataURL({ type: 'png', backgroundColor: '#262629' }))