topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-14 22:25:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[feature](webapp) upgrade agent

Browse Source
This commit is contained in:
williamhliu
2023-09-04 11:46:36 +08:00
parent 559ef974b0
commit d5c5c63a75
50 changed files with 1334 additions and 1897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx
View File

@@ -1,5 +1,5 @@
import { PREFIX_CLS } from '../../../common/constants';
import { formatMetric, formatNumberWithCN } from '../../../utils/utils';
import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils';
import ApplyAuth from '../ApplyAuth';
import { DrillDownDimensionType, MsgDataType } from '../../../common/type';
import PeriodCompareItem from './PeriodCompareItem';
@@ -27,12 +27,13 @@ const MetricCard: React.FC<Props> = ({
const { queryMode, queryColumns, queryResults, entityInfo, aggregateInfo, chatContext } = data;
const { metricInfos } = aggregateInfo || {};
const { dateInfo } = chatContext || {};
const { startDate } = dateInfo || {};
const indicatorColumn = queryColumns?.find(column => column.showType === 'NUMBER');
const indicatorColumnName = indicatorColumn?.nameEn || '';
const { dataFormatType, dataFormat } = indicatorColumn || {};
const value = queryResults?.[0]?.[indicatorColumnName] || 0;
const prefixCls = `${PREFIX_CLS}-metric-card`;
const matricCardClass = classNames(prefixCls, {
@@ -54,7 +55,7 @@ const MetricCard: React.FC<Props> = ({
{indicatorColumn?.name ? (
<div className={`${prefixCls}-indicator-name`}>{indicatorColumn?.name}</div>
) : (
<div style={{ height: 6 }} />
<div style={{ height: 10 }} />
)}
{drillDownDimension && (
<div className={`${prefixCls}-filter-section-wrapper`}>
@@ -73,19 +74,25 @@ const MetricCard: React.FC<Props> = ({
</div>
<Spin spinning={loading}>
<div className={indicatorClass}>
<div className={`${prefixCls}-date-range`}>{startDate}</div>
{indicatorColumn && !indicatorColumn?.authorized ? (
<ApplyAuth model={entityInfo?.modelInfo.name || ''} onApplyAuth={onApplyAuth} />
) : (
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
<div className={`${prefixCls}-indicator-value`}>
{isNumber
? formatMetric(queryResults?.[0]?.[indicatorColumnName]) || '-'
: formatNumberWithCN(+queryResults?.[0]?.[indicatorColumnName])}
</div>
<div className={`${prefixCls}-indicator-switch`}>
<SwapOutlined onClick={handleNumberClick} />
{dataFormatType === 'percent' || dataFormatType === 'decimal'
? `${formatByDecimalPlaces(
dataFormat?.needMultiply100 ? +value * 100 : value,
dataFormat?.decimalPlaces || 2
)}${dataFormatType === 'percent' ? '%' : ''}`
: isNumber
? formatMetric(value) || '-'
: formatNumberWithCN(+value)}
</div>
{!isNaN(+value) && +value >= 10000 && (
<div className={`${prefixCls}-indicator-switch`}>
<SwapOutlined onClick={handleNumberClick} />
</div>
)}
</div>
)}
{metricInfos?.length > 0 && (
@@ -100,8 +107,8 @@ const MetricCard: React.FC<Props> = ({
{queryMode.includes('METRIC') && (
<div className={`${prefixCls}-drill-down-dimensions`}>
<DrillDownDimensions
modelId={chatContext.modelId}
dimensionFilters={chatContext.dimensionFilters}
modelId={chatContext?.modelId}
dimensionFilters={chatContext?.dimensionFilters}
drillDownDimension={drillDownDimension}
onSelectDimension={onSelectDimension}
/>

1
webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/style.less
View File

@@ -4,7 +4,6 @@
.@{metric-card-prefix-cls} {
width: 100%;
height: 162px;
row-gap: 4px;
&-dsl {

25
webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx
View File

@@ -1,18 +1,20 @@
import { PREFIX_CLS } from '../../../common/constants';
import { formatMetric, formatNumberWithCN } from '../../../utils/utils';
import { AggregateInfoType } from '../../../common/type';
import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils';
import { AggregateInfoType, ColumnType } from '../../../common/type';
import PeriodCompareItem from '../MetricCard/PeriodCompareItem';
import { SwapOutlined } from '@ant-design/icons';
import { useState } from 'react';
type Props = {
aggregateInfo: AggregateInfoType;
currentMetricField: ColumnType;
};
const MetricInfo: React.FC<Props> = ({ aggregateInfo }) => {
const MetricInfo: React.FC<Props> = ({ aggregateInfo, currentMetricField }) => {
const { metricInfos } = aggregateInfo || {};
const metricInfo = metricInfos?.[0] || {};
const { date, value, statistics } = metricInfo || {};
const { dataFormatType, dataFormat } = currentMetricField;
const prefixCls = `${PREFIX_CLS}-metric-info`;
@@ -26,11 +28,20 @@ const MetricInfo: React.FC<Props> = ({ aggregateInfo }) => {
<div className={`${prefixCls}-indicator`}>
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
<div className={`${prefixCls}-indicator-value`}>
{isNumber ? formatMetric(value) : formatNumberWithCN(+value)}
</div>
<div className={`${prefixCls}-indicator-switch`}>
<SwapOutlined onClick={handleNumberClick} />
{dataFormatType === 'percent' || dataFormatType === 'decimal'
? `${formatByDecimalPlaces(
dataFormat?.needMultiply100 ? +value * 100 : value,
dataFormat?.decimalPlaces || 2
)}${dataFormatType === 'percent' ? '%' : ''}`
: isNumber
? formatMetric(value)
: formatNumberWithCN(+value)}
</div>
{!isNaN(+value) && +value >= 10000 && (
<div className={`${prefixCls}-indicator-switch`}>
<SwapOutlined onClick={handleNumberClick} />
</div>
)}
</div>
<div className={`${prefixCls}-bottom-section`}>
<div className={`${prefixCls}-date`}>

8
webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
View File

@@ -147,11 +147,12 @@ const MetricTrendChart: React.FC<Props> = ({
}</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
item.value === ''
? '-'
: metricField.dataFormatType === 'percent'
: metricField.dataFormatType === 'percent' ||
metricField.dataFormatType === 'decimal'
? `${formatByDecimalPlaces(
item.value,
metricField.dataFormat?.decimalPlaces || 2
)}%`
)}${metricField.dataFormatType === 'percent' ? '%' : ''}`
: getFormattedValue(item.value)
}</span></div>`
)
@@ -176,7 +177,8 @@ const MetricTrendChart: React.FC<Props> = ({
smooth: true,
data: data.map((item: any) => {
const value = item[valueColumnName];
return metricField.dataFormatType === 'percent' &&
return (metricField.dataFormatType === 'percent' ||
metricField.dataFormatType === 'decimal') &&
metricField.dataFormat?.needMultiply100
? value * 100
: value;

5
webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
View File

@@ -177,7 +177,10 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
<Spin spinning={loading}>
<div className={`${prefixCls}-content`}>
{!isMobile && aggregateInfoValue?.metricInfos?.length > 0 && (
<MetricInfo aggregateInfo={aggregateInfoValue} />
<MetricInfo
aggregateInfo={aggregateInfoValue}
currentMetricField={currentMetricField}
/>
)}
<div className={`${prefixCls}-date-options`}>
{dateOptions.map((dateOption: { label: string; value: number }, index: number) => {

4
webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/style.less
View File

@@ -92,7 +92,7 @@
display: flex;
flex-direction: column;
width: 100%;
row-gap: 4px;
row-gap: 8px;
}
&-metric-fields {
@@ -198,7 +198,7 @@
&-indicator-value {
color: var(--text-color);
font-weight: 500;
font-size: 36px;
font-size: 28px;
line-height: 40px;
margin-top: 2px;
color: var(--text-color-secondary);

18
webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
View File

@@ -1,4 +1,3 @@
import { isMobile } from '../../utils/utils';
import Bar from './Bar';
import MetricCard from './MetricCard';
import MetricTrend from './MetricTrend';
@@ -10,14 +9,12 @@ import classNames from 'classnames';
import { PREFIX_CLS } from '../../common/constants';
type Props = {
question: string;
data: MsgDataType;
chartIndex: number;
isMobileMode?: boolean;
triggerResize?: boolean;
};
const ChatMsg: React.FC<Props> = ({ question, data, chartIndex, isMobileMode, triggerResize }) => {
const ChatMsg: React.FC<Props> = ({ data, chartIndex, triggerResize }) => {
const { queryColumns, queryResults, chatContext, queryMode } = data;
const [columns, setColumns] = useState<ColumnType[]>(queryColumns);
@@ -169,19 +166,6 @@ const ChatMsg: React.FC<Props> = ({ question, data, chartIndex, isMobileMode, tr
return <Table data={{ ...data, queryColumns: columns, queryResults: dataSource }} />;
};
// let width = '100%';
// if (isText) {
// width = 'fit-content';
// } else if (isMetricCard) {
// width = isDslMetricCard ? '290px' : '370px';
// } else if (categoryField.length > 1 && !isMobile && !isMobileMode) {
// if (columns.length === 1) {
// width = '600px';
// } else if (columns.length === 2) {
// width = '1000px';
// }
// }
const chartMsgClass = classNames({ [prefixCls]: !isTable });
return <div className={chartMsgClass}>{getMsgContent()}</div>;