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

add drill down dimensions and metric period compare and modify layout (#22)

Browse Source 
* [feature](webapp) add drill down dimensions and metric period compare and modify layout

* [feature](webapp) add drill down dimensions and metric period compare and modify layout

---------

Co-authored-by: williamhliu <williamhliu@tencent.com>
This commit is contained in:
williamhliu
2023-07-31 12:00:39 +08:00
committed by GitHub
parent 0ac652c5d9
commit 7c99829052
68 changed files with 1429 additions and 1239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,36 +1,77 @@
import { PREFIX_CLS } from '../../../common/constants';
import { getFormattedValue } from '../../../utils/utils';
import { formatByThousandSeperator } from '../../../utils/utils';
import ApplyAuth from '../ApplyAuth';
import { MsgDataType } from '../../../common/type';
import { DrillDownDimensionType, MsgDataType } from '../../../common/type';
import PeriodCompareItem from './PeriodCompareItem';
import DrillDownDimensions from '../../DrillDownDimensions';
import { Spin } from 'antd';
import classNames from 'classnames';
type Props = {
data: MsgDataType;
drillDownDimension?: DrillDownDimensionType;
loading: boolean;
onSelectDimension: (dimension?: DrillDownDimensionType) => void;
onApplyAuth?: (domain: string) => void;
};
const MetricCard: React.FC<Props> = ({ data, onApplyAuth }) => {
const { queryColumns, queryResults, entityInfo } = data;
const MetricCard: React.FC<Props> = ({
data,
drillDownDimension,
loading,
onSelectDimension,
onApplyAuth,
}) => {
const { queryMode, queryColumns, queryResults, entityInfo, aggregateInfo, chatContext } = data;
const { metricInfos } = aggregateInfo || {};
const { dateInfo } = chatContext || {};
const { startDate, endDate } = dateInfo || {};
const indicatorColumn = queryColumns?.find(column => column.showType === 'NUMBER');
const indicatorColumnName = indicatorColumn?.nameEn || '';
const prefixCls = `${PREFIX_CLS}-metric-card`;
const indicatorClass = classNames(`${prefixCls}-indicator`, {
[`${prefixCls}-indicator-period-compare`]: metricInfos?.length > 0,
});
return (
<div className={prefixCls}>
<div className={`${prefixCls}-indicator`}>
{/* <div className={`${prefixCls}-date-range`}>
{startTime === endTime ? startTime : `${startTime} ~ ${endTime}`}
</div> */}
{indicatorColumn && !indicatorColumn?.authorized ? (
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
) : (
<div className={`${prefixCls}-indicator-value`}>
{getFormattedValue(queryResults?.[0]?.[indicatorColumnName])}
<div className={`${prefixCls}-indicator-name`}>{indicatorColumn?.name}</div>
<Spin spinning={loading}>
<div className={indicatorClass}>
<div className={`${prefixCls}-date-range`}>
{startDate === endDate ? startDate : `${startDate} ~ ${endDate}`}
</div>
)}
{/* <div className={`${prefixCls}-indicator-name`}>{query}</div> */}
</div>
{indicatorColumn && !indicatorColumn?.authorized ? (
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
) : (
<div className={`${prefixCls}-indicator-value`}>
{formatByThousandSeperator(queryResults?.[0]?.[indicatorColumnName])}
</div>
)}
{metricInfos?.length > 0 && (
<div className={`${prefixCls}-period-compare`}>
{Object.keys(metricInfos[0].statistics).map((key: any) => (
<PeriodCompareItem title={key} value={metricInfos[0].statistics[key]} />
))}
</div>
)}
</div>
</Spin>
{(queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') && (
<div className={`${prefixCls}-drill-down-dimensions`}>
<DrillDownDimensions
domainId={chatContext.domainId}
dimensionFilters={chatContext.dimensionFilters}
drillDownDimension={drillDownDimension}
onSelectDimension={onSelectDimension}
isMetricCard
/>
</div>
)}
</div>
);
};