topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-20 06:34:55 +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

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

@@ -2,12 +2,14 @@
@metric-trend-prefix-cls: ~'@{supersonic-chat-prefix}-metric-trend';
@metric-info-prefix-cls: ~'@{supersonic-chat-prefix}-metric-info';
.@{metric-trend-prefix-cls} {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 16px;
margin-top: 4px;
width: 100%;
row-gap: 4px;
@@ -35,14 +37,15 @@
}
&-flow-trend-chart {
height: 270px;
margin-top: 4px;
height: 230px;
}
&-charts {
display: flex;
flex-direction: column;
width: 100%;
row-gap: 16px;
row-gap: 12px;
}
&-metric-fields {
@@ -50,6 +53,8 @@
flex-wrap: wrap;
align-items: center;
row-gap: 12px;
color: var(--text-color);
font-size: 15px;
}
&-metric-field {
@@ -85,10 +90,11 @@
padding-left: 0;
font-weight: 500;
cursor: default;
color: var(--text-color-secondary);
font-size: 15px;
color: var(--text-color);
&:hover {
color: var(--text-color-secondary);
color: var(--text-color);
}
}
@@ -133,3 +139,36 @@
}
}
.@{metric-info-prefix-cls} {
&-indicator {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
&-date {
color: var(--text-color-fourth);
font-size: 12px;
}
&-indicator-value {
color: var(--text-color);
font-weight: 500;
font-size: 36px;
line-height: 40px;
margin-top: 2px;
color: var(--text-color-secondary);
}
&-period-compare {
width: 100%;
display: flex;
align-items: center;
column-gap: 20px;
margin-top: 2px;
font-size: 13px;
overflow-x: auto;
}
}