[dolphinscheduler] branch dev updated: fix bug where task name display in gantt (#10900)

[wanggenhua]

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

wanggenhua 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 0ea5809ff8 fix bug where task name display in gantt (#10900)
0ea5809ff8 is described below

commit 0ea5809ff876e7473c2ae8859cdb0771eb6edf07
Author: Devosend <devos...@gmail.com>
AuthorDate: Wed Jul 13 09:55:10 2022 +0800

    fix bug where task name display in gantt (#10900)
---
 .../instance/gantt/components/gantt-chart.tsx      | 32 ++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git 
a/dolphinscheduler-ui/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx
 
b/dolphinscheduler-ui/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx
index 36b72daaf6..49baf37dc0 100644
--- 
a/dolphinscheduler-ui/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx
+++ 
b/dolphinscheduler-ui/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import _ from 'lodash'
 import { defineComponent, ref, PropType } from 'vue'
 import * as echarts from 'echarts'
 import type { Ref } from 'vue'
@@ -101,7 +102,7 @@ const GanttChart = defineComponent({
         {
           x: start[0],
           y: start[1] - height / 2,
-          width: end[0] - start[0],
+          width: _.max([end[0] - start[0], 1]) || 1,
           height: height
         },
         {
@@ -153,13 +154,15 @@ const GanttChart = defineComponent({
       dataZoom: [
         {
           type: 'slider',
+          xAxisIndex: 0,
           filterMode: 'weakFilter',
-          showDataShadow: false,
-          top:
-            props.taskList.length * 100 > 200
-              ? props.taskList.length * 100
-              : 200,
-          labelFormatter: ''
+          height: 20,
+          bottom: 0,
+          start: 0,
+          end: 100,
+          handleSize: '80%',
+          showDetail: false,
+          top: '85%'
         },
         {
           type: 'inside',
@@ -167,12 +170,12 @@ const GanttChart = defineComponent({
         }
       ],
       grid: {
-        height: props.taskList.length * 50,
+        height: '70%',
         top: 80
       },
       xAxis: {
+        type: 'time',
         min: minTime,
-        scale: true,
         position: 'top',
         axisTick: { show: true },
         splitLine: { show: false },
@@ -186,8 +189,15 @@ const GanttChart = defineComponent({
         axisTick: { show: false },
         splitLine: { show: false },
         axisLine: { show: false },
-        max: props.taskList.length,
-        data: props.taskList
+        data: props.taskList.map((item: string) => {
+          return {
+            value: item,
+            textStyle: {
+              width: 130,
+              overflow: 'truncate'
+            }
+          }
+        })
       },
       series: series
     }