Skip to content

Commit 2aa7cae

Browse files
awigawig
committed
Added arrows to sortable headers that will be grey to black when selected for sorting
1 parent 346ff04 commit 2aa7cae

File tree

4 files changed

+109
-3
lines changed

4 files changed

+109
-3
lines changed

‎solarforecastarbiter/reports/templates/html/body.html‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,16 @@
5555
font-weight: 700;
5656
}
5757

58-
.report-table-wrapper th.sortable {
58+
.report-table-wrapper table.table tr th.sortable {
5959
cursor: pointer;
6060
}
61-
.report-table-wrapper th.sortable:hover {
61+
.report-table-wrapper table.table tr th.sortable:hover {
6262
background-color: #d1ecf1;
63+
font-weight: 900;
64+
}
65+
.report-table-wrapper table.table tr th.sortable span {
66+
color: #dddddd;
6367
}
64-
6568

6669
details {
6770
border-bottom: 1px solid #dee2e6;
@@ -392,6 +395,7 @@ <h3 id="{{ category }}-analysis">{{ human_categories[category].title() }} Analys
392395
*/
393396
function sortTable(element_id, n_column = 1, row_offset = 0, is_number=true) {
394397
var table, do_switch, find_switch, i, r1, r2, val1, val2, dir, counter = 0;
398+
var spansUp, spansDown;
395399
table = document.getElementById(element_id)
396400
do_switch = true;
397401
dir = 'desc';
@@ -447,6 +451,22 @@ <h3 id="{{ category }}-analysis">{{ human_categories[category].title() }} Analys
447451
do_switch = true;
448452
}
449453
}
454+
455+
// Select only the up/down arrow in the sorted column
456+
spansDown = table.getElementsByClassName('down');
457+
spansUp = table.getElementsByClassName('up');
458+
for (i = 0; i < spansDown.length; i++) {
459+
spansDown[i].style.color = '#dddddd';
460+
}
461+
for (i = 0; i < spansUp.length; i++) {
462+
spansUp[i].style.color = '#dddddd';
463+
}
464+
if (dir == "asc") {
465+
spansDown[n_column].style.color = '#333333';
466+
}
467+
else {
468+
spansUp[n_column].style.color = '#333333';
469+
}
450470
}
451471
}
452472
</script>

