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