signalk-chiplog 2.3.0 → 2.4.0

package/lib/statistics.js

@@ -0,0 +1,208 @@
+const { rangeWhere } = require('./entries');
+const { distanceBetween } = require('./places');
+
+const TOP_COUNT = 5;
+
+// Each ranking of the statistics page, sorted on the passage figure of the same name.
+const RANKINGS = ['duration', 'distance', 'averageSpeed', 'maxSpeed', 'maxWindSpeed'];
+
+const seconds = (from, to) => Math.max(0, (Date.parse(to) - Date.parse(from)) / 1000);
+
+const keepHigher = (current, candidate) =>
+  candidate !== null && (current === null || candidate > current) ? candidate : current;
+
+// Highest reading per passage, from the dense track points and the sparse
+// instrument snapshots alike -- the same sources as a single passage's own
+// figures (GET /entries/:id), and the same preference for true wind over apparent.
+function loadPeaks(db, where, params) {
+  const peaks = new Map();
+  const inRange = `entry_id IN (SELECT id FROM log_entries ${where})`;
+  for (const table of ['track_points', 'observations']) {
+    const rows = db
+      .prepare(
+        `SELECT entry_id, MAX(sog) AS speed, MAX(tws) AS tws, MAX(aws) AS aws
+         FROM ${table} WHERE ${inRange} GROUP BY entry_id`
+      )
+      .all(...params);
+    for (const row of rows) {
+      const peak = peaks.get(row.entry_id) ?? { speed: null, tws: null, aws: null };
+      peak.speed = keepHigher(peak.speed, row.speed);
+      peak.tws = keepHigher(peak.tws, row.tws);
+      peak.aws = keepHigher(peak.aws, row.aws);
+      peaks.set(row.entry_id, peak);
+    }
+  }
+  return peaks;
+}
+
+function loadStops(db, where, params) {
+  const stops = new Map();
+  const rows = db
+    .prepare(
+      `SELECT entry_id, time, comment FROM events
+       WHERE type = 'stopover' AND entry_id IN (SELECT id FROM log_entries ${where})
+       ORDER BY entry_id, time`
+    )
+    .all(...params);
+  for (const row of rows) {
+    const list = stops.get(row.entry_id) ?? [];
+    list.push(row);
+    stops.set(row.entry_id, list);
+  }
+  return stops;
+}
+
+// A passage is cut wherever it stopped over -- a lock, a lunch anchorage kept
+// within one entry (SPEC §3.1) -- and each stretch between two stops is measured
+// on its own from the track. A passage that never stopped is one stretch, and
+// its own distance and times stand: no track needs reading for it.
+function legsOf(db, entry, stops, now) {
+  if (stops.length === 0) {
+    return [
+      {
+        entryId: entry.id,
+        startTime: entry.start_time,
+        endTime: entry.end_time,
+        distance: entry.distance,
+        duration: seconds(entry.start_time, entry.end_time ?? now),
+        startPlaceName: entry.start_place_name,
+        endPlaceName: entry.end_place_name
+      }
+    ];
+  }
+
+  const legs = stops.map((stop, index) => ({
+    entryId: entry.id,
+    startTime: index === 0 ? entry.start_time : null,
+    endTime: stop.time,
+    distance: 0,
+    startPlaceName: index === 0 ? entry.start_place_name : stops[index - 1].comment,
+    endPlaceName: stop.comment
+  }));
+  legs.push({
+    entryId: entry.id,
+    startTime: null,
+    endTime: entry.end_time,
+    distance: 0,
+    startPlaceName: stops[stops.length - 1].comment,
+    endPlaceName: entry.end_place_name
+  });
+
+  let leg = 0;
+  let previous = null;
+  const points = db
+    .prepare('SELECT time, lat, lon FROM track_points WHERE entry_id = ? ORDER BY time')
+    .iterate(entry.id);
+  for (const point of points) {
+    // A point at the very moment of a stop still belongs to the stretch that
+    // ended there.
+    while (leg < stops.length && point.time > stops[leg].time) {
+      leg += 1;
+      previous = null;
+    }
+    // A stretch starts when the vessel got under way again: its first point.
+    legs[leg].startTime ??= point.time;
+    if (previous) {
+      legs[leg].distance += distanceBetween(previous, point);
+    }
+    previous = point;
+  }
+
+  // A stretch with no track has no distance to speak of, and no start time
+  // either; it cannot be the longest.
+  return legs
+    .filter((candidate) => candidate.startTime !== null)
+    .map((candidate) => ({
+      ...candidate,
+      duration: seconds(candidate.startTime, candidate.endTime ?? now)
+    }));
+}
+
+// Countries reached by a departure or an arrival in the range, in order of the
+// first visit. A place whose country is not known yet -- geocoding off, or not
+// answered so far -- is simply not counted.
+function loadCountries(db, where, params, now) {
+  return db
+    .prepare(
+      `SELECT places.country_code AS code, MIN(visit.time) AS firstTime
+       FROM (
+         SELECT start_place_id AS place_id, start_time AS time FROM log_entries ${where}
+         UNION ALL
+         SELECT end_place_id, COALESCE(end_time, ?) FROM log_entries ${where}
+       ) AS visit
+       JOIN places ON places.id = visit.place_id
+       WHERE places.country_code IS NOT NULL
+       GROUP BY places.country_code
+       ORDER BY firstTime, code`
+    )
+    .all(...params, now, ...params);
+}
+
+// Figures across every passage the range matches (SPEC §4.14). A passage still
+// in progress counts as it stands, as in GET /entries/stats.
+function getStatistics(db, { from, to, now }) {
+  const { where, params } = rangeWhere({ from, to });
+  const entries = db
+    .prepare(`SELECT * FROM log_entries ${where} ORDER BY start_time, id`)
+    .all(...params);
+  const peaks = loadPeaks(db, where, params);
+  const stops = loadStops(db, where, params);
+
+  const passages = entries.map((entry) => {
+    const peak = peaks.get(entry.id) ?? { speed: null, tws: null, aws: null };
+    const duration = seconds(entry.start_time, entry.end_time ?? now);
+    return {
+      id: entry.id,
+      startTime: entry.start_time,
+      endTime: entry.end_time,
+      startPlaceName: entry.start_place_name,
+      endPlaceName: entry.end_place_name,
+      startPlacePending: entry.start_place_pending === 1,
+      endPlacePending: entry.end_place_pending === 1,
+      distance: entry.distance,
+      duration,
+      averageSpeed: duration > 0 ? entry.distance / duration : null,
+      maxSpeed: peak.speed,
+      maxWindSpeed: peak.tws ?? peak.aws,
+      maxWindApparent: peak.tws === null && peak.aws !== null
+    };
+  });
+
+  const top = {};
+  for (const ranking of RANKINGS) {
+    top[ranking] = passages
+      .filter((passage) => passage[ranking] !== null && passage[ranking] > 0)
+      .sort(
+        (a, b) => b[ranking] - a[ranking] || b.startTime.localeCompare(a.startTime) || b.id - a.id
+      )
+      .slice(0, TOP_COUNT);
+  }
+
+  let longestNonStop = null;
+  for (const entry of entries) {
+    for (const leg of legsOf(db, entry, stops.get(entry.id) ?? [], now)) {
+      if (leg.distance > 0 && (longestNonStop === null || leg.distance > longestNonStop.distance)) {
+        longestNonStop = leg;
+      }
+    }
+  }
+
+  return {
+    count: passages.length,
+    distance: passages.reduce((sum, passage) => sum + passage.distance, 0),
+    duration: Math.round(passages.reduce((sum, passage) => sum + passage.duration, 0)),
+    firstTime: passages[0]?.startTime ?? null,
+    lastTime: passages.reduce((latest, passage) => {
+      const end = passage.endTime ?? now;
+      return latest === null || end > latest ? end : latest;
+    }, null),
+    maxSpeed: top.maxSpeed[0]?.maxSpeed ?? null,
+    maxWindSpeed: top.maxWindSpeed[0]?.maxWindSpeed ?? null,
+    maxWindApparent: top.maxWindSpeed[0]?.maxWindApparent ?? false,
+    longestNonStop,
+    countries: loadCountries(db, where, params, now),
+    top
+  };
+}
+
+module.exports = { getStatistics, TOP_COUNT };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-chiplog",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Nautical logbook for Signal K: automatic entries, handwritten notes",
   "main": "index.js",
   "files": [
@@ -36,7 +36,8 @@
       "./docs/screenshots/04-entry-app.png"
     ],
     "recommends": [
-      "signalk-to-influxdb"
+      "signalk-to-influxdb",
+      "signalk-autostate"
     ]
   },
   "author": "Cedric RICARD <ricard33@gmail.com>",

