mirror of
https://github.com/tencentmusic/supersonic.git
synced 2026-04-19 04:44:19 +08:00
[improvement][semantic-fe] enhance the analysis of metric trends (#234)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends
This commit is contained in:
tristanliu
@@ -0,0 +1,134 @@
|
||||
import { CheckCard } from '@ant-design/pro-components';
|
||||
import React, { useState } from 'react';
|
||||
import { Dropdown, Popconfirm, Typography } from 'antd';
|
||||
import { EllipsisOutlined } from '@ant-design/icons';
|
||||
import { ISemantic } from '../../data';
|
||||
import { connect } from 'umi';
|
||||
import icon from '../../../../assets/icon/sourceState.svg';
|
||||
import type { Dispatch } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { SemanticNodeType } from '../../enum';
|
||||
import styles from '../style.less';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
type Props = {
|
||||
disabledEdit?: boolean;
|
||||
metricList: ISemantic.IMetricItem[];
|
||||
onMetricChange?: (metricItem: ISemantic.IMetricItem) => void;
|
||||
onEditBtnClick?: (metricItem: ISemantic.IMetricItem) => void;
|
||||
onDeleteBtnClick?: (metricItem: ISemantic.IMetricItem) => void;
|
||||
domainManger: StateType;
|
||||
dispatch: Dispatch;
|
||||
};
|
||||
|
||||
const MetricCardList: React.FC<Props> = ({
|
||||
metricList,
|
||||
disabledEdit = false,
|
||||
onMetricChange,
|
||||
onEditBtnClick,
|
||||
onDeleteBtnClick,
|
||||
domainManger,
|
||||
}) => {
|
||||
const [currentNodeData, setCurrentNodeData] = useState<any>({});
|
||||
|
||||
const descNode = (metricItem: ISemantic.IMetricItem) => {
|
||||
const { modelName, createdBy } = metricItem;
|
||||
return (
|
||||
<>
|
||||
<div className={styles.overviewExtraContainer}>
|
||||
<div className={styles.extraWrapper}>
|
||||
<div className={styles.extraStatistic}>
|
||||
<div className={styles.extraTitle}>所属模型:</div>
|
||||
<div className={styles.extraValue}>
|
||||
<Paragraph style={{ maxWidth: 70, margin: 0 }} ellipsis={{ tooltip: modelName }}>
|
||||
<span>{modelName}</span>
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.extraWrapper}>
|
||||
<div className={styles.extraStatistic}>
|
||||
<div className={styles.extraTitle}>创建人:</div>
|
||||
<div className={styles.extraValue}>
|
||||
<Paragraph style={{ maxWidth: 70, margin: 0 }} ellipsis={{ tooltip: createdBy }}>
|
||||
<span>{createdBy}</span>
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const extraNode = (metricItem: ISemantic.IMetricItem) => {
|
||||
return (
|
||||
<Dropdown
|
||||
placement="top"
|
||||
menu={{
|
||||
onClick: ({ key, domEvent }) => {
|
||||
domEvent.stopPropagation();
|
||||
if (key === 'edit') {
|
||||
onEditBtnClick?.(metricItem);
|
||||
}
|
||||
},
|
||||
items: [
|
||||
{
|
||||
label: '编辑',
|
||||
key: 'edit',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={() => {
|
||||
onDeleteBtnClick?.(metricItem);
|
||||
}}
|
||||
>
|
||||
<a key="modelDeleteBtn">删除</a>
|
||||
</Popconfirm>
|
||||
),
|
||||
key: 'delete',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<EllipsisOutlined
|
||||
style={{ fontSize: 22, color: 'rgba(0,0,0,0.5)' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0px 20px 20px' }}>
|
||||
<CheckCard.Group value={currentNodeData.id} defaultValue={undefined}>
|
||||
{metricList &&
|
||||
metricList.map((metricItem: ISemantic.IMetricItem) => {
|
||||
return (
|
||||
<CheckCard
|
||||
style={{ width: 350 }}
|
||||
avatar={icon}
|
||||
title={`${metricItem.name}`}
|
||||
key={metricItem.id}
|
||||
value={metricItem.id}
|
||||
description={descNode(metricItem)}
|
||||
extra={!disabledEdit && extraNode(metricItem)}
|
||||
onClick={() => {
|
||||
setCurrentNodeData({ ...metricItem, nodeType: SemanticNodeType.METRIC });
|
||||
onMetricChange?.(metricItem);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</CheckCard.Group>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(MetricCardList);
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Form, Input, Space, Row, Col } from 'antd';
|
||||
import { Form, Input, Space, Row, Col, Switch } from 'antd';
|
||||
import StandardFormRow from '@/components/StandardFormRow';
|
||||
import TagSelect from '@/components/TagSelect';
|
||||
import React, { useEffect } from 'react';
|
||||
@@ -10,20 +10,21 @@ import styles from '../style.less';
|
||||
const FormItem = Form.Item;
|
||||
|
||||
type Props = {
|
||||
filterValues?: any;
|
||||
initFilterValues?: any;
|
||||
onFiltersChange: (_: any, values: any) => void;
|
||||
};
|
||||
|
||||
const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) => {
|
||||
const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange }) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
...filterValues,
|
||||
...initFilterValues,
|
||||
});
|
||||
}, [form, filterValues]);
|
||||
}, [form]);
|
||||
|
||||
const handleValuesChange = (value: any, values: any) => {
|
||||
localStorage.setItem('metricMarketShowType', !!values.showType ? '1' : '0');
|
||||
onFiltersChange(value, values);
|
||||
};
|
||||
|
||||
@@ -32,17 +33,6 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
|
||||
};
|
||||
|
||||
const filterList = [
|
||||
// {
|
||||
// title: '指标类型',
|
||||
// key: 'type',
|
||||
// options: [
|
||||
// {
|
||||
// value: 'ATOMIC',
|
||||
// label: '原子指标',
|
||||
// },
|
||||
// { value: 'DERIVED', label: '衍生指标' },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
title: '敏感度',
|
||||
key: 'sensitiveLevel',
|
||||
@@ -94,6 +84,11 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
|
||||
</div>
|
||||
</StandardFormRow>
|
||||
<Space size={80}>
|
||||
<StandardFormRow key="showType" title="切换为卡片" block>
|
||||
<FormItem name="showType" valuePropName="checked">
|
||||
<Switch size="small" />
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
<StandardFormRow key="domainIds" title="所属主题域" block>
|
||||
<FormItem name="domainIds">
|
||||
<DomainTreeSelect />
|
||||
@@ -103,17 +98,15 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
|
||||
const { title, key, options } = item;
|
||||
return (
|
||||
<StandardFormRow key={key} title={title} block>
|
||||
<div style={{ marginLeft: -30 }}>
|
||||
<FormItem name={key}>
|
||||
<TagSelect reverseCheckAll single>
|
||||
{options.map((item: any) => (
|
||||
<TagSelect.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</TagSelect.Option>
|
||||
))}
|
||||
</TagSelect>
|
||||
</FormItem>
|
||||
</div>
|
||||
<FormItem name={key}>
|
||||
<TagSelect reverseCheckAll single>
|
||||
{options.map((item: any) => (
|
||||
<TagSelect.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</TagSelect.Option>
|
||||
))}
|
||||
</TagSelect>
|
||||
</FormItem>
|
||||
</StandardFormRow>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -0,0 +1,217 @@
|
||||
import { CHART_SECONDARY_COLOR } from '@/common/constants';
|
||||
import {
|
||||
formatByDecimalPlaces,
|
||||
formatByPercentageData,
|
||||
getFormattedValueData,
|
||||
} from '@/utils/utils';
|
||||
import { Skeleton, Button, Tooltip } from 'antd';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import type { ECharts } from 'echarts';
|
||||
import * as echarts from 'echarts';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import styles from '../style.less';
|
||||
import moment from 'moment';
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
tip?: string;
|
||||
data: any[];
|
||||
fields: any[];
|
||||
// columnFieldName: string;
|
||||
// valueFieldName: string;
|
||||
loading: boolean;
|
||||
isPer?: boolean;
|
||||
isPercent?: boolean;
|
||||
dateFieldName?: string;
|
||||
dateFormat?: string;
|
||||
height?: number;
|
||||
renderType?: string;
|
||||
decimalPlaces?: number;
|
||||
onDownload?: () => void;
|
||||
};
|
||||
|
||||
const TrendChart: React.FC<Props> = ({
|
||||
title,
|
||||
tip,
|
||||
data,
|
||||
fields,
|
||||
loading,
|
||||
isPer,
|
||||
isPercent,
|
||||
dateFieldName,
|
||||
// columnFieldName,
|
||||
// valueFieldName,
|
||||
dateFormat,
|
||||
height,
|
||||
renderType,
|
||||
decimalPlaces,
|
||||
onDownload,
|
||||
}) => {
|
||||
const chartRef = useRef<any>();
|
||||
const [instance, setInstance] = useState<ECharts>();
|
||||
const renderChart = useCallback(() => {
|
||||
let instanceObj: ECharts;
|
||||
if (!instance) {
|
||||
instanceObj = echarts.init(chartRef.current);
|
||||
setInstance(instanceObj);
|
||||
} else {
|
||||
instanceObj = instance;
|
||||
if (renderType === 'clear') {
|
||||
instanceObj.clear();
|
||||
}
|
||||
}
|
||||
const xData = Array.from(
|
||||
new Set(
|
||||
data
|
||||
.map((item) =>
|
||||
moment(`${(dateFieldName && item[dateFieldName]) || item.sys_imp_date}`).format(
|
||||
dateFormat ?? 'YYYY-MM-DD',
|
||||
),
|
||||
)
|
||||
.sort((a, b) => {
|
||||
return moment(a).valueOf() - moment(b).valueOf();
|
||||
}),
|
||||
),
|
||||
);
|
||||
const seriesData = fields.map((field) => {
|
||||
const fieldData = {
|
||||
type: 'line',
|
||||
name: field.name,
|
||||
symbol: 'circle',
|
||||
showSymbol: data.length === 1,
|
||||
smooth: true,
|
||||
data: data.reduce((itemData, item) => {
|
||||
const target = item[field.column];
|
||||
if (target) {
|
||||
itemData.push(target);
|
||||
}
|
||||
return itemData;
|
||||
}, []),
|
||||
};
|
||||
return fieldData;
|
||||
});
|
||||
|
||||
instanceObj.setOption({
|
||||
legend: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
icon: 'rect',
|
||||
itemWidth: 15,
|
||||
itemHeight: 5,
|
||||
selected: fields.reduce((result, item) => {
|
||||
if (item.selected === false) {
|
||||
result[item.name] = false;
|
||||
}
|
||||
return result;
|
||||
}, {}),
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: CHART_SECONDARY_COLOR,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: CHART_SECONDARY_COLOR,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
showMaxLabel: true,
|
||||
color: '#999',
|
||||
},
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
opacity: 0.3,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: function (value: any) {
|
||||
return value === 0
|
||||
? 0
|
||||
: isPer
|
||||
? `${formatByDecimalPlaces(value, decimalPlaces ?? 0)}%`
|
||||
: isPercent
|
||||
? formatByPercentageData(value, decimalPlaces ?? 0)
|
||||
: getFormattedValueData(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params: any[]) {
|
||||
const param = params[0];
|
||||
const valueLabels = params
|
||||
.map(
|
||||
(item: any) =>
|
||||
`<div style="margin-top: 3px;">${
|
||||
item.marker
|
||||
} <span style="display: inline-block; width: 70px; margin-right: 5px;">${
|
||||
item.seriesName
|
||||
}</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
|
||||
item.value === ''
|
||||
? '-'
|
||||
: isPer
|
||||
? `${formatByDecimalPlaces(item.value, decimalPlaces ?? 2)}%`
|
||||
: isPercent
|
||||
? formatByPercentageData(item.value, decimalPlaces ?? 2)
|
||||
: getFormattedValueData(item.value)
|
||||
}</span></div>`,
|
||||
)
|
||||
.join('');
|
||||
return `${param.name}<br />${valueLabels}`;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: height && height < 300 ? 45 : 60,
|
||||
containLabel: true,
|
||||
},
|
||||
series: seriesData,
|
||||
});
|
||||
instanceObj.resize();
|
||||
}, [data, fields, instance, isPer, isPercent, dateFieldName, decimalPlaces, renderType]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading) {
|
||||
renderChart();
|
||||
}
|
||||
}, [renderChart, loading, data]);
|
||||
|
||||
return (
|
||||
<div className={styles.trendChart}>
|
||||
{title && (
|
||||
<div className={styles.top}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
{onDownload && (
|
||||
<Tooltip title="下载">
|
||||
<Button shape="circle" className={styles.downloadBtn} onClick={onDownload}>
|
||||
<DownloadOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Skeleton
|
||||
className={styles.chart}
|
||||
style={{ height, display: loading ? 'table' : 'none' }}
|
||||
paragraph={{ rows: height && height > 300 ? 9 : 6 }}
|
||||
/>
|
||||
<div
|
||||
className={styles.chart}
|
||||
style={{ height, display: !loading ? 'block' : 'none' }}
|
||||
ref={chartRef}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrendChart;
|
||||
@@ -0,0 +1,134 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { SemanticNodeType } from '../../enum';
|
||||
import moment from 'moment';
|
||||
import { message } from 'antd';
|
||||
import { queryStruct } from '@/pages/SemanticModel/service';
|
||||
import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
|
||||
import MDatePicker from '@/components/MDatePicker';
|
||||
import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
|
||||
import { ISemantic } from '../../data';
|
||||
|
||||
type Props = {
|
||||
nodeData: any;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
|
||||
const dateFieldMap = {
|
||||
[DateRangeType.DAY]: 'sys_imp_date',
|
||||
[DateRangeType.WEEK]: 'sys_imp_week',
|
||||
[DateRangeType.MONTH]: 'sys_imp_month',
|
||||
};
|
||||
const indicatorFields = useRef<{ name: string; column: string }[]>([]);
|
||||
const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
|
||||
const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
|
||||
const [metricColumnConfig, setMetricColumnConfig] = useState<ISemantic.IMetricTrendColumn>();
|
||||
const [authMessage, setAuthMessage] = useState<string>('');
|
||||
const [periodDate, setPeriodDate] = useState<{
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
dateField: string;
|
||||
}>({
|
||||
startDate: moment().subtract('7', 'days').format('YYYY-MM-DD'),
|
||||
endDate: moment().format('YYYY-MM-DD'),
|
||||
dateField: dateFieldMap[DateRangeType.DAY],
|
||||
});
|
||||
|
||||
const getMetricTrendData = async () => {
|
||||
setMetricTrendLoading(true);
|
||||
const { modelId, bizName, name } = nodeData;
|
||||
indicatorFields.current = [{ name, column: bizName }];
|
||||
const { code, data, msg } = await queryStruct({
|
||||
modelId,
|
||||
bizName,
|
||||
dateField: periodDate.dateField,
|
||||
startDate: periodDate.startDate,
|
||||
endDate: periodDate.endDate,
|
||||
});
|
||||
setMetricTrendLoading(false);
|
||||
if (code === 200) {
|
||||
const { resultList, columns, queryAuthorization } = data;
|
||||
setMetricTrendData(resultList);
|
||||
const message = queryAuthorization?.message;
|
||||
if (message) {
|
||||
setAuthMessage(message);
|
||||
}
|
||||
const targetConfig = columns.find((item: ISemantic.IMetricTrendColumn) => {
|
||||
return item.nameEn === bizName;
|
||||
});
|
||||
if (targetConfig) {
|
||||
setMetricColumnConfig(targetConfig);
|
||||
}
|
||||
} else {
|
||||
message.error(msg);
|
||||
setMetricTrendData([]);
|
||||
setMetricColumnConfig(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (nodeData.id && nodeData?.nodeType === SemanticNodeType.METRIC) {
|
||||
getMetricTrendData();
|
||||
}
|
||||
}, [nodeData, periodDate]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ marginBottom: 5 }}>
|
||||
<MDatePicker
|
||||
initialValues={{
|
||||
dateSettingType: 'DYNAMIC',
|
||||
dynamicParams: {
|
||||
number: 7,
|
||||
periodType: 'DAYS',
|
||||
includesCurrentPeriod: true,
|
||||
shortCutId: 'last7Days',
|
||||
dateRangeType: 'DAY',
|
||||
dynamicAdvancedConfigType: 'last',
|
||||
dateRangeStringDesc: '最近7天',
|
||||
dateSettingType: DateSettingType.DYNAMIC,
|
||||
},
|
||||
staticParams: {},
|
||||
}}
|
||||
onDateRangeChange={(value, config) => {
|
||||
const [startDate, endDate] = value;
|
||||
const { dateSettingType, dynamicParams, staticParams } = config;
|
||||
let dateField = dateFieldMap[DateRangeType.DAY];
|
||||
if (DateSettingType.DYNAMIC === dateSettingType) {
|
||||
dateField = dateFieldMap[dynamicParams.dateRangeType];
|
||||
}
|
||||
if (DateSettingType.STATIC === dateSettingType) {
|
||||
dateField = dateFieldMap[staticParams.dateRangeType];
|
||||
}
|
||||
setPeriodDate({ startDate, endDate, dateField });
|
||||
}}
|
||||
disabledAdvanceSetting={true}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ color: '#d46b08', marginBottom: 15 }}>指标存在如下权限问题: {authMessage}</div>
|
||||
<TrendChart
|
||||
data={metricTrendData}
|
||||
isPer={
|
||||
metricColumnConfig?.dataFormatType === 'percent' &&
|
||||
metricColumnConfig?.dataFormat?.needMultiply100 === false
|
||||
? true
|
||||
: false
|
||||
}
|
||||
isPercent={
|
||||
metricColumnConfig?.dataFormatType === 'percent' &&
|
||||
metricColumnConfig?.dataFormat?.needMultiply100 === true
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fields={indicatorFields.current}
|
||||
loading={metricTrendLoading}
|
||||
dateFieldName={periodDate.dateField}
|
||||
height={350}
|
||||
renderType="clear"
|
||||
decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricTrendSection;
|
||||
Reference in New Issue
Block a user