(null)
+
+ const segmentsKey = useMemo(
+ () =>
+ segments
+ .map((seg) =>
+ seg.waypoints
+ .filter(isValidWaypoint)
+ .map((wp) => `${seg.entryId}:${wp.lat},${wp.lng}`)
+ .join('|')
+ )
+ .join('||'),
+ [segments]
+ )
+
+ useEffect(() => {
+ const container = containerRef.current
+ if (!container || segments.length === 0) return
+
+ let cancelled = false
+ const pendingFrames: number[] = []
+
+ const map = L.map(container, {
+ zoomControl: true,
+ attributionControl: true
+ })
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 19,
+ attribution: '© OpenStreetMap contributors'
+ }).addTo(map)
+
+ L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ attribution: 'Map data © OpenSeaMap contributors'
+ }).addTo(map)
+
+ const trackGroup = L.layerGroup().addTo(map)
+ const allLatLngs: [number, number][] = []
+
+ for (const segment of segments) {
+ const latLngs = toLatLngs(segment.waypoints)
+ if (latLngs.length < 2) continue
+
+ allLatLngs.push(...latLngs)
+ const color = getTrackColor(segment.colorIndex)
+
+ L.polyline(latLngs, {
+ color,
+ weight: LINE_WEIGHT,
+ opacity: LINE_OPACITY,
+ lineCap: 'round',
+ lineJoin: 'round'
+ })
+ .addTo(trackGroup)
+ .bindPopup(t('stats.day_label', { day: segment.dayOfTravel }))
+
+ L.circleMarker(latLngs[0], {
+ radius: 7,
+ fillColor: color,
+ fillOpacity: 0.95,
+ color: '#ffffff',
+ weight: 2
+ })
+ .addTo(trackGroup)
+ .bindPopup(`${t('stats.day_label', { day: segment.dayOfTravel })} – ${t('logs.track_map_start')}`)
+ }
+
+ if (allLatLngs.length > 0) {
+ pendingFrames.push(
+ requestAnimationFrame(() => {
+ if (cancelled) return
+ map.invalidateSize({ animate: false })
+ pendingFrames.push(
+ requestAnimationFrame(() => {
+ if (cancelled) return
+ try {
+ const bounds = L.latLngBounds(allLatLngs.map(([lat, lng]) => L.latLng(lat, lng)))
+ if (bounds.isValid()) {
+ map.fitBounds(bounds, { padding: [24, 24], maxZoom: 12, animate: false })
+ }
+ } catch {
+ map.setView(allLatLngs[0], 11, { animate: false })
+ }
+ })
+ )
+ })
+ )
+ }
+
+ return () => {
+ cancelled = true
+ pendingFrames.forEach((id) => cancelAnimationFrame(id))
+ map.remove()
+ }
+ }, [segmentsKey, segments, t])
+
+ if (segments.length === 0) return null
+
+ return (
+
+
+
+ {segments.map((seg) => (
+
+
+ {t('stats.day_label', { day: seg.dayOfTravel })}
+
+ ))}
+
+
+
{icon}
+
+ {label}
+
+ {value}
+ {unit ? {unit} : null}
+
+
+
+ }
+ label={t('stats.total_distance')}
+ value={formatNm(totals.totalDistanceNm)}
+ unit={t('stats.unit_nm')}
+ />
+ }
+ label={t('stats.travel_days')}
+ value={String(totals.travelDayCount)}
+ />
+ }
+ label={t('stats.sail_distance')}
+ value={formatNm(totals.sailDistanceNm)}
+ unit={t('stats.unit_nm')}
+ />
+ }
+ label={t('stats.motor_distance')}
+ value={formatNm(totals.motorDistanceNm)}
+ unit={t('stats.unit_nm')}
+ />
+ }
+ label={t('stats.fuel_total')}
+ value={formatLiters(totals.totalFuelL)}
+ unit={t('stats.unit_l')}
+ />
+ }
+ label={t('stats.water_total')}
+ value={formatLiters(totals.totalFreshwaterL)}
+ unit={t('stats.unit_l')}
+ />
+
+ )
+}
+
+function DailyBarChart({
+ days,
+ valueFn,
+ barClass,
+ formatValue
+}: {
+ days: TravelDayStats[]
+ valueFn: (d: TravelDayStats) => number
+ barClass: string
+ formatValue: (v: number) => string
+}) {
+ const { t } = useTranslation()
+ const max = maxBarValue(days, valueFn)
+
+ return (
+
+ {days.map((day) => {
+ const value = valueFn(day)
+ const heightPct = max > 0 ? Math.max(2, (value / max) * 100) : 0
+ const label = day.date
+ ? new Date(day.date).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })
+ : t('stats.day_label', { day: day.dayOfTravel })
+
+ return (
+
+
{value > 0 ? formatValue(value) : ''}
+
+
{label}
+
{t('stats.day_label', { day: day.dayOfTravel })}
+
+ )
+ })}
+
+ {days.map((day) => {
+ const fuelH = max > 0 ? Math.max(2, (day.fuelConsumptionL / max) * 100) : 0
+ const waterH = max > 0 ? Math.max(2, (day.freshwaterConsumptionL / max) * 100) : 0
+ const label = day.date
+ ? new Date(day.date).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })
+ : t('stats.day_label', { day: day.dayOfTravel })
+
+ return (
+
+ )
+ })}
+
+ {t('stats.fuel_legend')}
+ {t('stats.water_legend')}
+
+
+
+ {totals.sailDistanceNm > 0 && (
+
+ )}
+ {totals.motorDistanceNm > 0 && (
+
+ )}
+ {totals.unknownPropulsionNm > 0 && (
+
+ )}
+
+
+ {t('stats.sail_distance')}: {formatNm(totals.sailDistanceNm)} {t('stats.unit_nm')} ({sailPct.toFixed(0)}%)
+ {t('stats.motor_distance')}: {formatNm(totals.motorDistanceNm)} {t('stats.unit_nm')} ({motorPct.toFixed(0)}%)
+ {totals.unknownPropulsionNm > 0 && (
+ {t('stats.unknown_propulsion')}: {formatNm(totals.unknownPropulsionNm)} {t('stats.unit_nm')}
+ )}
+
+
{t('stats.propulsion_hint')}
+
{t('stats.no_data')}
+ }
+
+ return (
+ <>
+
+
+ {routePorts.length > 0 && (
+
+
{t('stats.route_overview')}
+
+ {routePorts.map((port, idx) => (
+
+ {idx > 0 && → }
+ {port}
+
+ ))}
+
+
+
{t('stats.route_map_title')}
+
+
+ )}
+
+
+
{t('stats.daily_etmal')}
+
+ {t('stats.avg_distance')}: {formatNm(totals.avgDistancePerDayNm)} {t('stats.unit_nm')}
+
+
d.distanceNm}
+ barClass="stats-bar--distance"
+ formatValue={formatNm}
+ />
+
+
{t('stats.daily_consumption')}
+
+ {t('stats.avg_fuel')}: {formatLiters(totals.avgFuelPerDayL)} {t('stats.unit_l')}
+ {' · '}
+ {t('stats.avg_water')}: {formatLiters(totals.avgFreshwaterPerDayL)} {t('stats.unit_l')}
+ {totals.fuelPerNmL != null && (
+ <> · {t('stats.fuel_per_nm')}: {totals.fuelPerNmL} {t('stats.unit_l')}/{t('stats.unit_nm')}
+ )}
+
+
+
+
{t('stats.propulsion_title')}
+
+
+
+
+
+
{t('stats.title')}
+
{t('stats.subtitle')}
+
+
+
+
+
+
+
+
+ {error &&
{error}
}
+
+ {loading ? (
+
+
+
{t('stats.loading')}
+
+ ) : scope === 'logbook' && logbookStats ? (
+
+ ) : scope === 'account' && accountStats ? (
+ <>
+
+
+ {accountLogbooksWithDays.length === 0 ? (
+
{t('stats.no_data')}
+ ) : (
+ <>
+
+
{t('stats.account_logbooks')}
+
+
+
+
+ | {t('stats.col_logbook')} |
+ {t('stats.travel_days')} |
+ {t('stats.total_distance')} |
+ {t('stats.fuel_total')} |
+ {t('stats.water_total')} |
+
+
+
+ {accountLogbooksWithDays.map((lb) => (
+
+ | {lb.title} |
+ {lb.totals.travelDayCount} |
+ {formatNm(lb.totals.totalDistanceNm)} {t('stats.unit_nm')} |
+ {formatLiters(lb.totals.totalFuelL)} {t('stats.unit_l')} |
+ {formatLiters(lb.totals.totalFreshwaterL)} {t('stats.unit_l')} |
+
+ ))}
+
+
+
+
+
+ {accountStats.totals.travelDayCount > 0 && (
+ <>
+
+
{t('stats.daily_etmal')}
+ d.distanceNm}
+ barClass="stats-bar--distance"
+ formatValue={formatNm}
+ />
+
+
+
+
{t('stats.daily_consumption')}
+
+
+
+
+
{t('stats.propulsion_title')}
+
+
+
+ )}
+
+ )}
+
+ ) : null}
+