signalk-chiplog 2.3.0 → 2.4.0

package/public/js/context.mjs

@@ -27,6 +27,9 @@ function parseRoute(hash) {
   if (hash === '#/export') {
     return { name: 'export' };
   }
+  if (hash === '#/statistics') {
+    return { name: 'statistics' };
+  }
   // The dates a passage page hands over travel in the hash; the playback state
   // does not, since every hash change scrolls the page back to the top.
   const animation = hash.match(/^#\/animation(?:\?(.*))?$/);

package/public/js/format.mjs

@@ -33,6 +33,12 @@ export function createFormatter({ locale, units, timeZone }) {
     month: 'short',
     timeZone
   });
+  const dateFormat = new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    timeZone
+  });
   // Logbooks keep time on the 24-hour clock, whatever the language.
   const timeFormat = new Intl.DateTimeFormat(locale, {
     hour: '2-digit',
@@ -128,6 +134,8 @@ export function createFormatter({ locale, units, timeZone }) {
         : '',
     day: (date) => dayFormat.format(date),
     shortDate: (value) => shortDateFormat.format(new Date(value)),
+    // With the year, for figures that span seasons.
+    date: (value) => dateFormat.format(new Date(value)),
     time: (value) => timeFormat.format(new Date(value)),
     // The calendar day of an instant in the formatter's time zone.
     dayKey: (value) => dayKeyFormat.format(new Date(value)),

package/public/js/i18n.mjs

@@ -5,6 +5,7 @@ export const MESSAGES = {
   en: {
     'app.title': 'Chiplog',
     'nav.log': 'Logbook',
+    'nav.statistics': 'Statistics',
     'nav.export': 'Export',
     'nav.replay': 'Retrospective',
     'nav.animation': 'Animation',
@@ -55,10 +56,47 @@ export const MESSAGES = {
     'log.statsDistance': 'Distance',
     'log.statsDuration': 'Total time',
 
+    'statistics.title': 'Statistics',
+    'range.period': 'Period',
+    'range.anyDate': 'Any date',
+    'range.choose': 'Choose the period',
+    'range.previousYear': 'Previous year',
+    'range.previousMonth': 'Previous month',
+    'range.nextMonth': 'Next month',
+    'range.nextYear': 'Next year',
+    'range.pickStart': 'Pick the first day.',
+    'range.pickEnd': 'Now pick the last day.',
+    'statistics.range.all': 'All time',
+    'statistics.range.thisMonth': 'This month',
+    'statistics.range.lastMonth': 'Last month',
+    'statistics.range.last12Months': 'Last 12 months',
+    'statistics.empty': 'No passage in this period.',
+    'statistics.count': 'Passages',
+    'statistics.first': 'First passage',
+    'statistics.last': 'Last passage',
+    'statistics.distance': 'Total distance',
+    'statistics.duration': 'Time under way',
+    'statistics.maxSpeed': 'Top speed',
+    'statistics.maxWind': 'Strongest wind',
+    'statistics.apparent': '{speed} (apparent)',
+    'statistics.longest': 'Longest passage without a stop',
+    'statistics.longestFacts': '{distance} in {duration}',
+    'statistics.countries': 'Countries visited',
+    'statistics.noCountries':
+      'No country known yet. Countries come with place names, which needs geocoding to be enabled and the boat to be online now and then.',
+    'statistics.topDuration': 'Longest passages',
+    'statistics.topDistance': 'Greatest distances',
+    'statistics.topAverageSpeed': 'Highest average speeds',
+    'statistics.topMaxSpeed': 'Highest top speeds',
+    'statistics.topMaxWind': 'Strongest winds',
+    'statistics.noData': 'No data',
+
     'place.unknown': 'Unnamed place',
     'place.pending': 'Provisional name: waiting for geocoding',
 
     'passage.back': 'Back to the logbook',
+    'passage.previous': 'Previous passage',
+    'passage.next': 'Next passage',
     'passage.notFound': 'This passage does not exist.',
     'passage.inProgress': 'In progress',
     'passage.stoppedSince': 'Stopped since {time}',
@@ -169,9 +207,6 @@ export const MESSAGES = {
     'animation.title': 'Passage animation',
     'animation.intro':
       'Replay every passage in a date range on the map, one hour of sailing per second, and save it as a video. Everything is computed in the browser; only the map tiles are downloaded.',
-    'animation.from': 'From',
-    'animation.to': 'To',
-    'animation.invalidRange': 'The end date comes before the start date.',
     'animation.summary': '{passages} passages · {distance} · {duration}',
     'animation.load': 'Load the passages',
     'animation.loading': 'Loading track {done} of {total}…',
@@ -289,10 +324,7 @@ export const MESSAGES = {
 
     'export.title': 'Export',
     'export.intro': 'Download the logbook, whole or for a period.',
-    'export.from': 'From',
-    'export.to': 'To',
     'export.allHint': 'Leave the dates empty to export everything.',
-    'export.invalidRange': 'The end date cannot be before the start date.',
     'export.json': 'JSON — the complete record',
     'export.csv': 'CSV — logbook lines for a spreadsheet',
     'export.gpx': 'GPX — tracks',
@@ -351,6 +383,7 @@ export const MESSAGES = {
     'replay.start': 'Reconstruct',
     'replay.cancel': 'Cancel',
     'replay.progress': '{percent}% — at {time}',
+    'replay.retrying': 'Retrying after a timeout (attempt {attempt}/{of}): {message}',
     'replay.done': 'Reconstruction finished at {time}.',
     'replay.cancelled': 'Reconstruction cancelled at {time}.',
     'replay.failed': 'Reconstruction failed at {time}: {message}',
@@ -450,6 +483,7 @@ export const MESSAGES = {
   fr: {
     'app.title': 'Chiplog',
     'nav.log': 'Journal',
+    'nav.statistics': 'Statistiques',
     'nav.export': 'Export',
     'nav.replay': 'Rétrospective',
     'nav.animation': 'Animation',
@@ -501,10 +535,47 @@ export const MESSAGES = {
     'log.statsDistance': 'Distance',
     'log.statsDuration': 'Temps total',
 
+    'statistics.title': 'Statistiques',
+    'range.period': 'Période',
+    'range.anyDate': 'Toutes les dates',
+    'range.choose': 'Choisir la période',
+    'range.previousYear': 'Année précédente',
+    'range.previousMonth': 'Mois précédent',
+    'range.nextMonth': 'Mois suivant',
+    'range.nextYear': 'Année suivante',
+    'range.pickStart': 'Choisissez le premier jour.',
+    'range.pickEnd': 'Choisissez maintenant le dernier jour.',
+    'statistics.range.all': 'Tout',
+    'statistics.range.thisMonth': 'Ce mois-ci',
+    'statistics.range.lastMonth': 'Le mois dernier',
+    'statistics.range.last12Months': '12 derniers mois',
+    'statistics.empty': 'Aucune navigation sur cette période.',
+    'statistics.count': 'Navigations',
+    'statistics.first': 'Première navigation',
+    'statistics.last': 'Dernière navigation',
+    'statistics.distance': 'Distance totale',
+    'statistics.duration': 'Temps en navigation',
+    'statistics.maxSpeed': 'Vitesse max',
+    'statistics.maxWind': 'Vent max',
+    'statistics.apparent': '{speed} (apparent)',
+    'statistics.longest': 'Plus longue navigation sans escale',
+    'statistics.longestFacts': '{distance} en {duration}',
+    'statistics.countries': 'Pays visités',
+    'statistics.noCountries':
+      'Aucun pays connu pour l’instant. Ils viennent avec les noms de lieux, ce qui demande que le géocodage soit activé et que le bateau soit de temps en temps en ligne.',
+    'statistics.topDuration': 'Navigations les plus longues',
+    'statistics.topDistance': 'Plus grandes distances',
+    'statistics.topAverageSpeed': 'Meilleures vitesses moyennes',
+    'statistics.topMaxSpeed': 'Vitesses max les plus élevées',
+    'statistics.topMaxWind': 'Vents les plus forts',
+    'statistics.noData': 'Aucune donnée',
+
     'place.unknown': 'Lieu sans nom',
     'place.pending': 'Nom provisoire : en attente du géocodage',
 
     'passage.back': 'Retour au journal',
+    'passage.previous': 'Navigation précédente',
+    'passage.next': 'Navigation suivante',
     'passage.notFound': 'Cette navigation n’existe pas.',
     'passage.inProgress': 'En cours',
     'passage.stoppedSince': 'À l’arrêt depuis {time}',
@@ -617,9 +688,6 @@ export const MESSAGES = {
     'animation.title': 'Animation des navigations',
     'animation.intro':
       'Rejouez sur la carte toutes les navigations d’une plage de dates, une heure de navigation par seconde, et enregistrez-les en vidéo. Tout est calculé dans le navigateur ; seuls les fonds de carte sont téléchargés.',
-    'animation.from': 'Du',
-    'animation.to': 'Au',
-    'animation.invalidRange': 'La date de fin précède la date de début.',
     'animation.summary': '{passages} navigations · {distance} · {duration}',
     'animation.load': 'Charger les navigations',
     'animation.loading': 'Chargement de la trace {done} sur {total}…',
@@ -739,10 +807,7 @@ export const MESSAGES = {
 
     'export.title': 'Export',
     'export.intro': 'Téléchargez le journal, en entier ou sur une période.',
-    'export.from': 'Du',
-    'export.to': 'Au',
     'export.allHint': 'Laissez les dates vides pour tout exporter.',
-    'export.invalidRange': 'La date de fin ne peut pas précéder la date de début.',
     'export.json': 'JSON — l’enregistrement complet',
     'export.csv': 'CSV — les lignes du journal, pour un tableur',
     'export.gpx': 'GPX — les traces',
@@ -802,6 +867,8 @@ export const MESSAGES = {
     'replay.start': 'Reconstruire',
     'replay.cancel': 'Annuler',
     'replay.progress': '{percent} % — à {time}',
+    'replay.retrying':
+      'Nouvelle tentative après un délai dépassé (essai {attempt}/{of}) : {message}',
     'replay.done': 'Reconstruction terminée à {time}.',
     'replay.cancelled': 'Reconstruction annulée à {time}.',
     'replay.failed': 'Échec de la reconstruction à {time} : {message}',

package/public/js/main.mjs

@@ -6,6 +6,7 @@ import { ExportView } from './components/ExportView.mjs';
 import { LogView } from './components/LogView.mjs';
 import { PassageView } from './components/PassageView.mjs';
 import { ReplayView } from './components/ReplayView.mjs';
+import { StatisticsView } from './components/StatisticsView.mjs';
 import { StatusBar } from './components/StatusBar.mjs';
 
 function Page({ route }) {
@@ -15,6 +16,9 @@ function Page({ route }) {
   if (route.name === 'export') {
     return html`<${ExportView} />`;
   }
+  if (route.name === 'statistics') {
+    return html`<${StatisticsView} />`;
+  }
   if (route.name === 'animation') {
     // Keyed on the range, so arriving from a passage page with dates in the
     // hash starts on those dates rather than keeping the previous ones.
@@ -36,6 +40,7 @@ function Shell() {
       </a>
       <nav>
         <a href="#/" aria-current=${current('log')}>${t('nav.log')}</a>
+        <a href="#/statistics" aria-current=${current('statistics')}>${t('nav.statistics')}</a>
         <a href="#/animation" aria-current=${current('animation')}>${t('nav.animation')}</a>
         <a href="#/export" aria-current=${current('export')}>${t('nav.export')}</a>
         <a href="#/replay" aria-current=${current('replay')}>${t('nav.replay')}</a>

package/public/js/shortcuts.mjs

@@ -0,0 +1,31 @@
+// Keyboard shortcuts of the webapp. Pure, so tests run them under Node with
+// plain objects standing in for events.
+
+// A field where the arrow keys with Alt belong to the text being typed; a range
+// slider or a checkbox has no use for them.
+const NON_TEXT_INPUTS = new Set(['range', 'checkbox', 'radio', 'button', 'submit']);
+
+function isTypingTarget(target) {
+  if (!target) {
+    return false;
+  }
+  if (target.isContentEditable || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
+    return true;
+  }
+  return target.tagName === 'INPUT' && !NON_TEXT_INPUTS.has(target.type);
+}
+
+// Alt+← and Alt+→ step to the previous and the next passage. Any other modifier
+// makes it a different shortcut, and none is taken from a text field.
+export function stepDirection(event) {
+  if (!event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+    return null;
+  }
+  if (isTypingTarget(event.target)) {
+    return null;
+  }
+  if (event.key === 'ArrowLeft') {
+    return 'previous';
+  }
+  return event.key === 'ArrowRight' ? 'next' : null;
+}

package/public/js/statistics.mjs

@@ -0,0 +1,76 @@
+// Pure helpers for the statistics page: the period shortcuts and how a country
+// is shown. Nothing here touches the DOM, so tests run them under Node.
+
+import { dayKey, rangeBoundary } from './days.mjs';
+
+export const RANGE_PRESETS = [
+  'all',
+  'thisMonth',
+  'lastMonth',
+  'last12Months',
+  'thisYear',
+  'lastYear'
+];
+
+// The calendar days a shortcut stands for, as the `YYYY-MM-DD` values of a date
+// input, both ends included. "All" is an open range: two empty inputs.
+export function presetRange(preset, today = new Date()) {
+  const year = today.getFullYear();
+  const month = today.getMonth();
+  const day = (y, m, d) => dayKey(new Date(y, m, d));
+
+  switch (preset) {
+    case 'thisMonth':
+      return { from: day(year, month, 1), to: day(year, month + 1, 0) };
+    case 'lastMonth':
+      return { from: day(year, month - 1, 1), to: day(year, month, 0) };
+    // A full year back from today, today included.
+    case 'last12Months':
+      return { from: day(year - 1, month, today.getDate() + 1), to: dayKey(today) };
+    case 'thisYear':
+      return { from: day(year, 0, 1), to: day(year, 11, 31) };
+    case 'lastYear':
+      return { from: day(year - 1, 0, 1), to: day(year - 1, 11, 31) };
+    default:
+      return { from: '', to: '' };
+  }
+}
+
+// The shortcut whose days are exactly these, if any -- to show which one is on.
+export function activePreset(from, to, today = new Date()) {
+  return (
+    RANGE_PRESETS.find((preset) => {
+      const range = presetRange(preset, today);
+      return range.from === from && range.to === to;
+    }) ?? null
+  );
+}
+
+// What the API takes for a range picked as calendar days: `to` is exclusive, so
+// the last day goes up to the following midnight (local time, like the log).
+export function rangeQuery(from, to) {
+  const params = new URLSearchParams();
+  if (from) {
+    params.set('from', rangeBoundary(from).toISOString());
+  }
+  if (to) {
+    params.set('to', rangeBoundary(to, 1).toISOString());
+  }
+  return params.toString();
+}
+
+// A flag is the two regional-indicator letters of the ISO code; a platform with
+// no flag emoji (Windows) draws the letters, which the name beside it explains.
+export function flagEmoji(code) {
+  return /^[A-Z]{2}$/.test(code)
+    ? String.fromCodePoint(...[...code].map((letter) => 0x1f1e6 + letter.charCodeAt(0) - 65))
+    : '';
+}
+
+export function countryName(code, language) {
+  try {
+    return new Intl.DisplayNames([language], { type: 'region' }).of(code) ?? code;
+  } catch {
+    return code;
+  }
+}