You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ke...@apache.org on 2021/12/31 15:27:15 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next] Add task state statistics chart. (#7765)
This is an automated email from the ASF dual-hosted git repository.
kezhenxu94 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 7e378ea [Feature][UI Next] Add task state statistics chart. (#7765)
7e378ea is described below
commit 7e378ea6728f881232824d0cb95d547d21a47759
Author: songjianet <17...@qq.com>
AuthorDate: Fri Dec 31 23:27:09 2021 +0800
[Feature][UI Next] Add task state statistics chart. (#7765)
---
.../src/components/chart/index.ts | 19 ++++++++++-
.../src/components/chart/modules/Pie.tsx | 20 +++++-------
.../src/views/home/index.module.scss | 21 ------------
dolphinscheduler-ui-next/src/views/home/index.tsx | 18 ++++++++---
.../src/views/home/state-card.tsx | 37 +++++++++++++---------
dolphinscheduler-ui-next/src/views/home/types.ts | 16 ++++++++--
.../src/views/home/use-process-definition.ts | 4 +--
.../src/views/home/use-task-state.ts | 17 +++++++---
8 files changed, 89 insertions(+), 63 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/chart/index.ts b/dolphinscheduler-ui-next/src/components/chart/index.ts
index 231171a..09d037d 100644
--- a/dolphinscheduler-ui-next/src/components/chart/index.ts
+++ b/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)
diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
index aab5f96..57d8478 100644
--- a/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
+++ b/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,
},
],
}
diff --git a/dolphinscheduler-ui-next/src/views/home/index.module.scss b/dolphinscheduler-ui-next/src/views/home/index.module.scss
deleted file mode 100644
index 3221050..0000000
--- a/dolphinscheduler-ui-next/src/views/home/index.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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;
-}
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx b/dolphinscheduler-ui-next/src/views/home/index.tsx
index 19313b3..23839d9 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/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}
diff --git a/dolphinscheduler-ui-next/src/views/home/state-card.tsx b/dolphinscheduler-ui-next/src/views/home/state-card.tsx
index 432a5ec..4674f76 100644
--- a/dolphinscheduler-ui-next/src/views/home/state-card.tsx
+++ b/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
diff --git a/dolphinscheduler-ui-next/src/views/home/types.ts b/dolphinscheduler-ui-next/src/views/home/types.ts
index 83b6cc5..3283446 100644
--- a/dolphinscheduler-ui-next/src/views/home/types.ts
+++ b/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 }
diff --git a/dolphinscheduler-ui-next/src/views/home/use-process-definition.ts b/dolphinscheduler-ui-next/src/views/home/use-process-definition.ts
index cfb04a4..ce04c7a 100644
--- a/dolphinscheduler-ui-next/src/views/home/use-process-definition.ts
+++ b/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)
diff --git a/dolphinscheduler-ui-next/src/views/home/use-task-state.ts b/dolphinscheduler-ui-next/src/views/home/use-task-state.ts
index 9182c20..bdedd6a 100644
--- a/dolphinscheduler-ui-next/src/views/home/use-task-state.ts
+++ b/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