sjs/spirit-tracker
1
0
Fork 0
mirror of https://github.com/samsonjs/spirit-tracker.git synced 2026-03-25 09:25:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX Improvements

Browse source
This commit is contained in:
Brennan Wilkes (Text Groove) 2026-02-06 13:04:52 -08:00
parent 952a6c6aba
commit 13089e9c7d
2 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
viz/app/stats_page.js
View file

@ -508,7 +508,7 @@ export async function renderStats($app) {
const pref = loadPrefs();
$app.innerHTML = `
<div class="container">
<div class="container containerFull">
<div class="header">
<div class="headerRow1">
<div class="statsHeaderLeft">
@ -567,8 +567,8 @@ export async function renderStats($app) {
</div>
</div>
<div class="card">
<div style="height:420px;">
<div class="card cardFill">
<div class="chartFill">
<canvas id="statsChart" aria-label="Statistics chart" role="img"></canvas>
</div>
</div>
@ -855,6 +855,7 @@ export async function renderStats($app) {
const yBounds = computeYBounds(series.seriesByStore, group === "all" ? 8 : 6, 1);
await drawOrUpdateChart(series, yBounds);
_chart?.resize();
const short = `Loaded ${series.labels.length} day(s). Filtered SKUs: ${series.newestUsed}/${series.newestTotal}.`;
onStatus(short);
@ -890,6 +891,7 @@ export async function renderStats($app) {
const yBounds = computeYBounds(series.seriesByStore, group === "all" ? 8 : 6, 1);
await drawOrUpdateChart(series, yBounds);
_chart?.resize();
const short = `Loaded ${series.labels.length} day(s). Filtered SKUs: ${series.newestUsed}/${series.newestTotal}.`;
onStatus(short);

24
viz/style.css
View file

@ -549,3 +549,27 @@ html { overflow-y: scroll; }
.rangeDual input[type="range"]::-moz-range-track { background: transparent; }
.rangeDual input[type="range"]::-moz-range-progress { background: transparent; }
.rangeDual input[type="range"]::-moz-range-thumb { pointer-events: all; }
/* Stats page: make chart fill remaining viewport height */
.containerFull{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.cardFill{
flex: 1 1 auto;
min-height: 320px; /* safety */
display: flex;
}
.chartFill{
flex: 1 1 auto;
min-height: 0; /* IMPORTANT so flex children can actually shrink/grow */
}
.chartFill canvas{
width: 100% !important;
height: 100% !important;
}