[Fix-14171] Add dynamic font sizes to dashboards (#14260)

* feat: Add dynamic font sizes to dashboards * feat: code review * feat: change initChart params * feat: code review * feat: code review * feat: build fix
apache · Jun 15, 2023 · f840b17 · f840b17
1 parent c1a6790
commit f840b17
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/dolphinscheduler-ui/src/components/chart/index.ts b/dolphinscheduler-ui/src/components/chart/index.ts
@@ -25,7 +25,8 @@ import type { ECBasicOption } from 'echarts/types/dist/shared'
 
 function initChart<Opt extends ECBasicOption>(
   domRef: Ref<HTMLDivElement | null>,
-  option: Opt
+  option: Opt,
+  resizeFun?: any
 ): ECharts | null {
   let chart: ECharts | null = null
   const themeStore = useThemeStore()
@@ -44,6 +45,10 @@ function initChart<Opt extends ECBasicOption>(
   }
 
   const resize = throttle(() => {
+    if (resizeFun) {
+      resizeFun(chart)
+      return
+    }
     chart && chart.resize()
   }, 20)
 

diff --git a/dolphinscheduler-ui/src/components/chart/modules/Gauge.tsx b/dolphinscheduler-ui/src/components/chart/modules/Gauge.tsx
@@ -15,7 +15,13 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, ref } from 'vue'
+import {
+  defineComponent,
+  onMounted,
+  onBeforeUnmount,
+  PropType,
+  ref
+} from 'vue'
 import initChart from '@/components/chart'
 import type { Ref } from 'vue'
 
@@ -38,6 +44,9 @@ const GaugeChart = defineComponent({
   props,
   setup(props) {
     const gaugeChartRef: Ref<HTMLDivElement | null> = ref(null)
+    const windowWidth = window.innerWidth
+    // The original size was based on the screen width of 2560
+    const defaultFontSize = windowWidth > 2560 ? 20 : (windowWidth / 2560) * 20
 
     const option = {
       series: [
@@ -72,12 +81,13 @@ const GaugeChart = defineComponent({
           axisLabel: {
             color: 'auto',
             distance: 40,
-            fontSize: 20
+            fontSize: defaultFontSize
           },
           detail: {
             valueAnimation: true,
             formatter: '{value} %',
-            color: 'auto'
+            color: 'auto',
+            fontSize: defaultFontSize * 1.5
           },
           data: [
             {
@@ -88,7 +98,37 @@ const GaugeChart = defineComponent({
       ]
     }
 
-    initChart(gaugeChartRef, option)
+    const resize = (chart: any) => {
+      const clientWidth = gaugeChartRef.value?.clientWidth || 400
+      const axisLabelFontSize =
+        clientWidth > 400
+          ? defaultFontSize
+          : (clientWidth / 400) * defaultFontSize
+      chart &&
+        chart.setOption({
+          series: [
+            {
+              axisLabel: {
+                fontSize: axisLabelFontSize
+              },
+              detail: {
+                fontSize: axisLabelFontSize * 1.5
+              }
+            }
+          ]
+        })
+      chart && chart.resize()
+    }
+
+    initChart(gaugeChartRef, option, resize)
+
+    onMounted(() => {
+      addEventListener('resize', resize)
+    })
+
+    onBeforeUnmount(() => {
+      removeEventListener('resize', resize)
+    })
 
     return { gaugeChartRef }
   },

diff --git a/dolphinscheduler-ui/src/views/monitor/servers/master/index.module.scss b/dolphinscheduler-ui/src/views/monitor/servers/master/index.module.scss
@@ -16,7 +16,7 @@
  */
 
  @mixin base {
-  font-size: 100px;
+  font-size: 5vw;
   display: flex;
   justify-content: center;
   align-items: center;