tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Group metrics dropdown by category in rankings and comparison views
Some checks failed
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Failing after 1m1s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Has been skipped
Details

Browse Source 
Added optgroup elements to organize metrics into logical categories:
- Expected Standard
- Higher Standard
- Progress Scores
- Average Scores
- Gender Performance
- Equity (Disadvantaged)
- School Context
- 3-Year Trends

Also added CSS styling for optgroup labels to match the design system.

Note: School names in rankings are already clickable links to school details.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-02-04 11:50:13 +00:00
parent 5e296b6e5c
commit 2a39cfca82
4 changed files with 106 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
nextjs-app/components/ComparisonView.module.css
View File

@@ -92,6 +92,19 @@
box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
}
.metricSelect optgroup {
font-weight: 700;
color: var(--text-primary, #1a1612);
background: var(--bg-secondary, #f3ede4);
padding: 0.5rem 0;
}
.metricSelect option {
font-weight: 400;
color: var(--text-secondary, #5c564d);
padding: 0.375rem 1rem;
}
/* Schools Section */
.schoolsSection {
margin-bottom: 2rem;

45
nextjs-app/components/ComparisonView.tsx
View File

@@ -140,11 +140,46 @@ export function ComparisonView({
onChange={(e) => handleMetricChange(e.target.value)}
className={styles.metricSelect}
>
{metrics.map((metric) => (
<option key={metric.key} value={metric.key}>
{metric.label}
</option>
))}
<optgroup label="Expected Standard">
{metrics.filter(m => m.category === 'expected').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Higher Standard">
{metrics.filter(m => m.category === 'higher').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Progress Scores">
{metrics.filter(m => m.category === 'progress').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Average Scores">
{metrics.filter(m => m.category === 'average').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Gender Performance">
{metrics.filter(m => m.category === 'gender').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Equity (Disadvantaged)">
{metrics.filter(m => m.category === 'equity').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="School Context">
{metrics.filter(m => m.category === 'context').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="3-Year Trends">
{metrics.filter(m => m.category === 'trends').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
</select>
</section>

13
nextjs-app/components/RankingsView.module.css
View File

@@ -72,6 +72,19 @@
box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
}
.filterSelect optgroup {
font-weight: 700;
color: var(--text-primary, #1a1612);
background: var(--bg-secondary, #f3ede4);
padding: 0.5rem 0;
}
.filterSelect option {
font-weight: 400;
color: var(--text-secondary, #5c564d);
padding: 0.375rem 1rem;
}
/* Rankings Section */
.rankingsSection {
background: var(--bg-card, white);

45
nextjs-app/components/RankingsView.tsx
View File

@@ -98,11 +98,46 @@ export function RankingsView({
onChange={(e) => handleMetricChange(e.target.value)}
className={styles.filterSelect}
>
{metrics.map((metric) => (
<option key={metric.key} value={metric.key}>
{metric.label}
</option>
))}
<optgroup label="Expected Standard">
{metrics.filter(m => m.category === 'expected').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Higher Standard">
{metrics.filter(m => m.category === 'higher').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Progress Scores">
{metrics.filter(m => m.category === 'progress').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Average Scores">
{metrics.filter(m => m.category === 'average').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Gender Performance">
{metrics.filter(m => m.category === 'gender').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="Equity (Disadvantaged)">
{metrics.filter(m => m.category === 'equity').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="School Context">
{metrics.filter(m => m.category === 'context').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
<optgroup label="3-Year Trends">
{metrics.filter(m => m.category === 'trends').map((metric) => (
<option key={metric.key} value={metric.key}>{metric.label}</option>
))}
</optgroup>
</select>
</div>