mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-15 14:36:47 +00:00
[feature](webapp) upgrade agent
This commit is contained in:
@@ -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`}>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user