‎solarforecastarbiter/reports/templates/html/macros.j2‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,15 @@ forecasts/single/{{ forecast.forecast_id }}
2020
<th class="sortable" style="text-align: left;"
2121
onclick="sortTable('metric_table_fx_vert', 0, 0, false)">
2222
Forecast
23+
<span class="down"> &#9660; </span>
24+
<span class="up"> &#9650; </span>
2325
</th>
2426
{% for metric in metric_ordering %}
2527
<th class="sortable" style="text-align: left;"
2628
onclick="sortTable('metric_table_fx_vert', {{loop.index}})">
2729
{{ human_metrics[metric] }}
30+
<span class="down"> &#9660; </span>
31+
<span class="up"> &#9650; </span>
2832
</th>
2933
{% endfor %}
3034
</tr>
@@ -72,6 +76,8 @@ forecasts/single/{{ forecast.forecast_id }}
7276
<th scope="col" class="sortable" style="text-align: left;"
7377
onclick="sortTable('summary_stats_table_vert', 0, 1, false)">
7478
Aligned Pair
79+
<span class="down"> &#9660; </span>
80+
<span class="up"> &#9650; </span>
7581
</th>
7682
<th scope="col" colspan="{{ span }}" style="text-align: center;">Observation</th>
7783
<th scope="col" colspan="{{ span }}" style="text-align: center;">Forecast</th>
@@ -85,6 +91,8 @@ forecasts/single/{{ forecast.forecast_id }}
8591
onclick="sortTable('summary_stats_table_vert',
8692
{{(i*(human_statistics.values() | length)) + loop.index}}, 1, true)">
8793
{{ title }}
94+
<span class="down"> &#9660; </span>
95+
<span class="up"> &#9650; </span>
8896
</th>
8997
{% endfor %}
9098
{% endfor %}
@@ -190,12 +198,18 @@ forecasts/single/{{ forecast.forecast_id }}
190198
<tr class="header">
191199
<th class="sortable" style="text-align: left;" onclick="sortTable('data-validation-filters-table', 0, 0, true)">
192200
Quality flags
201+
<span class="down"> &#9660; </span>
202+
<span class="up"> &#9650; </span>
193203
</th>
194204
<th class="sortable" style="text-align: left;" onclick="sortTable('data-validation-filters-table', 1, 0, true)">
195205
Discard before resample
206+
<span class="down"> &#9660; </span>
207+
<span class="up"> &#9650; </span>
196208
</th>
197209
<th class="sortable" style="text-align: left;" onclick="sortTable('data-validation-filters-table', 2, 0, true)">
198210
Resample threshold (%)
211+
<span class="down"> &#9660; </span>
212+
<span class="up"> &#9650; </span>
199213
</th>
200214
</tr>
201215
</thead>
@@ -226,11 +240,15 @@ forecasts/single/{{ forecast.forecast_id }}
226240
<th class="sortable" style="text-align: left;"
227241
onclick="sortTable('data-validation-results-{{'before' if before_resample else 'after'}}-table', 0, 1, false)">
228242
Aligned Pair
243+
<span class="down"> &#9660; </span>
244+
<span class="up"> &#9650; </span>
229245
</th>
230246
{% for proc_fxobs in proc_fxobs_list %}
231247
<th class="sortable" style="text-align: center; vertical-align: middle"
232248
onclick="sortTable('data-validation-results-{{'before' if before_resample else 'after'}}-table', {{loop.index}}, 1)">
233249
{{ proc_fxobs.name }}
250+
<span class="down"> &#9660; </span>
251+
<span class="up"> &#9650; </span>
234252
</th>
235253
{% endfor %}
236254
</tr>
@@ -291,10 +309,14 @@ forecasts/single/{{ forecast.forecast_id }}
291309
<tr class="header">
292310
<th class="sortable" style="text-align: left;" onclick="sortTable('data-preprocessing-results-table', 0, 0, false)">
293311
Preprocessing Description
312+
<span class="down"> &#9660; </span>
313+
<span class="up"> &#9650; </span>
294314
</th>
295315
{% for proc_fxobs in proc_fxobs_list %}
296316
<th class="sortable" style="text-align: center;" onclick="sortTable('data-preprocessing-results-table', {{loop.index}}, 0, true)">
297317
{{ proc_fxobs.name }} <br>Number of Points
318+
<span class="down"> &#9660; </span>
319+
<span class="up"> &#9650; </span>
298320
</th>
299321
{% endfor %}
300322
</tr>

‎solarforecastarbiter/reports/templates/html/metrics_meta_table.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,23 @@ <h4>Table of normalization, deadband, and cost parameters</h4>
5050
<tr class="header" style="text-align: left;">
5151
<th class="sortable" colspan="1" onclick="sortTable('metrics_meta_table', 0, 0, false)">
5252
Name
53+
<span class="down"> &#9660; </span>
54+
<span class="up"> &#9650; </span>
5355
</th>
5456
<th class="sortable" colspan="1" onclick="sortTable('metrics_meta_table', 1, 0, true)">
5557
Normalization
58+
<span class="down"> &#9660; </span>
59+
<span class="up"> &#9650; </span>
5660
</th>
5761
<th class="sortable" colspan="1" onclick="sortTable('metrics_meta_table', 2, 0, true)">
5862
Deadband (%)
63+
<span class="down"> &#9660; </span>
64+
<span class="up"> &#9650; </span>
5965
</th>
6066
<th class="sortable" colspan="1" onclick="sortTable('metrics_meta_table', 3, 0, true)">
6167
Cost Parameters
68+
<span class="down"> &#9660; </span>
69+
<span class="up"> &#9650; </span>
6270
</th>
6371
</tr>
6472
</thead>

