Tighten up peak period display

SauceLLC · Feb 3, 2024 · ed35cc8 · ed35cc8
1 parent ff8ab38
commit ed35cc8
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 9 deletions.
diff --git a/src/site/analysis.js b/src/site/analysis.js
@@ -3370,7 +3370,7 @@ sauce.ns('analysis', ns => {
         ns.allPeriodRanges = await sauce.peaks.getForActivityType('periods', ns.activityType);
         ns.allDistRanges = await sauce.peaks.getForActivityType('distances', ns.activityType);
         for (const range of ns.allPeriodRanges) {
-            range.label = H.duration(range.value);
+            range.label = H.peakPeriod(range.value);
         }
         for (const range of ns.allDistRanges) {
             range.label = H.raceDistance(range.value);

diff --git a/src/site/data-views.mjs b/src/site/data-views.mjs
@@ -227,7 +227,7 @@ export class PeaksPeriodsView extends PeaksRangesView {
     onInput(ev) {
         const seconds = Number(ev.currentTarget.value);
         const el = ev.currentTarget.closest('.mutable-data-entry').querySelector('value');
-        el.textContent = sauce.locale.human.duration(seconds);
+        el.textContent = sauce.locale.human.peakPeriod(seconds);
     }
 }
 

diff --git a/src/site/locale.js b/src/site/locale.js
@@ -248,6 +248,13 @@ sauce.ns('locale', ns => {
     }
 
 
+    function humanPeakPeriod(time, options={}) {
+        const minPeriod = time > 3600 && (time % 300 === 0) ? 3600 : undefined;
+        const precision = minPeriod ? 1 : undefined;
+        return humanDuration(time, {minPeriod, precision, ...options});
+    }
+
+
     function humanRaceDistance(value) {
         let label;
         if (value < 1000) {
@@ -535,6 +542,7 @@ sauce.ns('locale', ns => {
         distanceUnconvert,
         human: {
             duration: humanDuration,
+            peakPeriod: humanPeakPeriod,
             relTime: humanRelTime,
             weight: humanWeight,
             elevation: humanElevation,
@@ -551,6 +559,7 @@ sauce.ns('locale', ns => {
         },
         templateHelpers: {
             humanDuration,
+            humanPeakPeriod,
             humanRelTime,
             humanWeight,
             humanElevation,

diff --git a/src/site/performance/peaks.mjs b/src/site/performance/peaks.mjs
@@ -380,10 +380,14 @@ export class PeaksChartView extends charts.ActivityTimeRangeChartView {
             disablePeriod: true,
         });
         this.availableDatasets = {
-            ...Object.fromEntries(this.peakRanges.periods.map(x =>
-                [`p${x.value}`, {period: x.value, type: 'period', label: `${H.duration(x.value)}`}])),
-            ...Object.fromEntries(this.peakRanges.distances.map(x =>
-                [`d${x.value}`, {period: x.value, type: 'distance', label: `${H.raceDistance(x.value)}`}])),
+            ...Object.fromEntries(this.peakRanges.periods.map(x => [
+                `p${x.value}`,
+                {period: x.value, type: 'period', label: `${H.peakPeriod(x.value)}`}
+            ])),
+            ...Object.fromEntries(this.peakRanges.distances.map(x => [
+                `d${x.value}`,
+                {period: x.value, type: 'distance', label: `${H.raceDistance(x.value)}`}
+            ])),
         };
         this.setChartConfig({
             options: {

diff --git a/src/site/performance/views.mjs b/src/site/performance/views.mjs
@@ -56,7 +56,7 @@ function getPeaksKeyFormatter(streamType) {
     if (getPeaksRangeTypeForStream(streamType) === 'distances') {
         return H.raceDistance;
     } else {
-        return H.duration;
+        return H.peakPeriod;
     }
 }
 

diff --git a/templates/peaks-periods-view-entry.html b/templates/peaks-periods-view-entry.html
@@ -3,7 +3,7 @@
         <input min="5" step="1" type="number" required value="{{obj.value ? value : ''}}"/>
         <abbr class="unit">s</abbr>
     </key>
-    <value>{{obj.value ? humanDuration(value) : ''}}</value>
+    <value>{{obj.value ? humanPeakPeriod(value) : ''}}</value>
     <div class="btn btn-unstyled btn-icon-only mutable-data-entry-delete"
          title="{{{delete_entry_tooltip}}}">{{=icon times-circle-duotone=}}</div>
 </div>
diff --git a/templates/performance/peaks/controls.html b/templates/performance/peaks/controls.html
@@ -18,7 +18,7 @@
     <% } else { %>
         <select name="time" class="pref">
             <% for (const x of peakRanges.periods) { %>
-                <option value="{{x.value}}" {{panelPrefs.time === x.value ? 'selected' : ''}}>{{humanDuration(x.value)}}</option>
+                <option value="{{x.value}}" {{panelPrefs.time === x.value ? 'selected' : ''}}>{{humanPeakPeriod(x.value)}}</option>
             <% } %>
         </select>
     <% } %>