package/public/app.css

@@ -381,6 +381,24 @@ main {
   margin-top: 1rem;
 }
 
+.passage-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.25rem 1rem;
+  margin-top: 1rem;
+}
+
+.passage-nav .back {
+  margin-top: 0;
+}
+
+.passage-steps {
+  display: flex;
+  gap: 1.25rem;
+}
+
 .passage-header h1 {
   margin: 0.5rem 0 0.2rem;
   font-size: 1.5rem;
@@ -809,16 +827,201 @@ main {
 
 /* Export */
 
-.date-range {
+/* Statistics */
+.presets {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+/* The range picker: a button, and a calendar dropping from it. */
+.range-picker {
+  position: relative;
+  display: inline-block;
+}
+
+button.range-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--surface);
+  color: var(--text);
+  border-color: var(--border);
 }
 
-.date-range label {
+.range-popover {
+  position: absolute;
+  z-index: 10;
+  top: calc(100% + 0.4rem);
+  left: 0;
+  width: min(20rem, calc(100vw - 2rem));
+  padding: 0.75rem;
+  border-radius: var(--radius);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+}
+
+.cal-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.cal-title {
+  flex: 1;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+button.cal-nav {
+  padding: 0.3rem 0.6rem;
+  background: none;
+  border-color: var(--border);
+  color: var(--accent);
+}
+
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  row-gap: 2px;
+  text-align: center;
+}
+
+.cal-weekday {
+  color: var(--muted);
+  font-size: 0.75rem;
+  padding-bottom: 0.25rem;
+}
+
+/* Days run into each other along a row, so a range reads as one band. */
+button.cal-day {
+  height: 2.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--text);
+}
+
+button.cal-today {
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+button.cal-in-range {
+  background: var(--bg);
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+button.cal-start,
+button.cal-end {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+button.cal-start {
+  border-radius: 8px 0 0 8px;
+}
+
+button.cal-end {
+  border-radius: 0 8px 8px 0;
+}
+
+button.cal-start.cal-end {
+  border-radius: 8px;
+}
+
+.cal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.cal-hint {
+  font-size: 0.85rem;
+}
+
+button.preset {
+  background: var(--surface);
+  color: var(--accent);
+}
+
+button.preset-on {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.statistics-loading {
+  opacity: 0.6;
+}
+
+.longest-facts {
+  margin: 0 0 0.4rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.countries {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem 1.2rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.countries li {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.countries .flag {
+  font-size: 1.8rem;
+  line-height: 1;
+}
+
+.ranking {
+  margin: 0;
+  padding-left: 1.4rem;
+}
+
+.ranking li {
+  padding: 0.35rem 0;
+  border-top: 1px solid var(--border);
+}
+
+.ranking li:first-child {
+  border-top: none;
+}
+
+.ranking a {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: var(--text);
+  text-decoration: none;
+}
+
+.ranking-what {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ranking-route {
+  overflow-wrap: anywhere;
+}
+
+.ranking-value {
+  white-space: nowrap;
 }
 
 .downloads {

package/public/js/calendar.mjs

@@ -0,0 +1,50 @@
+// Pure helpers for the range picker's calendar: the grid of a month, moving
+// between months, and how two clicks make a range. Nothing here touches the
+// DOM, so tests run them under Node. Days are local `YYYY-MM-DD` keys, the
+// same as a date input gives and `days.mjs` takes.
+
+import { dayKey } from './days.mjs';
+
+const WEEK_DAYS = 7;
+// Always six rows, so the calendar does not change height from month to month.
+const GRID_CELLS = 6 * WEEK_DAYS;
+
+// The days of a month laid out Monday first, the days of the neighbouring
+// months left as `null`.
+export function monthGrid(year, month) {
+  const leading = (new Date(year, month, 1).getDay() + 6) % WEEK_DAYS;
+  return Array.from({ length: GRID_CELLS }, (_, index) => {
+    const date = new Date(year, month, 1 - leading + index);
+    return date.getMonth() === new Date(year, month, 1).getMonth() ? dayKey(date) : null;
+  });
+}
+
+// The month `delta` months on, carrying over the year.
+export function shiftMonth({ year, month }, delta) {
+  const date = new Date(year, month + delta, 1);
+  return { year: date.getFullYear(), month: date.getMonth() };
+}
+
+export function monthOf(key) {
+  const [year, month] = key.split('-').map(Number);
+  return { year, month: month - 1 };
+}
+
+// Two clicks, in whichever order: the earlier day starts the range.
+export function completeRange(anchor, day) {
+  return anchor <= day ? { from: anchor, to: day } : { from: day, to: anchor };
+}
+
+export function weekdayLabels(locale) {
+  const format = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+  // 1 January 2024 is a Monday.
+  return Array.from({ length: WEEK_DAYS }, (_, index) =>
+    format.format(new Date(2024, 0, 1 + index))
+  );
+}
+
+export function monthTitle(locale, { year, month }) {
+  return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(
+    new Date(year, month, 1)
+  );
+}

package/public/js/components/AnimationView.mjs

@@ -11,6 +11,7 @@ import { SPEEDS } from '../animation/schedule.mjs';
 import { buildLegs, buildStoryboard, stateAt } from '../animation/storyboard.mjs';
 import { createTileCache, TILE_LAYERS } from '../animation/tiles.mjs';
 import { AnimationExport } from './AnimationExport.mjs';
+import { DateRangePicker } from './DateRangePicker.mjs';
 import { ErrorNotice } from './common.mjs';
 
 const TRACK_CONCURRENCY = 4;
@@ -78,7 +79,6 @@ export function AnimationView({ from: initialFrom, to: initialTo }) {
     cache.current = createTileCache();
   }
 
-  const invalid = Boolean(from && to && to < from);
   const videoFormat = formatById(formatId);
   const layers = useMemo(
     () => (seamarks ? TILE_LAYERS : TILE_LAYERS.filter((layer) => layer.id !== 'seamarks')),
@@ -308,20 +308,17 @@ export function AnimationView({ from: initialFrom, to: initialTo }) {
 
     <section class="card">
       <p>${t('animation.intro')}</p>
-      <div class="date-range">
-        <label>
-          ${t('animation.from')}
-          <input type="date" value=${from} onInput=${(event) => setFrom(event.currentTarget.value)} />
-        </label>
-        <label>
-          ${t('animation.to')}
-          <input type="date" value=${to} onInput=${(event) => setTo(event.currentTarget.value)} />
-        </label>
-      </div>
-      ${invalid && html`<p class="notice notice-error">${t('animation.invalidRange')}</p>`}
+      <${DateRangePicker}
+        from=${from}
+        to=${to}
+        label=${t('range.period')}
+        onChange=${(range) => {
+          setFrom(range.from);
+          setTo(range.to);
+        }}
+      />
       ${
         summary &&
-        !invalid &&
         html`<p class="muted">
           ${t('animation.summary', {
             passages: summary.count,
@@ -331,7 +328,7 @@ export function AnimationView({ from: initialFrom, to: initialTo }) {
         </p>`
       }
       <div class="actions">
-        <button type="button" disabled=${invalid || loading !== null} onClick=${load}>
+        <button type="button" disabled=${loading !== null} onClick=${load}>
           ${t('animation.load')}
         </button>
       </div>