[dolphinscheduler] branch dev updated: [Fix-14171] Add dynamic font sizes to dashboards (#14260)

[liudongkai]

This is an automated email from the ASF dual-hosted git repository.

liudongkai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git


The following commit(s) were added to refs/heads/dev by this push:
     new f840b17cfb [Fix-14171] Add dynamic font sizes to dashboards (#14260)
f840b17cfb is described below

commit f840b17cfbb4c03fd5a4bbc1f0ca71db68edd5ae
Author: pppppjcc <129030959+ppppp...@users.noreply.github.com>
AuthorDate: Thu Jun 15 15:48:29 2023 +0800

    [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
---
 dolphinscheduler-ui/src/components/chart/index.ts  |  7 +++-
 .../src/components/chart/modules/Gauge.tsx         | 48 ++++++++++++++++++++--
 .../views/monitor/servers/master/index.module.scss |  2 +-
 3 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/dolphinscheduler-ui/src/components/chart/index.ts 
b/dolphinscheduler-ui/src/components/chart/index.ts
index 9edd075537..9e3fdf0865 100644
--- 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
index 1154dd9765..b9b8994785 100644
--- 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
index 1021e82349..7bde891f5b 100644
--- 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;