[Feature][UI Next] Add task state statistics chart. (#7765)

dolphinscheduler-ui-next/src/components/chart/index.ts

@@ -15,7 +15,13 @@
  * limitations under the License.
  */
 
-import { getCurrentInstance, onMounted, onBeforeUnmount, watch } from 'vue'
+import {
+  getCurrentInstance,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  watchEffect,
+} from 'vue'
 import { useThemeStore } from '@/store/theme/theme'
 import { throttle } from 'echarts'
 import { useI18n } from 'vue-i18n'
@@ -63,6 +69,17 @@ function initChart<Opt extends ECBasicOption>(
     }
   )
 
+  watch(
+    () => option,
+    () => {
+      chart?.dispose()
+      init()
+    },
+    {
+      deep: true,
+    }
+  )
+
   onMounted(() => {
     init()
     addEventListener('resize', resize)

dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx

@@ -22,18 +22,21 @@ import type { Ref } from 'vue'
 const props = {
   height: {
     type: [String, Number] as PropType<string | number>,
-    default: 400,
+    default: 590,
   },
   width: {
     type: [String, Number] as PropType<string | number>,
-    default: 400,
+    default: '100%',
+  },
+  data: {
+    type: Array as PropType<Array<any>>,
   },
 }
 
 const PieChart = defineComponent({
   name: 'PieChart',
   props,
-  setup() {
+  setup(props) {
     const pieChartRef: Ref<HTMLDivElement | null> = ref(null)
 
     const option = {
@@ -42,12 +45,11 @@ const PieChart = defineComponent({
         backgroundColor: '#fff',
       },
       legend: {
-        top: '5%',
+        bottom: '0%',
         left: 'center',
       },
       series: [
         {
-          name: 'Access From',
           type: 'pie',
           radius: ['40%', '70%'],
           avoidLabelOverlap: false,
@@ -58,13 +60,7 @@ const PieChart = defineComponent({
           labelLine: {
             show: false,
           },
-          data: [
-            { value: 1048, name: 'Search Engine' },
-            { value: 735, name: 'Direct' },
-            { value: 580, name: 'Email' },
-            { value: 484, name: 'Union Ads' },
-            { value: 300, name: 'Video Ads' },
-          ],
+          data: props.data,
         },
       ],
     }

dolphinscheduler-ui-next/src/views/home/index.module.scss

-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.card-table {
-  display: flex;
-  justify-content: space-between;
-}

dolphinscheduler-ui-next/src/views/home/index.tsx

@@ -15,14 +15,21 @@
  * limitations under the License.
  */
 
-import { defineComponent, Ref, onMounted, ref, watch } from 'vue'
+import {
+  defineComponent,
+  Ref,
+  onMounted,
+  ref,
+  toRefs,
+  reactive,
+  isReactive,
+} from 'vue'
 import { NGrid, NGi } from 'naive-ui'
 import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
 import { useTaskState } from './use-task-state'
 import StateCard from './state-card'
 import DefinitionCard from './definition-card'
-import styles from './index.module.scss'
 
 export default defineComponent({
   name: 'home',
@@ -30,7 +37,7 @@ export default defineComponent({
     const { t } = useI18n()
     const dateRef = ref([getTime(startOfToday()), Date.now()])
     const { getTaskState } = useTaskState()
-    let taskStateRef: Ref<any> = ref([])
+    let taskStateRef = ref()
 
     onMounted(() => {
       taskStateRef.value = getTaskState(dateRef.value)
@@ -52,11 +59,12 @@ export default defineComponent({
             <StateCard
               title={t('home.task_state_statistics')}
               date={dateRef}
-              tableData={this.taskStateRef.value}
+              tableData={this.taskStateRef?.value.table}
+              chartData={this.taskStateRef?.value.chart}
               onUpdateDatePickerValue={handleTaskDate}
             />
           </NGi>
-          <NGi class={styles['card-table']}>
+          <NGi>
             <StateCard
               title={t('home.process_state_statistics')}
               date={dateRef}

dolphinscheduler-ui-next/src/views/home/state-card.tsx

@@ -17,10 +17,10 @@
 
 import { defineComponent, PropType } from 'vue'
 import { useTable } from './use-table'
-import styles from '@/views/home/index.module.scss'
+import { NDataTable, NDatePicker, NGrid, NGi } from 'naive-ui'
 import PieChart from '@/components/chart/modules/Pie'
-import { NDataTable, NDatePicker } from 'naive-ui'
 import Card from '@/components/card'
+import type { StateTableData, StateChartData } from './types'
 
 const props = {
   title: {
@@ -30,7 +30,12 @@ const props = {
     type: Array as PropType<Array<any>>,
   },
   tableData: {
-    type: [Array, Boolean] as PropType<Array<any> | false>,
+    type: Array as PropType<Array<StateTableData>>,
+    default: () => [],
+  },
+  chartData: {
+    type: Array as PropType<Array<StateChartData>>,
+    default: () => [],
   },
 }
 
@@ -46,24 +51,26 @@ const StateCard = defineComponent({
     return { onUpdateDatePickerValue }
   },
   render() {
-    const { title, date, tableData, onUpdateDatePickerValue } = this
+    const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
     const { columnsRef } = useTable()
 
     return (
       <Card title={title}>
         {{
           default: () => (
-            <div class={styles['card-table']}>
-              <PieChart />
-              {tableData && (
-                <NDataTable
-                  columns={columnsRef}
-                  data={tableData}
-                  striped
-                  size={'small'}
-                />
-              )}
-            </div>
+            <NGrid x-gap={12} cols={2}>
+              <NGi>{chartData.length > 0 && <PieChart data={chartData} />}</NGi>
+              <NGi>
+                {tableData && (
+                  <NDataTable
+                    columns={columnsRef}
+                    data={tableData}
+                    striped
+                    size={'small'}
+                  />
+                )}
+              </NGi>
+            </NGrid>
           ),
           'header-extra': () => (
             <NDatePicker

dolphinscheduler-ui-next/src/views/home/types.ts

@@ -15,15 +15,25 @@
  * limitations under the License.
  */
 
-interface ChartData {
+interface DefinitionChartData {
   xAxisData: Array<string>
   seriesData: Array<number>
 }
 
-interface TaskStateTableData {
+interface StateTableData {
   id: number
   number: number
   state: string
 }
 
-export { ChartData, TaskStateTableData }
+interface StateChartData {
+  value: number
+  name: string
+}
+
+interface StateData {
+  table: Array<StateTableData>
+  chart: Array<StateChartData>
+}
+
+export { DefinitionChartData, StateTableData, StateChartData, StateData }

dolphinscheduler-ui-next/src/views/home/use-process-definition.ts

@@ -18,13 +18,13 @@
 import { useAsyncState } from '@vueuse/core'
 import { countDefinitionByUser } from '@/service/modules/projects-analysis'
 import type { ProcessDefinitionRes } from '@/service/modules/projects-analysis/types'
-import type { ChartData } from './types'
+import type { DefinitionChartData } from './types'
 
 export function useProcessDefinition() {
   const getProcessDefinition = () => {
     const { state } = useAsyncState(
       countDefinitionByUser({ projectCode: 0 }).then(
-        (res: ProcessDefinitionRes): ChartData => {
+        (res: ProcessDefinitionRes): DefinitionChartData => {
           const xAxisData = res.userList.map((item) => item.userName)
           const seriesData = res.userList.map((item) => item.count)
 

dolphinscheduler-ui-next/src/views/home/use-task-state.ts

@@ -19,7 +19,7 @@ import { useAsyncState } from '@vueuse/core'
 import { format } from 'date-fns'
 import { countTaskState } from '@/service/modules/projects-analysis'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
-import type { TaskStateTableData } from './types'
+import type { StateData } from './types'
 
 export function useTaskState() {
   const getTaskState = (date: Array<number>) => {
@@ -28,16 +28,25 @@ export function useTaskState() {
         startDate: format(date[0], 'yyyy-MM-dd HH:mm:ss'),
         endDate: format(date[1], 'yyyy-MM-dd HH:mm:ss'),
         projectCode: 0,
-      }).then((res: TaskStateRes): Array<TaskStateTableData> => {
-        return res.taskCountDtos.map((item, index) => {
+      }).then((res: TaskStateRes): StateData => {
+        const table = res.taskCountDtos.map((item, index) => {
           return {
             id: index + 1,
             state: item.taskStateType,
             number: item.count,
           }
         })
+
+        const chart = res.taskCountDtos.map((item) => {
+          return {
+            value: item.count,
+            name: item.taskStateType,
+          }
+        })
+
+        return { table, chart }
       }),
-      []
+      { table: [], chart: [] }
     )
 
     return state