grillkol/Stat-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand dashboard analytics and document production implementation

Browse Source
This commit is contained in:
maxwes08
2026-11-03 14:49:01 +01:00
parent 70b94f8672
commit aa0028e7e0
36 changed files with 2212 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
mockups/mockup.css
View File

@@ -28,6 +28,7 @@
--chart-10: #a8aaa5;
--chart-11: #ef7793;
--chart-12: #67c7b5;
--chart-height: 230px;
--radius: 12px;
--sidebar-width: 232px;
--font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -94,10 +95,10 @@ h1 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.035em; }
.card-title { font-size: 13px; font-weight: 600; }
.card-note { margin-top: 3px; color: var(--muted); font-size: 11px; }
.card-body { padding: 14px 16px 16px; }
.chart { width: 100%; height: 230px; overflow: visible; }
.chart { display: block; width: 100%; height: var(--chart-height); overflow: visible; }
.chart.short { height: 170px; }
.chart.tall { height: 300px; }
.chart text { fill: var(--muted); font-family: var(--font); font-size: 10px; }
.chart text { fill: var(--muted); font-family: var(--font); font-size: 12px; }
.chart .gridline { stroke: var(--border); stroke-dasharray: 3 5; }
.chart .axis { stroke: var(--border); }
.chart .line { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
@@ -105,7 +106,7 @@ h1 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.035em; }
.chart .area { fill: url(#areaFill); }
.chart .bar { fill: #7889ff; opacity: .8; }
.chart .bar:hover { opacity: 1; }
.chart-wrap { padding: 0 16px 10px; }
.chart-wrap { padding: 0 16px 10px; overflow-x: auto; }
.interactive-chart { cursor: crosshair; touch-action: pan-y; }
.interactive-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.chart-inspection { pointer-events: none; }
@@ -410,3 +411,65 @@ tbody tr:hover { background: rgb(255 255 255 / 2%); }
.event-option input { accent-color: var(--accent); }
.event-option span { overflow-wrap: anywhere; }
.event-option[hidden] { display: none; }
.chart-series-picker { margin: 12px 0; }
.prompt-source-controls { align-items: center; }
.record-filter { margin: 12px 18px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.record-filter summary { cursor: pointer; font-size: 12px; }
.record-filter-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 5px 12px; max-height: 240px; overflow-y: auto; padding: 8px 0; }
.record-filter-options > p { grid-column: 1 / -1; }
.table-footer { flex-wrap: wrap; gap: 10px; }
.table-footer .select { min-width: 115px; }
.hall-of-fame h2 { margin: 0 0 6px; font-size: 18px; }
.health-reports h2 { margin: 0 0 6px; font-size: 18px; }
.health-report-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; margin-bottom: 20px; }
.health-report-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.health-report-title { font-size: 15px; font-weight: 600; }
.health-report-summary { display: block; cursor: pointer; list-style: none; border-radius: 6px; }
.health-report-summary::-webkit-details-marker { display: none; }
.health-report-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.health-report-summary > .card-note { display: block; }
.health-report-actions { display: flex; align-items: center; gap: 12px; }
.health-report-chevron { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; transition: transform var(--motion-fast) ease; }
.health-report-disclosure[open] .health-report-chevron { transform: rotate(90deg); }
.health-report-disclosure[open] .health-report-content { animation: data-fade var(--motion-fast) ease-out; }
.health-report-body { font-size: 13px; line-height: 1.65; }
.health-report-body p { margin: 14px 0 0; color: var(--muted); }
.health-report-body strong { color: var(--text); }
.health-report-body .health-weekday { font-size: 12px; }
.health-report-notes { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.health-report-notes:empty { display: none; }
.health-report-updated { border-top: 1px solid var(--border-soft); margin-top: 14px; padding-top: 10px; line-height: 1.6; }
.summary-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.summary-toolbar .player-segments { margin: 0; padding: 0; }
.summary-period-note { margin-bottom: 16px; line-height: 1.6; }
.summary-executive { border-color: var(--accent); }
.summary-executive .health-report-title { font-size: 18px; }
.overview-analysis { border-color: var(--accent); }
.overview-analysis .health-report-title { font-size: 18px; }
.overview-analysis .health-report-body { column-count: 2; column-gap: 30px; }
.overview-analysis .health-report-body p { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 1050px) { .overview-analysis .health-report-body { column-count: 1; } }
.summaries-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.summary-detail-link { display: inline-block; margin-top: 16px; color: var(--accent); font-size: 12px; }
@media (max-width: 900px) { .summaries-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 1050px) { .health-report-grid { grid-template-columns: minmax(0,1fr); } }
.hall-of-fame [data-leaderboards] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hall-of-fame [data-leaderboards] > .card { min-width: 0; }
@media (max-width: 700px) {
.hall-of-fame [data-leaderboards] { grid-template-columns: minmax(0, 1fr); }
}
.fame-list { list-style: none; margin: 14px 0 0; padding: 0; }
.fame-list li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.fame-list li:last-child { border-bottom: 0; }
.fame-rank { width: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fame-list li:first-child .fame-rank { color: var(--amber); }
.avatar-placeholder { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-raised); color: var(--muted); font-size: 12px; }
.fame-player { flex: 1; min-width: 0; }
.fame-player .player-name-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fame-player .card-note { font-size: 10px; overflow-wrap: anywhere; }
.fame-list strong { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
:root { --chart-height: 210px; }
.record-filter-options { grid-template-columns: 1fr; }
.table-footer .inline { flex-wrap: wrap; }
}