topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-18 08:17:18 +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

29
webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/PeriodCompareItem.tsx Normal file
View File

@@ -0,0 +1,29 @@
import classNames from 'classnames';
import { PREFIX_CLS } from '../../../common/constants';
import IconFont from '../../IconFont';
type Props = {
title: string;
value: string;
};
const PeriodCompareItem: React.FC<Props> = ({ title, value }) => {
const prefixCls = `${PREFIX_CLS}-metric-card`;
const itemValueClass = classNames(`${prefixCls}-period-compare-item-value`, {
[`${prefixCls}-period-compare-item-value-up`]: !value.includes('-'),
[`${prefixCls}-period-compare-item-value-down`]: value.includes('-'),
});
return (
<div className={`${prefixCls}-period-compare-item`}>
<div className={`${prefixCls}-period-compare-item-title`}>{title}</div>
<div className={itemValueClass}>
<IconFont type={!value.includes('-') ? 'icon-shangsheng' : 'icon-xiajiang'} />
<div>{value}</div>
</div>
</div>
);
};
export default PeriodCompareItem;