rocky/OSGAccountServer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visualize admin analytics dashboards
CI / verify (push) Has been cancelled
Details
CI / publish (push) Has been cancelled
Details

Browse Source 
Turn operational, product, and referral metrics into accessible charts so trends, funnels, retention, and channel quality are faster to interpret.
This commit is contained in:
Rocky
2026-08-20 16:02:21 +08:00
parent 4b465e0e5e
commit 0b4acb5978
11 changed files with 779 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-web/src/styles.css
+153
View File
@@ -304,26 +304,179 @@ button:disabled {
stroke-width: 2.5;
}
.chart-legend-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
}
.chart-legend-dot--primary {
background: var(--primary);
}
.chart-legend-dot--violet {
background: var(--violet);
}
.chart-legend-dot--success {
background: var(--success);
}
.chart-legend-dot--warning {
background: var(--warning);
}
.bar-progress,
.funnel-progress {
border: 0;
appearance: none;
}
.bar-progress::-webkit-progress-bar,
.funnel-progress::-webkit-progress-bar {
border-radius: 999px;
background: var(--surface-muted);
}
.bar-progress::-webkit-progress-value,
.funnel-progress::-webkit-progress-value {
border-radius: 999px;
}
.bar-progress--primary::-webkit-progress-value {
background: var(--primary);
}
.bar-progress--violet::-webkit-progress-value {
background: var(--violet);
}
.bar-progress--success::-webkit-progress-value {
background: var(--success);
}
.bar-progress--warning::-webkit-progress-value {
background: var(--warning);
}
.funnel-progress::-webkit-progress-value {
background: linear-gradient(90deg, var(--primary), var(--violet));
}
.bar-progress::-moz-progress-bar,
.funnel-progress::-moz-progress-bar {
border-radius: 999px;
}
.bar-progress--primary::-moz-progress-bar {
background: var(--primary);
}
.bar-progress--violet::-moz-progress-bar {
background: var(--violet);
}
.bar-progress--success::-moz-progress-bar {
background: var(--success);
}
.bar-progress--warning::-moz-progress-bar {
background: var(--warning);
}
.funnel-progress::-moz-progress-bar {
background: linear-gradient(90deg, var(--primary), var(--violet));
}
.radial-track,
.radial-value {
fill: none;
stroke-width: 11;
}
.radial-track {
stroke: var(--surface-muted);
}
.radial-value {
stroke-linecap: round;
}
.radial-value--primary {
stroke: var(--primary);
}
.radial-value--success {
stroke: var(--success);
}
.radial-value--violet {
stroke: var(--violet);
}
.radial-value--warning {
stroke: var(--warning);
}
.radial-label {
fill: var(--foreground);
font-size: 20px;
font-weight: 750;
letter-spacing: -0.04em;
}
.heatmap-cell {
display: block;
min-width: 4.25rem;
border-radius: 0.65rem;
padding: 0.65rem 0.5rem;
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.heatmap-cell--high {
color: var(--success);
background: var(--success-soft);
}
.heatmap-cell--medium {
color: var(--warning);
background: var(--warning-soft);
}
.heatmap-cell--low {
color: var(--danger);
background: var(--danger-soft);
}
.heatmap-cell--unavailable {
color: var(--muted);
background: var(--surface-muted);
}
.heatmap-key {
width: 1rem;
height: 1rem;
border-radius: 0.3rem;
}
.heatmap-key--high {
background: var(--success-soft);
}
.heatmap-key--medium {
background: var(--warning-soft);
}
.heatmap-key--low {
background: var(--danger-soft);
}
.heatmap-key--unavailable {
background: var(--surface-muted);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,