mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-10 19:51:00 +00:00
[improvement][semantic-fe] UI optimization for metric details page. (#610)
* [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 * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page.
This commit is contained in:
tristanliu
@@ -143,6 +143,15 @@ export const layout: RunTimeLayoutConfig = (params) => {
|
||||
menuHeaderRender: undefined,
|
||||
childrenRender: (dom: any) => {
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
colorPrimary: '#3182ce',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ height: location.pathname.includes('chat') ? 'calc(100vh - 56px)' : undefined }}
|
||||
>
|
||||
@@ -151,6 +160,7 @@ export const layout: RunTimeLayoutConfig = (params) => {
|
||||
<Copilot token={getToken() || ''} isDeveloper />
|
||||
)}
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
},
|
||||
...initialState?.settings,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.collectDashboard {
|
||||
color: #546174;
|
||||
color: #faad14;
|
||||
&.dashboardCollected {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@@ -1,23 +1,14 @@
|
||||
import { message, Tag, Space, Layout, Tabs, Tooltip } from 'antd';
|
||||
import React, { useState, useEffect, ReactNode } from 'react';
|
||||
import { message } from 'antd';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { getMetricData } from '../service';
|
||||
import { connect, useParams, history } from 'umi';
|
||||
import { connect, useParams } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
LeftOutlined,
|
||||
UserOutlined,
|
||||
CalendarOutlined,
|
||||
InfoCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import styles from './style.less';
|
||||
import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
|
||||
import type { TabsProps } from 'antd';
|
||||
import { ISemantic } from '../data';
|
||||
import MetricStar from './components/MetricStar';
|
||||
import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
|
||||
import MetricInfoSider from './MetricInfoSider';
|
||||
|
||||
const { Content } = Layout;
|
||||
type Props = {
|
||||
metircData: any;
|
||||
domainManger: StateType;
|
||||
@@ -26,27 +17,18 @@ type Props = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
interface DescriptionItemProps {
|
||||
title: string | ReactNode;
|
||||
content: React.ReactNode;
|
||||
icon: ReactNode;
|
||||
}
|
||||
|
||||
const DescriptionItem = ({ title, content, icon }: DescriptionItemProps) => (
|
||||
<Tooltip title={title}>
|
||||
<div style={{ width: 'max-content', fontSize: 14, color: '#546174' }}>
|
||||
<Space>
|
||||
<span style={{ width: 'max-content' }}>{icon}</span>
|
||||
{content}
|
||||
</Space>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
const siderStyle: React.CSSProperties = {
|
||||
backgroundColor: '#fff',
|
||||
width: 450,
|
||||
minHeight: '100vh',
|
||||
boxShadow:
|
||||
'6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05)',
|
||||
};
|
||||
|
||||
const MetricDetail: React.FC<Props> = ({ domainManger }) => {
|
||||
const params: any = useParams();
|
||||
const metricId = params.metricId;
|
||||
|
||||
const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
|
||||
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
|
||||
useEffect(() => {
|
||||
queryMetricData(metricId);
|
||||
@@ -55,104 +37,41 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
|
||||
const queryMetricData = async (metricId: string) => {
|
||||
const { code, data, msg } = await getMetricData(metricId);
|
||||
if (code === 200) {
|
||||
setMetircData(data);
|
||||
setMetircData({ ...data });
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const tabItems: TabsProps['items'] = [
|
||||
{
|
||||
key: 'metricTrend',
|
||||
label: '图表',
|
||||
children: <MetricTrendSection metircData={metircData} />,
|
||||
},
|
||||
];
|
||||
|
||||
const contentStyle: React.CSSProperties = {
|
||||
minHeight: 120,
|
||||
color: '#fff',
|
||||
backgroundColor: '#fff',
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout className={styles.metricDetail}>
|
||||
<Layout>
|
||||
<Content style={contentStyle}>
|
||||
<h2 className={styles.title}>
|
||||
<div className={styles.titleLeft}>
|
||||
<div
|
||||
className={styles.backBtn}
|
||||
onClick={() => {
|
||||
history.push(`/metric/market`);
|
||||
}}
|
||||
>
|
||||
<LeftOutlined />
|
||||
</div>
|
||||
|
||||
<div className={styles.navContainer}>
|
||||
<Space>
|
||||
<MetricStar metricId={metricId} initState={metircData?.isCollect} />
|
||||
<span style={{ color: '#296DF3' }}>
|
||||
{metircData?.name}
|
||||
{metircData?.alias && `[${metircData.alias}]`}
|
||||
</span>
|
||||
{metircData?.name && (
|
||||
<>
|
||||
<span style={{ position: 'relative', top: '-2px', color: '#c3c3c3' }}>|</span>
|
||||
<span style={{ fontSize: 16, color: '#296DF3' }}>{metircData?.bizName}</span>
|
||||
</>
|
||||
)}
|
||||
{metircData?.sensitiveLevel !== undefined && (
|
||||
<span style={{ position: 'relative', top: '-2px' }}>
|
||||
<Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
|
||||
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
|
||||
</Tag>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
{metircData?.description ? (
|
||||
<div className={styles.description}>
|
||||
<Tooltip title="指标描述">
|
||||
<Space>
|
||||
<InfoCircleOutlined />
|
||||
{metircData?.description}
|
||||
</Space>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.titleRight}>
|
||||
{metircData?.createdBy ? (
|
||||
<>
|
||||
<div className={styles.info}>
|
||||
<DescriptionItem
|
||||
title="创建人"
|
||||
icon={<UserOutlined />}
|
||||
content={metircData?.createdBy}
|
||||
/>
|
||||
|
||||
<DescriptionItem
|
||||
title="更新时间"
|
||||
icon={<CalendarOutlined />}
|
||||
content={moment(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</h2>
|
||||
<>
|
||||
<div className={styles.metricDetailWrapper}>
|
||||
<div className={styles.metricDetail}>
|
||||
<div className={styles.tabContainer}>
|
||||
<Tabs defaultActiveKey="metricTrend" items={tabItems} size="large" />
|
||||
<MetricTrendSection metircData={metircData} />
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<div style={siderStyle}>
|
||||
<MetricInfoSider
|
||||
onDimensionRelationBtnClick={() => {
|
||||
setMetricRelationModalOpenState(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DimensionAndMetricRelationModal
|
||||
metricItem={metircData}
|
||||
relationsInitialValue={metircData?.relateDimension?.drillDownDimensions}
|
||||
open={metricRelationModalOpenState}
|
||||
onCancel={() => {
|
||||
setMetricRelationModalOpenState(false);
|
||||
}}
|
||||
onSubmit={(relations) => {
|
||||
queryMetricData(metricId);
|
||||
setMetricRelationModalOpenState(false);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
import { message, Tag, Space, Tooltip } from 'antd';
|
||||
import React, { useState, useEffect, ReactNode } from 'react';
|
||||
import { getMetricData } from '../service';
|
||||
import { connect, useParams } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
ExportOutlined,
|
||||
SolutionOutlined,
|
||||
ContainerOutlined,
|
||||
PartitionOutlined,
|
||||
FallOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import styles from './style.less';
|
||||
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
|
||||
import { ISemantic } from '../data';
|
||||
import MetricStar from './components/MetricStar';
|
||||
|
||||
type Props = {
|
||||
metircData: any;
|
||||
domainManger: StateType;
|
||||
onNodeChange: (params?: { eventName?: string }) => void;
|
||||
onEditBtnClick?: (metircData: any) => void;
|
||||
onDimensionRelationBtnClick?: () => void;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
|
||||
const params: any = useParams();
|
||||
const metricId = params.metricId;
|
||||
|
||||
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
|
||||
useEffect(() => {
|
||||
queryMetricData(metricId);
|
||||
}, [metricId]);
|
||||
|
||||
const queryMetricData = async (metricId: string) => {
|
||||
const { code, data, msg } = await getMetricData(metricId);
|
||||
if (code === 200) {
|
||||
setMetircData(data);
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.metricInfoSider}>
|
||||
<div className={styles.title}>
|
||||
<div className={styles.name}>
|
||||
<Space>
|
||||
<MetricStar metricId={metricId} initState={metircData?.isCollect} />
|
||||
{metircData?.name}
|
||||
{metircData?.alias && `[${metircData.alias}]`}
|
||||
{metircData?.hasAdminRes && (
|
||||
<span
|
||||
className={styles.gotoMetricListIcon}
|
||||
onClick={() => {
|
||||
window.open(`/webapp/model/${metircData.domainId}/${metircData.modelId}/`);
|
||||
}}
|
||||
>
|
||||
<Tooltip title="前往所属模型指标列表">
|
||||
<ExportOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{metircData?.sensitiveLevel !== undefined && (
|
||||
<span style={{ marginLeft: 25 }}>
|
||||
<Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
|
||||
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
|
||||
</Tag>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
{metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
|
||||
</div>
|
||||
|
||||
<div className={styles.sectionContainer}>
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionTitleBox}>
|
||||
<span className={styles.sectionTitle}>
|
||||
<Space>
|
||||
<ContainerOutlined />
|
||||
基本信息
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>所属模型: </span>
|
||||
<span className={styles.itemValue}>
|
||||
<Space>
|
||||
<Tag icon={<PartitionOutlined />} color="#3b5999">
|
||||
{metircData?.modelName || '模型名为空'}
|
||||
</Tag>
|
||||
{metircData?.hasAdminRes && (
|
||||
<span
|
||||
className={styles.gotoMetricListIcon}
|
||||
onClick={() => {
|
||||
window.open(`/webapp/model/${metircData.domainId}/0/overview`);
|
||||
}}
|
||||
>
|
||||
<Tooltip title="前往模型设置页">
|
||||
<ExportOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>描述: </span>
|
||||
<span className={styles.itemValue}>{metircData?.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionTitleBox}>
|
||||
<span className={styles.sectionTitle}>
|
||||
<Space>
|
||||
<SolutionOutlined />
|
||||
创建信息
|
||||
</Space>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>创建人: </span>
|
||||
<span className={styles.itemValue}>{metircData?.createdBy}</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>创建时间: </span>
|
||||
<span className={styles.itemValue}>
|
||||
{metircData?.createdAt
|
||||
? dayjs(metircData?.createdAt).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<span className={styles.itemLable}>更新时间: </span>
|
||||
<span className={styles.itemValue}>
|
||||
{metircData?.createdAt
|
||||
? dayjs(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr className={styles.hr} />
|
||||
<div className={styles.ctrlBox}>
|
||||
<ul className={styles.ctrlList}>
|
||||
<li
|
||||
onClick={() => {
|
||||
onDimensionRelationBtnClick?.();
|
||||
}}
|
||||
>
|
||||
<Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
|
||||
<Space style={{ width: '100%' }}>
|
||||
<span className={styles.ctrlItemIcon}>
|
||||
<FallOutlined />
|
||||
</span>
|
||||
<span className={styles.ctrlItemLable}>下钻维度配置</span>
|
||||
</Space>
|
||||
</Tooltip>
|
||||
</li>
|
||||
{/* <li
|
||||
onClick={() => {
|
||||
onDimensionRelationBtnClick?.();
|
||||
}}
|
||||
>
|
||||
<Space style={{ width: '100%' }}>
|
||||
<span className={styles.ctrlItemIcon}>
|
||||
<DeleteOutlined />
|
||||
</span>
|
||||
<span className={styles.ctrlItemLable}>删除</span>
|
||||
</Space>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(MetricInfoSider);
|
||||
@@ -251,7 +251,7 @@ const TrendChart: React.FC<Props> = ({
|
||||
<Skeleton
|
||||
className={styles.chart}
|
||||
style={{ height, display: loading ? 'table' : 'none' }}
|
||||
paragraph={{ rows: height && height > 300 ? 15 : 6 }}
|
||||
paragraph={{ rows: height && height > 300 ? 10 : 6 }}
|
||||
/>
|
||||
<div
|
||||
className={styles.chart}
|
||||
|
||||
@@ -5,23 +5,12 @@ import {
|
||||
getDrillDownDimension,
|
||||
getDimensionList,
|
||||
} from '@/pages/SemanticModel/service';
|
||||
import {
|
||||
InfoCircleOutlined,
|
||||
LineChartOutlined,
|
||||
TableOutlined,
|
||||
DownloadOutlined,
|
||||
PoweroffOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { InfoCircleOutlined, DownloadOutlined, PoweroffOutlined } from '@ant-design/icons';
|
||||
import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
|
||||
import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
|
||||
import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
|
||||
import MDatePicker from '@/components/MDatePicker';
|
||||
import {
|
||||
DateRangeType,
|
||||
DateSettingType,
|
||||
DynamicAdvancedConfigType,
|
||||
DatePeriodType,
|
||||
} from '@/components/MDatePicker/type';
|
||||
import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
|
||||
import { getDatePickerDynamicInitialValues } from '@/components/MDatePicker/utils';
|
||||
import StandardFormRow from '@/components/StandardFormRow';
|
||||
import MetricTable from './Table';
|
||||
@@ -29,9 +18,11 @@ import { ColumnConfig } from '../data';
|
||||
import dayjs from 'dayjs';
|
||||
import { ISemantic } from '../../data';
|
||||
import { DateFieldMap } from '@/pages/SemanticModel/constant';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
|
||||
import styles from '../style.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { Option } = Select;
|
||||
|
||||
type Props = {
|
||||
metircData?: ISemantic.IMetricItem;
|
||||
@@ -191,11 +182,11 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
|
||||
initDimensionData(metircData);
|
||||
setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
|
||||
}
|
||||
}, [metircData?.id, periodDate]);
|
||||
}, [metircData, periodDate]);
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#fff', marginTop: 20 }}>
|
||||
<div style={{ marginBottom: 25 }}>
|
||||
<div className={styles.metricTrendSection}>
|
||||
<div className={styles.sectionBox}>
|
||||
<Row>
|
||||
<Col flex="1 1 200px">
|
||||
<Form
|
||||
@@ -276,159 +267,83 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
|
||||
</StandardFormRow>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col flex="0 1">
|
||||
<Space>
|
||||
{metircData?.hasAdminRes && (
|
||||
<Button
|
||||
type="primary"
|
||||
key="addDimension"
|
||||
onClick={() => {
|
||||
setMetricRelationModalOpenState(true);
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
下钻维度配置
|
||||
<Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
|
||||
<InfoCircleOutlined />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Space.Compact block>
|
||||
<Button
|
||||
type="primary"
|
||||
key="download"
|
||||
loading={downloadLoding}
|
||||
disabled={downloadBtnDisabledState}
|
||||
onClick={() => {
|
||||
getMetricTrendData({ download: true, ...queryParams });
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<DownloadOutlined />
|
||||
下载
|
||||
</Space>
|
||||
</Button>
|
||||
|
||||
<Tooltip title="开启转置">
|
||||
<Button
|
||||
type={transformState ? 'primary' : 'default'}
|
||||
icon={<PoweroffOutlined />}
|
||||
onClick={() => {
|
||||
setTransformState(!transformState);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col flex="0 1" />
|
||||
</Row>
|
||||
</div>
|
||||
{authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col flex="1 1 300px">
|
||||
<Radio.Group
|
||||
size="small"
|
||||
buttonStyle="solid"
|
||||
options={[
|
||||
{
|
||||
label: (
|
||||
<Tooltip title="折线图">
|
||||
<LineChartOutlined />
|
||||
</Tooltip>
|
||||
),
|
||||
value: 'chart',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<Tooltip title="表格">
|
||||
<TableOutlined />
|
||||
</Tooltip>
|
||||
),
|
||||
value: 'table',
|
||||
},
|
||||
]}
|
||||
onChange={(e) => {
|
||||
setChartType(e.target.value);
|
||||
}}
|
||||
value={chartType}
|
||||
optionType="button"
|
||||
<div className={styles.sectionBox}>
|
||||
<ProCard size="small" title="数据趋势">
|
||||
<TrendChart
|
||||
data={metricTrendData}
|
||||
isPer={
|
||||
metricColumnConfig?.dataFormatType === 'percent' &&
|
||||
metricColumnConfig?.dataFormat?.needMultiply100 === false
|
||||
? true
|
||||
: false
|
||||
}
|
||||
isPercent={
|
||||
metricColumnConfig?.dataFormatType === 'percent' &&
|
||||
metricColumnConfig?.dataFormat?.needMultiply100 === true
|
||||
? true
|
||||
: false
|
||||
}
|
||||
rowNumber={rowNumber}
|
||||
fields={indicatorFields.current}
|
||||
loading={metricTrendLoading}
|
||||
dateFieldName={periodDate.dateField}
|
||||
groupByDimensionFieldName={groupByDimensionFieldName}
|
||||
height={400}
|
||||
renderType="clear"
|
||||
decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
|
||||
/>
|
||||
{/* <Space>
|
||||
<Select
|
||||
style={{ minWidth: 150, maxWidth: 200 }}
|
||||
options={showDimensionOptions}
|
||||
value={groupByDimensionFieldName}
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
placeholder="展示维度切换"
|
||||
onChange={(value) => {
|
||||
setGroupByDimensionFieldName(value);
|
||||
}}
|
||||
</ProCard>
|
||||
</div>
|
||||
|
||||
<div className={styles.sectionBox}>
|
||||
<ProCard
|
||||
size="small"
|
||||
title="源数据"
|
||||
collapsible
|
||||
extra={
|
||||
<Space.Compact block>
|
||||
<Button
|
||||
size="middle"
|
||||
type="primary"
|
||||
key="download"
|
||||
loading={downloadLoding}
|
||||
disabled={downloadBtnDisabledState}
|
||||
onClick={() => {
|
||||
getMetricTrendData({ download: true, ...queryParams });
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<DownloadOutlined />下 载
|
||||
</Space>
|
||||
</Button>
|
||||
|
||||
<Tooltip title="开启转置">
|
||||
<Button
|
||||
size="middle"
|
||||
type={transformState ? 'primary' : 'default'}
|
||||
icon={<PoweroffOutlined />}
|
||||
onClick={() => {
|
||||
setTransformState(!transformState);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space.Compact>
|
||||
}
|
||||
>
|
||||
<div style={{ minHeight: '528px' }}>
|
||||
<MetricTable
|
||||
loading={metricTrendLoading}
|
||||
columnConfig={tableColumnConfig}
|
||||
dataSource={metricTrendData}
|
||||
dateFieldName={periodDate.dateField}
|
||||
metricFieldName={indicatorFields.current?.[0]?.column}
|
||||
/>
|
||||
</Space> */}
|
||||
</Col>
|
||||
<Col flex="0 1 100px">
|
||||
<Space>
|
||||
<Select
|
||||
defaultValue={rowNumber}
|
||||
style={{
|
||||
width: 120,
|
||||
display:
|
||||
Array.isArray(queryParams.dimensionGroup) &&
|
||||
queryParams.dimensionGroup.length > 0 &&
|
||||
chartType === 'chart'
|
||||
? 'block'
|
||||
: 'none',
|
||||
}}
|
||||
onChange={(value) => {
|
||||
setRowNumber(value);
|
||||
}}
|
||||
>
|
||||
<Option value={5}>前5项</Option>
|
||||
<Option value={10}>前10项</Option>
|
||||
<Option value={15}>前15项</Option>
|
||||
<Option value={20}>前20项</Option>
|
||||
</Select>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
{chartType === 'chart' && (
|
||||
<TrendChart
|
||||
data={metricTrendData}
|
||||
isPer={
|
||||
metricColumnConfig?.dataFormatType === 'percent' &&
|
||||
metricColumnConfig?.dataFormat?.needMultiply100 === false
|
||||
? true
|
||||
: false
|
||||
}
|
||||
isPercent={
|
||||
metricColumnConfig?.dataFormatType === 'percent' &&
|
||||
metricColumnConfig?.dataFormat?.needMultiply100 === true
|
||||
? true
|
||||
: false
|
||||
}
|
||||
rowNumber={rowNumber}
|
||||
fields={indicatorFields.current}
|
||||
loading={metricTrendLoading}
|
||||
dateFieldName={periodDate.dateField}
|
||||
groupByDimensionFieldName={groupByDimensionFieldName}
|
||||
height={500}
|
||||
renderType="clear"
|
||||
decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
|
||||
/>
|
||||
)}
|
||||
<div style={{ display: chartType === 'table' ? 'block' : 'none', marginBottom: 45 }}>
|
||||
<MetricTable
|
||||
loading={metricTrendLoading}
|
||||
columnConfig={tableColumnConfig}
|
||||
dataSource={metricTrendData}
|
||||
dateFieldName={periodDate.dateField}
|
||||
metricFieldName={indicatorFields.current?.[0]?.column}
|
||||
/>
|
||||
</div>
|
||||
</ProCard>
|
||||
</div>
|
||||
|
||||
<DimensionAndMetricRelationModal
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
line-height: 1.5714285714285714;
|
||||
list-style: none;
|
||||
.extraTitle {
|
||||
font-size: 12px;
|
||||
// font-size: 12px;
|
||||
min-width: 50px;
|
||||
margin-inline-end: 6px;
|
||||
margin-block-end: 0;
|
||||
@@ -116,80 +116,231 @@
|
||||
}
|
||||
}
|
||||
|
||||
.metricDetail {
|
||||
height: calc(100vh - 50px);
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
margin-top:0;
|
||||
background-color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
display: flex;
|
||||
.titleLeft {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
.navContainer {
|
||||
// display: flex;
|
||||
padding: 20px;
|
||||
padding-left: 30px;
|
||||
.description {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
padding-top: 12px;
|
||||
color: #546174
|
||||
}
|
||||
}
|
||||
.backBtn {
|
||||
background-color: #f8f8f8;
|
||||
padding: 5px;
|
||||
color: #b0b4bc;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
&:hover {
|
||||
background-color: #7599e5;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.titleRight {
|
||||
display: flex;
|
||||
flex: 0 1 200px;
|
||||
.info {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabContainer {
|
||||
background-color: #fff;
|
||||
padding: 0px 40px;
|
||||
}
|
||||
.metricInfoContent {
|
||||
padding:25px;
|
||||
.title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
color: #0e73ff;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -10px;
|
||||
top: 10px;
|
||||
height: 14px;
|
||||
width: 3px;
|
||||
font-size: 0;
|
||||
background: #0e73ff;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0e73ff;
|
||||
.metricDetailWrapper {
|
||||
height: calc(100vh - 56px);
|
||||
overflow: scroll;
|
||||
.metricDetail {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
.tabContainer {
|
||||
background-color: rgb(240, 242, 245);
|
||||
width: calc(100vw - 450px);
|
||||
}
|
||||
.metricInfoContent {
|
||||
padding:25px;
|
||||
.title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
color: #0e73ff;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -10px;
|
||||
top: 10px;
|
||||
height: 14px;
|
||||
width: 3px;
|
||||
font-size: 0;
|
||||
background: #0e73ff;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0e73ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.metricTrendSection {
|
||||
.sectionBox {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
border-radius: 6px;
|
||||
background-image: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.metricInfoSider{
|
||||
padding: 24px;
|
||||
color: #344767;
|
||||
.gotoMetricListIcon {
|
||||
color: #3182ce;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #5493ff;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
.name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.bizName {
|
||||
margin: 5px 0 0 25px;
|
||||
color: #7b809a;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.9;
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
color: #7b809a;
|
||||
}
|
||||
.sectionContainer{
|
||||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
border-radius: 6px;
|
||||
box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
|
||||
background-image: none;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
.section {
|
||||
padding: 16px;
|
||||
line-height: 1.25;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
color: rgb(52, 71, 103);
|
||||
box-shadow: none;
|
||||
.sectionTitleBox {
|
||||
padding: 8px 0;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
color: rgb(52, 71, 103);
|
||||
box-shadow: none;
|
||||
.sectionTitle {
|
||||
margin: 0px;
|
||||
font-size: 16px;
|
||||
line-height: 1.625;
|
||||
letter-spacing: 0.0075em;
|
||||
opacity: 1;
|
||||
text-transform: capitalize;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: rgb(52, 71, 103);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.subTitle {
|
||||
margin: 0px;
|
||||
font-family: Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.03333em;
|
||||
opacity: 1;
|
||||
text-transform: uppercase;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: rgb(123, 128, 154);
|
||||
font-weight: 700;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-right: 16px;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
color: rgb(52, 71, 103);
|
||||
box-shadow: none;
|
||||
.itemLable {
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.02857em;
|
||||
opacity: 1;
|
||||
text-transform: capitalize;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: #344767;
|
||||
margin-right: 10px;
|
||||
min-width: fit-content;
|
||||
font-weight: 700;
|
||||
}
|
||||
.itemValue{
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.02857em;
|
||||
opacity: 1;
|
||||
text-transform: none;
|
||||
vertical-align: unset;
|
||||
text-decoration: none;
|
||||
color: #7b809a;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hr {
|
||||
margin: 0px;
|
||||
flex-shrink: 0;
|
||||
border-width: 0px 0px thin;
|
||||
border-style: solid;
|
||||
border-color: rgb(242, 244, 247);
|
||||
}
|
||||
.ctrlBox{
|
||||
.ctrlList{
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 8px 0px;
|
||||
position: relative;
|
||||
background-color: rgb(249, 250, 251);
|
||||
li {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: transparent;
|
||||
outline: 0px;
|
||||
border: 0px;
|
||||
margin: 4px;
|
||||
border-radius: 0px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
appearance: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
min-width: 0px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
padding: 4px 16px;
|
||||
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: rgba(16, 24, 40, 0.04);
|
||||
color: #3182ce;
|
||||
}
|
||||
}
|
||||
.ctrlItemIcon {
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
min-width: unset;
|
||||
}
|
||||
.styles.ctrlItemLable {
|
||||
margin: 0px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user