mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-14 22:25:19 +00:00
[feature](webapp) add copilot and modify domain to model
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import { PREFIX_CLS } from '../../../common/constants';
|
||||
|
||||
type Props = {
|
||||
domain: string;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
model: string;
|
||||
onApplyAuth?: (model: string) => void;
|
||||
};
|
||||
|
||||
const ApplyAuth: React.FC<Props> = ({ domain, onApplyAuth }) => {
|
||||
const ApplyAuth: React.FC<Props> = ({ model, onApplyAuth }) => {
|
||||
const prefixCls = `${PREFIX_CLS}-apply-auth`;
|
||||
|
||||
return (
|
||||
@@ -15,7 +15,7 @@ const ApplyAuth: React.FC<Props> = ({ domain, onApplyAuth }) => {
|
||||
<span
|
||||
className={`${prefixCls}-apply`}
|
||||
onClick={() => {
|
||||
onApplyAuth(domain);
|
||||
onApplyAuth(model);
|
||||
}}
|
||||
>
|
||||
点击申请
|
||||
|
||||
@@ -15,7 +15,7 @@ type Props = {
|
||||
drillDownDimension?: DrillDownDimensionType;
|
||||
loading: boolean;
|
||||
onSelectDimension: (dimension?: DrillDownDimensionType) => void;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
onApplyAuth?: (model: string) => void;
|
||||
};
|
||||
|
||||
const BarChart: React.FC<Props> = ({
|
||||
@@ -152,7 +152,7 @@ const BarChart: React.FC<Props> = ({
|
||||
if (metricColumn && !metricColumn?.authorized) {
|
||||
return (
|
||||
<NoPermissionChart
|
||||
domain={entityInfo?.domainInfo.name || ''}
|
||||
model={entityInfo?.modelInfo.name || ''}
|
||||
chartType="barChart"
|
||||
onApplyAuth={onApplyAuth}
|
||||
/>
|
||||
@@ -193,11 +193,9 @@ const BarChart: React.FC<Props> = ({
|
||||
<Spin spinning={loading}>
|
||||
<div className={`${prefixCls}-chart`} ref={chartRef} />
|
||||
</Spin>
|
||||
{(queryMode === 'METRIC_DOMAIN' ||
|
||||
queryMode === 'METRIC_FILTER' ||
|
||||
queryMode === 'METRIC_GROUPBY') && (
|
||||
{queryMode.includes('METRIC') && (
|
||||
<DrillDownDimensions
|
||||
domainId={chatContext.domainId}
|
||||
modelId={chatContext.modelId}
|
||||
drillDownDimension={drillDownDimension}
|
||||
dimensionFilters={chatContext.dimensionFilters}
|
||||
onSelectDimension={onSelectDimension}
|
||||
|
||||
@@ -26,7 +26,7 @@ const Message: React.FC<Props> = ({
|
||||
}) => {
|
||||
const prefixCls = `${PREFIX_CLS}-message`;
|
||||
|
||||
const { domainName, dateInfo, dimensionFilters } = chatContext || {};
|
||||
const { modelName, dateInfo, dimensionFilters } = chatContext || {};
|
||||
const { startDate, endDate } = dateInfo || {};
|
||||
|
||||
const entityInfoList =
|
||||
@@ -67,7 +67,7 @@ const Message: React.FC<Props> = ({
|
||||
<div className={`${prefixCls}-main-entity-info`}>
|
||||
<div className={`${prefixCls}-info-item`}>
|
||||
<div className={`${prefixCls}-info-name`}>主题域:</div>
|
||||
<div className={`${prefixCls}-info-value`}>{domainName}</div>
|
||||
<div className={`${prefixCls}-info-value`}>{modelName}</div>
|
||||
</div>
|
||||
<div className={`${prefixCls}-info-item`}>
|
||||
<div className={`${prefixCls}-info-name`}>时间:</div>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
&-domain-name {
|
||||
&-model-name {
|
||||
color: var(--text-color);
|
||||
margin-left: 4px;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -13,7 +13,7 @@ type Props = {
|
||||
drillDownDimension?: DrillDownDimensionType;
|
||||
loading: boolean;
|
||||
onSelectDimension: (dimension?: DrillDownDimensionType) => void;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
onApplyAuth?: (model: string) => void;
|
||||
};
|
||||
|
||||
const MetricCard: React.FC<Props> = ({
|
||||
@@ -64,7 +64,7 @@ const MetricCard: React.FC<Props> = ({
|
||||
<div className={indicatorClass}>
|
||||
<div className={`${prefixCls}-date-range`}>{startDate}</div>
|
||||
{indicatorColumn && !indicatorColumn?.authorized ? (
|
||||
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
|
||||
<ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />
|
||||
) : (
|
||||
<div className={`${prefixCls}-indicator-value`}>
|
||||
{formatMetric(queryResults?.[0]?.[indicatorColumnName]) || '-'}
|
||||
@@ -79,10 +79,10 @@ const MetricCard: React.FC<Props> = ({
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
{(queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') && (
|
||||
{queryMode.includes('METRIC') && (
|
||||
<div className={`${prefixCls}-drill-down-dimensions`}>
|
||||
<DrillDownDimensions
|
||||
domainId={chatContext.domainId}
|
||||
modelId={chatContext.modelId}
|
||||
dimensionFilters={chatContext.dimensionFilters}
|
||||
drillDownDimension={drillDownDimension}
|
||||
onSelectDimension={onSelectDimension}
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
|
||||
&-drill-down-dimensions {
|
||||
position: absolute;
|
||||
bottom: -44px;
|
||||
left: -16;
|
||||
bottom: -38px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@@ -14,17 +14,17 @@ import { ColumnType } from '../../../common/type';
|
||||
import NoPermissionChart from '../NoPermissionChart';
|
||||
|
||||
type Props = {
|
||||
domain?: string;
|
||||
model?: string;
|
||||
dateColumnName: string;
|
||||
categoryColumnName: string;
|
||||
metricField: ColumnType;
|
||||
resultList: any[];
|
||||
triggerResize?: boolean;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
onApplyAuth?: (model: string) => void;
|
||||
};
|
||||
|
||||
const MetricTrendChart: React.FC<Props> = ({
|
||||
domain,
|
||||
model,
|
||||
dateColumnName,
|
||||
categoryColumnName,
|
||||
metricField,
|
||||
@@ -204,7 +204,7 @@ const MetricTrendChart: React.FC<Props> = ({
|
||||
return (
|
||||
<div>
|
||||
{!metricField.authorized ? (
|
||||
<NoPermissionChart domain={domain || ''} onApplyAuth={onApplyAuth} />
|
||||
<NoPermissionChart model={model || ''} onApplyAuth={onApplyAuth} />
|
||||
) : (
|
||||
<div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />
|
||||
)}
|
||||
|
||||
@@ -15,7 +15,7 @@ type Props = {
|
||||
data: MsgDataType;
|
||||
chartIndex: number;
|
||||
triggerResize?: boolean;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
onApplyAuth?: (model: string) => void;
|
||||
};
|
||||
|
||||
const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApplyAuth }) => {
|
||||
@@ -36,6 +36,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
|
||||
const [currentDateOption, setCurrentDateOption] = useState<number>(initialDateOption);
|
||||
const [dimensions, setDimensions] = useState<FieldType[]>(chatContext?.dimensions);
|
||||
const [drillDownDimension, setDrillDownDimension] = useState<DrillDownDimensionType>();
|
||||
const [aggregateInfoValue, setAggregateInfoValue] = useState<any>(aggregateInfo);
|
||||
const [dateModeValue, setDateModeValue] = useState(dateMode);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -72,6 +73,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
|
||||
if (data.code === 200) {
|
||||
setColumns(data.data?.queryColumns || []);
|
||||
setDataSource(data.data?.queryResults || []);
|
||||
setAggregateInfoValue(data.data?.aggregateInfo);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -172,7 +174,9 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{aggregateInfo?.metricInfos?.length > 0 && <MetricInfo aggregateInfo={aggregateInfo} />}
|
||||
{aggregateInfoValue?.metricInfos?.length > 0 && (
|
||||
<MetricInfo aggregateInfo={aggregateInfoValue} />
|
||||
)}
|
||||
<div className={`${prefixCls}-date-options`}>
|
||||
{dateOptions.map((dateOption: { label: string; value: number }, index: number) => {
|
||||
const dateOptionClass = classNames(`${prefixCls}-date-option`, {
|
||||
@@ -205,7 +209,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
|
||||
<Table data={{ ...data, queryResults: dataSource }} onApplyAuth={onApplyAuth} />
|
||||
) : (
|
||||
<MetricTrendChart
|
||||
domain={entityInfo?.domainInfo.name}
|
||||
model={entityInfo?.modelInfo.name}
|
||||
dateColumnName={dateColumnName}
|
||||
categoryColumnName={categoryColumnName}
|
||||
metricField={currentMetricField}
|
||||
@@ -215,11 +219,9 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
{(queryMode === 'METRIC_DOMAIN' ||
|
||||
queryMode === 'METRIC_FILTER' ||
|
||||
queryMode === 'METRIC_GROUPBY') && (
|
||||
{queryMode.includes('METRIC') && (
|
||||
<DrillDownDimensions
|
||||
domainId={chatContext.domainId}
|
||||
modelId={chatContext.modelId}
|
||||
drillDownDimension={drillDownDimension}
|
||||
dimensionFilters={chatContext.dimensionFilters}
|
||||
onSelectDimension={onSelectDimension}
|
||||
|
||||
@@ -3,12 +3,12 @@ import { CLS_PREFIX } from '../../../common/constants';
|
||||
import ApplyAuth from '../ApplyAuth';
|
||||
|
||||
type Props = {
|
||||
domain: string;
|
||||
model: string;
|
||||
chartType?: string;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
onApplyAuth?: (model: string) => void;
|
||||
};
|
||||
|
||||
const NoPermissionChart: React.FC<Props> = ({ domain, chartType, onApplyAuth }) => {
|
||||
const NoPermissionChart: React.FC<Props> = ({ model, chartType, onApplyAuth }) => {
|
||||
const prefixCls = `${CLS_PREFIX}-no-permission-chart`;
|
||||
|
||||
const chartHolderClass = classNames(`${prefixCls}-holder`, {
|
||||
@@ -19,7 +19,7 @@ const NoPermissionChart: React.FC<Props> = ({ domain, chartType, onApplyAuth })
|
||||
<div className={prefixCls}>
|
||||
<div className={chartHolderClass} />
|
||||
<div className={`${prefixCls}-no-permission`}>
|
||||
<ApplyAuth domain={domain} onApplyAuth={onApplyAuth} />
|
||||
<ApplyAuth model={model} onApplyAuth={onApplyAuth} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -8,7 +8,7 @@ import { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
type Props = {
|
||||
data: MsgDataType;
|
||||
size?: SizeType;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
onApplyAuth?: (model: string) => void;
|
||||
};
|
||||
|
||||
const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
|
||||
@@ -24,9 +24,7 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
|
||||
title: name || nameEn,
|
||||
render: (value: string | number) => {
|
||||
if (!authorized) {
|
||||
return (
|
||||
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
|
||||
);
|
||||
return <ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />;
|
||||
}
|
||||
if (dataFormatType === 'percent') {
|
||||
return (
|
||||
@@ -71,7 +69,7 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
|
||||
columns={tableColumns}
|
||||
dataSource={queryResults}
|
||||
style={{ width: '100%' }}
|
||||
scroll={{ x: 'max-content' }}
|
||||
// scroll={{ x: 'max-content' }}
|
||||
rowClassName={getRowClassName}
|
||||
size={size}
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
@table-prefix-cls: ~'@{supersonic-chat-prefix}-table';
|
||||
|
||||
.@{table-prefix-cls} {
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&-photo {
|
||||
|
||||
@@ -35,10 +35,15 @@ const ChatMsg: React.FC<Props> = ({ question, data, chartIndex, isMobileMode, tr
|
||||
const metricFields = columns.filter(item => item.showType === 'NUMBER');
|
||||
|
||||
const isMetricCard =
|
||||
(queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') &&
|
||||
queryMode.includes('METRIC') &&
|
||||
(singleData || chatContext?.dateInfo?.startDate === chatContext?.dateInfo?.endDate);
|
||||
|
||||
const isText = columns.length === 1 && columns[0].showType === 'CATEGORY' && singleData;
|
||||
const isText =
|
||||
columns.length === 1 &&
|
||||
columns[0].showType === 'CATEGORY' &&
|
||||
!queryMode.includes('METRIC') &&
|
||||
!queryMode.includes('ENTITY') &&
|
||||
singleData;
|
||||
|
||||
const onLoadData = async (value: any) => {
|
||||
setLoading(true);
|
||||
|
||||
Reference in New Issue
Block a user