setup()

in dolphinscheduler-ui/src/views/projects/workflow/relation/components/Graph.tsx [48:201]

• 143 lines of code
• 18 McCabe index (conditional complexity)

  setup(props) {
    const graphChartRef: Ref<HTMLDivElement | null> = ref(null)
    const { t } = useI18n()

    const legendData = [
      { color: '#2D8DF0', name: t('project.workflow.online') },
      { color: '#f37373', name: t('project.workflow.workflow_offline') },
      { color: '#ba3e3e', name: t('project.workflow.schedule_offline') }
    ]

    const getCategory = (schedulerStatus: number, workflowStatus: number) => {
      switch (true) {
        case workflowStatus === 0:
          return 1
        case workflowStatus === 1 && schedulerStatus === 0:
          return 2
        case workflowStatus === 1 && schedulerStatus === 1:
        default:
          return 0
      }
    }

    const option: any = {
      tooltip: {
        confine: true,
        formatter: (params: any) => {
          if (!params.data.name) {
            return false
          }

          const {
            name,
            scheduleStartTime,
            scheduleEndTime,
            crontab,
            workFlowPublishStatus,
            schedulePublishStatus
          } = params.data

          return `
            ${t('project.workflow.workflow_name')}：${name}<br/>
            ${t(
              'project.workflow.schedule_start_time'
            )}：${scheduleStartTime}<br/>
            ${t('project.workflow.schedule_end_time')}：${scheduleEndTime}<br/>
            ${t('project.workflow.crontab_expression')}：${
            crontab ? crontab : ' - '
          }<br/>
            ${t(
              'project.workflow.workflow_publish_status'
            )}：${workFlowPublishStatus}<br/>
            ${t(
              'project.workflow.schedule_publish_status'
            )}：${schedulePublishStatus}<br/>
          `
        }
      },
      legend: {
        data: legendData?.map((item) => {
          return {
            name: item.name,
            itemStyle: {
              color: item.color
            }
          }
        })
      },
      series: [
        {
          type: 'graph',
          layout: 'force',
          draggable: true,
          force: {
            repulsion: 300,
            edgeLength: 200
          },
          symbol: 'roundRect',
          symbolSize: 70,
          roam: true,
          label: {
            show: props.labelShow,
            formatter: (val: any) => {
              let newStr = ''
              const str = val.data.name.split('')

              for (let i = 0, s; (s = str[i++]); ) {
                newStr += s
                if (!(i % 10)) newStr += '\n'
              }

              return newStr.length > 60 ? newStr.slice(0, 60) + '...' : newStr
            }
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 20
          },
          data: props.seriesData.map((item) => {
            const category = getCategory(
              Number(item.schedulePublishStatus),
              Number(item.workFlowPublishStatus)
            )
            const itemStyle = {
              color: ''
            }

            if (category === 1) {
              itemStyle.color = '#f37373'
            } else if (category === 2) {
              itemStyle.color = '#ba3e3e'
            } else if (category === 0) {
              itemStyle.color = '#2D8DF0'
            }

            return {
              name: item.name,
              id: item.id,
              category,
              workFlowPublishStatus:
                Number(item.workFlowPublishStatus) === 0
                  ? t('project.workflow.offline')
                  : t('project.workflow.online'),
              schedulePublishStatus:
                Number(item.schedulePublishStatus) === 0
                  ? t('project.workflow.offline')
                  : t('project.workflow.online'),
              crontab: item.crontab,
              scheduleStartTime: item.scheduleStartTime
                ? item.scheduleStartTime
                : '-',
              scheduleEndTime: item.scheduleEndTime
                ? item.scheduleEndTime
                : '-',
              itemStyle
            }
          }),
          links: props.links,
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0
          },
          nodeScaleRatio: 0,
          zoom: 1,
          categories: legendData
        }
      ]
    }

    initChart(graphChartRef, option)

    return { graphChartRef }
  },