‎solarforecastarbiter/reports/tests/test_macros.py‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,38 @@ def fn(macro_name_and_args):
3737
<th class="sortable" style="text-align: left;"
3838
onclick="sortTable('metric_table_fx_vert', 0, 0, false)">
3939
Forecast
40+
<span class="down"> &#9660; </span>
41+
<span class="up"> &#9650; </span>
4042
</th>
4143
<th class="sortable" style="text-align: left;"
4244
onclick="sortTable('metric_table_fx_vert', 1)">
4345
MAE
46+
<span class="down"> &#9660; </span>
47+
<span class="up"> &#9650; </span>
4448
</th>
4549
<th class="sortable" style="text-align: left;"
4650
onclick="sortTable('metric_table_fx_vert', 2)">
4751
RMSE
52+
<span class="down"> &#9660; </span>
53+
<span class="up"> &#9650; </span>
4854
</th>
4955
<th class="sortable" style="text-align: left;"
5056
onclick="sortTable('metric_table_fx_vert', 3)">
5157
MBE
58+
<span class="down"> &#9660; </span>
59+
<span class="up"> &#9650; </span>
5260
</th>
5361
<th class="sortable" style="text-align: left;"
5462
onclick="sortTable('metric_table_fx_vert', 4)">
5563
Skill
64+
<span class="down"> &#9660; </span>
65+
<span class="up"> &#9650; </span>
5666
</th>
5767
<th class="sortable" style="text-align: left;"
5868
onclick="sortTable('metric_table_fx_vert', 5)">
5969
Cost
70+
<span class="down"> &#9660; </span>
71+
<span class="up"> &#9650; </span>
6072
</th>
6173
</tr>
6274
</thead>
@@ -151,14 +163,20 @@ def test_metric_table_fx_horz(report_with_raw, macro_test_template):
151163
<th class="sortable" style="text-align: left;"
152164
onclick="sortTable('data-validation-results-before-table', 0, 1, false)">
153165
Aligned Pair
166+
<span class="down"> &#9660; </span>
167+
<span class="up"> &#9650; </span>
154168
</th>
155169
<th class="sortable" style="text-align: center; vertical-align: middle"
156170
onclick="sortTable('data-validation-results-{}-table', 1, 1)">
157171
{}
172+
<span class="down"> &#9660; </span>
173+
<span class="up"> &#9650; </span>
158174
</th>
159175
<th class="sortable" style="text-align: center; vertical-align: middle"
160176
onclick="sortTable('data-validation-results-{}-table', 2, 1)">
161177
{}
178+
<span class="down"> &#9660; </span>
179+
<span class="up"> &#9650; </span>
162180
</th>
163181
</tr>
164182
<tr class="header">
@@ -242,12 +260,18 @@ def test_validation_results_table(report_with_raw, macro_test_template):
242260
<tr class="header">
243261
<th class="sortable" style="text-align: left;" onclick="sortTable('data-preprocessing-results-table', 0, 0, false)">
244262
Preprocessing Description
263+
<span class="down"> &#9660; </span>
264+
<span class="up"> &#9650; </span>
245265
</th>
246266
<th class="sortable" style="text-align: center;" onclick="sortTable('data-preprocessing-results-table', 1, 0, true)">
247267
{} <br>Number of Points
268+
<span class="down"> &#9660; </span>
269+
<span class="up"> &#9650; </span>
248270
</th>
249271
<th class="sortable" style="text-align: center;" onclick="sortTable('data-preprocessing-results-table', 2, 0, true)">
250272
{} <br>Number of Points
273+
<span class="down"> &#9660; </span>
274+
<span class="up"> &#9650; </span>
251275
</th>
252276
</tr>
253277
</thead>
@@ -298,6 +322,8 @@ def test_preprocessing_table(report_with_raw, macro_test_template,
298322
<th scope="col" class="sortable" style="text-align: left;"
299323
onclick="sortTable('summary_stats_table_vert', 0, 1, false)">
300324
Aligned Pair
325+
<span class="down"> &#9660; </span>
326+
<span class="up"> &#9650; </span>
301327
</th>
302328
<th scope="col" colspan="5" style="text-align: center;">Observation</th>
303329
<th scope="col" colspan="5" style="text-align: center;">Forecast</th>
@@ -309,76 +335,106 @@ def test_preprocessing_table(report_with_raw, macro_test_template,
309335
onclick="sortTable('summary_stats_table_vert',
310336
1, 1, true)">
311337
Mean
338+
<span class="down"> &#9660; </span>
339+
<span class="up"> &#9650; </span>
312340
</th>
313341
<th class="sortable" style="text-align: center;"
314342
onclick="sortTable('summary_stats_table_vert',
315343
2, 1, true)">
316344
Min
345+
<span class="down"> &#9660; </span>
346+
<span class="up"> &#9650; </span>
317347
</th>
318348
<th class="sortable" style="text-align: center;"
319349
onclick="sortTable('summary_stats_table_vert',
320350
3, 1, true)">
321351
Max
352+
<span class="down"> &#9660; </span>
353+
<span class="up"> &#9650; </span>
322354
</th>
323355
<th class="sortable" style="text-align: center;"
324356
onclick="sortTable('summary_stats_table_vert',
325357
4, 1, true)">
326358
Median
359+
<span class="down"> &#9660; </span>
360+
<span class="up"> &#9650; </span>
327361
</th>
328362
<th class="sortable" style="text-align: center;"
329363
onclick="sortTable('summary_stats_table_vert',
330364
5, 1, true)">
331365
Std.
366+
<span class="down"> &#9660; </span>
367+
<span class="up"> &#9650; </span>
332368
</th>
333369
<th class="sortable" style="text-align: center;"
334370
onclick="sortTable('summary_stats_table_vert',
335371
6, 1, true)">
336372
Mean
373+
<span class="down"> &#9660; </span>
374+
<span class="up"> &#9650; </span>
337375
</th>
338376
<th class="sortable" style="text-align: center;"
339377
onclick="sortTable('summary_stats_table_vert',
340378
7, 1, true)">
341379
Min
380+
<span class="down"> &#9660; </span>
381+
<span class="up"> &#9650; </span>
342382
</th>
343383
<th class="sortable" style="text-align: center;"
344384
onclick="sortTable('summary_stats_table_vert',
345385
8, 1, true)">
346386
Max
387+
<span class="down"> &#9660; </span>
388+
<span class="up"> &#9650; </span>
347389
</th>
348390
<th class="sortable" style="text-align: center;"
349391
onclick="sortTable('summary_stats_table_vert',
350392
9, 1, true)">
351393
Median
394+
<span class="down"> &#9660; </span>
395+
<span class="up"> &#9650; </span>
352396
</th>
353397
<th class="sortable" style="text-align: center;"
354398
onclick="sortTable('summary_stats_table_vert',
355399
10, 1, true)">
356400
Std.
401+
<span class="down"> &#9660; </span>
402+
<span class="up"> &#9650; </span>
357403
</th>
358404
<th class="sortable" style="text-align: center;"
359405
onclick="sortTable('summary_stats_table_vert',
360406
11, 1, true)">
361407
Mean
408+
<span class="down"> &#9660; </span>
409+
<span class="up"> &#9650; </span>
362410
</th>
363411
<th class="sortable" style="text-align: center;"
364412
onclick="sortTable('summary_stats_table_vert',
365413
12, 1, true)">
366414
Min
415+
<span class="down"> &#9660; </span>
416+
<span class="up"> &#9650; </span>
367417
</th>
368418
<th class="sortable" style="text-align: center;"
369419
onclick="sortTable('summary_stats_table_vert',
370420
13, 1, true)">
371421
Max
422+
<span class="down"> &#9660; </span>
423+
<span class="up"> &#9650; </span>
372424
</th>
373425
<th class="sortable" style="text-align: center;"
374426
onclick="sortTable('summary_stats_table_vert',
375427
14, 1, true)">
376428
Median
429+
<span class="down"> &#9660; </span>
430+
<span class="up"> &#9650; </span>
377431
</th>
378432
<th class="sortable" style="text-align: center;"
379433
onclick="sortTable('summary_stats_table_vert',
380434
15, 1, true)">
381435
Std.
436+
<span class="down"> &#9660; </span>
437+
<span class="up"> &#9650; </span>
382438
</th>
383439
</tr>
384440
</thead>

0 commit comments

Comments
 (0)