dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve archive stats chart layout and fix invisible bar colors.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-10 11:58:27 +08:00
parent f3af6e2a53
commit daf023b403
3 changed files with 376 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+210 -36
View File
@@ -7220,20 +7220,46 @@ body.funds-fullscreen-open {
.archive-stats-charts {
display: flex;
flex-direction: column;
gap: 10px;
gap: 12px;
padding-top: 4px;
}
.archive-viz-grid {
.archive-viz-kpis {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 14px;
align-items: center;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.archive-viz-ring-wrap {
.archive-viz-kpi {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 8px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
min-width: 0;
}
.archive-viz-kpi-val {
font-size: 1.05rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.archive-viz-kpi--pnl .archive-viz-kpi-val {
font-size: 1.2rem;
}
.archive-viz-kpi-lbl {
font-size: 0.66rem;
color: var(--muted);
text-align: center;
}
.archive-viz-kpi--win .archive-viz-ring {
width: 52px;
height: 52px;
}
.archive-viz-kpi--win .archive-viz-ring::before {
inset: 6px;
}
.archive-viz-ring {
--win-pct: 0;
@@ -7241,8 +7267,8 @@ body.funds-fullscreen-open {
height: 68px;
border-radius: 50%;
background: conic-gradient(
var(--profit) 0 calc(var(--win-pct) * 1%),
var(--loss) calc(var(--win-pct) * 1%) 100%
#4cd97f 0 calc(var(--win-pct) * 1%),
#ff6b6b calc(var(--win-pct) * 1%) 100%
);
display: flex;
align-items: center;
@@ -7254,7 +7280,7 @@ body.funds-fullscreen-open {
position: absolute;
inset: 8px;
border-radius: 50%;
background: var(--inset-surface);
background: var(--inset-surface, #141923);
}
.archive-viz-ring-label {
position: relative;
@@ -7263,42 +7289,153 @@ body.funds-fullscreen-open {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.archive-viz-caption,
.archive-viz-block-title {
font-size: 0.66rem;
font-size: 0.68rem;
color: var(--muted);
margin-bottom: 6px;
font-weight: 600;
}
.archive-viz-block-title {
margin-bottom: 4px;
}
.archive-viz-bars,
.archive-viz-block {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 10px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.archive-viz-bar-row {
.archive-viz-stacked {
display: flex;
height: 22px;
border-radius: 6px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
}
.archive-viz-stacked-seg {
display: flex;
align-items: center;
justify-content: center;
min-width: 2px;
font-size: 0.62rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
overflow: hidden;
}
.archive-viz-stacked-seg--profit {
background: linear-gradient(90deg, #2f9f62, #4cd97f);
}
.archive-viz-stacked-seg--loss {
background: linear-gradient(90deg, #c44a4a, #ff6b6b);
}
.archive-viz-stacked-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
font-size: 0.68rem;
}
.archive-viz-legend::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
margin-right: 4px;
vertical-align: middle;
}
.archive-viz-legend--profit::before {
background: #4cd97f;
}
.archive-viz-legend--loss::before {
background: #ff6b6b;
}
.archive-viz-legend--net {
font-weight: 700;
}
.archive-viz-div-row {
display: grid;
grid-template-columns: 2.4em 1fr auto;
gap: 6px;
grid-template-columns: minmax(4.5em, 7.5em) 1fr auto;
gap: 8px;
align-items: center;
font-size: 0.72rem;
}
.archive-viz-bar-row .k {
opacity: 0.85;
}
.archive-viz-bar-row .v {
font-size: 0.7rem;
font-weight: 600;
.archive-viz-div-row .k {
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.archive-viz-bar-track {
height: 8px;
border-radius: 999px;
.archive-viz-div-row .v {
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.archive-viz-div-track {
position: relative;
height: 12px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.archive-viz-div-mid {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.2);
transform: translateX(-50%);
z-index: 1;
}
.archive-viz-div-fill {
position: absolute;
top: 0;
bottom: 0;
min-width: 2px;
border-radius: 2px;
}
.archive-viz-div-fill--profit {
background: linear-gradient(90deg, #2f9f62, #4cd97f);
}
.archive-viz-div-fill--loss {
background: linear-gradient(270deg, #c44a4a, #ff6b6b);
}
.archive-viz-hold-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.archive-viz-hold-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
}
.archive-viz-hold-val {
font-size: 0.95rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.archive-viz-hold-card--win .archive-viz-hold-val {
color: #4cd97f;
}
.archive-viz-hold-card--loss .archive-viz-hold-val {
color: #ff6b6b;
}
.archive-viz-hold-lbl {
font-size: 0.64rem;
color: var(--muted);
}
.archive-viz-bar-track {
height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.archive-viz-bar-fill {
height: 100%;
width: 0;
@@ -7306,13 +7443,10 @@ body.funds-fullscreen-open {
transition: width 0.25s ease;
}
.archive-viz-bar-fill--profit {
background: linear-gradient(90deg, #2f9f62, var(--profit));
background: linear-gradient(90deg, #2f9f62, #4cd97f);
}
.archive-viz-bar-fill--loss {
background: linear-gradient(90deg, #c44a4a, var(--loss));
}
.archive-viz-bar-fill--sick {
background: linear-gradient(90deg, #9b59b6, #c084fc);
background: linear-gradient(90deg, #c44a4a, #ff6b6b);
}
.archive-viz-empty {
margin: 0;
@@ -7332,22 +7466,62 @@ body.funds-fullscreen-open {
}
.archive-cum-chart {
width: 100%;
height: 88px;
height: 110px;
display: block;
border-radius: 8px;
background: rgba(0, 0, 0, 0.12);
background: rgba(0, 0, 0, 0.15);
}
.archive-cum-ylabel,
.archive-cum-xlabel {
fill: rgba(255, 255, 255, 0.45);
font-size: 9px;
font-family: inherit;
}
.archive-cum-zero {
stroke: rgba(255, 255, 255, 0.12);
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.archive-cum-area {
opacity: 0.18;
}
.archive-cum-area.archive-cum-line--up {
fill: #4cd97f;
}
.archive-cum-area.archive-cum-line--down {
fill: #ff6b6b;
}
.archive-cum-line {
fill: none;
stroke: #5b8cff;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.archive-cum-line--up {
stroke: #4cd97f;
}
.archive-cum-line--down {
stroke: #ff6b6b;
}
.archive-cum-dot {
stroke: rgba(0, 0, 0, 0.35);
stroke-width: 1;
}
.archive-cum-dot.archive-cum-line--up {
fill: #4cd97f;
}
.archive-cum-dot.archive-cum-line--down {
fill: #ff6b6b;
}
@media (max-width: 520px) {
.archive-viz-kpis {
grid-template-columns: 1fr;
}
.archive-viz-div-row {
grid-template-columns: minmax(3.5em, 5em) 1fr auto;
gap: 4px;
}
}
.archive-calendar-section {
margin-bottom: 10px;
}