wagesj45/ngxstat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: merge Distribution and Tables into a single Breakdown tab with clear option help\n\n- Replace separate Distribution/Tables tabs with one Breakdown tab\n- Breakdown shows categorical charts and data tables together\n- Add in-page help explaining Percent mode, Grouping, and Exclude '-'\n- Update filtering, containers, and tab logic to target new tab\n- Keep existing report JSON/HTML contracts; no server changes required

Browse source
This commit is contained in:
ngxstat-bot 2025-08-19 00:28:42 -05:00
commit 2bfd487106
1 changed files with 22 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

43
templates/index.html
View file

@ -14,8 +14,7 @@
<ul>
<li class="is-active" data-tab="recent"><a>Recent</a></li>
<li data-tab="trends"><a>Trends</a></li>
<li data-tab="distribution"><a>Distribution</a></li>
<li data-tab="tables"><a>Tables</a></li>
<li data-tab="breakdown"><a>Breakdown</a></li>
<li data-tab="analysis"><a>Analysis</a></li>
</ul>
</div>
@ -64,17 +63,17 @@
</label>
</div>
<div id="mode-percent-control" class="control is-hidden">
<label class="checkbox is-small">
<label class="checkbox is-small" title="Show values as a percentage of the total, instead of raw counts.">
<input type="checkbox" id="percent-toggle"> Percent mode
</label>
</div>
<div id="mode-group-control" class="control is-hidden">
<label class="checkbox is-small">
<label class="checkbox is-small" title="Combine small categories into an 'Other' slice to declutter charts.">
<input type="checkbox" id="group-toggle" checked> Group small into Other
</label>
</div>
<div id="exclude-uncached-control" class="control is-hidden">
<label class="checkbox is-small">
<label class="checkbox is-small" title="Hide uncached entries (cache status '-') from cache status distributions.">
<input type="checkbox" id="exclude-uncached-toggle" checked> Exclude “-”
</label>
</div>
@ -99,12 +98,17 @@
<div id="reports-trends"></div>
</div>
<div id="distribution-section" class="is-hidden">
<div id="reports-distribution"></div>
</div>
<div id="tables-section" class="is-hidden">
<div id="reports-tables"></div>
<div id="breakdown-section" class="is-hidden">
<div class="box mb-4">
<h2 class="subtitle">Breakdown</h2>
<p class="mb-2">Explore categorical distributions and detailed lists side-by-side. Use the options below to adjust how categories are shown.</p>
<ul style="margin-left: 1.2rem; list-style: disc;">
<li><strong>Percent mode</strong>: converts counts into percentages of the total for easier comparison.</li>
<li><strong>Group small into Other</strong>: combines tiny slices under a single “Other” category to declutter charts.</li>
<li><strong>Exclude “-”</strong>: hides uncached entries (cache status “-”) from cache status distributions.</li>
</ul>
</div>
<div id="reports-breakdown"></div>
</div>
<div id="analysis-section" class="is-hidden">
@ -145,15 +149,13 @@
const sections = {
recent: document.getElementById('recent-section'),
trends: document.getElementById('trends-section'),
distribution: document.getElementById('distribution-section'),
tables: document.getElementById('tables-section'),
breakdown: document.getElementById('breakdown-section'),
analysis: document.getElementById('analysis-section')
};
const containers = {
recent: document.getElementById('overview-reports'),
trends: document.getElementById('reports-trends'),
distribution: document.getElementById('reports-distribution'),
tables: document.getElementById('reports-tables')
breakdown: document.getElementById('reports-breakdown')
};
const analysisElems = {
missing: document.getElementById('analysis-missing'),
@ -461,8 +463,7 @@
const filtered = reports.filter(rep => {
if (currentTab === 'recent') return true;
if (currentTab === 'trends') return rep.chart !== 'table' && !isDistributionType(rep.chart);
if (currentTab === 'distribution') return isDistributionType(rep.chart);
if (currentTab === 'tables') return rep.chart === 'table';
if (currentTab === 'breakdown') return isDistributionType(rep.chart) || rep.chart === 'table';
return true;
});
// If no explicit window was given (URL or saved state), honor first report's default
@ -582,11 +583,11 @@
intervalControl.classList.add('is-hidden');
domainControl.classList.toggle('is-hidden', !showDomain);
timeControl.classList.toggle('is-hidden', !showTime);
// Only show percent/group/exclude toggles on Distribution tab,
// Only show percent/group/exclude toggles on Breakdown tab,
// and smoothing only on Trends tab
modePercentControl.classList.toggle('is-hidden', name !== 'distribution');
modeGroupControl.classList.toggle('is-hidden', name !== 'distribution');
excludeUncachedControl.classList.toggle('is-hidden', name !== 'distribution');
modePercentControl.classList.toggle('is-hidden', name !== 'breakdown');
modeGroupControl.classList.toggle('is-hidden', name !== 'breakdown');
excludeUncachedControl.classList.toggle('is-hidden', name !== 'breakdown');
smoothControl.classList.toggle('is-hidden', name !== 'trends');
updateURL();
if (name === 'recent') {