render flat delta pill for null values per design spec
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
<%/* delta-pill.ejs — renders a Δ-pill span.
|
||||
Locals:
|
||||
value {number|null} — the delta value
|
||||
value {number|null} — the delta value (null/undefined → flat pill with '—')
|
||||
extraClass {string} — optional additional CSS class (e.g. 'delta-predicted-pill')
|
||||
*/%>
|
||||
<% if (typeof value !== 'undefined' && value != null) {
|
||||
const _cls = value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
|
||||
const _glyph = value > 0 ? '▲' : value < 0 ? '▼' : '–';
|
||||
const _num = value > 0 ? '+' + value : value.toString();
|
||||
const _xtra = (typeof extraClass !== 'undefined' && extraClass) ? ' ' + extraClass : '';
|
||||
%><span class="delta-pill <%= _cls %><%= _xtra %>"><span class="delta-glyph"><%= _glyph %></span><span class="delta-num"><%= _num %></span></span><% } %>
|
||||
<%
|
||||
const _isNull = (typeof value === 'undefined' || value == null);
|
||||
const _cls = _isNull ? 'flat' : value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
|
||||
const _glyph = (_isNull || value === 0) ? '–' : value > 0 ? '▲' : '▼';
|
||||
const _num = _isNull ? '—' : value > 0 ? '+' + value : value.toString();
|
||||
const _xtra = (typeof extraClass !== 'undefined' && extraClass) ? ' ' + extraClass : '';
|
||||
%><span class="delta-pill <%= _cls %><%= _xtra %>"><span class="delta-glyph"><%= _glyph %></span><span class="delta-num"><%= _num %></span></span>
|
||||
|
||||
@@ -16,9 +16,7 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
|
||||
</div>
|
||||
<div>
|
||||
<dt>Change vs last month</dt>
|
||||
<dd>
|
||||
<% if (player.ratingChange != null) { %><%- include('delta-pill', { value: player.ratingChange }) %><% } else { %>—<% } %>
|
||||
</dd>
|
||||
<dd><%- include('delta-pill', { value: player.ratingChange }) %></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Predicted next update</dt>
|
||||
@@ -26,9 +24,7 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
|
||||
</div>
|
||||
<div>
|
||||
<dt>Gap to predicted</dt>
|
||||
<dd>
|
||||
<% if (player.deltaPredicted != null) { %><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %><% } else { %>—<% } %>
|
||||
</dd>
|
||||
<dd><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
<button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button>
|
||||
|
||||
Reference in New Issue
Block a user